Stitch MCP Server

缝合MCP服务器

](https://www.npmjs.com/package/stitch-mcp-server) ](https://www.npmjs.com/package/stitch-mcp-server)  ](https://nodejs.org) 

企业就绪模型上下文协议（MCP）服务器 Google Stitch SDK --使用AI从文本提示生成漂亮的web UI。

这 缝合MCP服务器 将你的人工智能编码助手（Claude、Cursor、Cline、Copilot等）与谷歌的Stitch UI Generation API联系起来。使用自然语言直接将设计、生成和构建生产就绪的HTML组件安装到您的工作区中。

______________________________________________________________________

特性

______________________________________________________________________

快速开始

先决条件

• Node.js 18.0.0或更高
• 缝合API键 — 在这里买一个 （使用Google登录）

安装（30秒）

运行交互式安装向导：

npx stitch-mcp-server setup

这将：

1. 询问您要配置哪些AI工具（Claude、Cursor、Cline）
2. 提示输入Stitch API密钥
3. 自动更新MCP配置文件
4. 完成-重新启动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"
      }
    }
  }
}

______________________________________________________________________

可用工具

核心工具

先进工具

资源

• 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 作为指导方针。

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

______________________________________________________________________

许可证

麻省理工学院- 0x教授

______________________________________________________________________

链接

• npm:
• GitHub:
• 问题: 报告错误
• Stitch SDK:
• MCP协议: 模型上下文协议.io

______________________________________________________________________

Built for the AI-assisted development community