Featured image of post Claude Code 安装配置 MCP 教程

Claude Code 安装配置 MCP 教程

手把手教你如何在 Claude Code 中安装和配置 MCP Server,扩展 AI 编程能力

什么是 MCP

MCP(Model Context Protocol,模型上下文协议)是 Anthropic 推出的一种开放协议,用于标准化 AI 模型与外部工具、数据源之间的通信。通过 MCP,Claude Code 可以连接各种外部服务,比如文件系统、GitHub、数据库、浏览器等,从而大幅扩展其能力边界。

简单理解:MCP 就像是 AI 的"USB 接口",让 Claude 可以即插即用地连接各种外部工具。

环境准备

  • Claude Code 已安装(本文以 Windows 为例)
  • Node.js 20+(大部分 MCP Server 需要)
  • 对应 MCP Server 所需的服务账号或 Token(如 GitHub Token)

npx 命令需要 Node.js 环境,确保已安装:

1
2
node -v   # 确认版本 >= 20
npm -v

MCP 配置结构

Claude Code 启动时会自动注册已配置的 MCP Server,所以 只需配置一次,每次使用自动就绪。

配置文件分为三个层级:

文件 作用域 路径
claude.json 项目级 项目根目录 .claude/
claude.json 全局用户级 ~/.claude/
settings.json 项目/用户级 同上(可合并配置)

项目级配置仅对当前项目生效,用户级配置对所有项目生效。项目级会覆盖用户级的同名 MCP Server。

配置 MCP Server

以下使用项目级配置为例,在 .claude/claude.json 中添加 mcpServers 字段:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "mcpServers": {
    "server-name": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@org/mcp-package"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

每个 MCP Server 的关键字段:

  • server-name:自定义名称,用于日志区分
  • type:通信方式,目前几乎都是 "stdio"
  • command:启动命令,通常是 npxnode
  • args:命令参数
  • env:环境变量(存放 Token 等敏感信息)

配置示例一:Filesystem MCP(文件系统)

让 Claude 读取和写入指定目录:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "mcpServers": {
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@anthropic/mcp-filesystem",
        "D:\\projects"
      ]
    }
  }
}

配置示例二:GitHub MCP

连接 GitHub,自动创建 Issue、PR 等:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "mcpServers": {
    "github": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-github"],
      "env": {
        "GITHUB_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    }
  }
}

GitHub Token 可在 GitHub Settings > Developer settings > Personal access tokens 创建。

配置示例三:Figma MCP

让 Claude 直接读取 Figma 设计稿并生成代码。在 settings.json 中配置:

1
2
3
4
{
  "enableAllProjectMcpServers": true,
  "enabledMcpjsonServers": ["figma"]
}

Figma MCP 通常在 .mcp.json 中配置(由 Figma 桌面客户端自动生成),无需手动编写。

常用 MCP Server 推荐

MCP Server 用途 安装量
@anthropic/mcp-filesystem 文件系统读写 官方出品
@anthropic/mcp-github GitHub API 集成 官方出品
Figma MCP 设计稿转代码 需要 Figma 桌面端
Playwright MCP 浏览器自动化 用于网页截图、测试

可以通过 npx skills find mcp 搜索更多第三方 MCP。

验证 MCP 是否生效

配置完成后,有两种验证方式:

方式一:启动后检查日志

1
claude

启动后查看控制台输出,成功注册的 MCP Server 会显示类似:

1
[MCPServerRegistry] Registered MCP server: filesystem

方式二:直接对话测试

在 Claude Code 中输入:

帮我列一下 D:\projects 目录下的文件

如果 Filesystem MCP 配置正确,Claude 会直接列出文件。

常见问题

npx 命令找不到

确保 Node.js 已安装且 npm 目录在 PATH 中:

1
where npx

MCP Server 启动失败

检查 .claude/claude.json 的 JSON 格式是否正确(不能有多余逗号)。也可以用 npx 直接在终端测试 MCP Server 包是否能正常下载:

1
npx -y @anthropic/mcp-filesystem D:\test

Token 权限不足

GitHub MCP Server 报 403 通常是 Token 权限不够。创建 Token 时确保勾选 repo、workflow 等必要权限。

多个配置文件优先级

项目级 .claude/claude.json > 用户级 ~/.claude/claude.json。同名 MCP Server 项目级会覆盖用户级。

小结

MCP 是 Claude Code 的核心扩展机制,配置简单但能力强大:

  1. .claude/claude.json 中添加 mcpServers 字段
  2. 填写 command、args、env 等参数
  3. 重启 Claude Code 即可生效

建议从官方 @anthropic 系列的 MCP Server 开始,稳定性和安全性都有保障。

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计