如何配置Claude Code与Codex的15款最佳MCP编程教程？

视频版：用过上百款编程MCP，只有这15个真正好用，Claude Code与Codex配置MCP详细教程_哔哩哔哩_bilibili 我试用过上百款编程类的MCP工具，只有这15个是真正好用的。这些MCP可以为AI编程工具赋予云端数据库、操作浏览器、读取设计稿生成网页、产品配图、安全扫描、全自动部署等等的能力。许多人说MCP是一个开发者比用户还多的技术，其实很多好用的MCP工具主要集中在编程领域。本期视频，我准备使用最近热度最高的两个AI编程工具——Claude Code还有Codex，来实战演示一下这些MCP Server。我还准备了许多具体案例，来看看我们如何利用MCP，让生产力翻倍。MCP也就是模型上下文协议，简单一句话总结，MCP就是AI的标准化工具箱，AI可以使用这个工具箱，与外部系统对话，代替人类完成一些操作。我们要介绍的第一个，就是让AI有能力操作浏览器的工具箱。 Google Chrome Dev Tool 在之前的视频里面，我们介绍过很多AI自动操作、调试浏览器的MCP，比如这期介绍的Browser Toos MCP，还有这期介绍的Chrome MCP等等。这些MCP其实都是社区开发的，所以配置起来比较麻烦，使用的时候，需要先往浏览器里面安装插件。现在谷歌官方亲自下场，直接终结了比赛。官方最近开发了一个Chrome Devtool MCP，这个MCP不再需要任何的复杂配置，只要电脑上安装过Chrome浏览器，就可以直接使用。我们来到Chrome DevTools MCP的Github首页。https://github.com/ChromeDevTools/chrome-devtools-mcp 往下找，项目提供了很多种配置方式。这里我们主要看Claude Code还有Codex。我找到一个测试文件夹，进来以后在终端打开。我的电脑上已经安装过Claude Code了，有关Claude Code怎么安装，怎么在国内免费使用，在这期视频里面有过详细介绍了。https://www.bilibili.com/video/BV1jGtEzNEAv/ 我们把Claude Code的配置命令复制过来，粘贴一下，回车，这样就安装成功了。 claude mcp add chrome-devtools npx chrome-devtools-mcp@latest 它默认是项目级别的，只对当前这个项目生效；如果想对所有的项目生效，可以在后面加两个**--scope user**，添加了这个参数以后，这个MCP就变成了用户级，这个电脑上的所有项目都会生效。安装完成以后，我们启动一下Claude Code，然后输入这个命令/mcp，回车这里打上一个对勾，显示connected，就配置完成了。接下来我们来看另外一个AI编程工具Codex怎么配置MCP。我这个电脑上已经安装过Codex了，有关Codex怎么安装配置，在这期视频里面有过详细介绍了。https://www.bilibili.com/video/BV1wm4UzfEbr我们来到这个地址C:/用户/{你的用户名}/.codex，进来以后找到这个文件config.toml，如果没有这个文件的话，可以新建一个。苹果电脑或者Linux系统的话，就是这个地址： ~/.codex/config.toml 。这里我们先以Windows电脑为例，我们把Windows电脑的这一串配置复制下来，粘贴过来，可以把这个启动时间适当调高一点，这里我调成60秒。 [mcp_servers.chrome-devtools] command = "cmd" args = [ "/c", "npx", "-y", "chrome-devtools-mcp@latest", ] env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files" } startup_timeout_ms = 60_000 Windows上面配置Codex MCP比较繁琐，如果是苹果电脑的话可以进行简化，把下面这两行删掉，npx可以放到上面，下面的/c跟npx都不用写，苹果电脑可以简化成这个样子。 [mcp_servers.chrome-devtools] command = "npx" args = [ "-y", "chrome-devtools-mcp@latest" ] 这里我还是回退成Windows，把配置文件保存一下，然后我们还是进入测试文件夹，输入命令Codex，先把Codex启动起来，等待了一会，启动完成，我们输入/mcp，可以看到我们添加的MCP Server，这样在Codex这边就配置完成了。