缝合mcp
用于将AI生成的UI设计移动到您开发工作流程中的CLI——在本地进行预览,从中构建站点,并提供给编码代理.
为什么
AI生成的设计在Google's Stitch平台作为HTML/CSS在API后方直播. 使它们进入当地的发展环境——用于预览、建设或交给编码代理商——需要取取、服务和结构。 six-mcp通过连接到斯地奇的一组CLI命令来处理这个.
快开始
# Set up authentication and MCP client config
npx @_davideast/stitch-mcp init
# Serve all project screens on a local dev server
npx @_davideast/stitch-mcp serve -p <project-id>
# Build an Astro site by mapping screens to routes
npx @_davideast/stitch-mcp site -p <project-id>
特征
- 本地预览设计 在 Vite Dev 服务器上服务项目的所有屏幕
- 从您的设计中构建 Astro 站点 ——将屏幕映射到路径并生成可部署的项目
- 给您的代理设计上下文 – 代理 Stitch 工具到您的 IDE 编码代理, 并自动刷新符号
- 探索您的设计数据 在终端或通过CLI浏览项目、屏幕和元数据
- 在终端浏览工程 ——与副本交互导航屏幕,预览和打开动作
- 在一个命令中设置 ——被引导的向导处理gcloud,auth,和MCP客户端配置
MCP一体化
将此添加到您的 MCP 客户端配置中, 让编码代理访问 Stitch 工具 :
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"]
}
}
}
被支持的客户端:VS代码,Cursor代码,克洛德代码,双子座CLI,Codex,OpenCode.
虚拟工具
该代理公司在上游Sitch MCP工具的同时披露了这些工具. 它们将多个API调用整合到更高层次的编码代理操作中:
build_site——通过映射屏幕来从一个项目建设一个站点到路线. 返回每页的设计 HTML.get_screen_code——检索屏幕并下载其HTML代码内容.get_screen_image——检索屏幕并下载其截图图像为base64.
build_site 输入方案 :
{
"projectId": "string (required)",
"routes": [
{
"screenId": "string (required)",
"route": "string (required, e.g. \"/\" or \"/about\")"
}
]
}
示例
npx @_davideast/stitch-mcp tool build_site -d '{
"projectId": "123456",
"routes": [
{ "screenId": "abc", "route": "/" },
{ "screenId": "def", "route": "/about" }
]
}'
探索您的设计
使用 view 财务报告和审定财务报表 tool 浏览您的设计数据 并了解什么是可用的 之前提示代理.
# Browse all projects
npx @_davideast/stitch-mcp view --projects
# Inspect a specific screen
npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>
# Invoke any MCP tool from the CLI
npx @_davideast/stitch-mcp tool [toolName]
内部 view 浏览器 : c 复制选定的数值, s 在浏览器中预览 HTML, o 打开 Stitch 的项目,并 q 辞职。 使用箭头键来导航并 Enter 钻入嵌入后的数据 .
运行 tool 没有列出所有可用工具的名称,或带有 -s 看工具的图谋.
安装
直接运行 npx (不需要安装):
npx @_davideast/stitch-mcp <command>
或在全球安装:
npm install -g @_davideast/stitch-mcp
stitch-mcp <command>
图标
| 命令 | 说明 |
|---|---|
| 设置 | |
init | 设置认证、 gcloud 和 MCP 客户端配置 |
doctor | 检查配置健康 |
logout | 撤销全权证书 |
| 发展 | |
serve -p <id> | 本地预览工程屏幕 |
screens -p <id> | 在终端浏览屏幕 |
view | 交互式资源浏览器 |
| 构建 | |
site -p <id> | 从屏幕生成 Astro 项目 |
snapshot | 保存屏幕状态到文件 |
| 一体化 | |
tool [name] | 从 CLI 启动 MCP 工具 |
proxy | 运行代理服务器的 MCP 代理 |
运行任何命令 --help 完全选择.
认证
自动( 建议) : 运行 init 随从法师. 它处理gcloud安装,OAuth,证书,以及项目设置.
npx @_davideast/stitch-mcp init
API 密钥 : 设定 STITCH_API_KEY 完全跳过 OAuth 的环境变量 .
export STITCH_API_KEY="your-api-key"
手动( 已存在的克云) : 如果您已经配置了克云 :
gcloud auth application-default login
gcloud config set project <PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>
然后使用代理 STITCH_USE_SYSTEM_GCLOUD=1数字 :
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"],
"env": {
"STITCH_USE_SYSTEM_GCLOUD": "1"
}
}
}
}
环境变量
| 变量 | 说明 |
|---|---|
STITCH_API_KEY | 用于直接认证的 API 密钥 (skips OAuth) |
STITCH_ACCESS_TOKEN | 先前存在的访问符 |
STITCH_USE_SYSTEM_GCLOUD | 使用系统 gcloud 配置而不是孤立的配置 |
STITCH_PROJECT_ID | 覆盖工程 ID |
GOOGLE_CLOUD_PROJECT | 替代项目 ID 变量 |
STITCH_HOST | 自定义 Stitch API 端点 |
解决问题
“拒绝”错误
确保您拥有所有者或编辑器角色, 帐单启用, Stitch API 启用 。 运行 doctor --verbose 去诊断.
未出现的认证 URL
该工具会用5秒的超时打印认证URL到终端. 查找从 URL 开始的地址 https://accounts.google.com如果使用代理服务器 --debug检查 /tmp/stitch-proxy-debug.log。 。 。 .
已经认证但显示已登录
被捆绑的gcloud SDK 与您的全球gcloud 安装保持单独的认证 。 要完全清除认证 :
npx @_davideast/stitch-mcp logout --force --clear-config
API 设置后连接失败
运行 doctor --verbose 去诊断 校验您的项目已启用计费和 Stitch API 。 如果问题继续存在,则重新确认:
npx @_davideast/stitch-mcp logout --force
npx @_davideast/stitch-mcp init
WSL / SSH / 多克环境
CLI探测到WSL,SSH会话,多克容器和云壳. 在这些环境中,基于浏览器的auth可能不会自动工作. 从您的终端复制 OAuth URL, 并在浏览器中手动打开 .
发展
# Install dependencies
bun install
# Run locally
bun run dev init
# Run tests
bun test
# Build
bun run build
# Verify package
bun run verify-pack
许可证
Apache 2.0 东大卫
免责声明
[尖叫声] 实验项目 - 这是一个独立的实验工具.
这个项目是:
- 没有 隶属于Google LLC、Alphabet Inc.或Stitch API团队,得到其认可或赞助
- 提供 AS-IS 系统 与 无警报 任何类型的
- 没有 保证与未来的API版本保持、安全或兼容
"斯地克"和"Google Cloud"是Google LLC的商标.
使用你自己的风险.