MCP (Model Context Protocol)

MCP 是 Anthropic 推出的模型上下文协议，允许 AI 工具连接外部数据源和工具。

配置方式

各客户端均通过命令行管理 MCP 服务器，具体安装命令见各工具章节。

客户端	管理命令
Claude Code	`claude mcp add <name> -- <command>` (stdio) `claude mcp add -t http <name> <url>` (http)
Codex CLI	`codex mcp add <name> -- <command>` (stdio) `codex mcp add --url <url> <name>` (http)
Gemini CLI	`gemini mcp add <name> -- <command>` (stdio) `gemini mcp add -t http <name> <url>` (http)

文档与知识

context7

获取最新的库文档，避免 AI 使用过时的 API。

GitHub: https://github.com/upstash/context7

一键安装:

Claude Code

bash

npx -y @anthropic-ai/claude-code mcp add context7 -- npx -y @upstash/context7-mcp

Codex CLI

bash

codex mcp add context7 -- npx -y @upstash/context7-mcp

Gemini CLI

bash

gemini mcp add context7 -- npx -y @upstash/context7-mcp

CC-Switch 配置:

json

{
  "command": "npx",
  "args": ["-y", "@upstash/context7-mcp"]
}

功能:

resolve-library-id - 解析库 ID
query-docs - 查询库文档

deepwiki

获取 GitHub 开源项目的 AI 生成文档，免费远程服务，无需认证。

官方文档: https://docs.devin.ai/work-with-devin/deepwiki-mcp

一键安装:

Claude Code

bash

claude mcp add -s user -t http deepwiki https://mcp.deepwiki.com/mcp

Codex CLI

bash

codex mcp add --url https://mcp.deepwiki.com/mcp deepwiki

Gemini CLI

bash

gemini mcp add -t http deepwiki https://mcp.deepwiki.com/mcp

CC-Switch 配置:

json

{
  "type": "http",
  "url": "https://mcp.deepwiki.com/mcp"
}

功能:

read_wiki_structure - 获取仓库文档结构
read_wiki_contents - 读取文档内容
ask_question - 向仓库提问（AI 驱动的上下文回答）

网络搜索

Tavily

AI 驱动的实时网络搜索引擎，专为 AI Agent 优化。

⚠️ 前置条件：

API Key - 访问 https://app.tavily.com/home 注册免费账户获取

官方文档: https://docs.tavily.com/documentation/mcp

GitHub: https://github.com/tavily-ai/tavily-mcp

一键安装:

Claude Code

bash

claude mcp add -s user -t http tavily "https://mcp.tavily.com/mcp/?tavilyApiKey=your-key"

Codex CLI

bash

codex mcp add --url "https://mcp.tavily.com/mcp/?tavilyApiKey=your-key" tavily

Gemini CLI

bash

gemini mcp add -t http tavily "https://mcp.tavily.com/mcp/?tavilyApiKey=your-key"

CC-Switch 配置:

json

{
  "type": "http",
  "url": "https://mcp.tavily.com/mcp/?tavilyApiKey=your-key"
}

功能:

tavily-search - 实时网络搜索
tavily-extract - 网页内容智能提取

exa

AI 原生搜索引擎，提供高质量网络搜索结果。

⚠️ 前置条件：

API Key - 访问 https://exa.ai/ 注册账户获取

GitHub: https://github.com/exa-labs/exa-mcp-server

一键安装:

Claude Code

bash

npx -y @anthropic-ai/claude-code mcp add exa -e EXA_API_KEY=your-key -- npx -y exa-mcp-server

Codex CLI

bash

codex mcp add exa --env EXA_API_KEY=your-key -- npx -y exa-mcp-server

Gemini CLI

bash

gemini mcp add exa -e EXA_API_KEY=your-key -- npx -y exa-mcp-server

CC-Switch 配置:

json

{
  "command": "npx",
  "args": ["-y", "exa-mcp-server"],
  "env": {
    "EXA_API_KEY": "your-exa-api-key"
  }
}

功能:

web_search_exa - 网络搜索
company_research_exa - 公司研究
get_code_context_exa - 获取代码上下文

GrokSearch

基于 Grok + Tavily 的实时网络搜索 MCP 服务器，支持搜索、抓取、站点映射与配置诊断。

⚠️ 前置条件：

Python 3.10+
uv - 参考 https://docs.astral.sh/uv/getting-started/installation/
Grok API 配置 - 需要 GROK_API_URL 与 GROK_API_KEY（OpenAI 兼容格式接口）
Tavily API 配置（可选） - TAVILY_API_KEY、TAVILY_API_URL；未配置时 web_fetch 和 web_map 不可用

