一次编写处处运行Skybridge 如何让 MCP App 同时兼容 ChatGPT、Claude 与 VSCode【免费下载链接】skybridgeSkybridge is a full-stack TypeScript framework for MCP Apps and ChatGPT Apps. Type-safe. React-powered. Platform-agnostic.项目地址: https://gitcode.com/gh_mirrors/skybr/skybridgeSkybridge 是一个全栈 TypeScript 框架专为构建 MCP Apps 和 ChatGPT Apps 而生。它让你用一套 React TypeScript 代码同时把应用跑在 ChatGPT、Claude、VSCode、Cursor 等多个 AI 客户端里真正做到一次编写处处运行Write once, run everywhere。为什么 MCP App 多端兼容是个难题MCP Apps 在 Model Context Protocol 之上增加了富交互 UI你的工具Tool返回一个引用宿主客户端Host会在对话流内嵌渲染一个 React 视图。一个 MCP App 同时涉及三方你的应用、用户、模型数据在它们之间双向流动。听起来简单实际却很碎ChatGPT走的是 OpenAI 扩展window.openai支持文件上传、pip 模式、Open in App 等特殊能力Claude走 MCP Apps 规范支持下载文件、模态请求但模态的呈现方式与 ChatGPT 不同VSCode、Cursor、Goose等桌面 MCP 客户端直连本地服务器能力集又不一样。官方 SDK 只提供低层接口没有 Hooks、没有类型安全、没有热更新各宿主之间的差异要你自己手写适配层。Skybridge 的三大核心机制1. 统一 Hook API 优雅降级Skybridge 把每个宿主的能力抽象成一组 React Query 风格的 HooksuseCallTool、useViewState、useOpenExternal、useSendFollowUpMessage 等。关键在于优雅降级graceful degradation某个宿主不支持的能力不会让整个应用崩溃而是退化为文档中说明的行为no-op 或抛错。官方 API 总览里直接给出了每张宿主兼容性矩阵例如 docs/api-reference/overview.mdx 中列明了每个 Hook 在 Alpic、ChatGPT、Claude、Cursor、Goose 各宿主上的支持情况——你写代码时就知道哪些能力到处可用哪些需要兜底。2. useHost运行时识别我在谁家里useHost Hook 从宿主的ui/initialize握手信息中读取当前宿主名称chatgpt、claude、cursor、goose、mistral-vibe等标准化 slug、版本号和能力集。这让按宿主做个性化变成三行代码的事比如空状态提示语在 Claude 里写问问 Claude 添加第一项在其他宿主则写发送一条消息添加第一项或者只在 ChatGPT 上显示Open in ChatGPT按钮通过openaiCapabilities判断。3. 一致性测试套件在真实宿主上自动验证兼容不能靠嘴上说。仓库内置了一套自测型 MCP App——e2e/conformance/它按顺序逐个执行所有 Web Hooks 的测试给出supported / partial / unsupported / error四种判定。配套的 notte/conformance.py 驱动脚本会真实点击ChatGPT、Claude 和 Alpic Playground 界面上的按钮验证打开外链、模态框、跟进消息等副作用并和 claude_expected.json、chatgpt_expected.json 等基线比对——任何偏离都会在 CI 中告警。这套每 6 小时跑一轮真实宿主回归的机制就是 Skybridge 敢说处处运行的底气。本地开发DevTools 模拟器一次预览多个宿主通过 快速上手 一条命令脚手架项目后npm run dev会同时启动两条路由http://localhost:3000/mcp你的 MCP 服务器http://localhost:3000/内置的 DevTools 调试面板DevTools 在本地模拟宿主运行时侧边栏自动列出所有注册的工具点击即可直接调用查看原始响应content、structuredContent、_meta、状态检查器、调用日志无需模型、无需宿主。更实用的是宿主会话预览点击 preview 后面板变成 ChatGPT 或 Claude 的模拟对话壳你的视图嵌在其中真实渲染。切换客户端、切换浅色/深色主题、切到 390×844 的手机框预览移动端布局——视图读取宿主的主题令牌所见即生产环境所是。连接不同客户端直连 or 隧道一套代码两种姿势桌面 MCP 客户端VSCode、Goose、Postman、MCPJam直接连http://localhost:3000/mcp无需任何隧道ChatGPT / Claude它们通过互联网连接 MCP 服务器所以加一个--tunnel参数npm run dev -- --tunnel即可获得稳定公共 URL注册一次插件/连接器后热更新照样生效——改代码保存宿主端即时刷新。具体注册步骤见 docs/test/tunnel.mdx 和 docs/test/devtools.mdx。类型安全与示例库Skybridge 提供 tRPC 风格的端到端类型推断服务端用 Zod 定义工具 schema前端通过 generateHelpers 生成类型安全的 Hooks从服务器到 React 视图一路无断点。核心实现位于 packages/core/src/server/ 与 packages/core/src/web/。想快速看到成果examples/ 目录里有一整套可直接运行的示例应用例如 Capitals Explorer 世界地图应用examples/capitals/还有电商轮播、机票预订、生产力仪表盘、多屏推理游戏等全部是 ChatGPT 和 Claude 双端就绪的成品可以直接复制模板起步。如何开始安装脚手架npm create skybridgelatest my-app模板源码在 packages/create-skybridge/templates/npm run dev启动 DevTools在本地模拟器里迭代npm run dev -- --tunnel打通真实宿主在 ChatGPT / Claude 中体验桌面客户端VSCode 等直接连本地端口架构原理、工具与视图的数据流详解推荐精读 docs/get-started/architecture.mdx。一句话总结Skybridge 把多宿主适配从你的 TODO 列表里移走——统一 Hooks、优雅降级、宿主感知、一致性回归测试加上本地多端预览让你的 MCP App 写一次就能在 ChatGPT、Claude 和 VSCode 里同时跑起来。【免费下载链接】skybridgeSkybridge is a full-stack TypeScript framework for MCP Apps and ChatGPT Apps. Type-safe. React-powered. Platform-agnostic.项目地址: https://gitcode.com/gh_mirrors/skybr/skybridge创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考