MCP Servers 详解

MCP（Model Context Protocol）是 AI 的扩展接口标准，通过添加 MCP 服务器可以扩展 Claude Code 获取外部工具、资源、服务的能力。

一、什么是 MCP？

核心概念

MCP（Model Context Protocol） 是 Anthropic 推出的 AI 扩展接口标准，具有以下特点：

标准化接口：统一的协议标准
可扩展性：动态添加外部能力
模块化：每个 MCP 服务器提供特定功能
安全性：通过认证和权限控制

MCP 架构

┌─────────────────────────────────────────────────────────────────┐
│                         Claude Code                             │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐           │
│  │ MCP     │  │ MCP     │  │ MCP     │  │ MCP     │          │
│  │ Client  │→ │ Server  │→ │ Server  │→ │ Server  │→ ...     │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘           │
│       ↓           ↓           ↓           ↓                    │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐           │
│  │ GitHub  │  │Browser  │  │Database │  │Web      │          │
│  │ API     │  │DevTools │  │         │  │Search   │          │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘           │
└─────────────────────────────────────────────────────────────────┘

二、常用 MCP 服务器

浏览器开发工具

| MCP Server | 功能 | Star 数 |
|-------------|------|---------|
| chrome-devtools-mcp | 浏览器自动化，26 个工具 | 18.5k |

GitHub 集成

| MCP Server | 功能 | Star 数 |
|-------------|------|---------|
| github-mcp | GitHub API 集成 | 10k+ |

数据库操作

| MCP Server | 功能 | Star 数 |
|-------------|------|---------|
| postgres-mcp | PostgreSQL 数据库操作 | 5k+ |

文件系统

| MCP Server | 功能 | Star 数 |
|-------------|------|---------|
| filesystem-mcp | 增强文件系统操作 | 3k+ |

网络搜索

| MCP Server | 功能 | Star 数 |
|-------------|------|---------|
| web-search-mcp | 网络搜索功能 | 2k+ |

其他 MCP 服务器

| MCP Server | 功能 |
|-------------|------|
| filesystem | 文件系统操作增强 |
| memory | 知识图谱和记忆管理 |
| everything | 桌面搜索集成 |
| puppeteer | 浏览器自动化 |
| sequential-thinking | 顺序思考增强 |

三、安装 MCP 服务器

方式一：命令行安装

# 安装 Chrome DevTools MCP
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

# 安装 GitHub MCP
claude mcp add github npx -y @modelcontextprotocol/server-github

# 安装 PostgreSQL MCP
claude mcp add postgres npx -y @modelcontextprotocol/server-postgres

# 安装文件系统 MCP
claude mcp add filesystem npx -y @modelcontextprotocol/server-filesystem

# 安装网络搜索 MCP
claude mcp add web-search npx -y @modelcontextprotocol/server-web-search

方式二：配置文件安装

编辑 ~/.claude/mcp.json：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"],
      "disabled": false
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "POSTGRES_CONNECTION_STRING": "postgresql://user:password@localhost:5432/db"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem"],
      "allowedRoots": ["/home/user/projects"]
    }
  }
}

方式三：使用 MCP Builder

# 安装 MCP Builder
npm install -g @anthropics/mcp-builder

# 创建新的 MCP 服务器
mcp-builder create my-mcp-server

四、验证安装

查看已安装的 MCP 服务器

# 在 Claude Code 中
/mcp

# 或通过命令行
claude mcp list

测试 MCP 服务器

# 测试特定 MCP 服务器
claude mcp test chrome-devtools

# 测试所有 MCP 服务器
claude mcp test all

查看 MCP 服务器状态

claude mcp status

五、Chrome DevTools MCP 详解

安装

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

26 个内置工具

| 工具名称 | 功能描述 |
|----------|----------|
| chrome_navigate | 导航到指定 URL |
| chrome_screenshot | 截取页面截图 |
| chrome_click | 点击元素 |
| chrome_fill | 填写表单 |
| chrome_select | 选择元素 |
| chrome_evaluate | 执行 JavaScript |
| chrome_hover | 鼠标悬停 |
| chrome_drag | 拖拽元素 |
| chrome_press_key | 按键盘按键 |
| chrome_scroll | 滚动页面 |
| chrome_go_back | 返回上一页 |
| chrome_go_forward | 前进一页 |
| chrome_refresh | 刷新页面 |
| chrome_new_tab | 打开新标签页 |
| chrome_close_tab | 关闭标签页 |
| chrome_switch_tab | 切换标签页 |
| chrome_get_tabs | 获取所有标签页 |
| chrome_get_cookies | 获取 cookies |
| chrome_set_cookies | 设置 cookies |
| chrome_delete_cookies | 删除 cookies |
| chrome_get_local_storage | 获取 localStorage |
| chrome_set_local_storage | 设置 localStorage |
| chrome_delete_local_storage | 删除 localStorage |
| chrome_get_session_storage | 获取 sessionStorage |
| chrome_set_session_storage | 设置 sessionStorage |
| chrome_execute_script | 执行脚本 |
| chrome_network | 网络请求监控 |

使用示例

# 在 Claude Code 中
用 Chrome 浏览器打开 https://example.com,然后完成以下任务:
1. 截取页面截图
2. 提取所有链接
3. 分析页面结构
4. 获取页面性能数据

实战案例

案例 1：自动化表单填写

使用 Chrome DevTools MCP 完成以下操作:
1. 打开 https://example.com/form
2. 填写用户名: testuser
3. 填写邮箱: test@example.com
4. 点击提交按钮
5. 截图保存结果

案例 2：网页数据提取

