Skybridge

Skybridge 是由 Alpic 开发的全栈 TypeScript 框架，专为在 AI 对话中嵌入富交互视图而设计。其核心优势在于实现了 Server 端工具定义与 Client 端 React 视图的端到端类型安全（采用 tRPC 风格推断），并通过 data-llm 属性实现了 UI 状态与 LLM Context 的双向同步。框架在底层封装了协议抽象层，使得一套代码可以同时运行于 ChatGPT Apps 和 MCP-compatible 客户端（如 Goose、VSCode）。

核心能力#

• tRPC 式全链路类型推断：Server 端定义的 Tool Schema 自动流向 Client Hooks，工具输入输出全链路自动补全。
• React Query 风格 Hooks：提供 useToolInfo 等 API，支持 isPending、isError 及 callbacks 等熟悉的异步状态管理。
• View → Model 同步：通过自定义 data-llm HTML 属性将前端 UI 状态同步给 LLM，实现"双表面单一真相源"。
• View → Tool Calls：支持从 UI 组件直接触发服务端工具调用。
• 双平台兼容：一套代码同时支持 ChatGPT Apps SDK 和 MCP-compatible 客户端。
• Vite HMR 与本地模拟：内置 Vite 专属插件，支持热更新、Debug Traces 及本地 DevTools 模拟器，无需反复重装应用。

架构设计#

采用 pnpm workspace 管理的全栈 monorepo 架构：

• skybridge/server：服务端核心，基于 MCP SDK 扩展，提供 registerView / 工具定义 API，内置 Zod schema 校验与端到端类型推断。
• skybridge/web：客户端核心，React hooks 集合，消费 server 端推导出的类型，底层实现 ChatGPT Apps SDK 和 MCP Apps 协议的适配。
• Dev Environment：Vite 插件体系，提供 HMR、DevTools 模拟器及优化构建。

关键设计模式包括协议抽象层（在 MCP 协议之上封装统一的 view/tool 注册 API，同时对 ChatGPT Apps SDK 做适配层隔离）与类型流动机制（Server Schema 声明后通过 TypeScript 类型系统直接穿透至 Client 组件属性）。

快速开始#

npm create skybridge@latest

或添加到已有项目：

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

工程化实践#

使用 Biome 统一 lint/format；CI/CD 依赖 GitHub Actions；通过 Renovate 自动更新依赖；仓库内含 AGENTS.md 与 CLAUDE.md，原生支持 Claude Code 等 AI 编码代理工作流。

示例与生态#

内置航班预订、电商轮播、地图探索、认证集成（Auth0/Clerk/Stytch/WorkOS）、生成式 UI 等十多个生产级示例。已知生产用户包括 Awaze (cottages.com)。