Skybridge 工具系统实战如何注册 Tools 定义你的 MCP App 能力边界【免费下载链接】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️Skybridge是面向MCP App与 ChatGPT Apps 的全栈 TypeScript 框架而registerTool 工具注册正是它的核心能力你通过它声明 MCP App 能做什么、接受什么参数、返回什么结构从而为应用划定清晰的能力边界。本文用一个可运行的示例带你快速上手工具系统并讲透view、annotations、auth这些关键配置项。图片文件docs/images/tools.webp工具是什么MCP App 的能力边界在 Skybridge 里一个Tool工具就是模型可以调用的一次动作对模型name、description、inputSchema构成它的提示词表面模型据此决定何时调用对用户绑定了view的工具会渲染出 React 交互界面而不只是一段纯文本回复对你工具返回的structuredContent是带类型的结构化数据可被前端 Hook 直接消费。一句话概括你注册了多少工具你的 MCP App 就能做多宽的事——这就是能力边界。实战5 行注册一个工具Skybridge 应用的最小形态是在handler中链式调用 server.registerToolserver.registerTool( { name: search-products, title: Search products, description: 按关键词和可选的价格上限搜索商品目录。, inputSchema: { query: z.string().describe(用户想找什么) }, }, async ({ query }) ({ content: Found products for ${query} }), );完整字段outputSchema、view、annotations、auth、openai等可查阅官方文档 register-tool.mdx。完整示例世界首都探索器仓库内置的 capitals 示例 是一个教科书级的工具注册案例server.registerTool( { name: explore-capitals, description: 探索世界首都展示带人口、货币与照片的交互式地图……, inputSchema: { name: z.string().describe(英语首都名如 Paris、Tokyo), }, annotations: { readOnlyHint: true, openWorldHint: true, destructiveHint: false }, view: { component: explore-capitals, csp: { resourceDomains: [https://upload.wikimedia.org] }, }, }, async ({ name }) { const capital await getCapitalByName(name); return { content: formatCapitalForModel(capital), // 给模型看的文字 structuredContent: { capital }, // 给视图看的类型化数据 }; }, );对应的 React 视图位于 explore-capitals.tsx最终呈现为一张可交互的世界地图图片文件docs/images/showcase-capitals.png关键配置速览写对 description 与 schema1. 为模型而写的 name / title / description这三个字段是模型的决策依据。官方建议把description写成明确的触发条件例如 capitals 示例中的Always use it when users ask about capitals, countries…——模型读得越懂调用时机越准。2. 用.describe()给每个字段补说明书inputSchema使用 Zod4.2等 Standard Schema 校验器既校验入参、又为 handler 入参推导类型。给字段加.describe()能显著降低模型传错参数的概率。outputSchema则告诉模型预期返回结构。3. 返回值的三层结构字段谁能看到用途content模型 对话界面文本/图片等内容块structuredContent模型 视图类型化数据视图通过useToolInfo读取_meta仅视图对模型隐藏如 capitals 示例中塞入全量首都列表避免淹没模型上下文进阶配置annotations、CSP 与每工具鉴权annotations标准 MCP 提示位readOnlyHint、destructiveHint、idempotentHint、openWorldHint宿主可据此排序和标注调用但从不据此拦截view.csp视图运行在沙箱 iframe 中你的服务域名自动放行外部资源域名需按指令显式声明如 capitals 放行了 Mapbox 与 Wikimediaauth推荐的每工具鉴权声明。默认要求登录安全默认值{ allowsAnonymous: true }允许匿名调用{ scopes: [...] }要求具备指定权限未达标调用会在 handler 执行前被拒。图片文件docs/images/devtools.webp开发时Skybridge 的 DevTools 本地模拟器可以直接观察每个工具的定义、入参校验与视图渲染效果是验证能力边界的最快方式。类型安全一路打穿从 registerTool 到前端 HooksregisterTool的妙处不止于运行时——每次链式调用都会把工具的输入/输出结构累积到 server 类型上见 McpServer 实现。借助 generateHelpers 可以零泛型地在视图侧拿到全自动补全的 Hook// helpers.ts类型只导入一次 export const { useCallTool, useToolInfo } generateHelpersAppType();之后useToolInfosearch-products()的output、useCallTool(checkout)的入参类型全部自动推导——这就是 Skybridge 主打的tRPC 式端到端类型安全。图片文件docs/images/mcp-apps.webp上手清单三步注册好你的第一个工具✅ 在handler中调用server.registerTool(config, handler)name用小写短横线✅description面向模型写清何时调用 能做什么每个字段加.describe()✅ 需要交互界面时绑定view: { component: xxx }文件名对应views/下的文件自动类型检查并按需配置 CSP 与annotations。更多可运行案例可参考 examples/everything 示例多工具 文件输入与 capitals 示例。完整 API 说明见 api-reference。小结registerTool是 Skybridge 中定义 MCP App 能力边界的唯一入口——写好它是模型调对工具、视图渲染对界面、前端拿到对类型的地基。【免费下载链接】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），仅供参考