Claude Code 实战课

主题

2.3 MCP — 让 Claude Code 连接外部世界 ​

学习目标：理解 MCP 的概念和价值；了解最实用的三类 MCP 服务；学会安装和配置你的第一个 MCP 服务。

MCP 是什么 ​

一句话：MCP 是给 AI 装"手"的协议。

没有 MCP 的 Claude Code，像一个被关在房间里的天才——脑子很好使，但只能处理你递给它的文件。它不能上网搜资料，不能查数据库，不能调用外部 API，不能操作 GitHub。

有了 MCP（Model Context Protocol，模型上下文协议），Claude Code 就能像人一样使用各种工具：打开浏览器查东西、连上数据库跑 SQL、在 GitHub 上创建 Issue。

[截图: MCP 架构示意图 — Claude Code 在中间，四周连接着文件系统、浏览器、数据库、GitHub 等图标]

你可以把 MCP 理解成 Claude Code 和外部工具之间的"翻译官"。Claude Code 说"我要查一下这个 GitHub 仓库的 Issue 列表"，MCP 服务把这句话翻译成 GitHub API 调用，拿到结果后再翻译回来给 Claude Code。

三个最实用的 MCP 服务 ​

MCP 生态已经有几百个服务了，但对大多数开发者来说，掌握以下三个就够应付日常工作了。

1. 文件系统 MCP — 让 AI 操作你的文件夹 ​

Claude Code 本身就能读写当前项目目录内的文件。但文件系统 MCP 让它的能力扩展到任意目录：

  • 在不同项目目录之间复制文件
  • 批量操作你指定的任何目录下的文件
  • 搜索整个磁盘上的特定文件
帮我把 ~/Downloads 里今天下载的所有 PDF 文件移到 ~/Documents/papers/ 目录

[截图: AI 通过文件系统 MCP 执行跨目录文件操作的过程]

没有这个 MCP 时：你得手动打开 Finder / 文件管理器，找到文件，拖拽移动。 有了之后：一句话搞定，AI 还会帮你按日期或类型自动归类。

2. 浏览器 MCP（Puppeteer）— 让 AI 能上网 ​

这个 MCP 让 Claude Code 可以控制一个真实的浏览器：

  • 打开网页、截图
  • 填写表单、点击按钮
  • 抓取页面内容
  • 测试你开发的网页应用
打开我本地跑的 localhost:3000，截个图看看页面效果

[截图: AI 通过 Puppeteer MCP 打开浏览器截图的效果]

没有这个 MCP 时：你说"页面有个 Bug"，AI 只能猜，你得自己截图、描述现象。 有了之后：AI 自己打开浏览器看，直接定位问题。

3. 数据库 MCP — 让 AI 直接查数据 ​

开发后端时最烦的事之一：想看看数据库里的数据对不对，还得打开数据库客户端、写 SQL、查结果。有了数据库 MCP：

帮我查一下 users 表里有多少条记录，最近注册的 5 个用户是谁

AI 直接连上数据库执行查询，把结果格式化展示给你。

[截图: AI 通过数据库 MCP 执行 SQL 查询并展示格式化结果]

没有这个 MCP 时：切换到数据库客户端，写 SQL，跑查询，再回来告诉 AI 结果。 有了之后：AI 自己查，自己分析，直接告诉你结论。

安装你的第一个 MCP 服务 ​

MCP 服务的配置存储在 Claude Code 的设置文件中。有两种配置方式：

方式一：用命令行安装（推荐） ​

Claude Code 提供了便捷的命令来添加 MCP 服务：

bash
# 添加文件系统 MCP
claude mcp add filesystem -s user -- -y @anthropic-ai/mcp-filesystem ~/Documents ~/Downloads

# 添加 Puppeteer 浏览器 MCP
claude mcp add puppeteer -s user -- -y @anthropic-ai/mcp-puppeteer

参数说明：

  • add 后面是你给这个 MCP 起的名字
  • -s user 表示安装到用户级别（所有项目都能用），也可以用 -s project 安装到项目级别
  • -- 后面是 MCP 服务的启动命令和参数

[截图: 执行 claude mcp add 命令后的终端输出，显示 MCP 添加成功]

方式二：手动编辑配置文件 ​

MCP 配置在 ~/.claude.json（用户级别）或项目目录下的 .claude.json（项目级别）中：

json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-filesystem", "/Users/yourname/Documents"]
    },
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-puppeteer"]
    }
  }
}

[截图: ~/.claude.json 文件中的 MCP 配置内容]

验证安装 ​

配置完成后，重新启动 Claude Code，然后问它：

