MCP 工具速查

工具列表

工具名称	说明	已使用	评价
shadcn-mcp	官方 shadcn/ui 组件 MCP，支持在 AI 对话中直接查询和生成 shadcn 组件代码	-	官方出品，组件查询方便，适合搭配 v0/Cursor 使用
semgrep-mcp	快速、确定性的静态分析工具，支持安全扫描和代码规则检查	-	规则库丰富，扫描速度快，适合 CI 集成安全检查
Neon MCP	免费云端 Postgres 数据库，提供 MCP 接口直接操作数据库	-	免费额度足够开发测试，serverless 架构免运维
Supabase MCP	Supabase BaaS 平台的 MCP 接口，管理数据库、Auth、Storage 等	-	全功能 BaaS，文档完善，社区活跃
Figma MCP	Figma 设计稿 MCP，可读取设计文件结构和样式信息	-	设计转代码的桥梁，需要 Figma API token
context7	实时文档查询 MCP，为 AI 提供最新的库/框架文档	-	解决 AI 知识过时问题，推荐日常使用
Ref MCP	代码引用和文档搜索工具	-	辅助代码理解和文档查找
EdgeOne Pages MCP	腾讯 EdgeOne 边缘部署平台的 MCP	-	国内部署方案，适合面向国内用户的项目
Stripe MCP	Stripe 支付平台 MCP，管理支付、订阅、客户等	-	电商/SaaS 项目必备，API 封装完善

设置指南

通用 MCP 配置步骤

1. 获取 MCP server 包（npm/pip/docker）
2. 在客户端（Claude Desktop / Cursor / VS Code）配置 MCP server
3. 重启客户端使配置生效

Claude Desktop 配置示例

// ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
// %APPDATA%\Claude\claude_desktop_config.json (Windows)
{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "context7-mcp"]
    },
    "semgrep": {
      "command": "semgrep",
      "args": ["mcp"]
    }
  }
}

Claude Code 配置

# 添加 MCP server
claude mcp add context7 -- npx -y context7-mcp

# 列出已配置的 MCP
claude mcp list

# 移除 MCP
claude mcp remove context7

VS Code 配置

在 .vscode/mcp.json 或全局设置中配置，格式与 Claude Desktop 类似。

常用命令

# Claude Code MCP 管理
claude mcp add <name> -- <command> [args...]
claude mcp list
claude mcp remove <name>

# 测试 MCP server 是否正常
npx @modelcontextprotocol/inspector <command> [args...]

选型建议

• 日常开发：Context7（实时文档）+ shadcn-mcp（UI 组件）
• 安全审计：semgrep-mcp
• 全栈项目：Supabase MCP 或 Neon MCP
• 设计协作：Figma MCP
• 国内部署：EdgeOne Pages MCP

Related notes

• MCP MOC
• MCP
• MCP 客户端配置指南