Skybridge

// Overview

Skybridge is a full-stack TypeScript framework for building MCP Apps — interactive React views that render inside model hosts such as ChatGPT and Claude, backed by an MCP server. You define tools on the server, bind a tool to a view, and write the view as an ordinary React component; the framework handles the protocol, authentication and the differences between hosts, so the same app runs in Claude, ChatGPT, VS Code and other clients that support MCP Apps.

The project's starting point is that MCP Apps are three-way systems: data flows between the app, the user and the model, and the model cannot see the UI or the user's clicks unless the app syncs them back. Skybridge is organised around that problem. A tool's output can be aimed at the model, the view or both; `useViewState` holds state that is shared with the model and survives remounts; and a `data-llm` attribute lets a view describe what is on screen in plain words for the model's next turn.

Around the framework sits a development toolchain: a dev server with hot module reload, DevTools that emulate the host runtime locally so you can call tools and render views without a model, a tunnel that exposes the local server to ChatGPT or Claude, a hosted LLM playground on the tunnel URL, and a deploy command for Alpic Cloud (self-hosting on any Node.js-compatible platform is also supported). A Skybridge skill lets coding agents scaffold apps, migrate existing MCP servers and add views. It is MIT-licensed and maintained by the Alpic team.

// Getting started

Skybridge requires Node 24 or newer. Scaffold a project, run the dev server, then connect it to a real host through the tunnel. Coding agents can instead install the Skybridge skill with `npx skills add alpic-ai/skybridge -s skybridge`.

npx skybridge create
# or start from an example app
npx skybridge create my-app --example auth-descope

npm run dev

// server.ts
import { Skybridge } from "skybridge/server";
import { z } from "zod";

export const app = new Skybridge({
  name: "my-app",
  version: "0.0.1",
  handler: (server) =>
    server.registerTool(
      {
        name: "greeting",
        description: "Greet someone by name.",
        inputSchema: { name: z.string() },
        view: { component: "greeting" },
      },
      async ({ name }) => {
        return { structuredContent: { message: `Hello, ${name}!` } };
      },
    ),
});

// views/greeting.tsx
import { useToolInfo } from "../helpers.js";

export default function Greeting() {
  const { output } = useToolInfo<"greeting">();
  return <h1>{output.message}</h1>;
}

// helpers.ts
import type { AppType } from "./server";
import { generateHelpers } from "skybridge/web";

export const { useCallTool, useToolInfo } = generateHelpers<AppType>();

npm run dev -- --tunnel
npm run deploy

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Build an interactive app — a product carousel, a booking flow, a dashboard — that renders inside ChatGPT and Claude conversations from one codebase
• Add rich UI views to an existing MCP server, or have a coding agent migrate it to Skybridge with the skill
• Iterate on MCP App views locally with hot reload and a host emulator instead of re-prompting a model in a real host
• Keep the model aware of what the user did in the UI, such as a cart or a selection, through shared view state

// How Skybridge compares

Skybridge alongside other open-source generative ui sdks tools AI/TLDR tracks, ranked by GitHub stars.