Skip to main content
Skybridge is a fullstack TypeScript framework for building MCP and ChatGPT Apps: interactive widgets that render inside AI conversations. Define tools, write React components, and let Skybridge do the rest: 
import { McpServer } from "skybridge/server";
import { z } from "zod";

const server = new McpServer({ name: "my-app", version: "0.0.1" })
  .registerWidget(
    "greeting",
    { description: "A greeting card" },
    {
      description: "Greet someone by name.",
      inputSchema: { name: z.string() },
    },
    async ({ name }) => {
      return { structuredContent: { message: `Hello, ${name}!` } };
    },
  );

Quickstart

Scaffold a working app in one command and start building in minutes.

Use the Skill

Let your AI coding assistant guide you through the full app lifecycle.

​
Solving the Three Body Problem

MCP Apps and ChatGPT Apps are a new kind of software built for a new surface: the conversation itself. Under the hood, an MCP server exposes tools. Some are bound to UI templates, and when the model calls one, the host can render the corresponding widget inline with the tool’s output. This looks simple, but it introduces a fundamental shift. Traditional apps have two actors: the user and the interface. These apps have three: the user, the UI, and the model. This creates context asymmetry: each actor holds a partial view of the system. The model is blind to the UI: it can’t see visuals or user interactions unless you explicitly sync them back. The user can’t see the structured data flowing underneath. Building well means understanding these blind spots and designing the information flow between all three.

​
Architecting

The Skybridge Skill acts as a design partner: helping you brainstorm ideas, validate your UX, and design great apps that actually make sense inside ChatGPT or Claude. The core design challenge isn’t layout or styling: it’s deciding who sees what, and when. What does the model need to know and when? What should stay hidden from it? Where should natural language replace traditional UI? Skybridge gives you the primitives to make these decisions explicit, and the Skill helps you think through them upfront.

Design with Skill

Brainstorm ideas, validate UX, and design your app architecture with AI assistance.

Read the Fundamentals

Understand MCP, ChatGPT Apps, and how Skybridge bridges the two runtimes.

​
Building

Scaffold a new project in one command: 
npm create skybridge@latest my-app
You can also empower your AI sidekick with the Skybridge Skill to do the heavy lifting. From bootstrapping a fresh project to migrating entire codebases, we’ve got you covered: 
npx skills add alpic-ai/skybridge -s skybridge

Build with Skill

Bootstrap, maintain or migrate projects.

Quickstart

Scaffold and run your first app

Migrate

Migrate an existing app

​
Testing and shipping

Skybridge gives you a fast local loop, then smooth paths to production.
1

Develop locally

Run npm run dev and open http://localhost:3000/ to access DevTools: test tools, preview widgets, switch themes and locales, all without leaving your browser. Widget changes hot-reload instantly.
2

Test in ChatGPT, Claude, and more

Run npm run dev --tunnel to get a live LLM playground and a public URL for ChatGPT, Claude, or any MCP client to connect to. Validate real model interactions before shipping.
3

Build and deploy

Run npm run deploy to ship to Alpic Cloud, or host on any Node.js-compatible infrastructure.

Test Your App

Local DevTools and production testing

Build for Production

Compile and optimize

Deploy

Ship to Alpic Cloud or self-host

​
Keep learning

Fetching Data

Initial hydration and user-triggered data fetching patterns.

Managing State

Persistent state with useWidgetState and createStore.

Communicating with the Model

Keep the LLM aware of what happens in your UI.

Host Environment Context

Adapt to theme, locale, display mode, and device.