Stitch MCP Integration

缝合MCP集成包

Google Stitch MCP（模型上下文协议）的一个自包含、可重用的集成包。该软件包提供了自动设置、令牌管理和全面的工具，用于将Stitch的UI设计功能与Claude Code和其他MCP客户端集成。

特性

• 🚀 自动设置 -交互式脚本处理身份验证、API启用和配置
• 🔐 双重认证 -支持HTTP（基于令牌）和基于命令（ADC）方法
• 🔄 许可证管理 -通过备份和验证快速刷新令牌
• 📦 独立 -复制到任何项目，无需修改
• ✅ 健壮 -包括验证、错误处理和备份创建
• 📝 有据可查的 -全面的指南和故障排除

什么是Stitch MCP？

Google Stitch是一个通过模型上下文协议（MCP）与Claude集成的UI设计工具。它允许您：

• 根据文本描述生成UI模型
• 为web和移动应用程序创建设计资产
• 与Claude对话式地迭代设计
• 将设计导出到生产就绪代码

快速开始

先决条件

• gcloud命令行界面 已安装(安装指南)
• 谷歌云项目 已启用计费
• Node.js 20+ 和npm

安装

1. 安装依赖项：

   npm install chalk@^5.3.0 execa@^9.0.1 ora@^8.0.1 prompts@^2.4.2 ts-node@^10.9.2 @types/prompts@^2.4.9

1. 在package.json中添加npm脚本：

   {
     "scripts": {
       "setup:stitch": "ts-node stitch-integration/scripts/setup.ts",
       "refresh:stitch-token": "ts-node stitch-integration/scripts/refresh-token.ts"
     }
   }

1. 运行安装程序：

   npm run setup:stitch

安装脚本将指导您完成以下操作：

• 谷歌云身份验证
• 选择身份验证方法（HTTP或基于命令）
• 启用Stitch API
• 生成访问令牌（如果使用HTTP）
• 配置 .env.local 和 .mcp.json

1. 重新启动MCP客户端 （Claude Code、IDE等）加载配置

用法

令牌刷新（仅限HTTP方法）

访问令牌将在约1小时后过期。当您的令牌过期时，请使用以下命令刷新它：

npm run refresh:stitch-token

然后重新启动MCP客户端以应用新令牌。

与克劳德一起使用Stitch

配置后，您可以通过Claude使用Stitch：

Generate a modern dashboard UI for a SaaS application

Create a mobile app login screen with social auth options

Claude将使用Stitch MCP服务器生成设计并提供预览。

身份验证方法

带访问令牌的HTTP（推荐）

赞成的意见：

• ✅ 更可靠的连接
• ✅ 更易于调试
• ✅ 直接HTTP通信
• ✅ 快速令牌刷新（~5秒）

欺骗：

• ⚠️ 令牌在约1小时后过期（易于刷新）

它是如何工作的：

• 使用应用程序默认凭据生成访问令牌
• 直接连接到 https://stitch.googleapis.com/mcp
• 令牌存储在 .env.local 和 .mcp.json

基于ADC的命令

赞成的意见：

• ✅ 无令牌过期
• ✅ 使用标准应用程序默认凭据

欺骗：

• ⚠️ 可能存在连接问题
• ⚠️ 更难调试
• ⚠️ 要求在每个连接上执行npx

它是如何工作的：

• 生成物 npx @google/genai-mcp-server 命令
• 服务器使用应用程序默认凭据
• MCP客户端连接到本地服务器进程

配置文件

.env.本地

GOOGLE_CLOUD_PROJECT=your-project-id
STITCH_AUTH_METHOD=http               # or 'command'
STITCH_ACCESS_TOKEN=ya29.a0...        # if http method

.mcp.json

由安装脚本自动配置。看 templates/.mcp.json.example 用于手动配置。

脚本

setup.ts

交互式安装向导：

