Claude Code 从零到精通：多Agent协作开发完全教程-第六章：MCP Servers — 连接外部世界

第六章：MCP Servers — 连接外部世界

MCP (Model Context Protocol) 是让 Claude Code 连接外部工具和服务的协议。

6.1 MCP 的作用

Plaintext

┌───────────────────────────────────────────────────┐

│ MCP 连接示意图 │

├───────────────────────────────────────────────────┤

│ │

│ Claude Code │

│ │ │

│ ┌─────────┼─────────┐ │

│ │ │ │ │

│ ▼ ▼ ▼ │

│ ┌─────────┐ ┌────────┐ ┌──────────┐ │

│ │Playwright│ │MasterGo│ │ GitHub │ │

│ │浏览器测试│ │UI设计稿 │ │代码仓库 │ │

│ └─────────┘ └────────┘ └──────────┘ │

│ │ │ │ │

│ ▼ ▼ ▼ │

│ ┌─────────┐ ┌────────┐ ┌──────────┐ │

│ │ Docker │ │数据库 │ │ Slack │ │

│ │容器管理 │ │查询工具 │ │消息通知 │ │

│ └─────────┘ └────────┘ └──────────┘ │

│ │

│ 本质：让 Claude Code 能使用你定义的外部工具 │

│ │

└───────────────────────────────────────────────────┘

6.2 配置 MCP Server

在项目根目录创建 .claude/settings.json：

JSON

{

"mcpServers": {

"playwright": {

"command": "npx",

"args": ["@anthropic-ai/mcp-server-playwright"],

"description": "浏览器自动化测试"

},

"filesystem": {

"command": "npx",

"args": [

"@anthropic-ai/mcp-server-filesystem",

"--root", "/path/to/allowed/directory"

],

"description": "文件系统访问"

},

"github": {

"command": "npx",

"args": ["@anthropic-ai/mcp-server-github"],

"env": {

"GITHUB_TOKEN": "your-token-here"

},

"description": "GitHub 操作"

}

}

}

6.3 实战场景：Playwright MCP 做自动化测试

Plaintext

安装 Playwright MCP

npm install @anthropic-ai/mcp-server-playwright

在 Claude Code 中使用

帮我用 Playwright 打开浏览器，访问我们的应用，

模拟用户在画布上写字，然后截图对比写字前后的效果

实战案例：开发者用 Playwright MCP 让模型自动唤起浏览器、模拟笔记书写操作，然后截图对比写字过程中和结束后的像素差异，发现了"笔迹回缩"的 bug 并自动修复。

6.4 实战场景：SSH 远程开发

Plaintext

让 Claude Code 连接远程 Linux 服务器

我有一台远程 Linux 服务器，地址是 192.168.1.248

用户名 dev，你可以 SSH 连上去帮我编译和测试代码

我本地是 macOS，但代码需要在 Linux 上运行

这就是模型"探索外部世界"能力的体现——它不仅能访问本地文件，还能组网访问其他机器。