Claude Code 通关手册（六）：MCP 协议完全指南，Claude Code 最被低估的能力
Claude Code 通关手册（六）：MCP 协议完全指南，Claude Code 最被低估的能力
前端达人
发布于 2026-03-12 12:49:53
发布于 2026-03-12 12:49:53
这是「Claude Code 通关手册」系列的第 6 篇，共 10 篇。Level 3（扩展篇）第二关。上一篇我们给 Claude 配了"专家团队"，这一篇给它接上"外部世界"。
Claude Code 通关手册（一）：Cursor 用户转 Claude Code，第一天我就后悔了——后悔没早点用
Claude Code 通关手册（二）：权限系统搞明白，效率直接翻倍
Claude Code 通关手册（三）：99%的人不知道的效率秘诀，CLAUDE.md 深度实战
Claude Code 通关手册（四）：3 个自定义命令，让你的 Claude Code 快到飞起
Claude Code 通关手册（五）：子代理系统——给你的 AI 配一个"专家团队"
没有 MCP 的 Claude Code，就像一个被关在房间里的天才。
脑子很好使，代码写得漂亮，但它只能看到你本地的文件。你说"帮我看看 GitHub 上那个 issue"，它做不到。你说"查一下 Next.js 15 的最新 API"，它只能靠训练数据里学过的来猜（可能已经过时了）。你说"帮我连一下数据库查个数"，它更做不到。
装上 MCP 之后，这扇门打开了。
它能直接搜 GitHub issues、创建 PR、查看 CI 状态。它能实时查询任何库的最新文档，不用你手动去翻。它能连上你的数据库、你的项目管理工具、你的 Slack。
这就是从"本地 AI 助手"到"联网 AI 开发平台"的跨越。
今天这篇文章，我带你从零开始配置两个最实用的 MCP Server——GitHub 和 Context7——然后演示一个串联多个 MCP 的完整工作流。
MCP 是什么？——30 秒用"USB 接口"讲明白
MCP 全称 Model Context Protocol（模型上下文协议），是 Anthropic 在 2024 年底推出的开源标准。
这个名字听着挺吓人，但核心概念极简。用一个类比：
USB 是电脑连接外设的标准接口。 键盘、鼠标、U 盘、摄像头——只要遵守 USB 协议，插上就能用。你不需要为每个品牌的鼠标安装不同的驱动。
MCP 是 AI 连接外部工具的标准接口。 GitHub、数据库、浏览器、文档查询——只要遵守 MCP 协议，接上就能用。AI 不需要为每个工具写一套集成代码。
┌──────────────────────────────────────────────────────────┐
│ MCP 之前 vs MCP 之后 │
├──────────────────────────────────────────────────────────┤
│ │
│ MCP 之前（各自为政）： │
│ │
│ AI工具 ─── 自定义接口 ──→ GitHub │
│ AI工具 ─── 另一套接口 ──→ 数据库 │
│ AI工具 ─── 又一套接口 ──→ Slack │
│ AI工具 ─── 再一套接口 ──→ Jira │
│ （每个集成都要单独开发，维护噩梦） │
│ │
│ MCP 之后（统一标准）： │
│ │
│ ┌── GitHub MCP Server │
│ ├── 数据库 MCP Server │
│ AI工具 ────┼── Slack MCP Server │
│ (MCP客户端) ├── Jira MCP Server │
│ └── 任何遵守协议的 Server │
│ （一个协议，接所有工具） │
│ │
└──────────────────────────────────────────────────────────┘
Claude Code 就是一个 MCP 客户端。 你给它装上不同的 MCP Server，它就获得了不同的能力。就像你的电脑插上不同的 USB 设备就能做不同的事情。
目前社区里已经有数百个 MCP Server，覆盖了从 GitHub、Slack、Linear、Sentry、PostgreSQL 到浏览器自动化、文档查询等几乎所有开发场景。
MCP 的三种传输模式
在配置之前，简单了解一下 MCP 的连接方式——这会影响你后面的安装命令：
┌──────────────────────────────────────────────────────────┐
│ 三种传输模式 │
├──────────┬──────────────────┬────────────────────────────┤
│ 模式 │ 工作方式 │ 适用场景 │
├──────────┼──────────────────┼────────────────────────────┤
│ stdio │ MCP Server 作为 │ 绝大多数场景（80%） │
│ （本地） │ 本地子进程运行 │ 安装简单，无需网络 │
├──────────┼──────────────────┼────────────────────────────┤
│ http │ 连接远程 HTTP │ 云端 MCP Server │
│ （远程） │ 服务器 │ 支持 OAuth 认证 │
├──────────┼──────────────────┼────────────────────────────┤
│ sse │ Server-Sent │ 历史模式，正在被 │
│ （历史） │ Events 长连接 │ http 模式替代 │
└──────────┴──────────────────┴────────────────────────────┘
日常开发：stdio 就够了，本地运行，最简单
远程/云端服务：用 http 模式
MCP 管理命令速查
在开始安装之前，先记住这几个管理命令：
# 添加 MCP Server（stdio 模式）
claude mcp add <名称> -- <启动命令>
# 添加 MCP Server（http 远程模式）
claude mcp add --transport http <名称> <URL>
# 查看已安装的 MCP Server
claude mcp list
# 测试 MCP Server 连接
claude mcp get <名称>
# 删除 MCP Server
claude mcp remove <名称>
# 在交互模式中管理（推荐）
/mcp
/mcp 是最友好的方式——在 Claude Code 交互模式中输入，会弹出一个交互式菜单，引导你完成安装、认证和管理。
实战一：安装 GitHub MCP Server
GitHub MCP 是使用频率最高的 MCP Server，也是 GitHub 官方维护的。装上之后，Claude Code 就能直接操作你的 GitHub 仓库。
安装步骤
第一步：生成 GitHub Personal Access Token
去 GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens，创建一个新 Token：
- 仓库权限：选你需要的仓库（或 All repositories）
- 权限范围：Issues（Read/Write）、Pull Requests（Read/Write）、Contents（Read）
生成后复制 Token，保存好。
第二步：安装 MCP Server
有两种方式，选一种：
方式 A——远程模式（推荐，更简单）：
claude mcp add --transport http github \
https://api.githubcopilot.com/mcp \
-H "Authorization: Bearer YOUR_GITHUB_PAT"
方式 B——本地 Docker 模式：
claude mcp add github \
-e GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_GITHUB_PAT \
-- docker run -i --rm \
-e GITHUB_PERSONAL_ACCESS_TOKEN \
ghcr.io/github/github-mcp-server
第三步：验证安装
claude mcp list
# 应该能看到 github 在列表中
claude mcp get github
# 应该显示连接状态正常
GitHub MCP 能做什么？
装好之后，你可以在 Claude Code 中直接：
┌──────────────────────────────────────────────────────────┐
│ GitHub MCP 能力清单 │
├──────────────────────────────────────────────────────────┤
│ │
│ Issues 管理 │
│ ├── "列出 DevPulse 仓库最近的 5 个 open issue" │
│ ├── "创建一个 issue：文章列表页需要分页功能" │
│ └── "把 #47 issue 标记为 closed" │
│ │
│ Pull Request │
│ ├── "为当前分支的改动创建一个 PR 到 main" │
│ ├── "查看 PR #12 的审查评论" │
│ └── "合并 PR #12" │
│ │
│ 仓库信息 │
│ ├── "查看 DevPulse 最近的提交记录" │
│ ├── "搜索仓库里包含 'TODO' 的文件" │
│ └── "读取 README.md 的内容" │
│ │
│ 协作工作流 │
│ ├── "查看 CI 状态，最近的构建有没有失败" │
│ └── "把 @user 添加为 PR 的 reviewer" │
│ │
└──────────────────────────────────────────────────────────┘
DevPulse 实操演示
# 启动 Claude Code，进入 DevPulse 项目
你: 查看 DevPulse 仓库最近的 5 个 open issue
Claude: [调用 GitHub MCP → list_issues]
找到 5 个 open issue：
1. #52: "移动端文章页排版问题" — 2天前
2. #49: "暗色模式切换后闪屏" — 5天前
3. #47: "文章列表页加载慢" — 1周前
4. #45: "评论区需要支持 Markdown" — 2周前
5. #43: "搜索功能偶尔返回空结果" — 3周前
你: 帮我修复 #49 暗色模式闪屏问题，修好后自动提 PR
Claude:
[调用 GitHub MCP → 读取 #49 详情]
[分析本地代码 → 定位到 ThemeProvider 组件]
[修改代码 → 添加 suppressHydrationWarning 和 script 预加载主题]
[执行 git checkout -b fix/dark-mode-flash]
[执行 git commit -m "fix(theme): prevent dark mode flash on page load"]
[调用 GitHub MCP → 创建 PR]
✅ 已创建 PR #53: "Fix dark mode flash on page load"
分支: fix/dark-mode-flash → main
关联 issue: closes #49
注意这个工作流——Claude 在一次对话中完成了：读 GitHub issue → 分析本地代码 → 修改代码 → Git 提交 → 创建 PR → 关联 issue。这在没有 MCP 之前是不可能的。
实战二：安装 Context7 MCP Server
Context7 解决的是另一个痛点——Claude 的训练数据有截止日期。
比如你问它"Next.js 15 的 Server Actions 怎么写"，如果 Next.js 15 是在训练数据截止之后才发布的，Claude 只能靠猜——很可能给你一个旧版本的语法。
Context7 能实时查询任何库的最新官方文档，把最新的 API 用法直接注入到 Claude 的上下文中。
安装步骤
方式 A——远程模式（推荐）：
claude mcp add --transport http context7 https://mcp.context7.com/mcp
方式 B——本地模式：
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
如果需要更高频率限制，可以去 context7.com/dashboard 免费注册一个 API Key，然后：
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest --api-key YOUR_API_KEY
Context7 实操演示
你: 我要在 DevPulse 里实现 Server Actions 来处理表单提交，
use context7 查一下 Next.js 最新的 Server Actions 语法
Claude: [调用 Context7 MCP → resolve-library-id → query-docs]
根据 Next.js 最新文档，Server Actions 的当前语法是...
[给出最新的、准确的代码示例]
关键词 use context7 是触发 Context7 查询的信号。你也可以在 CLAUDE.md 中加一条规则让它自动触发：
## MCP 使用规则
- 涉及到框架 API 语法时，自动使用 Context7 查询最新文档
另一个实用场景
你: DevPulse 准备从 Prisma 5 升级到 Prisma 6，
use context7 查一下有什么 breaking changes，
然后检查我们的代码哪些地方需要改
Claude:
[调用 Context7 MCP → 查询 Prisma 6 迁移文档]
[读取本地 prisma/schema.prisma 和相关代码]
[对比分析]
Prisma 6 主要的 breaking changes：
1. ... 你的代码中有 3 处需要修改...
没有 Context7，你得自己去翻文档、找 migration guide、然后告诉 Claude。有了它，一句话搞定。
实战三：远程 MCP（Remote MCP）
2025 年中，Claude Code 加入了对远程 MCP 的原生支持。这意味着很多 MCP Server 不再需要你在本地运行——直接连远程 URL 就行。
远程 MCP 的优势
┌──────────────────────────────────────────────────────────┐
│ 本地 vs 远程 MCP │
├──────────────┬───────────────────────────────────────────┤
│ 本地 (stdio) │ 远程 (http) │
├──────────────┼───────────────────────────────────────────┤
│ 需要本地装依赖│ 零安装，连 URL 就行 │
│ Node.js/Docker│ 浏览器 OAuth 认证 │
│ 更新要手动重装│ 服务端自动更新 │
│ 离线可用 │ 需要网络 │
│ 适合开发环境 │ 适合 SaaS 类工具 │
└──────────────┴───────────────────────────────────────────┘
OAuth 认证流程
很多远程 MCP 需要 OAuth 认证（比如 Linear、Sentry 等）。流程很简单：
# 1. 添加远程 MCP Server
claude mcp add --transport http linear https://mcp.linear.app/mcp
# 2. 在 Claude Code 交互模式中
/mcp
# 选择 linear → 认证 → 浏览器自动弹出 OAuth 页面
# 3. 在浏览器中授权后，自动回到 Claude Code
# 认证完成，即可使用
整个过程跟你在网站上"用 GitHub 登录"是同一个体验——点一下授权按钮就搞定了。
多 MCP 组合工作流：这才是真正的威力
单个 MCP 已经很有用了，但多个 MCP 串联起来，效果是指数级的。
来看一个完整的场景：
┌──────────────────────────────────────────────────────────┐
│ 多 MCP 联动工作流示例 │
├──────────────────────────────────────────────────────────┤
│ │
│ 你: 检查 DevPulse 最近的 issues，找到关于性能的那个， │
│ 查一下 Next.js 最新的性能优化方案，然后帮我修复 │
│ │
│ Claude Code 的执行过程： │
│ │
│ Step 1 [GitHub MCP] │
│ 搜索 issues → 找到 #47: "文章列表页加载慢" │
│ 读取 issue 详情 → 用户反馈首屏 3.5s │
│ ↓ │
│ Step 2 [Context7 MCP] │
│ 查询 Next.js 性能优化文档 │
│ → 找到 ISR + Streaming + Suspense 方案 │
│ ↓ │
│ Step 3 [本地文件系统] │
│ 分析 src/app/page.tsx │
│ → 定位到 ArticleList 组件的数据获取方式 │
│ → 发现全量加载无分页，无增量渲染 │
│ ↓ │
│ Step 4 [代码修改] │
│ 应用 ISR + Suspense 优化 │
│ 添加分页 + Streaming 渲染 │
│ ↓ │
│ Step 5 [GitHub MCP] │
│ 创建 PR → 关联 #47 │
│ 附带性能对比说明 │
│ │
│ 一句话 → 五个步骤 → 跨三个系统协作 │
│ │
└──────────────────────────────────────────────────────────┘
这个工作流跨越了 GitHub（issue 管理）、Context7（文档查询）、本地文件系统（代码分析和修改）三个系统。在没有 MCP 的时代，你需要自己在浏览器里查 issue、在另一个标签页里翻文档、在编辑器里改代码、回到浏览器提 PR——至少四次窗口切换。
现在你只需要说一句话。
推荐安装清单：5 个最实用的 MCP Server
社区里 MCP Server 有几百个，但你不需要全装。根据前端开发的日常需求，推荐这五个：
┌──────────────────────────────────────────────────────────┐
│ 前端开发者 MCP Server 推荐 │
├─────────────┬────────────────┬───────────────────────────┤
│ MCP Server │ 能力 │ 安装命令 │
├─────────────┼────────────────┼───────────────────────────┤
│ GitHub │ Issue/PR/仓库 │ claude mcp add │
│ (官方) │ 管理 │ --transport http github │
│ │ │ https://api.github... │
├─────────────┼────────────────┼───────────────────────────┤
│ Context7 │ 实时库文档 │ claude mcp add context7 │
│ (Upstash) │ 查询 │ -- npx -y @upstash/ │
│ │ │ context7-mcp@latest │
├─────────────┼────────────────┼───────────────────────────┤
│ Playwright │ 浏览器自动化 │ claude mcp add │
│ (微软) │ 截图/测试 │ playwright -- npx -y │
│ │ │ @anthropic-ai/... │
├─────────────┼────────────────┼───────────────────────────┤
│ PostgreSQL │ 数据库查询 │ claude mcp add db │
│ (DBHub) │ 和分析 │ -- npx -y @bytebase/ │
│ │ │ dbhub --dsn "pg://..." │
├─────────────┼────────────────┼───────────────────────────┤
│ Sentry │ 错误监控 │ 远程 OAuth 模式 │
│ (官方) │ 和日志分析 │ 通过 /mcp 配置 │
└─────────────┴────────────────┴───────────────────────────┘
安装原则：
• 不要一次装太多——超过 10 个 MCP 会明显占用上下文窗口
• 从 GitHub + Context7 开始，这两个覆盖了最高频的需求
• 根据你的实际工作流按需添加
关于上下文消耗的重要提醒：每个 MCP Server 的工具定义会占用你的上下文窗口空间。2026 年初 Claude Code 引入了 MCP Tool Search 功能，能按需加载工具定义（减少约 85% 的上下文消耗），但如果你安装了过多 MCP Server，还是会影响可用上下文。建议日常保持在 5-8 个以内。
安全注意事项：四条红线
MCP 让 Claude Code 拥有了强大的外部访问能力，但能力越大责任越大。
红线一：只安装你信任的 MCP Server
MCP Server 本质上是一段代码，它能访问你授权的资源。只安装官方维护的、开源可审计的、社区广泛使用的 Server。来路不明的第三方 Server 可能存在安全风险。
红线二：了解每个 MCP Server 的数据访问范围
GitHub MCP 需要的是你的代码仓库权限。数据库 MCP 需要的是你的数据库读写权限。在授权之前想清楚：它能看到什么数据？它能做什么操作？Token 的权限范围尽可能收窄。
红线三：生产数据库只给只读权限
如果你要连 MCP 查生产数据库，务必使用只读账号。永远不要把写权限给到 AI 能触及的地方——一个错误的 DELETE 语句就够你喝一壶。
红线四：用 --scope 控制 MCP 的生效范围
# 项目级：只在当前项目可用（推荐）
claude mcp add github --scope local ...
# 用户级：所有项目都可用
claude mcp add github --scope user ...
项目专属的 MCP（比如特定项目的数据库）用 --scope local，通用型的（比如 Context7 文档查询）用 --scope user。不要无脑全局安装所有东西。
本篇小结
三个核心收获：
第一，MCP 是 AI 连接外部工具的标准协议，就像 USB 是电脑连接外设的标准。Claude Code 作为 MCP 客户端，通过安装不同的 MCP Server 获得不同的能力——GitHub 操作、文档查询、数据库访问等。
第二，GitHub MCP + Context7 是前端开发者的黄金组合。前者让 Claude 直接操作仓库（Issue、PR、CI），后者让 Claude 实时查询最新的库文档。两个装好，日常开发体验质变。
第三，多 MCP 串联是真正的威力所在。一句话触发跨系统的复杂工作流——查 issue → 查文档 → 改代码 → 提 PR。从"自己在多个窗口间跳来跳去"到"说一句话 Claude 全搞定"。
通关检查清单
- [ ] 理解 MCP 的核心概念（USB 接口类比）
- [ ] 知道三种传输模式的区别（stdio / http / sse）
- [ ] 成功安装并使用了 GitHub MCP Server
- [ ] 成功安装并使用了 Context7 MCP Server
- [ ] 尝试过一次多 MCP 串联的工作流
- [ ] 了解 MCP 安全四条红线
- [ ] 知道 /mcp、claude mcp list 等管理命令
全部打勾？Level 3 第二关通过。
下篇预告
第 7 篇：Claude Code 通关手册（七）—— Hooks 系统：给 Claude 装上"自动驾驶"
目前为止，Claude Code 的所有能力都需要你主动触发——你说一句，它做一步。但如果有些操作是"每次都要做"的呢？
比如：每次 Claude 修改 TypeScript 文件后自动跑 Prettier 格式化、每次 Claude 写完代码后自动跑类型检查、每次 Claude 执行危险命令前自动触发一个安全校验脚本。
这就是 Hooks 系统——在 Claude 的操作前后自动触发你定义的脚本，不需要你手动干预。 从"手动挡"切换到"自动驾驶"。
今日话题
你最想让 Claude Code 连接什么外部工具？GitHub？Jira？你们公司的内部文档系统？还是生产环境的日志平台？评论区分享你的 MCP 愿望清单。
如果这篇文章让你意识到 Claude Code 的潜力远不止"写代码"，欢迎点赞、在看、转发三连——帮更多人发现 MCP 这个被低估的能力。
关注「前端达人」，我们下篇见。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2026-02-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号