如何把Stitch MCP工具暴露给自己的AI客户端:StitchProxy代理服务器完整部署指南

【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载stitch-sdk 是一个文字生成 UI 界面的开源 SDK除了直接调用 API它还内置了一个StitchProxy 代理服务器把 Stitch 的 MCP 工具完整暴露给你自己的 AI 客户端如 Cursor、VS Code、Claude Code。本文是一篇面向新手的完整部署指南带你从零跑通 Stitch MCP 代理并把它接入自己的 AI 助手。为什么需要 StitchProxy 代理服务器Stitch 的界面生成能力以MCPModel Context Protocol工具的形式提供服务例如创建项目、文字生成界面、编辑界面、生成设计变体等。但这些工具默认挂在 Stitch 官方 MCP 服务端上。StitchProxy 的作用就像一个翻译中继站组件职责StitchProxy在你本地起一个标准 MCP 服务器负责鉴权、转发请求AI 客户端把 StitchProxy 当成普通 MCP 服务器来连接Stitch 服务端真正执行工具调用返回生成的界面数据这样你不需要改动 AI 客户端的代码只要把代理服务器配置进去AI 就能自主调用 Stitch 的全部工具。代理核心实现在 packages/sdk/src/proxy/core.ts它复用 SDK 统一的 MCP 传输栈并额外叠加了 Stitch 鉴权与虚拟工具路由。第一步安装 SDK 并准备 API Keynpm install google/stitch-sdk modelcontextprotocol/sdk然后准备一个 Stitch API Key设置到环境变量export STITCH_API_KEYyour-stitch-api-key 没有显式传入配置时StitchProxy会自动读取STITCH_API_KEY环境变量也支持用STITCH_ACCESS_TOKENOAuth 令牌GOOGLE_CLOUD_PROJECT替代 API Key。第二步两种部署方式任选其一方式一本地直接运行最快上手⚡仓库自带了一个开箱即用的代理入口脚本 packages/sdk/examples/run-proxy.ts它通过stdio 传输对外提供 MCP 服务STITCH_API_KEYyour-key bun packages/sdk/examples/run-proxy.ts启动后终端会提示Proxy is ready. Waiting for requests on stdin...说明代理已就绪正在等待 AI 客户端通过标准输入/输出与之通信。这个脚本还处理了 CtrlC 时的优雅关闭确保代理进程干净退出。方式二容器化部署推荐生产环境如果你不想在宿主机安装 Node.js 依赖仓库提供了完整的容器化方案位于 packages/sdk/examples/container-proxy/ 目录包含 Containerfile 和代理入口 stitch-proxy.mjs。容器化的核心优势无宿主机依赖—— Node.js 和 npm 包全部封装在镜像内密钥隔离—— API Key 通过容器 secret 挂载到/run/secrets/不经过环境变量或命令行参数可复现—— 同一个镜像在任何机器上表现一致即弃即用—— 每次会话结束自动清理构建与运行只需三步# 1. 构建镜像Docker 或 Podman 均可 docker build -t stitch-mcp . # 2. 创建 API Key 密钥 printf %s your-stitch-api-key | docker secret create stitch-api-key - # 3. 启动代理 docker run --rm -i --secret stitch-api-key stitch-mcp详细步骤见 packages/sdk/examples/container-proxy/README.md。第三步把代理接入你的 AI 客户端AI 客户端通过mcp.json配置文件声明 MCP 服务器。代理作为本地 stdio 进程启动例如在.cursor/mcp.json或.vscode/mcp.json中{ mcpServers: { stitch: { command: docker, args: [run, --rm, -i, --secret, stitch-api-key, stitch-mcp] } } }如果是本地脚本方式则把command和args换成对应的bun packages/sdk/examples/run-proxy.ts即可。保存配置后重启客户端AI 助手就能看见 Stitch 的工具了。代理暴露了哪些工具连接成功后AI 客户端会通过代理列出全部可用工具涵盖15 个远程工具 1 个本地虚拟工具分类工具说明项目管理create_project/list_projects/get_project/delete_project创建、列出、查询、删除项目界面生成generate_screen_from_text核心能力文字描述生成 UI 界面界面操作edit_screens/list_screens/get_screen/generate_variants编辑、查看、生成变体设计系统create_design_system/apply_design_system等 6 个主题与品牌风格管理虚拟工具download_assets把界面和资产下载到本地目录其中download_assets是一个虚拟工具它不经过 Stitch 服务端而是由代理在本地直接执行下载定义见 packages/sdk/src/proxy/virtual-tools.ts。代理在工具列表中发现冲突时会自动做去重与告警并在返回工具 Schema 前修复下游客户端可能无法解析的引用这些细节分别位于 packages/sdk/src/proxy/handlers/listTools.ts 和 packages/sdk/src/proxy/handlers/callTool.ts。配置项速查表StitchProxy支持显式传参也支持环境变量覆盖优先级为代码显式配置 环境变量配置项环境变量默认值说明apiKeySTITCH_API_KEY—Stitch API 密钥与 accessToken 二选一accessTokenSTITCH_ACCESS_TOKEN—OAuth 访问令牌quotaProjectIdSTITCH_PROJECT_ID/GOOGLE_CLOUD_PROJECT—计费项目 IDOAuth 鉴权时必填urlSTITCH_BASE_URL/STITCH_MCP_URLStitch 官方 MCP 地址可指向自建网关name/version—stitch-proxy/1.0.0代理服务器标识配置校验逻辑包括accessToken 必须搭配项目 ID这类规则集中在 packages/sdk/src/spec/proxy.ts传错配置会在启动时立刻报错而不是运行到一半才失败。常见问题排查 ✅1. 启动时报 requires an API key说明STITCH_API_KEY和STITCH_ACCESS_TOKEN都没有设置。检查环境变量是否已 export或容器 secret 是否正确挂载。2. 终端日志里反复出现[stitch-proxy] Calling tool: xxx这是正常现象——代理把请求日志写到 stderr不会影响 stdio 通道上的 MCP 通信也正是你观察 AI 客户端调用了哪些工具的最佳窗口。3. 工具列表刷新失败代理每次listTools都会尝试刷新工具列表若刷新失败但有缓存会沿用上一次的列表并打印警告服务不会中断。4. AI 客户端连不上代理确认command指向的程序能在终端独立跑通先手动执行第二步的命令并检查参数与容器密钥名称是否一致。小结通过StitchProxy你只需用几行配置就能把 Stitch 的 MCP 工具安全地暴露给自己的 AI 客户端本地跑run-proxy.ts适合快速验证容器化方案container-proxy适合长期使用。部署完成后直接向你的 AI 助手说帮我生成一个登录页它就会自动调用create_project和generate_screen_from_text完成剩下的工作。更多用法可以参考仓库根目录的 README.md 和 packages/sdk/README.md。赞分享【免费下载链接】stitch-sdkGenerate UI screens from text prompts and extract their HTML and screenshots programmatically.项目地址https://gitcode.com/gh_mirrors/st/stitch-sdk点击查看免费下载相关推荐如何用 Payload MCP 插件把内容数据暴露给 MCP 客户端/api/mcp如何用 Payload MCP 插件把内容数据暴露给 MCP 客户端/api/mcp 如果你的 Payload 项目里已经配好了 collections 和后端CMS老Mac显卡驱动翻车OCLP两条补丁路径把驱动问题修好老Mac显卡驱动翻车OCLP两条补丁路径把驱动问题修好 刚把一台 2013 年的 MacBook 升到新版 macOS结果屏幕整片泛着紫气有的机型直接黑屏操作系统固件驱动开发Zero MCP 接入指南用 Better Auth 会话令牌把 AI 邮箱能力暴露给 MCP 客户端Zero MCP 接入指南用 Better Auth 会话令牌把 AI 邮箱能力暴露给 MCP 客户端 Zero 是一个开源的 AI 邮箱应用仓库根目录为后端前端AI 应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考