Skybridge

Build ChatGPT & MCP Apps. The Modern TypeScript Way.

The fullstack TypeScript framework for AI-embedded widgets.
Type-safe. React-powered. Platform-agnostic.

Documentation · Quick Start · Showcase

✨ Why Skybridge?

ChatGPT Apps and MCP Apps let you embed rich, interactive UIs directly in AI conversations. But the raw SDKs are low-level—no hooks, no type safety, no dev tools, and no HMR.

Skybridge fixes that.

👨‍💻 Full Dev Environment — HMR, debug traces, and local devtools. No more refresh loops.	✅ End-to-End Type Safety — tRPC-style inference from server to widget. Autocomplete everywhere.
🔄 Widget-to-Model Sync — Keep the model aware of UI state with data-llm. Dual surfaces, one source of truth.	⚒️ React Query-style Hooks — isPending, isError, callbacks. State management you already know.
🌐 Platform Agnostic — Write once, run anywhere. Works with ChatGPT (Apps SDK) and MCP-compatible clients.	📦 Showcase Examples — Production-ready examples to learn from and build upon.

🚀 Get Started

Create a new app:

npm create skybridge@latest

Or add to an existing project:

npm i skybridge
yarn add skybridge
pnpm add skybridge
bun add skybridge
deno add skybridge

👉 Read the Docs 👈

📦 Architecture

Skybridge is a fullstack framework with unified server and client modules:

• skybridge/server — Define tools and widgets with full type inference. Extends the MCP SDK.
• skybridge/web — React hooks that consume your server types. Works with Apps SDK (ChatGPT) and MCP Apps.
• Dev Environment — Vite plugin with HMR, DevTools emulator, and optimized builds.

Server

import { McpServer } from "skybridge/server";

server.registerWidget("flights", {}, {
  inputSchema: { destination: z.string() },
}, async ({ destination }) => {
  const flights = await searchFlights(destination);
  return { structuredContent: { flights } };
});

Widget

import { useToolInfo } from "skybridge/web";

function FlightsWidget() {
  const { output } = useToolInfo();

  return output.structuredContent.flights.map(flight =>
    <FlightCard key={flight.id} flight={flight} />
  );
}

🎯 Features at a Glance

• Live Reload — Vite HMR. See changes instantly without reinstalling.
• Typed Hooks — Full autocomplete for tools, inputs, outputs.
• Widget → Tool Calls — Trigger server actions from UI.
• Dual Surface Sync — Keep model aware of what users see with data-llm.
• React Query-style API — isPending, isError, callbacks.
• Platform Agnostic — Works with ChatGPT (Apps SDK) and MCP Apps clients (Goose, VSCode, etc.).
• MCP Compatible — Extends the official SDK. Works with any MCP client.

📖 Showcase

Explore production-ready examples:

Example	Description	Demo	Code
Capitals Explorer	Interactive world map with geolocation and Wikipedia integration	Try Demo	View Code
Ecommerce Carousel	Product carousel with cart, localization, and modals	Try Demo	View Code
Everything	Comprehensive playground showcasing all hooks and features	Try Demo	View Code

See all examples in the Showcase or browse the examples/ directory.

See CONTRIBUTING.md for setup instructions

MIT License · Made with ❤️ by Alpic