使用说明
缝合MCP服务器
企业就绪模型上下文协议（MCP）服务器 Google Stitch SDK --使用AI从文本提示生成漂亮的web UI。
这 缝合MCP服务器 将你的人工智能编码助手（Claude、Cursor、Cline、Copilot等）与谷歌的Stitch UI Generation API联系起来。使用自然语言直接将设计、生成和构建生产就绪的HTML组件安装到您的工作区中。
特性
| 特性 | 描述 |
|---|---|
| AI UI生成 | 根据文本描述生成完整的HTML屏幕 |
| 编辑和迭代 | 使用自然语言提示修改现有屏幕 |
| 设计变体 | 生成多种设计变体以探索选项 |
| 汽车脚手架 | 将生成的UI直接保存到项目文件中 |
| 多客户端支持 | 适用于Claude Desktop、Cursor、Cline（VS Code）和任何MCP客户端 |
| 一键安装 | 交互式安装程序会自动配置所有内容 |
快速开始
先决条件
- Node.js 18.0.0或更高
- 缝合API键 — 在这里买一个 （使用Google登录）
安装（30秒）
运行交互式安装向导：
npx stitch-mcp-server setup
这将：
- 询问您要配置哪些AI工具（Claude、Cursor、Cline）
- 提示输入Stitch API密钥
- 自动更新MCP配置文件
- 完成-重新启动AI工具并开始生成UI
手动配置
如果您更喜欢手动设置，请将此添加到MCP配置文件中：
Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}
Cursor — .cursor/mcp.json in your workspace
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}
Cline (VS Code) — MCP Settings in Cline extension
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}
可用工具
核心工具
| 工具 | 描述 | 示例提示 |
|---|---|---|
create_project |
创建新的缝合项目 | “创建一个名为“我的应用程序”的项目” |
list_projects |
列出您的所有项目 | “显示我的Stitch项目” |
generate_screen |
根据描述生成UI | “使用电子邮件和密码创建登录页面” |
edit_screen |
修改现有屏幕 | “将背景调暗并添加侧边栏” |
generate_variants |
创建设计备选方案 | “显示3种不同的配色方案” |
先进工具
| 工具 | 描述 | 用例 |
|---|---|---|
get_screen_code |
获取HTML源代码 | 获取生成屏幕的原始HTML |
get_screen_image |
获取截图URL | 预览生成的设计 |
generate_and_fetch_code |
一次调用生成+获取 | 简化工作流程，实现快速原型制作 |
scaffold_project_files |
将HTML保存到本地文件 | 直接导出到 src/components/ |
资源
stitch://projects--按上下文列出所有项目stitch://projects/{id}/screens--列出项目中的屏幕
提示
create_web_app--引导工作流程，构建从创意到脚手架文件的完整web应用程序
使用示例
生成登录页面
Create a modern landing page for a SaaS product with:
- Hero section with headline and CTA button
- Features grid with 3 columns
- Testimonials carousel
- Footer with links
创建仪表板
Generate an admin dashboard with:
- Sidebar navigation
- Stats cards at the top
- Data table with pagination
- Dark mode theme
编辑现有设计
Take the login screen and:
- Add social login buttons (Google, GitHub)
- Make it mobile responsive
- Add a "Remember me" checkbox
本地开发
# Clone the repo
git clone https://github.com/0x-Professor/Stitch-mcp-server.git
cd Stitch-mcp-server
# Install dependencies
npm install
# Build
npm run build
# Run locally
STITCH_API_KEY=your-key npm start
运行测试
STITCH_API_KEY=your-key npm test
技术栈
- 运行时：Node.js 18+
- 语言：TypeScript
- MCP-SDK: @模型上下文协议/sdk
- Stitch SDK: @谷歌/缝合sdk
- 验证：佐德
- 构建：tsup
- 测试：Vitest
安全
此服务器实施了多种安全措施：
- 路径横向保护 --防止在工作区外写入文件
- 输入验证 --所有输入均已Zod模式验证
- 安全配置存储 -存储有受限文件权限的API密钥（0600）
- HTTP响应验证 --对所有网络请求进行适当的错误处理
贡献
欢迎投稿！请参阅 贡献.md 作为指导方针。
- 分叉存储库
- 创建功能分支(
git checkout -b feature/amazing-feature) - 提交您的更改(
git commit -m 'Add amazing feature') - 推到分支(
git push origin feature/amazing-feature) - 打开拉取请求
许可证
麻省理工学院- 0x教授
链接
- npm: npmjs.com/package/stitch-mcp服务器
- GitHub: github/0x专业/Stitch-mcp服务器
- 问题: 报告错误
- Stitch SDK: github/AugmentedCode/stitch-sdk
- MCP协议: 模型上下文协议.io
Built for the AI-assisted development community
