使用说明

双子针mcp

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

为什么？

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

三大支柱

支柱	发动机	角色
设计	Google Stitch	根据文本描述生成视觉设计、设计系统和组件模型
代码	Google Gemini	将设计转换为语义、类型化的React/Vue/HTML组件
编排	Claude Code	审查代码、管理架构、集成组件并推动工作流程

管道很简单： 缝合设计 --> 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 该工具在一次调用中自动化了从设计概念到生产就绪代码的过程：

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

首选谷歌AI工作室并生成免费的API密钥。
集 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，请执行以下操作：

创建一个谷歌云项目并启用Gemini API。
创建一个 OAuth 2.0客户端ID 云控制台中的（桌面应用程序类型）。
集 GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET，以及 GOOGLE_CLOUD_PROJECT.
首次启动时，会将身份验证URL打印到stderr。在浏览器中打开它并授予同意一次。
令牌保存到 ~/.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_prompt`	通用Gemini访问。在Claude Code中向Gemini发送任何提示——委托代码生成、分析、编写或任何任务。	`prompt`, `systemPrompt`	GEMINI_DEFAULT_MODEL
`gemini_generate_ui`	从文本提示生成UI组件。为React、Vue或HTML生成生产就绪代码。	`prompt`, `framework`, `styling`, `componentType`	双子座-3.1-pro-回顾
`gemini_refine_code`	使用有针对性的指令优化和改进现有的前端代码。	`code`, `instructions`	双子座-3.1-闪光点-综述
`gemini_review_ui`	审查UI代码的可访问性、响应性和最佳实践。返回带有结果的结构化JSON。	`code`, `checkAccessibility`, `checkResponsiveness`	双子座-3.1-pro-回顾
`gemini_chat`	前端开发问答和头脑风暴。设计问题和代码模式的聊天界面。	`message`, `context`	双子座-3.1-闪光点-综述

缝合工具

工具	说明	关键参数
`stitch_generate_screen`	根据文本描述生成UI设计。	`prompt`, `projectId`
`stitch_get_html`	从Stitch屏幕中提取HTML和CSS。	`screenId`, `minify`
`stitch_edit_screen`	使用文本说明编辑现有屏幕。	`screenId`, `instructions`
`stitch_get_variants`	生成屏幕的设计变体。	`screenId`, `count`
`stitch_list_screens`	列出Stitch项目中的所有屏幕。	`projectId`

管道工具

工具	说明	关键参数	默认模型
`design_to_code`	Gemini管道全缝合。生成设计，提取HTML/CSS，转换为生产组件。退货 `contextId` 为了迭代。	`prompt`, `framework`, `styling`	双子座-3.1-pro-回顾
`iterate_design`	迭代细化。接受反馈，更新Stitch设计，通过Gemini重新生成代码。	`contextId`, `feedback`	双子座-3.1-pro-回顾

支持的型号

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

型号	最适合
双子座-3.1-pro-回顾	最高质量的生成和分析
双子座-3.1-闪光点-综述	快速推理、聊天和精炼
双子座-2.5-pro	稳定的生产回退
双子座-2.5-flash	稳定快速回退

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

环境变量

变量	必填	默认	描述
`GEMINI_API_KEY`	对于API密钥模式	--	来自Google AI Studio的Gemini API密钥
`GOOGLE_CLOUD_PROJECT`	对于ADC/Outh	--	谷歌云项目ID
`GOOGLE_CLIENT_ID`	仅适用于OAuth	--	OAuth 2.0客户端ID
`GOOGLE_CLIENT_SECRET`	仅适用于OAuth	--	OAuth 2.0客户端密钥
`GOOGLE_CLOUD_LOCATION`	没有	`us-central1`	Vertex AI的谷歌云区域
`GOOGLE_REFRESH_TOKEN`	否	--	预先获得的刷新令牌（跳过浏览器流）
`STITCH_API_KEY`	否	--	缝合API密钥（可替代OAuth）
`STITCH_API_URL`	否	--	覆盖缝合API端点
`STITCH_PROJECT_ID`	否	--	默认缝合项目ID
`GEMINI_DEFAULT_MODEL`	没有	`gemini-3.1-flash-lite-preview`	未指定时的默认模型

发展

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/ --共享重试和速率限制逻辑

贡献

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

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

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

许可证

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

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