GitHub: https://github.com/GuDaStudio/GrokSearch

一键安装:

说明：以下使用 grok-with-tavily 分支。

Claude Code

bash

claude mcp add-json grok-search --scope user '{ "type": "stdio", "command": "uvx", "args": [ "--from", "git+https://github.com/GuDaStudio/GrokSearch@grok-with-tavily", "grok-search" ], "env": { "GROK_API_URL": "https://your-api-endpoint.com/v1", "GROK_API_KEY": "your-grok-api-key", "TAVILY_API_KEY": "tvly-your-tavily-key", "TAVILY_API_URL": "https://api.tavily.com" } }'

Codex CLI

bash

codex mcp add grok-search --env GROK_API_URL=https://your-api-endpoint.com/v1 --env GROK_API_KEY=your-grok-api-key --env TAVILY_API_KEY=tvly-your-tavily-key --env TAVILY_API_URL=https://api.tavily.com -- uvx --from git+https://github.com/GuDaStudio/GrokSearch@grok-with-tavily grok-search

Gemini CLI

bash

gemini mcp add grok-search -e GROK_API_URL=https://your-api-endpoint.com/v1 -e GROK_API_KEY=your-grok-api-key -e TAVILY_API_KEY=tvly-your-tavily-key -e TAVILY_API_URL=https://api.tavily.com -- uvx --from git+https://github.com/GuDaStudio/GrokSearch@grok-with-tavily grok-search

CC-Switch 配置:

json

{
  "command": "uvx",
  "args": ["--from", "git+https://github.com/GuDaStudio/GrokSearch@grok-with-tavily", "grok-search"],
  "env": {
    "GROK_API_URL": "https://your-api-endpoint.com/v1",
    "GROK_API_KEY": "your-grok-api-key",
    "TAVILY_API_KEY": "tvly-your-tavily-key",
    "TAVILY_API_URL": "https://api.tavily.com"
  }
}

功能:

web_search - 实时网络搜索
web_fetch - 网页内容抓取（Tavily Extract）
web_map - 站点映射（Tavily Map）
get_config_info - 配置与连通性检测
switch_model - 切换 Grok 模型
toggle_builtin_tools - 切换官方 WebSearch/WebFetch 的启用状态

代码检索

ace-tool

代码库索引、语义搜索和 AI Prompt 增强工具。

⚠️ 前置条件：

后端服务 - 需要配置 --base-url 和 --token 参数连接后端服务

GitHub: https://github.com/eastxiaodong/ace-tool

一键安装:

Claude Code

bash

claude mcp add ace-tool -- npx -y ace-tool@latest --base-url <URL> --token <TOKEN>

Codex CLI

bash

codex mcp add ace-tool -- npx -y ace-tool@latest --base-url <URL> --token <TOKEN>

Gemini CLI

bash

gemini mcp add ace-tool -- npx -y ace-tool@latest --base-url <URL> --token <TOKEN>

CC-Switch 配置:

json

{
  "command": "npx",
  "args": ["-y", "ace-tool@latest", "--base-url", "<URL>", "--token", "<TOKEN>"]
}

功能:

search_context - 使用自然语言查询定位相关代码
enhance_prompt - 结合代码库上下文增强用户需求（使用 -enhance 触发）

ContextWeaver

语义代码检索引擎，基于 Tree-sitter AST 解析和向量搜索为 AI Agent 提供精准的代码上下文。

⚠️ 前置条件：

Node.js >= 20
API Key - 默认使用 SiliconFlow，在 API Key 管理页面创建（Embedding 和 Rerank 可共用同一个 Key）。也兼容 Jina AI、OpenAI 等 OpenAI 格式 API

GitHub: https://github.com/hsingjui/ContextWeaver

安装与初始化:

bash

# 全局安装
npm install -g @hsingjui/contextweaver

# 初始化配置（创建 ~/.contextweaver/.env）
contextweaver init

编辑 ~/.contextweaver/.env：

env

# Embedding（必需）
EMBEDDINGS_API_KEY=your-key
EMBEDDINGS_BASE_URL=https://api.siliconflow.cn/v1/embeddings
EMBEDDINGS_MODEL=BAAI/bge-m3
EMBEDDINGS_DIMENSIONS=1024

# Reranker（必需）
RERANK_API_KEY=your-key
RERANK_BASE_URL=https://api.siliconflow.cn/v1/rerank
RERANK_MODEL=BAAI/bge-reranker-v2-m3
RERANK_TOP_N=20

索引与搜索:

bash

