使用说明

MCP服务器Gemini

模型上下文协议（MCP）服务器，用于将Google的Gemini模型与Claude Code集成，实现两个AI系统之间的强大协作。

特性

核心能力

直接查询：向Gemini模型发送前端相关问题的提示
协作头脑风暴：使Claude和Gemini能够共同制定UI/UX设计决策
代码分析：分析前端代码的质量、安全性、性能和错误
由Gemini 3 Pro预览版提供支持：使用谷歌最新的实验模型来增强功能

前端专用工具

UI组件脚手架：从自然语言描述生成生产就绪的组件实现
UI/UX设计评审：用户体验、可访问性（WCAG 2.1）和响应式设计的专业审核

安装

📖 详细安装指南:

Windows 用户安装指南 - 专为 Windows 系统优化
Linux/macOS 用户安装指南 - Unix 系统安装说明

与Claude Code集成

Claude Code使用模型上下文协议（MCP）与外部工具和数据源连接。此MCP服务器允许Claude在您的Claude Code环境中直接访问Gemini的功能。

快速安装（单行命令）

将Gemini添加到Claude Code的最简单方法是使用一行命令：

# Replace YOUR_GEMINI_API_KEY with your actual Google Gemini API key
claude mcp add gemini -s user -- env GEMINI_API_KEY=YOUR_GEMINI_API_KEY npx -y https://github.com/rlabs-inc/gemini-mcp.git

您还可以包含详细程度选项：

# For verbose logging
claude mcp add gemini -s user -- env GEMINI_API_KEY=YOUR_GEMINI_API_KEY VERBOSE=true npx -y https://github.com/rlabs-inc/gemini-mcp.git

# For quiet mode
claude mcp add gemini -s user -- env GEMINI_API_KEY=YOUR_GEMINI_API_KEY QUIET=true npx -y https://github.com/rlabs-inc/gemini-mcp.gitp

替代手动安装

如果您更喜欢手动设置：

步骤1：安装MCP服务器

首先，确保你安装了Node.js，然后全局安装服务器：

步骤2：启动Claude代码

在您的终端中启动Claude Code：

claude

步骤3：添加Gemini MCP服务器

一旦进入克劳德代码，使用 /mcp add 添加Gemini服务器的命令：

/mcp add

出现提示时，提供以下配置：

{
  "gemini": {
    "command": "npx",
    "args": ["-y", "https://github.com/rlabs-inc/gemini-mcp.git"],
    "env": {
      "GEMINI_API_KEY": "your-gemini-api-key"
    }
  }
}

步骤4：验证并启用服务器

验证服务器是否已成功添加：

/mcp list

然后为当前会话启用Gemini服务器：

/mcp use gemini

在Claude代码中使用Gemini工具

非技术用户

好消息！ 如果你是产品经理、设计师或非技术用户，你不需要学习命令或技术术语。你可以通过自然语言使用双子座！

运作原理

只需用你自己的话向克劳德描述你需要什么，它就会在需要时自动呼叫双子座：

对话示例：

You: "I need a user login form"
Claude: [Automatically calls gemini-ui-scaffold]
Result: Complete login form component with explanation

You: "Is this button accessible for colorblind users?"
Claude: [Automatically calls gemini-ui-design-review with accessibility focus]
Result: Detailed accessibility review with fixes

You: "What's the best way to handle form validation?"
Claude: [Automatically calls gemini-query]
Result: Expert advice on form validation

自然语言示例

你可以说：

你说什么	你得到什么
“我需要一个显示建议的搜索框”	完整的搜索组件代码
“这也需要在手机上工作”	响应式设计评审
“盲人用户可以使用这个吗？”	可访问性审计
“类似于GitHub的登录页面”	与该设计匹配的组件

想要了解更多细节吗？ 请参阅非技术用户指南用于：

完整的示例和场景
非技术术语指南
提示和最佳实践
非开发人员常见问题

对于开发者

启用Gemini服务器后，您可以通过MCP工具访问Gemini的功能：

基于MCP工具的方法

当您启用Gemini服务器时 /mcp use gemini，您可以直接调用这些工具：

