Skybridge

Skybridge is a full-stack TypeScript framework developed by Alpic, designed specifically for embedding rich interactive views within AI conversations. Its core advantage lies in achieving end-to-end type safety between server-side tool definitions and client-side React views (using tRPC-style inference), and enabling bidirectional synchronization of UI state and LLM Context via the data-llm attribute. The framework encapsulates a protocol abstraction layer at its core, allowing a single codebase to run simultaneously on ChatGPT Apps and MCP-compatible clients (like Goose, VSCode).

Core Capabilities#

• tRPC-style End-to-End Type Inference: Tool Schemas defined on the Server automatically flow to Client Hooks, with full-chain autocomplete for tool inputs and outputs.
• React Query-style Hooks: Provides APIs like useToolInfo, supporting isPending, isError, and callbacks for familiar async state management.
• View → Model Sync: Synchronizes frontend UI state to the LLM via custom data-llm HTML attributes, achieving "single source of truth across two surfaces".
• View → Tool Calls: Supports triggering server-side tool calls directly from UI components.
• Dual Platform Compatibility: A single codebase supports both ChatGPT Apps SDK and MCP-compatible clients.
• Vite HMR & Local Simulation: Built-in Vite plugin with hot reload, Debug Traces, and local DevTools simulator—no repeated reinstalls needed.

Architecture#

Adopts a pnpm workspace-managed full-stack monorepo architecture:

• skybridge/server: Server-side core built on top of the MCP SDK, providing registerView / tool definition APIs with built-in Zod schema validation and end-to-end type inference.
• skybridge/web: Client-side core—a collection of React hooks that consume server-derived types, with underlying adapters for both ChatGPT Apps SDK and MCP Apps protocols.
• Dev Environment: Vite plugin system providing HMR, DevTools simulator, and optimized builds.

Key design patterns include a protocol abstraction layer (encapsulating unified view/tool registration APIs above the MCP protocol while isolating ChatGPT Apps SDK adaptation) and a type flow mechanism (Server Schema declarations penetrate directly to Client component props via the TypeScript type system).

Quick Start#

npm create skybridge@latest

Or add to an existing project:

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

Engineering Practices#

Uses Biome for unified lint/format; CI/CD via GitHub Actions; automated dependency updates through Renovate; repository includes AGENTS.md and CLAUDE.md for native support of AI coding agent workflows like Claude Code.

Examples & Ecosystem#

Includes over a dozen production-grade examples: flight booking, e-commerce carousels, map exploration, auth integration (Auth0/Clerk/Stytch/WorkOS), generative UI, and more. Known production users include Awaze (cottages.com).