# 索引代码库
contextweaver index /path/to/project

# 语义搜索
cw search --information-request "用户认证流程是如何实现的？"

# 带技术术语精确过滤
cw search --information-request "数据库连接逻辑" --technical-terms "DatabasePool,Connection"

一键安装:

Claude Code

bash

claude mcp add contextweaver -- contextweaver mcp

Codex CLI

bash

codex mcp add contextweaver -- contextweaver mcp

Gemini CLI

bash

gemini mcp add contextweaver -- contextweaver mcp

CC-Switch 配置:

json

{
  "command": "contextweaver",
  "args": ["mcp"]
}

功能:

codebase-retrieval - 语义代码检索（参数：repo_path、information_request、technical_terms）

支持语言: JavaScript, TypeScript, Python, Go, Java, Rust

设计理念

意图与术语分离：information_request 描述"做什么"，technical_terms 过滤"叫什么"。工具只负责定位，跨文件探索由 Agent 自主发起。

设计工具

Pencil

无限设计画布，直接集成在 IDE 中的矢量设计工具。

⚠️ 前置条件：

Pencil 桌面端（macOS / Windows / Linux）
MCP 服务器在打开 Pencil 时自动启动，无需手动配置

官网: https://pencil.dev/

文档: https://docs.pencil.dev/

安装步骤:

下载并安装 Pencil 桌面端（macOS / Windows / Linux）
打开 Pencil，MCP 服务器将自动运行

验证 MCP 连接:

Cursor: Settings → Tools & MCP → 确认 Pencil 出现在列表中
Claude Code: 执行 /mcp → 确认 Pencil 在列表中

功能:

get_editor_state - 获取当前编辑器状态
open_document - 打开或创建 .pen 文件
batch_get - 批量检索设计节点
batch_design - 批量执行设计操作（插入/复制/更新/替换/移动/删除）
get_screenshot - 获取设计截图
snapshot_layout - 获取布局快照
get_variables / set_variables - 管理设计变量和主题

特点

设计即代码：.pen 文件与代码库同步
AI 辅助：支持 AI 助手保持设计与实现的一致性
组件化：支持可复用设计组件

Figma

Figma 官方 MCP 服务器，支持从设计稿生成代码、提取变量与组件上下文。

官方文档: https://developers.figma.com/docs/figma-mcp-server/

一键安装:

Claude Code（远程模式，推荐）

bash

claude mcp add -s user -t http figma https://mcp.figma.com/mcp

Claude Code（桌面模式，需启动 Figma 桌面端）

bash

claude mcp add -s user -t http figma-desktop http://127.0.0.1:3845/mcp

CC-Switch 配置:

json

{
  "type": "http",
  "url": "https://mcp.figma.com/mcp"
}

功能:

get_design_context - 获取设计上下文
get_variable_defs - 获取变量定义
get_code_connect_map - 获取 Code Connect 映射
get_screenshot - 获取设计截图
get_metadata - 获取设计元数据

认证方式

官方 MCP 使用 OAuth 登录授权，首次使用时会弹出认证流程，无需手动配置 API Key。

远程 vs 桌面模式

远程模式: 通过 Figma 链接访问设计稿，无需安装桌面端
桌面模式: 支持选中式上下文，需启动 Figma 桌面应用

MasterGo

MasterGo 官方 MCP 服务器，国产设计工具集成。

⚠️ 前置条件：

MasterGo 团队版或以上账号
设计文件需在团队项目中（草稿箱文件不可访问）
API Token - 在 MasterGo 获取

官方文档: https://mastergo.com/help/MG/MCP

GitHub: https://github.com/mastergo-design/mastergo-magic-mcp

一键安装:

Claude Code

bash

claude mcp add mastergo -- npx -y @mastergo/magic-mcp --token=YOUR_TOKEN

Codex CLI

bash

codex mcp add mastergo -- npx -y @mastergo/magic-mcp --token=YOUR_TOKEN

Gemini CLI

bash

gemini mcp add mastergo -- npx -y @mastergo/magic-mcp --token=YOUR_TOKEN

CC-Switch 配置:

json

{
  "command": "npx",
  "args": ["-y", "@mastergo/magic-mcp", "--token=YOUR_TOKEN", "--url=https://mastergo.com"]
}

功能:

get-dsl - 获取设计文件 DSL 数据
get-component-link - 获取组件文档链接
get-meta - 获取元数据
get-component-workflow - 生成 Vue/React 组件工作流

浏览器自动化

Playwright

Microsoft 官方 Playwright MCP 服务器，通过可访问性树与网页交互，无需截图或视觉模型。