/gemini-query What are the differences between CSS Grid and Flexbox?
/gemini-brainstorm How should we design the navigation component architecture?
/gemini-analyze-code javascript performance
/gemini-ui-scaffold "A user profile card with avatar, name, and edit button"
/gemini-ui-design-review [paste your component code]

创建自定义Slash命令（推荐）

为了获得更无缝的体验，您可以创建自定义斜线命令来访问Gemini的工具。这使得它们更容易使用和记忆。

项目特定命令

在项目中创建命令目录：

mkdir -p .claude/commands

然后为每个命令创建markdown文件：

查询Gemini （.claude/commands/gegemini.md）：

Ask Gemini: $ARGUMENTS

头脑风暴 （.claude/commands/brainstorm.md）：

/gemini-brainstorm $ARGUMENTS

分析代码 （.claude/commands/analyse.md）：

/gemini-analyze-code general

$ARGUMENTS

使用自定义命令

现在，您可以在Claude Code中使用这些简单的命令：

/project:gemini How does quantum computing work?
/project:brainstorm How can we improve our CI/CD pipeline?
/project:analyze def fibonacci(n): return 1 if n <= 1 else fibonacci(n-1) + fibonacci(n-2)

个人命令

您还可以创建适用于所有项目的个人命令：

mkdir -p ~/.claude/commands

Gemini查询的个人命令示例（~/.claude/commands/ask Gemini.md）：

/gemini-query $ARGUMENTS

然后将其与以下内容一起使用：

/user:ask-gemini What are the best practices for React performance?

工具示例

以下是使用每个Gemini工具的示例：

基本查询

/gemini-query What is quantum computing?

协作头脑风暴

开始头脑风暴会议：

/gemini-brainstorm How could we implement a real-time collaboration feature?

用你的意见继续头脑风暴会议：

/gemini-brainstorm round:2 claudeInput:"I think we should use WebSockets for real-time updates. What about handling offline mode?"

在几轮之后创建最终合成：

/gemini-brainstorm-synthesis prompt:"Real-time collaboration feature implementation" history:[...]

代码分析

分析不同重点领域的代码：

/gemini-analyze-code python performance

def fibonacci(n):
    if n <= 1:
        return n
    else:
        return fibonacci(n-1) + fibonacci(n-2)

可用焦点选项：

quality -代码质量、可读性和可维护性
security -安全漏洞和最佳实践
performance -性能瓶颈和优化机会
bugs -错误、逻辑错误和边缘情况
general -综合分析（默认）

UI组件脚手架

从自然语言生成完整的、可用于生产的UI组件：

/gemini-ui-scaffold description:"User login form with email, password, and remember me checkbox" framework:react styling:tailwind

# Or just use natural language - Claude will handle the details
"I need a search bar component"

该工具生成：

带注释的完整组件代码
样式文件
类型定义（如适用）
依赖关系列表
使用示例
测试建议

支持的框架：React、Vue、Angular、Svelte、Vanilla JS 支持的样式：CSS、顺风、样式化组件、CSS模块、SCSS

UI/UX设计评审

获得专业的设计和可访问性审核：

/gemini-ui-design-review code:"[paste your component]" focus:accessibility,ux

审查重点：

ux -用户体验和交互设计
accessibility -WCAG 2.1合规性和屏幕阅读器支持
responsive -移动优先和响应式设计
performance -用户感知性能
all -全面审查（默认）

该工具提供：

代码修复的具体问题
WCAG违规详细信息
优先行动项目
为非技术利益相关者提供简明的语言解释

协作工作流示例

以下是一个如何使用Claude和Gemini一起解决问题的示例：

与Claude的初步分析:

claude
> analyze the performance issue in our authentication service

了解双子座的观点:

/project:gemini What could cause authentication service bottlenecks?

共同集思广益解决方案:

/project:brainstorm How can we optimize the authentication service based on the identified bottlenecks?

与Claude一起实施解决方案:

> Please implement the solution we developed

命令行选项

MCP服务器支持以下命令行选项：

gemini-mcp [options]

