15个好用MCP，Claude Code与Codex配置MCP详细教程

围巾哥萧尘
653 阅读8分钟

内容来源：www.youtube.com/watch?v=UW5…

这是一个关于配置和使用模型上下文协议（MCP）工具的综合教程，主要针对 Cloud Code 和 Codex 这两个 AI 编程工具。MCP 被定义为 AI 的标准化工具箱，允许 AI 与外部系统对话，代替人类完成某些操作。

MCP 基础概念与管理

什么是 MCP？

MCP 是 模型上下文协议（Model Context Protocol）的简称。它允许 AI 编程工具（如 Cloud Code 和 Codex）获得额外的能力，例如赋予云端数据库、操作浏览器、读取设计稿生成网页、进行安全扫描或全自动部署的能力。

配置原则

MCP Server 并非配置得越多越好。每配置一个 MCP Server 都会增加一部分上下文占用，因此最好是需要哪个就配置哪个。

Cloud Code MCP 管理命令

  1. 查看已安装的 MCP： 输入命令 CloudMCP list。
  2. 移除旧的 MCP： 输入命令 cloudmcp，然后粘贴要移除的 MCP 名称。

Cloud Code MCP 配置教程

Cloud Code 的配置通常涉及复制粘贴一键配置命令，或者使用 cloudMCP ad 命令添加远程或 NPX 包。配置完成后，通常需要通过浏览器进行登录授权。

1. 配置 Chrome Dive 2 MCP (操作浏览器)

Chrome Dive 2 MCP 是谷歌官方开发的 MCP，它不再需要复杂的配置，只需要电脑上安装了 Chrome 浏览器即可直接使用。

  • 步骤：

    1. 找到 Cloud Code 的配置命令并复制。
    2. 在终端粘贴并回车，完成安装。
    3. 默认情况下，它属于项目级别，只对当前项目生效。
    4. 如果想对所有项目生效，可以在命令后面添加参数：-- scope user。
    5. 安装完成后，启动 Cloud Code，输入命令 /MCP，回车。
    6. 如果显示 connected 并打上一个对钩，则配置完成。

2. 配置 Neon MCP (免费云数据库)

Neon 是基于 Postgres 封装的免费云端数据库。接入其 MCP 后，AI 可瞬间获得一个免费的云端数据库。

  • 步骤：

    1. 从 Neon 文档中找到 Cloud Code 的一键配置命令并复制。
    2. （可选）先移除旧的 MCP Server。
    3. 粘贴并执行该命令。
    4. 启动 Cloud Code，输入 /MCP。
    5. 系统会提示需要登录授权，回车后浏览器会打开窗口要求授权。
    6. 点击 approve 授权完成后，回到 Cloud Code，显示 connected 即配置成功。

3. 配置 Superbase MCP (强大后端基础设施)

Superbase 在强大的 PostgreSQL 数据库基础上，封装了用户认证、文件存储和可视化面板等功能，提供了一整套开箱可用的后端基础设施。

  • 步骤：

    1. 在 Superbase 控制台创建一个新项目，命名并设置密码。
    2. 来到 Superbase 文档站，选择刚创建的项目。
    3. 复制远程调用的 MCP server URL。
    4. 在 Cloud Code 中执行配置命令：cloudmcp ad superbase --http，然后粘贴 URL。
    5. 启动 Cloud Code，输入 /MCP，选择 Superbase。
    6. 在浏览器打开的窗口下点击授权，即配置完成。

4. 配置 Figma MCP (设计稿生成网页)

Figma 是流行的网页与 APP 设计工具。通过配置 Figma MCP，AI 可以将设计稿对接给 Coding Agent，一句话就能生成网页。

  • 注意： Figma MCP 的配置参数比较特殊和复杂。

  • 步骤：

    1. 先配置基础命令：cloudMCP ad [name] npx [MCP 包名]。
    2. 系统会提示 MCP 已安装到的配置文件位置。
    3. 找到该配置文件并打开，手动添加未完成的配置。
    4. 需要添加的参数包括：-oauth 和 stio。
    5. 最重要的是填写 Figma 的 API Key。回到 Figma 网站，在左上角的 settings -> security -> generate new token。
    6. 勾选所有权限后创建 Token，复制并粘贴到配置文件中。
    7. 重启 Cloud Code，显示连接成功，则配置完成。

Codex MCP 配置教程

Codex 的配置主要依赖于修改其配置文件 CFG.tomtl。

1. 配置文件位置

  • Windows 电脑： C 盘 -> 用户 -> 你的用户名 -> .codex 文件夹。找到文件 CFG.tomtl (如果没有则新建一个)。
  • Apple 电脑或 Linux 系统： 路径在视频屏幕上有所介绍。

2. 平台差异

Codex 在 Windows 上配置 MCP 比较繁琐。如果是 Apple 电脑，配置可以进行 简化，可以将配置中的某些行删除，且 npx 可以放到上面，无需写斜杠和 NPX。

