Gemini Stitch MCP

双子针mcp

统一的MCP服务器，将Claude Code转变为设计到代码的强大引擎。

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

为什么？

Claude Code擅长架构思维和代码编排，但前端代码生成和视觉设计需要专门的工具。Gemini大规模生成生产就绪的React和Vue组件，而Google Stitch则生产像素完美的设计系统。该服务器将这三者统一起来，让Claude Code继续担任智能架构师，同时将UI专业知识委托给一流的模型。结果：设计看起来很原始，代码易于维护，工作流程实际上很有意义。

三大支柱

管道很简单： 缝合设计 --> Gemini代码 --> Claude Code审查和集成。没有上下文切换。无需手动切换。只是无缝设计到代码。

______________________________________________________________________

建筑

服务器充当Claude Code和谷歌设计/生成API之间的桥梁：

Claude Code
    | stdio (JSON-RPC 2.0)
    v
gemini-stitch-mcp server
    |-- GeminiClient  --> Gemini API (via Vertex AI or API key)
    |-- StitchClient  --> Stitch API (OAuth or API key)
    |-- ScreenCache   --> In-memory LRU (50 entries, 30min TTL)
    +-- PipelineStore --> In-memory context for iteration

与Claude Code的所有通信都通过stdio上的JSON-RPC 2.0进行。服务器处理多步骤工作流的身份验证、API编排、缓存、速率限制和状态管理。

管道是如何工作的

这 design_to_code 该工具在一次调用中自动化了从设计概念到生产就绪代码的过程：

1. 描述 --你告诉Claude Code你需要什么（例如，“创建一个带有电子邮件和密码字段的暗模式登录表单”）。
2. 设计 --服务器将您的提示发送给Stitch，Stitch会生成一个视觉设计模型并返回一个屏幕ID。
3. 提取 --HTML和CSS从Stitch屏幕中提取，捕获布局和样式。
4. 生成 --提取的标记被发送到Gemini，Gemini会在您选择的框架（React、Vue或HTML）中生成一个生产就绪的组件，并使用您喜欢的样式（Tailwind、CSS或样式化组件）。
5. 返回 --你会得到三件事：

- contextId --未来改进的参考 - previewUrl --查看Stitch设计的链接 - code --即用型组件

迭代

一旦你有了一个初步的设计，无需重新开始就可以对其进行改进：

iterate_design({ contextId, feedback: "Make the form wider and add a forgot password link" })

服务器检索缓存的上下文，向Stitch发送反馈以更新设计，并再次通过Gemini运行更新的设计。返回更新的代码和预览URL，同时保持迭代之间的设计一致性。

______________________________________________________________________

快速开始

npm install -g gemini-stitch-mcp

或直接与 npx --无需安装。添加到您的Claude Code MCP配置中(.claude/settings.json 或项目 .mcp.json):

{
  "mcpServers": {
    "gemini-stitch": {
      "command": "npx",
      "args": ["-y", "gemini-stitch-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-api-key"
      }
    }
  }
}

重新启动Claude Code，所有12个工具都可用。无需安装步骤-- npx 处理它。其他身份验证方法见下文。

______________________________________________________________________

认证

四种模式，从最简单到最强大：

1.API密钥（最简单）

1. 首选 谷歌AI工作室 并生成免费的API密钥。
2. 集 GEMINI_API_KEY 在您的MCP配置中。完成。

2.Gemini CLI（零配置——推荐）

如果你已经有了 双子星命令行工具 已安装并登录， 不需要配置。服务器会在以下位置自动检测您的Gemini CLI凭据 ~/.gemini/oauth_creds.json 并重用同一会话——共享您现有的Gemini帐户使用情况和配额。

# If you haven't already:
npm install -g @anthropic-ai/gemini-cli
gemini  # follow the sign-in prompt

然后只需添加MCP服务器 没有环境变量 --它会自动发现您的凭据：

{
  "mcpServers": {
    "gemini-stitch": {
      "command": "npx",
      "args": ["-y", "gemini-stitch-mcp"]
    }
  }
}

3.应用程序默认凭据（ADC）

如果你已经有了 gcloud 已安装CLI：

gcloud auth application-default login

那就设定吧 GOOGLE_CLOUD_PROJECT 在MCP配置中--不需要API密钥或OAuth凭据。服务器通过Vertex AI自动发现您的凭据。

4.OAuth 2.0（完全访问——Gemini+Stitch）

要使用单个令牌访问Gemini和Stitch API，请执行以下操作：