使用 Chrome DevTools MCP:
1. 打开 https://news.example.com
2. 提取所有文章标题
3. 提取所有链接地址
4. 生成结构化数据报告

六、GitHub MCP 详解

安装

claude mcp add github npx -y @modelcontextprotocol/server-github

配置

需要设置 GitHub Token：

# 环境变量方式
export GITHUB_TOKEN=your_github_token

# 或在配置文件中
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here"
      }
    }
  }
}

功能列表

| 工具名称 | 功能描述 |
|----------|----------|
| github_get_user | 获取用户信息 |
| github_get_repo | 获取仓库信息 |
| github_list_repos | 列出用户仓库 |
| github_search_repos | 搜索仓库 |
| github_create_issue | 创建 Issue |
| github_list_issues | 列出 Issues |
| github_get_issue | 获取 Issue 详情 |
| github_close_issue | 关闭 Issue |
| github_create_pull_request | 创建 PR |
| github_list_pull_requests | 列出 PRs |
| github_get_pull_request | 获取 PR 详情 |
| github_merge_pull_request | 合并 PR |
| github_create_branch | 创建分支 |
| github_get_file | 获取文件内容 |
| github_create_or_update_file | 创建或更新文件 |
| github_delete_file | 删除文件 |
| github_list_commits | 列出提交 |
| github_get_commit | 获取提交详情 |
| github_create_release | 创建 Release |

使用示例

# 查看仓库信息
使用 GitHub MCP 查看 anthropics/claude-code 仓库的最近 10 个 issues

# 创建 Issue
使用 GitHub MCP 在当前仓库创建一个新的 Issue:
标题: "功能建议：添加 X 功能"
内容: "详细描述..."

# 管理 PR
使用 GitHub MCP 审查最近提交的 PR，并添加评论

七、PostgreSQL MCP 详解

安装

claude mcp add postgres npx -y @modelcontextprotocol/server-postgres

配置

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "POSTGRES_CONNECTION_STRING": "postgresql://user:password@localhost:5432/dbname"
      }
    }
  }
}

功能列表

| 工具名称 | 功能描述 |
|----------|----------|
| postgres_query | 执行 SQL 查询 |
| postgres_list_tables | 列出所有表 |
| postgres_describe_table | 描述表结构 |
| postgres_list_indexes | 列出索引 |
| postgres_get_schema | 获取数据库 schema |

使用示例

# 列出所有表
使用 PostgreSQL MCP 列出当前数据库的所有表

# 查询数据
使用 PostgreSQL MCP 查询 users 表中最近 10 条记录

# 分析表结构
使用 PostgreSQL MCP 分析 orders 表的结构

八、MCP 服务器管理

启用/禁用 MCP 服务器

# 启用
claude mcp enable chrome-devtools

# 禁用
claude mcp disable chrome-devtools

更新 MCP 服务器

claude mcp update chrome-devtools

卸载 MCP 服务器

claude mcp remove chrome-devtools

配置 MCP 服务器

claude mcp configure chrome-devtools --option value

九、最佳实践

1. 安全性配置

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here"
      },
      "permissions": {
        "read": ["repos/*"],
        "write": ["repos/*"]
      }
    }
  }
}

2. 资源限制

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem"],
      "allowedRoots": ["/home/user/projects"],
      "maxResults": 100
    }
  }
}

3. 错误处理

# 测试 MCP 连接
claude mcp test <server-name>

# 查看 MCP 日志
claude mcp logs <server-name>

# 调试 MCP 问题
claude mcp debug <server-name>

十、常见问题

问题 1：MCP 服务器无法启动

可能原因：

Node.js 版本不兼容
依赖未安装
端口被占用
权限不足

解决方案：

# 检查 Node.js 版本
node -v

# 重新安装
claude mcp remove <server-name>
claude mcp add <server-name>

# 查看日志
claude mcp logs <server-name>

问题 2：认证失败

可能原因：

Token 过期
Token 权限不足
Token 格式错误

解决方案：

# 检查 Token
echo $GITHUB_TOKEN

# 更新 Token
claude mcp configure github --env.GITHUB_TOKEN=new_token

问题 3：连接超时

可能原因：

网络问题
服务器地址错误
防火墙阻止

解决方案：

# 测试网络连接
ping api.github.com

# 检查配置
cat ~/.claude/mcp.json

# 查看连接状态
claude mcp status

MCP 是 Claude Code 强大的扩展机制，通过 MCP 可以为 Claude Code 添加各种外部能力，极大地扩展了其应用范围。

MCP Servers 详解

一、什么是 MCP？

核心概念

MCP 架构

二、常用 MCP 服务器

浏览器开发工具

GitHub 集成

数据库操作

文件系统

网络搜索

其他 MCP 服务器

三、安装 MCP 服务器

方式一：命令行安装

方式二：配置文件安装

方式三：使用 MCP Builder

四、验证安装

查看已安装的 MCP 服务器

测试 MCP 服务器

查看 MCP 服务器状态

五、Chrome DevTools MCP 详解

安装

26 个内置工具

使用示例

实战案例

六、GitHub MCP 详解

安装

配置

功能列表

使用示例

七、PostgreSQL MCP 详解

安装

配置

功能列表

使用示例

八、MCP 服务器管理

启用/禁用 MCP 服务器

更新 MCP 服务器

卸载 MCP 服务器

配置 MCP 服务器

九、最佳实践

1. 安全性配置

2. 资源限制

3. 错误处理

十、常见问题

问题 1：MCP 服务器无法启动

问题 2：认证失败

问题 3：连接超时

参考资源

欢迎登录