3. 配置 Chrome Dive 2 MCP

  1. 复制 Windows 电脑的配置字符串。
  2. 来到配置文件 CFG.tomtl 粘贴。
  3. 可以适当调高启动时间（例如调整成 60 秒）。
  4. （如果是 Apple 电脑，可以按平台差异进行简化）。
  5. 保存配置文件，进入测试文件夹，输入命令 codex 启动。
  6. 启动完成后，输入 /MCP 即可看到添加的 MCP Server。

4. 配置 Neon MCP (云数据库)

  • 注意： Codex 直接配置 HTTP 的 MCP 会有问题。

  • 步骤：

    1. 从文档中找到 NPX 的配置方式。
    2. 修改配置文件：将 MCP Server 的名字改成 Neon，参数改成 mcp remote，最后网址改成 Neon 提供的网址。
    3. （如果是 Apple 电脑，配置可以简化）。
    4. 启动 Codex，点击 approve 授权。
    5. 输入命令 /MCP 即可完成配置。

5. 配置 Figma MCP

Codex 文档中提供了 Windows 电脑上和 Mac 电脑上配置 Figma MCP 的方式，用户只需按照对应系统的配置方法修改配置文件即可。

其他重要 MCP 工具及配置方法

MCP Server 名称功能描述Cloud Code 配置方式Codex 配置方式
Cex7mcp帮助 AI 查找文挡，补充编程知识（克服大模型知识截止日期问题）。只能从 Cex7 标准文件库中检索。复制配置命令，API Key 可不填。文档提供了 Apple 和 Windows 系统的配置字符串。
Refmcp类似 Cex7mcp，用于查找文档。更灵活，可深入检索冷门地方（如论文、Git 仓库）。文档中提供了详细的配置方式。功能与 Cex7mcp 类似，配置方式也相似。
Replicate MCP使用 Replicate 平台，通过 API 调用生成 AI 图片。配置基础命令，然后手动修改配置文件（env 部分）添加 Replicate Token。文档提供了 Windows 和 Mac 电脑的配置方法，需在配置中写入 API Token。
Vercel MCP免费提供项目部署的平台。用于将项目一句话部署上线。还可用于查询 Vercel 项目信息。复制配置命令并执行。启动后需通过浏览器点击授权登录。文档提供了 Windows 和 Mac 系统的配置文件的写法。
H1 Pages MCP类似 Vercel 的国内部署平台。可一键免费部署项目。在特定视频中有详细介绍。N/A (未在当前源中详述)
CloudFlare MCP提供多种 MCP Server。可用于查找文挡、部署到 Worker、监控日志、查询流量趋势等。用法与 Vercel 相似。配置时需注意替换不同的 URL 以获得不同功能。N/A (未在当前源中详述)
Github MCP官方推出，将 AI Coding Agent 连接到 Github 平台。可读取资源/代码文件，管理问题（Issue），创建 PR，分析代码，执行流程自动化。配置基础命令（cloudMCP ad Github --transport http + 远程地址）。然后手动修改配置文件，在 header 部分填写 Github API Token（需在 Github 设置中生成，并勾选所有权限）。文档提供了 Windows 和 Mac 电脑的配置写法，需在 HER 参数中填写 Github API Token。
Stripe MCP将 Stripe 收款服务平台的能力对接给 AI。用于创建商品支付页面和获取商品信息。执行配置命令（cloud MCP ad stripe --http + 地址）。启动后需登录授权。N/A (未在当前源中详述)
Shadcn MCP非常好用的前端组件库。AI 可自动查找组件并复制代码到项目。复制配置命令并执行。N/A (未在当前源中详述)
Semgrep MCP安全的静态分析工具。内置 5000 多条安全规则。可对代码进行整体扫描，及时发现漏洞。执行配置命令（cloudMCP ad Script --协议 http + MCP 地址）。启动后显示 connected 即配置成功。N/A (未在当前源中详述)

创建自己的 MCP Server

如果你有自己的想法，可以使用 Github MCP 的官方仓库中提供的 SDK，选择自己喜爱的编程语言，创建属于自己的 MCP Server。例如，有教程详细介绍了如何使用 Python SDK 创建 MCP Server。

总结类比：

将 AI 编程工具（如 Cloud Code 或 Codex）看作是一台拥有智能大脑的机器人，那么 MCP Server 就像是给这个机器人配备的各种专业工具或配件。配置 MCP 的过程，就如同将一把万能螺丝刀（Chrome Dive 2）、一个云端仓库钥匙（Neon/Superbase）、一个蓝图识别仪（Figma MCP）等工具准确地插到机器人的工具带上，使其能够扩展能力，完成从代码编写到部署、再到调试和安全扫描的全部工作流程。

avatar
文章
阅读
粉丝