Skip to main content

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.

​
All-in-one and dead-simple

A Skybridge app is a TypeScript MCP server paired with React widgets. The server defines tools and returns data; the widget renders it inside the conversation. 
import { McpServer } from "skybridge/server";
import { z } from "zod";

const server = new McpServer({
  name: "my-app",
  version: "0.0.1",
}).registerWidget(
  "flight-results",
  { description: "Flight search results" },
  {
    description: "Search for flights between two cities.",
    inputSchema: {
      origin: z.string().describe("Departure city"),
      destination: z.string().describe("Arrival city"),
    },
  },
  async ({ origin, destination }) => {
    const flights = await searchFlights(origin, destination);
    return { structuredContent: { flights } };
  },
);
That’s it: type-safe from server to widget, with autocomplete everywhere.

​
Design

MCP and ChatGPT Apps are not traditional web apps. They live inside AI conversations, where three entities collaborate: the user, the UI, and the model. Designing well means deciding what each one sees and when. With Skybridge:
  • Don’t worry about compatibility. Design your app once — Skybridge handles the differences between ChatGPT, Claude, and other MCP clients for you.
  • Use what you already know. Manage data and LLM context with React Query-style hooks and HTML attributes. No new paradigm to learn.

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.

​
Build

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

​
Test and ship

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.