1. 验证先决条件（gcloud CLI）
2. 使用Google Cloud进行身份验证
3. 启用缝合API
4. 授予权限
5. 生成访问令牌（HTTP方法）
6. 更新配置文件

选项：

• --verbose -显示详细输出
• --yes 或 -y -自动确认所有提示

例子：

npm run setup:stitch -- --verbose

refresh-to-ken.ts

快速刷新过期的访问令牌：

1. 生成新令牌
2. 验证令牌
3. 更新 .env.local 和 .mcp.json
4. 创建备份

选项：

• --verbose -显示详细输出

例子：

npm run refresh:stitch-token -- --verbose

包结构

stitch-integration/
├── README.md                # This file
├── SETUP.md                 # Integration guide for new projects
├── package.json             # Package metadata
├── tsconfig.json            # TypeScript configuration
├── .gitignore              # Git ignore rules
├── scripts/
│   ├── setup.ts            # Main setup script
│   ├── refresh-token.ts    # Token refresh utility
│   └── lib/
│       ├── env-manager.ts      # .env.local file management
│       ├── gcloud-auth.ts      # Google Cloud authentication
│       ├── mcp-config.ts       # .mcp.json configuration
│       ├── token-generator.ts  # Token generation & validation
│       └── validators.ts       # Prerequisite validation
├── docs/
│   └── troubleshooting.md  # Troubleshooting guide
├── templates/
│   ├── .env.example        # Environment template
│   └── .mcp.json.example   # MCP config examples
└── examples/
    ├── http-auth-example.md     # HTTP auth configuration
    └── command-auth-example.md  # Command auth configuration

融入新项目

看 设置.md 获取详细的集成说明。

快速版本：

1. 复制整个 stitch-integration/ 文件夹到您的项目
2. 安装对等依赖关系
3. 将npm脚本添加到您的 package.json
4. 跑 npm run setup:stitch

故障排除

有关常见问题和解决方案，请参阅 docs/故障排除.md.

快速修复

• 连接错误： npm run refresh:stitch-token （然后重新启动客户端）
• 找不到gcloud： 从以下位置安装https://cloud.google.com/sdk/docs/install
• 未启用API： 安装脚本自动启用它
• 权限被拒绝： 安装脚本授予所需角色

依赖项

对等依赖关系（必填）

• chalk@^5.3.0 -终端颜色
• execa@^9.0.1 -流程执行
• ora@^8.0.1 -加载旋转器
• prompts@^2.4.2 -交互式提示
• ts-node@^10.9.2 -TypeScript执行
• @types/prompts@^2.4.9 -类型定义

系统相关性

• gcloud命令行界面
• Node.js 20+
• 带有计费功能的活跃Google Cloud项目

高级用法

切换身份验证方法

跑 npm run setup:stitch 并在提示时选择其他方法。

多个项目

为每个项目运行安装程序，或手动更新 GOOGLE_CLOUD_PROJECT 在 .env.local.

详细模式

有关详细的调试信息：

npm run setup:stitch -- --verbose
npm run refresh:stitch-token -- --verbose

CI/CD集成

对于自动化环境：

1. 使用服务帐户凭据
2. 集 GOOGLE_APPLICATION_CREDENTIALS 环境变量
3. 使用基于命令的方法（无需刷新令牌）

安全

• ✅ .env.local 是gitignored（从不提交令牌）
• ✅ 文件修改前创建的备份
• ✅ 控制台输出中屏蔽的令牌
• ✅ 验证确保令牌在保存前正常工作
• ⚠️ 代币在1小时后过期（按设计）

支持

• 文档： docs/故障排除.md
• 详细输出： 添加 --verbose 标记任何命令
• 备份： 检查 .env.local.backup.* 和 .mcp.json.backup.*
• 谷歌云： console.cloud.google.com

许可证

麻省理工学院

相关链接

• 谷歌云SDK
• 缝合API
• MCP协议
• 应用程序默认凭据