GitHub: https://github.com/microsoft/playwright-mcp

一键安装:

Claude Code

bash

claude mcp add playwright -- npx -y @playwright/mcp@latest

Codex CLI

bash

codex mcp add playwright -- npx -y @playwright/mcp@latest

Gemini CLI

bash

gemini mcp add playwright -- npx -y @playwright/mcp@latest

CC-Switch 配置:

json

{
  "command": "npx",
  "args": ["-y", "@playwright/mcp@latest"]
}

带参数配置:

json

{
  "command": "npx",
  "args": [
    "-y", "@playwright/mcp@latest",
    "--browser=chrome",
    "--headless"
  ]
}

配置选项:

参数	说明
`--browser`	浏览器类型：`chrome`、`firefox`、`webkit`
`--headless`	无头模式运行
`--isolated`	隔离会话模式
`--user-data-dir`	用户数据目录
`--viewport-size`	视口大小，如 `1280x720`

功能:

浏览器自动化（支持 Chrome、Firefox、Webkit）
基于可访问性树的页面交互
PDF 生成和处理
视觉坐标交互
TypeScript 代码生成
会话保存和追踪
浏览器扩展连接模式

特点

Playwright MCP 通过读取浏览器的可访问性树进行交互，比基于截图的自动化更稳定可靠。

chrome-devtools

Chrome 浏览器自动化控制，支持页面操作、网络监控和性能分析。

GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp

一键安装:

Claude Code

bash

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

Codex CLI

bash

codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

Gemini CLI

bash

gemini mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

CC-Switch 配置:

json

{
  "command": "npx",
  "args": ["-y", "chrome-devtools-mcp@latest"]
}

带参数配置:

json

{
  "command": "npx",
  "args": [
    "-y", "chrome-devtools-mcp@latest",
    "--headless",
    "--viewport=1280x720"
  ]
}

配置选项:

参数	说明
`--autoConnect`	自动连接运行中的 Chrome（需 Chrome 144+）
`--browserUrl`	连接到 Chrome 实例的 URL，如 `http://127.0.0.1:9222`
`--headless`	无头模式运行
`--isolated`	使用临时用户数据目录
`--userDataDir`	指定用户数据目录路径
`--viewport`	视口大小，如 `1280x720`
`--channel`	Chrome 渠道：`stable`、`canary`、`beta`、`dev`
`--executablePath`	自定义 Chrome 可执行文件路径
`--proxyServer`	代理服务器配置

功能 (26 个工具):

分类	工具
页面管理	`navigate_page`, `new_page`, `close_page`, `list_pages`, `select_page`, `wait_for`
元素交互	`click`, `fill`, `fill_form`, `hover`, `drag`, `press_key`, `upload_file`, `handle_dialog`
页面检查	`take_screenshot`, `take_snapshot`, `evaluate_script`, `emulate`
视口控制	`resize_page`
网络监控	`list_network_requests`, `get_network_request`
控制台	`list_console_messages`, `get_console_message`
性能分析	`performance_start_trace`, `performance_stop_trace`, `performance_analyze_insight`

MCP (Model Context Protocol) ​

配置方式 ​

文档与知识 ​

context7 ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

deepwiki ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

网络搜索 ​

Tavily ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

exa ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

GrokSearch ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

代码检索 ​

ace-tool ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

ContextWeaver ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

设计工具 ​

Pencil ​

Figma ​

Claude Code（远程模式，推荐） ​

Claude Code（桌面模式，需启动 Figma 桌面端） ​

MasterGo ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

浏览器自动化 ​

Playwright ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

chrome-devtools ​

Claude Code ​

Codex CLI ​

Gemini CLI ​

MCP (Model Context Protocol)

配置方式

文档与知识

context7

Claude Code

Codex CLI

Gemini CLI

deepwiki

Claude Code

Codex CLI

Gemini CLI

网络搜索

Tavily

Claude Code

Codex CLI

Gemini CLI

exa

Claude Code

Codex CLI

Gemini CLI

GrokSearch

Claude Code

Codex CLI

Gemini CLI

代码检索

ace-tool

Claude Code

Codex CLI

Gemini CLI

ContextWeaver

Claude Code

Codex CLI

Gemini CLI

设计工具

Pencil

Figma

Claude Code（远程模式，推荐）

Claude Code（桌面模式，需启动 Figma 桌面端）

MasterGo

Claude Code

Codex CLI

Gemini CLI

浏览器自动化

Playwright

Claude Code

Codex CLI

Gemini CLI

chrome-devtools

Claude Code

Codex CLI

Gemini CLI