近年来，随着 AI Agent 和 LLM 应用的流行，Model Context Protocol (MCP) 逐渐成为一项通用的扩展协议，它让 AI 应用能够方便地接入外部能力。很多人第一次接触 MCP 时，会被 Host、Client、Server 这三个角色绕晕。一个更直观的理解方式是：把 MCP 看作 AI 世界里的 USB 插槽协议，这也是 MCP 官方文档上的类比方式。
架构与角色
MCP 采用“客户端—服务器”模型，并明确了三类参与者：
- Host（宿主）：支持并实现 MCP 协议的宿主环境（如 VS Code、Claude Desktop），负责与 MCP Server 建立连接并转发消息。
- Client（客户端）：在 Host 中运行的 Agent/助手（如 Copilot、Claude），负责发起请求与编排调用；其背后会调用一个或多个 LLM 模型。
- Server（服务器）：独立进程或远程服务，暴露具体能力（如 Playwright 自动化、数据库查询、文件访问等）。
除了通用角色，MCP 还常连接以下资源：
- 本地数据源：文件系统、数据库、IDE 内工具。
- 远程服务：HTTP API、云服务、外部 AI 模型等。
USB 类比
把 MCP 类比为电脑上的 USB 生态有助于快速理解：
- Host = 电脑/USB 插槽：自身只提供统一接口，不直接具备摄像头/麦克风等功能。
- Server = 外设设备：插上去才有具体能力；对应 Playwright MCP、Database MCP、Context7 MCP 等。
- Client = Agent/助手软件：不直接操控“外设”，而是通过接口编排能力，相当于用户界面（UI）；Copilot、Claude（其背后调用 LLM 模型）。
因此，MCP 自然形成“即插即用”的扩展生态：Host 提供接口，Server 提供能力，Client 负责编排与调用。
实例：VS Code + Playwright MCP
下面用一个具体例子说明交互过程：在 VS Code 中配置并调用 Playwright MCP 进行网页测试。
- Host：VS Code。
- Client：Agent/助手（例如 Copilot/Claude；在聊天窗口输入“帮我测试静态网站”）。
- Server：Playwright MCP（独立进程，由 VS Code 拉起执行）。
交互时序如下：
数据流转过程如下：
- 用户在 VS Code 的 Copilot 中输入 Prompt。
- Copilot（Agent/助手）解析用户输入，理解意图。
- VS Code（Host/宿主环境）根据需求选择合适的 MCP 工具。
- VS Code 构造请求并准备参数。
- VS Code 通过传输层（如 stdio、HTTP）发送请求到 Playwright MCP Server。
- Playwright MCP Server 执行具体操作，生成测试结果。
- VS Code 校验并接收 Playwright MCP Server 返回的数据。
- Claude 将结果转写为文本、代码或表格等可读内容。
- 最终在 VS Code 的 UI 中展示给用户。
说明：
- 构造请求：使用 JSON-RPC 2.0，
method=tools/call，params={name, arguments}。 - 传输层：可选
stdio、HTTP、SSE等方式。 - 生成结果：可能包含
content、structuredContent、resource_link等复合内容。 - 转写展示：Client 将结果转写为文本、代码或表格后在 UI 呈现。
传输层方式说明
MCP 支持多种传输层协议，确保 Host 与 Server 之间的高效通信。常见方式包括：
- 标准输入输出（stdio）：通过进程间的标准输入输出流进行数据交换，适用于本地集成和 Dev Container 场景，启动速度快，易于调试。
- HTTP/HTTPS：通过 RESTful API 或 JSON-RPC over HTTP 实现远程调用，适合云服务或分布式部署，支持跨网络访问和安全认证。
- Server-Sent Events（SSE）：用于实时推送消息，适合需要持续数据流或事件通知的场景。
- WebSocket（部分实现）：支持双向实时通信，适合高频交互和低延迟需求。
- 自定义协议：部分 MCP Server 可扩展为 gRPC、Unix Socket 等协议，满足特殊性能或安全需求。
开发者可根据实际部署环境和需求选择合适的传输层方式。例如，VS Code 默认优先使用 stdio 启动 MCP Server，云端服务则推荐 HTTP/SSE 以便远程访问和扩展。
传输层的选择直接影响 MCP Server 的启动方式、连接管理和安全策略。建议在本地开发时使用 stdio，生产环境或远程集成时采用 HTTP/SSE 等标准协议。
关键协议消息示例
为便于落地，下面给出常见的请求/响应线格式样例。
1）列出工具（Client → Server）
当 Agent/Host 需要发现可用工具时，会发送 tools/list：
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list",
"params": { "cursor": null }
}
返回（Server → Host）包含工具清单与输入 schema：
{
"jsonrpc": "2.0",
"id": 1,
"result": {
"tools": [
{
"name": "pw_run_test",
"title": "Run Playwright test on a URL",
"description": "Launch browser and run checks",
"inputSchema": {
"type": "object",
"properties": {
"url": { "type": "string", "description": "Target URL" },
"assertions": {
"type": "array",
"items": { "type": "string" }
}
},
"required": ["url"]
}
}
],
"nextCursor": null
}
}
tools/list/tools/call的方法名与结构以 MCP 官方规范为准。
2）调用工具（Client/Host → Server）
当 Agent 决定执行 Playwright 测试时，Host 代表它发送 tools/call：
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "pw_run_test",
"arguments": {
"url": "http://localhost:1313",
"assertions": ["h1 contains 'Docs'", "no console errors"]
}
}
}
返回（Server → Host）可能包含多种形态：
- 纯文本（日志/摘要）
- 结构化结果（
structuredContent，建议配合outputSchema） - 资源（如截图
resource_link或嵌入资源）
示例（结构化 + 文本 + 资源链接）：
{
"jsonrpc": "2.0",
"id": 2,
"result": {
"content": [
{ "type": "text", "text": "All checks passed (2 assertions). See screenshot." },
{
"type": "resource_link",
"uri": "file:///tmp/playwright/snapshots/home.png",
"name": "home.png",
"mimeType": "image/png"
}
],
"structuredContent": {
"url": "http://localhost:1313",
"assertions": [
{ "name": "h1 contains 'Docs'", "passed": true },
{ "name": "no console errors", "passed": true }
],
"durationMs": 1842
},
"isError": false
}
}
工具结果可混合文本、图片、音频、资源链接、嵌入资源与结构化 JSON。Server 也可声明输出 schema，以便 Host/Client 校验。
VS Code 中的 #工具名 路由
在 VS Code Chat 中，既可以通过输入 #playwright ... 显式调用某个 MCP 工具，也可以在 Agent 工具列表中直接勾选安装和启用 MCP Server。例如，Copilot MCP 支持在工具面板中一键安装 Playwright MCP，无需手动配置 Dev Container 或命令行参数。只需在 VS Code 的 MCP 工具管理界面选择需要的 Server，系统会自动完成安装和集成，适合大多数开发者的日常使用场景。
如需自定义启动方式（如本地调试或特殊环境），可以参考 Dev Container 的配置片段，通过 customizations.vscode.mcp.servers 字段指定 MCP Server 的启动命令和参数。但一般情况下，推荐直接在 Copilot MCP 工具面板中勾选安装，操作更简单，集成更顺畅。
下图是一个 MCP 请求全链路的时序视角，可以帮助你理解消息何时由谁发送。
从时序图中我们可以看到，MCP 协议的请求/响应流程是如何在不同组件之间传递的，JSON-RPC 作为通信协议，确保了消息的结构化和一致性。
JSON-RPC 简介
在 MCP 协议中，JSON-RPC 是核心通信格式。它是一种轻量级的远程过程调用协议，使用 JSON 作为数据载体，便于不同语言和平台间的数据交换。JSON-RPC 主要包含以下字段：
jsonrpc：协议版本号（通常为"2.0"）。method：要调用的方法名（如tools/list、tools/call）。params：方法参数，类型为对象或数组。id：请求唯一标识，用于匹配响应。result：响应结果（成功时返回）。error：错误信息（失败时返回）。
JSON-RPC 的优势在于格式简单、易于解析，且支持双向异步通信。MCP 通过 JSON-RPC 实现 Host、Client、Server 之间的标准化消息传递，确保工具发现、能力调用、结果返回等流程高效可靠。
常见的 JSON-RPC 消息示例：
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list",
"params": {}
}
响应：
{
"jsonrpc": "2.0",
"id": 1,
"result": {}
}
如遇错误：
{
"jsonrpc": "2.0",
"id": 1,
"error": {
"code": -32601,
"message": "Method not found"
}
}
通过采用 JSON-RPC，MCP 能够实现跨平台、跨语言的能力扩展，降低集成门槛，提升开发效率。
错误与重试
在实际落地中，错误通常分为以下几类：
- 协议错误（JSON-RPC 层：方法不存在、参数不合法）：通过
error.code/message返回。 - 业务错误（工具执行失败）：
result.isError = true，并在content中给出原因。 - VS Code 侧：展示信任/权限提示与调用确认对话框，必要时可重试或修改参数。
在 VS Code 中配置 MCP Server
要在 VS Code 中配置 MCP Server 并使用内置的 MCP Server（以 Playwright 为例），请按照以下步骤操作：
- 启用 MCP Server 集成功能，设置 chat.mcp.enabled 为
true。 - 配置 MCP Server 的发现方式，设置 chat.mcp.discovery.enabled 为
true（可选，根据需要启用自动发现）。 - 控制 MCP Server 的自动启动行为，设置 chat.mcp.autostart 为
newAndOutdated（推荐自动启动新建和过期的 MCP Server）。 - 使用 MCP: Add Server… 命令添加 Playwright MCP Server。
- 使用 MCP: Show Installed Servers 命令查看已安装的 MCP Server。
- 使用 MCP: Browse Servers 命令浏览可用的 MCP Server。
- 在 Playwright 项目中，确保 MCP Server 已正确安装并运行，VS Code 会自动检测并集成。
总结
将 MCP 理解为 AI 世界的“USB 协议”有助于把握其价值：
- Host（VS Code/Claude Desktop） 提供统一“插槽”，负责进程管理、权限与传输。
- Server（如 Playwright MCP） 像外设，按 schema 接收参数并产出文本/截图/结构化结果。
- Client（如 Copilot/Claude，非模型本身） 作为用户界面，负责选择与编排外设，并把结果转化为可读输出；其背后调用 LLM 模型生成自然语言与结构化输出。
这一解耦设计让 AI Agent 能“即插即用”地获取更多能力，生态也因此快速发展。在后续的博客中我将介绍如何开发一个简单的 MCP Server，并在 VS Code 中进行调试和测试，敬请关注。