Skybridge

Name: Skybridge
Author: alpic-ai

Skybridge is a framework for building ChatGPT & MCP Apps

by alpic-ai

Rating

0.0

Votes

score

Downloads

total

Price

Free

Works With

Claude CodeCursorWindsurfVS CodeDeveloper tool

About

Build ChatGPT & MCP Apps. The Modern TypeScript Way.

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

](https://www.npmjs.com/package/skybridge) [ [](https://github.com/alpic-ai/skybridge/blob/main/LICENSE)

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.


🌐 Write once, run everywhere — Skybridge works seamlessly with ChatGPT (Apps SDK) and MCP-compatible clients.	✅ 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.
👨‍💻 Full dev environment — HMR, debug traces, and local devtools.	📦 Showcase Examples — Production-ready examples to learn from and build upon.

🚀 Get Started

Create a new app:

bash

npm create skybridge@latest

Or add to an existing project:

bash

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

👉 [Read the Docs](https://docs.skybridge.tech) 👈

📦 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

tsx

import { useToolInfo } from "skybridge/web";

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

  return output.structuredContent.flights.map(flight =>
    
  );
}

🎯 Features at a Glance

Don't lose this

Three weeks from now, you'll want Skybridge again. Will you remember where to find it?

Save it to your library and the next time you need Skybridge, it’s one tap away — from any AI app you use. Group it into a bench with the rest of the team for that kind of task and you can pull the whole stack at once.

⚡ Pro tip for geeks: add a-gnt 🤵🏻‍♂️ as a custom connector in Claude or a custom GPT in ChatGPT — one click and your library is right there in the chat. Or, if you’re in an editor, install the a-gnt MCP server and say “use my [bench name]” in Claude Code, Cursor, VS Code, or Windsurf.

🤵🏻‍♂️

a-gnt's Take

Our honest review

This plugs directly into your AI and gives it new abilities it didn't have before. Skybridge is a framework for building ChatGPT & MCP Apps. Once connected, just ask your AI to use it. It's completely free and works across most major AI apps. This one just landed in the catalog — worth trying while it's fresh.

Tips for getting started

Tap "Get" above, pick your AI app, and follow the steps. Most installs take under 30 seconds.

You'll sign in with your existing account the first time. After that, it just works.

Design & Media