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

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.

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

• skybridge/server — Drop-in MCP SDK replacement with widget registration and type inference.
• skybridge/web — React hooks for Apps SDK (ChatGPT) and MCP Apps runtimes.
• Dev Environment — Vite plugin with HMR, DevTools emulator, and optimized builds.

import { McpServer } from "skybridge/server";

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

import { useToolInfo } from "skybridge/web";

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

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

• 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.

Explore production-ready examples:

• Capitals Explorer — Interactive world map with geolocation and Wikipedia integration
• Ecommerce Carousel — Product carousel with cart, localization, and modals
• Everything — Comprehensive playground showcasing all hooks and features

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