企业官网建设流程全解析

• 教程
• 文档

Claude Code 是 Anthropic 官方推出的 AI 命令行工具，而 MCP（Model Context Protocol，模型上下文协议）是让 Claude Code 连接外部工具与服务的标准化协议。本指南基于 easy-vibe 项目 Stage 3 核心技能模块的 MCP 文档，系统讲解 MCP 的配置位置、自然语言管理方式、三种传输模式、调试手段与最佳实践，读完即可将 Claude Code 从"只会读写本地文件"的助手，升级为能操作 GitHub、数据库、浏览器与各类云服务的超级开发助手。

一、MCP 是什么：Claude Code 连接外部世界的协议

Claude Code是 Anthropic 官方的 AI 命令行工具，MCP（Model Context Protocol）则是让 Claude Code 连接外部工具和服务的协议。简单来说，MCP 让 Claude Code 从一个「只能读写本地文件」的 AI 助手，变成一个「能访问 GitHub、数据库、API、云服务」的超级助手。

从协议背景看（详见 easy-vibe 附录章节 AI Agent 协议原理：MCP 与 A2A）：MCP 由 Anthropic 于 2024 年 11 月发布，采用 MIT 开源协议。其诞生背景是"每个工具都要单独集成"的痛点——让 AI 读取 GitHub 仓库要写集成代码，查询数据库要写集成代码，操作文件系统还要写集成代码，每一份集成都在重复认证、错误处理、数据转换等逻辑。MCP 的核心目标是：让工具开发者写一次代码，所有支持 MCP 的 AI 应用都能使用。

MCP 提供三大核心能力：

一个形象的类比是USB-C 接口：以前每个设备都有自己的充电口（圆口、扁口、磁吸口），USB-C 统一了所有设备的充电与数据传输；MCP 则统一了 AI 与所有工具的连接方式。工具开发者只需实现一次 MCP Server，所有支持 MCP 的 AI 应用（Claude、Cursor、Windsurf 等）都能直接使用。

二、为什么需要 MCP：能力对比

没有 MCP 的 Claude Code

你能做的： ✓ 读取本地文件 ✓ 编辑代码 ✓ 运行命令 ✓ 使用 Bash 工具 你不能做的： ✗ 查看你的 GitHub Issues ✗ 访问云数据库 ✗ 调用外部 API ✗ 获取实时天气

有了 MCP 的 Claude Code

你能做的： ✓ 所有原来的功能 ✓ 查看/创建 GitHub Issues 和 PR ✓ 查询 SQLite、PostgreSQL 数据库 ✓ 访问 Notion、Slack 等外部服务 ✓ 获取实时天气、地图数据 ✓ 浏览器自动化 ✓ ...以及更多！

从 easy-vibe 附录的典型应用场景看，MCP 覆盖四类核心用法：本地文件操作（读取代码库、分析日志文件）、数据库查询（SQL 查询、数据分析）、API 调用（GitHub API、Slack、邮件）、开发工具集成（Git 操作、终端命令）。实际案例包括 Cursor/Windsurf 通过 MCP 连接文件系统与 Git、Claude Desktop 通过 MCP 连接笔记软件和邮件客户端、以及让 AI 执行备份、部署、数据同步等自动化脚本。

三、快速开始：4 个步骤

步骤 1：了解配置文件位置

Claude Code 的 MCP 配置文件位于两个层级：

推荐优先使用项目级配置，让不同项目使用不同的 MCP 服务。

步骤 2：用自然语言添加 MCP 服务器

在 Claude Code 中，你不需要手动编辑配置文件或记忆命令，直接用自然语言描述即可：

你：帮我添加 GitHub MCP 服务器，我的 token 是 ghp_xxx Claude：我来帮你配置 GitHub MCP 服务器... [自动更新 .claude/mcp.json]

你：添加一个 SQLite 数据库服务器，数据库文件在 ./data/app.db Claude：好的，我来配置 SQLite MCP 服务器...

你：添加一个 HTTP 类型的 MCP 服务器，地址是 https://api.example.com/mcp Claude：我来添加这个远程 MCP 服务器...

步骤 3：验证配置

直接向 Claude Code 提问：