1. 创建一个谷歌云项目并启用Gemini API。
2. 创建一个 OAuth 2.0客户端ID 云控制台中的（桌面应用程序类型）。
3. 集 GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET，以及 GOOGLE_CLOUD_PROJECT.
4. 首次启动时，会将身份验证URL打印到stderr。在浏览器中打开它并授予同意一次。
5. 令牌保存到 ~/.gemini-stitch-mcp/tokens.json 然后自动刷新。

______________________________________________________________________

Claude代码配置

使用Gemini CLI（推荐使用--无环境变量）

{
  "mcpServers": {
    "gemini-stitch": {
      "command": "npx",
      "args": ["-y", "gemini-stitch-mcp"]
    }
  }
}

使用API密钥

{
  "mcpServers": {
    "gemini-stitch": {
      "command": "npx",
      "args": ["-y", "gemini-stitch-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-api-key"
      }
    }
  }
}

使用应用程序默认凭据

{
  "mcpServers": {
    "gemini-stitch": {
      "command": "npx",
      "args": ["-y", "gemini-stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

使用OAuth

{
  "mcpServers": {
    "gemini-stitch": {
      "command": "npx",
      "args": ["-y", "gemini-stitch-mcp"],
      "env": {
        "GOOGLE_CLIENT_ID": "your-client-id",
        "GOOGLE_CLIENT_SECRET": "your-client-secret",
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

______________________________________________________________________

工具参考

Gemini工具

缝合工具

管道工具

支持的型号

每个Gemini工具都接受一个可选 model 参数。常见选项：

可以传递任何有效的Gemini模型字符串。如果省略，则使用该工具的默认值。

______________________________________________________________________

环境变量

______________________________________________________________________

发展

git clone https://github.com/alexxenn/gemini-stitch-mcp.git
cd gemini-stitch-mcp
npm install
npm run build
npm run dev    # watch mode

手动测试stdio服务器

要在没有Claude Code的情况下直接测试MCP服务器：

echo '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}' | GEMINI_API_KEY=test node dist/index.js

这将通过stdio发送JSON-RPC 2.0初始化请求，并显示服务器响应。

项目结构

gemini-stitch-mcp/
├── bin/
│   └── gemini-stitch-mcp.js          # CLI entry point
├── src/
│   ├── index.ts                       # Server bootstrap, tool registration
│   ├── config.ts                      # Environment validation
│   ├── types.ts                       # Shared TypeScript interfaces
│   ├── auth/
│   │   ├── google-oauth.ts            # OAuth 2.0 flow
│   │   └── token-store.ts             # Persistent token storage
│   ├── clients/
│   │   ├── gemini-client.ts           # @google/genai wrapper
│   │   └── stitch-client.ts           # Stitch HTTP client
│   ├── tools/
│   │   ├── gemini/                    # 5 Gemini tools
│   │   ├── stitch/                    # 5 Stitch tools
│   │   └── pipeline/                  # 2 pipeline tools
│   ├── prompts/
│   │   ├── system-prompts.ts          # Curated AI prompts
│   │   └── templates.ts               # Framework conversion templates
│   ├── cache/
│   │   └── screen-cache.ts            # LRU cache
│   └── utils/
│       ├── retry.ts                   # Exponential backoff
│       └── rate-limiter.ts            # Token bucket rate limiter
├── package.json
├── tsconfig.json
└── LICENSE

关键模块：

• index.ts --初始化MCP服务器，注册所有12个工具，并处理stdio通信
• config.ts --启动时验证所需的环境变量
• 客户/ --Gemini API和Stitch API的薄包装，带有错误处理
• 工具/ --按服务分组的工具实现（Gemini、Stitch、Pipeline）
• auth/ --处理OAuth 2.0令牌生命周期和存储
• 高速缓存/ --LRU屏幕缓存，以避免重复的Stitch API调用
• utils/ --共享重试和速率限制逻辑

贡献

我们欢迎问题、功能请求和拉取请求。贡献：

1. 分叉存储库并创建功能分支
2. 进行更改并运行 npm run build 验证TypeScript编译
3. 遵循现有的代码风格（2空格缩进，Promise链上的async/await）
4. 提交一个拉取请求，明确描述您的更改

提交前，请确保 npm run build 无差错通过。

许可证

MIT许可证——见 许可证 文件以获取详细信息。

______________________________________________________________________

旨在弥合AI设计和AI代码生成之间的差距。