Options:
  -v, --verbose    Enable verbose logging (shows all prompts and responses)
  -q, --quiet      Run in quiet mode (minimal logging)
  -h, --help       Show this help message

环境变量

GEMINI_API_KEY （必需）：您的Google Gemini API密钥
GEMINI_MODEL （可选）：默认Gemini模型（默认值：“Gemini-2.5-pro-latest”）
GEMINI_PRO_MODEL （可选）：指定Pro型号变体（默认：“gemini-2.5-Pro”）
GEMINI_FLASH_MODEL （可选）：指定Flash型号变体（默认值：“gemini-2.5-Flash”）

故障排除

服务器连接问题

如果Claude无法连接到Gemini MCP服务器：

检查服务器是否已安装： npm list -g @rlabs/gemini-mcp
在配置中验证API密钥是否正确
尝试手动运行服务器： gemini-mcp -v
确保您的终端可以访问互联网

自定义命令问题

如果您的自定义斜线命令不起作用：

检查一下 .claude/commands/ 目录存在
验证命令文件的格式是否正确
确保文件具有 .md 扩展
尝试重新启动Claude Code

工具执行问题

如果工具没有按预期工作：

验证服务器是否已列出 /mcp list
确保您已启用服务器 /mcp use gemini
检查您的Gemini API密钥是否具有必要的权限
尝试重新启动Claude Code和MCP服务器

常见使用场景

场景1：生成UI组件（自然语言）

非技术方法：

"I need a component for user feedback - name, email, message, and a submit button"

克劳德自动呼叫 gemini-ui-scaffold 并生成完整的组件。

技术方法：

/gemini-ui-scaffold description:"User feedback form with name, email, message textarea, and submit button" framework:react styling:tailwind

结果： 具有代码、样式和使用说明的相同生产就绪组件。

场景2：检查可访问性（自然语言）

非技术方法：

"Is this button easy to see for people with color blindness?"
[Paste code or point to file]

技术方法：

/gemini-ui-design-review focus:accessibility

[paste code]

结果： WCAG 2.1合规性报告，包括具体修复。

场景3：问技术问题（自然语言）

非技术方法：

"What's the best way to show loading states to users?"

技术方法：

/gemini-query What are best practices for loading states in web applications?

结果： 带有示例的专家前端指导。

场景4：改进现有设计（自然语言）

非技术方法：

"Users say our search is hard to use. What can we improve?"
[Share search component code]

Claude分析并要求Gemini改进用户体验。

技术方法：

/gemini-ui-design-review focus:ux

[paste search component code]

结果： 用户体验评估，包括具体的改进和代码示例。

发展

# Clone the repository
git clone https://github.com/rlabs-inc/gemini-mcp.git
cd gemini-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Run with verbose logging
npm run dev -- --verbose

额外资源

非技术用户指南 -产品经理和设计师的完整指南
CLAUDE.md -Claude集成的技术文档
安装-CLAUDE-CODE.md -详细的安装指南

许可证

MIT许可证

使用说明

MCP服务器Gemini

特性

核心能力

前端专用工具

安装

与Claude Code集成

快速安装（单行命令）

替代手动安装

步骤1：安装MCP服务器

步骤2：启动Claude代码

步骤3：添加Gemini MCP服务器

步骤4：验证并启用服务器

在Claude代码中使用Gemini工具

非技术用户

运作原理

自然语言示例

对于开发者

基于MCP工具的方法

创建自定义Slash命令（推荐）

项目特定命令

使用自定义命令

个人命令

工具示例

基本查询

协作头脑风暴

代码分析

UI组件脚手架

UI/UX设计评审

协作工作流示例

命令行选项

环境变量

推荐的项目设置

故障排除

服务器连接问题

自定义命令问题

工具执行问题

常见使用场景

场景1：生成UI组件（自然语言）

场景2：检查可访问性（自然语言）

场景3：问技术问题（自然语言）

场景4：改进现有设计（自然语言）

发展

额外资源

许可证

相关 MCP

TailwindCSS工具服务器

GSAP动画生成工具

前端开发工具集

多模型咨询工具

模型上下文协议服务器

Ant Design 组件文档服务