你现在能使用哪些 MCP 工具？

AI 会列出当前可用的所有 MCP 服务和它们提供的工具。如果你刚装的服务出现在列表里，说明安装成功了。

[截图: AI 列出当前可用的 MCP 工具列表]

实战：配置 GitHub MCP ​

GitHub MCP 是开发者最实用的 MCP 之一。配置好之后，你可以让 AI 帮你管理整个 GitHub 工作流。

第一步，安装 GitHub MCP：

bash
claude mcp add github -s user -- -y @anthropic-ai/mcp-github

第二步，配置 GitHub Token。GitHub MCP 需要一个 Personal Access Token 来操作你的仓库：

bash
# 设置环境变量
export GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx

Token 的获取路径：GitHub Settings → Developer settings → Personal access tokens → Generate new token。勾选 repo 权限即可。

[截图: GitHub 生成 Personal Access Token 的页面，勾选 repo 权限]

第三步，验证并使用：

列出我 GitHub 上最近更新的 5 个仓库
帮我在 my-project 仓库创建一个 Issue，标题是"优化首页加载速度"，
描述里写上具体的性能问题和优化方向
查看 my-project 仓库当前所有 open 状态的 PR

[截图: AI 通过 GitHub MCP 创建 Issue 的完整过程和结果]

不用 GitHub MCP 时：在终端和浏览器之间反复切换，手动到 GitHub 网页上创建 Issue、查看 PR。 用了之后：一句话搞定，而且 AI 能直接结合代码上下文来写 Issue 描述和 PR 说明，内容比你手写的还详细。

效率对比 ​

场景不用 MCP用了 MCP
查看数据库数据切到数据库客户端写 SQL直接问 AI，3 秒出结果
检查页面效果手动打开浏览器截图描述AI 自己看自己改
创建 GitHub Issue切到浏览器手动填写一句话，AI 结合代码自动生成
跨目录文件操作打开文件管理器手动操作自然语言描述，批量完成
上下文切换次数每个操作都要切窗口始终留在 Claude Code 里

去哪里找更多 MCP？ ​

MCP 生态发展非常快，已经有几百个可用的 MCP 服务。下面是几个主要的 MCP 发现平台：

MCP 市场/目录 ​

平台地址说明
MCP.somcp.so最大的 MCP 目录站，可搜索、分类浏览，每个 MCP 都有安装说明
Smitherysmithery.aiMCP 服务市场，支持一键安装，有评分和评论
Glama MCP Directoryglama.ai/mcp/serversMCP 服务目录，按类别分类
PulseMCPpulsemcp.comMCP 生态追踪站，收录最新的 MCP 服务
MCP Hubmcphub.ioMCP 聚合平台，搜索和发现 MCP 服务
Awesome MCP ServersGitHubGitHub 上的 MCP 精选列表，23K+ stars

按类别推荐 ​

开发工具类：

  • GitHub MCP — Git 仓库/Issue/PR 管理
  • GitLab MCP — GitLab 集成
  • Sentry MCP — 错误监控
  • Linear MCP — 项目管理
  • Vercel MCP — 部署管理

数据库类：

  • PostgreSQL MCP — 直连 PG 数据库
  • Supabase MCP — Supabase 全功能集成
  • Neon MCP — Neon 数据库操作
  • Redis MCP — Redis 缓存操作

浏览器/网页类：

  • Puppeteer MCP — 浏览器自动化
  • Fetch MCP — 网页抓取
  • Browserbase MCP — 云端浏览器

AI/知识类：

  • Context7 MCP — 实时查询库/框架文档（推荐！问 API 用法再也不用翻文档）
  • Memory MCP — 知识图谱记忆
  • Exa MCP — AI 搜索引擎

办公/协作类：

  • Slack MCP — Slack 消息管理
  • Notion MCP — Notion 页面操作
  • Google Drive MCP — Google 文档操作

建议：不要一口气装太多。先装 文件系统 + Puppeteer + GitHub + Context7 这四个，覆盖日常 80% 的场景。需要什么再去市场里找。

小结 ​

  • MCP 是让 Claude Code 连接外部世界的协议，给 AI 装上了"手"
  • 三大最实用的 MCP：文件系统、浏览器 Puppeteer、数据库
  • 安装方式：claude mcp add 命令行安装，或手动编辑 ~/.claude.json
  • GitHub MCP 是开发者必装的 MCP
  • 去 mcp.so / smithery.ai / awesome-mcp-servers 找更多 MCP
  • 不要贪多，先装 4 个核心的，需要再加

用 Claude Code 构建，用 VitePress 驱动

© 2026 Claude Code 实战课