Skybridge

Skybridge is a full-stack TypeScript framework for building MCP Apps and ChatGPT Apps — the rich, interactive UI views that Model Context Protocol servers render inside chat clients like Claude and ChatGPT. It replaces hand-rolled glue between a raw MCP server SDK and a React frontend with one opinionated toolchain: a CLI that scaffolds new apps, a dev server with hot reload and a public tunnel for testing inside real chat clients, and a set of React hooks and server helpers connected by end-to-end type inference.

Because it wraps the low-level MCP and Apps SDKs behind typed abstractions, teams get tRPC-style safety from server tool definitions straight through to the React view, without writing protocol boilerplate by hand. The framework also ships auth provider integrations (Auth0, Clerk, Descope, Stytch, WorkOS), an installable coding-agent skill, and dozens of runnable examples covering ecommerce, travel, games, and generative UI patterns.

What You Get

• A CLI (create-skybridge, skybridge dev/build) that scaffolds a new MCP app and runs a local dev server with hot module reload and a permanent tunnel for testing inside Claude and ChatGPT
• React hooks (useCallTool, useViewState, useDisplayMode, useUser, and more) with React-Query-style ergonomics for reading and writing MCP tool state from a view
• Type-safe, tRPC-style inference from server-side MCP tool definitions through to the React client, so tool inputs/outputs stay in sync without manual typing
• A platform-abstraction layer (bridges) that smooths over behavioral differences between Claude, ChatGPT, and other MCP-apps clients so one app runs everywhere
• Built-in OAuth provider integrations for Auth0, Clerk, Descope, Stytch, and WorkOS, plus a custom-provider escape hatch
• An installable skill (npx skills add alpic-ai/skybridge) that teaches coding agents how to build and migrate MCP apps with Skybridge

Common Use Cases

• Building a new MCP App or ChatGPT App from scratch with a working dev loop and a one-command deploy path
• Migrating an existing raw MCP server (built directly on @modelcontextprotocol/sdk) to a typed, React-powered UI layer
• Adding an authenticated view to an MCP server that needs per-user state via Auth0, Clerk, WorkOS, Descope, or Stytch
• Prototyping conversational, agent-driven UI experiences (dashboards, carousels, games) that need bidirectional tool calls between the model and the view

Under The Hood

Architecture: Skybridge is a pnpm-workspace monorepo where packages/core (published to npm as skybridge) is split into three layers — server (Express-based MCP server helpers, OAuth providers, skill discovery, the McpServer wrapper), web (React hooks, a zustand-backed store, view mounting, a client-abstraction bridges layer), and cli/commands (oclif-based dev, build, start, create commands rendered with ink, plus a tunnel proxy for exposing the local dev server to real chat clients). A precompiled-templates build step (scripts/precompile-templates.mjs) and a custom Vite plugin wire the server and client build pipelines together, and InferTools/ToolInput/ToolOutput utility types thread tool definitions from the server through to typed React hooks, giving the framework its tRPC-style, end-to-end type safety.

Tech Stack: Written in TypeScript (86% of the repo) targeting Node.js 22+/24+, with React 18/19 on the client, Vite 7/8 for bundling views, Express 5 for the HTTP/MCP server, oclif 4 for the CLI, ink 7 for terminal UI, zustand 5 for client state, jose for JWT handling, and @modelcontextprotocol/sdk/@modelcontextprotocol/ext-apps as the underlying protocol SDKs. Biome handles linting/formatting and vitest runs the test suite; the monorepo is managed with pnpm workspaces and Renovate for dependency updates.

Code Quality: The core package carries 52 test files, mixing runtime unit tests (*.test.ts) with TypeScript type-level tests (*.test-d.ts) that assert the framework’s type-inference contracts hold — a notably rigorous choice for a framework whose main value proposition is compile-time type safety. Each OAuth provider (Auth0, Clerk, Descope, Stytch, WorkOS, custom) is isolated behind a shared OAuthConfig interface, test:format enforces Biome formatting in CI, and naming is consistent (kebab-case files, camelCase exports) throughout.

API Design: The framework front-loads a working dev loop: npm create skybridge@latest scaffolds a runnable app, and skybridge dev gives hot reload plus a permanent public tunnel for testing inside actual Claude/ChatGPT clients without a deploy step. React hooks mirror familiar React Query-style ergonomics (useCallTool, useViewState, useDisplayMode), and the server exposes small composable content helpers (text, image, resourceLink, embeddedResource) instead of raw MCP SDK primitives. Documentation on docs.skybridge.tech covers fundamentals, guides, and a full API reference, and an installable skill extends the same low-boilerplate DX to coding agents.