你：现在有哪些可用的 MCP 服务器？ Claude：当前配置的 MCP 服务器： • github - GitHub 集成 • sqlite - SQLite 数据库 • filesystem - 文件系统访问

或者使用诊断命令：

/doctor

步骤 4：开始使用

配置成功后，直接通过自然语言调用 MCP 功能：

你：帮我在 GitHub 上创建一个 Issue Claude：我可以帮你创建 GitHub Issue，请告诉我： - 仓库地址，例如 owner/repo - Issue 的标题 - Issue 的描述

四、用自然语言管理 MCP 服务器

查看与管理服务器

你可以完全通过自然语言与 Claude Code 交互：

你：列出所有已配置的 MCP 服务器 你：检查 MCP 服务器的连接状态 你：删除名为 notion 的 MCP 服务器 你：更新 github 服务器的 token

诊断问题

遇到问题时：

你：检查 MCP 连接出了什么问题 Claude：[会自动执行诊断，分析配置文件，检查服务器状态]

五、配置方法详解

1. 用户级全局配置

编辑~/.claude.json：

{ "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/votrenom/Documents"] }, "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "votre-token" } } } }

2. 项目级配置（推荐）

在项目根目录编辑.claude/mcp.json：

{ "mcpServers": { "project-db": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./data/app.db"] } } }

项目级配置的优势：

• 团队成员可以将配置提交到 Git 中共享
• 不同项目可以使用不同的 MCP 服务
• 配置更灵活，不会污染全局设置

3. 三种传输模式

Claude Code 支持三种传输模式：

STDIO（本地进程）

{ "mcpServers": { "local-tool": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/chemin"] } } }

HTTP（远程服务）

{ "mcpServers": { "remote-api": { "url": "https://api.example.com/mcp", "transport": "http", "headers": { "Authorization": "Bearer votre-token" } } } }

SSE（服务器发送事件）

{ "mcpServers": { "streaming": { "url": "https://api.example.com/sse", "transport": "sse" } } }

关于配置文件的实际形态，easy-vibe 仓库根目录下的 config/mcporter.json 提供了一个真实示例：它通过command字段直接指向一个浏览器 Agent 的 MCP 服务器可执行文件，并携带--start_url、--window_width、--window_height、--resize_width、--resize_height、--max_steps、--log_dir等启动参数，同时包含一个空的imports字段用于扩展引用。可以看到，无论服务器来自 npm 包还是本地可执行文件，MCP 配置都遵循同一套mcpServers键值结构。

六、实战示例

示例 1：GitHub 工作流自动化

你：帮我把当前修改推送到 GitHub，并创建标题为「Add new feature」的 PR Claude： 1. 检查当前 git 状态... 2. 创建新分支 feature/new-feature... 3. 提交修改... 4. 推送到远程... 5. 调用 github_create_pull_request 创建 PR... 6. PR 已创建：https://github.com/owner/repo/pull/123

示例 2：数据库查询

你：查询数据库中最近注册的 10 个用户 Claude： 1. 连接 SQLite 数据库... 2. 执行查询：SELECT * FROM users ORDER BY created_at DESC LIMIT 10 3. 返回结果： - 张三 (zhang@example.com) - 2025-02-28 - 李四 (li@example.com) - 2025-02-27 ...

示例 3：网页截图与设计分析

你：打开 https://example.com，截图并分析页面设计 Claude： 1. 启动浏览器... 2. 导航到 https://example.com... 3. 截图... 4. [返回截图] 5. 分析页面设计： - 布局采用居中设计，最大宽度 1200px - 主色调为蓝色 (#3b82f6) - 导航栏固定在顶部 ...

示例 4：Notion 集成

你：把我刚写的笔记保存到 Notion Claude： 1. 使用 Notion MCP 服务器... 2. 创建新页面... 3. 已保存：https://notion.so/page/xxx

七、调试技巧

用自然语言诊断

当出现问题，直接告诉 Claude Code：

你：我的 MCP 服务器连接不上，请帮我检查 你：GitHub MCP 工具调用失败了，是什么原因？ 你：为什么 sqlite 服务器一直显示「connecting」？

Claude Code 会自动执行：

1. 检查配置文件格式
2. 校验环境变量
3. 测试服务器连接
4. 给出具体的修正建议

常见问题排查表

手动诊断命令

/doctor

示例输出：

系统诊断报告： =============== Claude Code：v2.5.0 ✓ Node.js：v20.0.0 ✓ MCP 服务器状态： • github：✓ 已连接（12 个工具） • sqlite：✗ 连接失败 - 找不到数据库文件 • puppeteer：✓ 已连接（8 个工具） 建议： 1. 检查 sqlite 数据库路径是否正确 2. 确保 .claude/mcp.json 格式正确

八、最佳实践

1. 优先使用项目级配置

不同项目往往需要不同的 MCP 服务：前端项目可能需要浏览器测试工具，后端项目可能需要数据库连接。使用项目级配置，每个项目可以拥有自己专属的 MCP 服务器集合，避免全局大配置的混乱。

更重要的是，项目级配置可以提交到 Git。团队克隆项目后，成员可以直接使用相同的 MCP 服务，无需重新配置：

项目 A（前端项目）-> .claude/mcp.json 中包含浏览器测试 MCP 项目 B（后端项目）-> .claude/mcp.json 中包含数据库 MCP

2. 敏感信息存放在环境变量中

切勿在配置文件中硬编码密钥。配置文件可能被意外提交到 Git 并泄露密钥。正确做法是把敏感值存放到环境变量中，配置文件中只引用变量名。这样即使配置文件公开，真实密钥依然隐藏。

{ "env": { "GITHUB_TOKEN": "$GITHUB_TOKEN", "GITHUB_TOKEN": "ghp_abc123" } }

第一种写法是好的：从环境变量读取；第二种写法是坏的：直接硬编码了密钥。

3. 锁定版本

默认情况下，npx -y总是使用 MCP 服务器的最新版本，这可能带来问题：新版本可能引入破坏性变更，或者包被突然删除/改名。在包名后添加@版本号，确保始终使用已验证的版本，减少自动更新带来的意外：

{ "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github@1.2.3"] }

4. 记录 MCP 配置

当一个项目包含多个 MCP 服务器时，新成员可能不清楚每个服务器的用途和所需配置。在.claude/目录下创建README.md，说明每个服务器的用途、所需配置以及如何获取凭证，可以显著降低沟通成本。

在项目中创建.claude/README.md：

# MCP 配置说明 本项目使用的 MCP 服务器： ## github 用于 GitHub 自动化。需要 GITHUB_TOKEN。 ## sqlite 连接 ./data/app.db 进行数据查询和修改。 ## puppeteer 用于 E2E 测试。

九、Claude Code vs Claude Desktop

十、常用 MCP 服务器配置

完整 MCP 服务器清单可参考 easy-vibe 附录章节：AI Agent 协议原理：MCP 与 A2A

GitHub 服务器

功能：Issues、PR、仓库管理

{ "mcpServers": { "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "votre-token" } } } }

SQLite 服务器

功能：查询和管理 SQLite 数据库

{ "mcpServers": { "sqlite": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-sqlite", "--db-path", "./data/database.db"] } } }

Filesystem 服务器

功能：访问指定目录中的文件

{ "mcpServers": { "filesystem": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/votrenom/Documents"] } } }

Puppeteer 浏览器自动化

功能：浏览器控制、截图、自动化测试

{ "mcpServers": { "puppeteer": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-puppeteer"] } } }

Brave 搜索服务器

功能：网络搜索

{ "mcpServers": { "brave-search": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-brave-search"], "env": { "BRAVE_API_KEY": "votre-cle-api-brave" } } } }

十一、在 easy-vibe 中继续深入

本指南对应 easy-vibe Stage 3 核心技能（core-skills）模块中的 MCP 章节。想要从协议原理层面理解 MCP，可以继续阅读：

• 附录章节 AI Agent 协议原理：MCP 与 A2A：涵盖 MCP 的发布背景、三大核心能力（Tools/Resources/Prompts）、USB-C 类比、典型应用场景，以及与 Google A2A（Agent-to-Agent Protocol）的对比与互补关系；
• 本模块其他核心技能章节（如 agent-teams、github-iterative-development、long-running-tasks）可以帮助你在掌握 MCP 之后，进一步构建完整的 AI 辅助开发工作流。

• 教程
• 文档