Build ChatGPT Apps. The Modern TypeScript Way.
The fullstack TypeScript framework for ChatGPT Apps.
Type-safe. React-powered. Zero config.
ChatGPT Apps let you embed rich, interactive UIs directly in conversations. But the raw SDK is 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. |
Create a new ChatGPT app:
gh repo create my-app --template alpic-ai/apps-sdk-template --clone
cd my-app && pnpm installOr add to an existing project:
npm i skybridge
yarn add skybridge
pnpm add skybridge
bun add skybridge
deno add skybridge👉 Read the Docs 👈
skybridge/server— Drop-in MCP SDK replacement with widget registration and type inference.skybridge/web— React hooks and components for ChatGPT's runtime.
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(f =>
<FlightCard key={f.id} flight={f} />
);
}- 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. - MCP Compatible — Extends the official SDK. Works with any MCP client.