用过上百款编程MCP，只有这15个真正好用，Claude Code与Codex配置MCP详细教程

https://www.youtube.com/watch?v=UW5iQGE3264

[00:00] 导言：什么是MCP？
[ 00:50 ] 1. ChromeDevTools MCP：操作浏览器
[04:14] 2. Neon MCP：云端数据库
[06:36] 3. Supabase MCP：后端即服务
[08:56] 4. Figma MCP：从设计稿到代码
[ 11:20 ] 5. Codiumate (codex7) MCP：查找新知识
[12:52] 6. RefMCP：灵活的文档检索
[ 13:20 ] 7. Replicate MCP：AI 图像生成
[15:11] 8. Vercel MCP：项目部署
[ 16:30 ] 9. 4everland Pages MCP：国内部署平台
[16:48] 10. Cloudflare MCP：无服务器部署与监控
[17:25] 11. GitHub MCP：自动化代码管理
[19:36] 12. Stripe MCP：集成支付功能
[20:51] 13. shadcn/ui MCP：前端组件库
[21:24] 14. Semgrep MCP：代码安全扫描
[22:19] 15. GitHub MCP SDK：创建自己的MCP与总结

[00:00] 导言：什么是MCP？

Host: 我是用过上款编成类的 MCP 工具只有这 15 个是真正好用的。这些 MCP 可以为 A 编程工具赋予云端数据库操作浏览器读取设计稿生成网页产品配图安全扫描全自动部署等的能力。 [ 00:11 ]

许多人说 MCP 是一个开发者比用户还多的技术。其实很多好用的 MCP 工具主要集中在编成领域。 [ 00:19 ]

本期视频我准备使用最近热度最高的两个 A 编程工具 Cloud Code 还有 codex 来实战演示一下这些 MCP Server。 [ 00:31 ]

我还准备了许多具体案例来看看我们如何利用 MCP 让生产力翻倍。 [ 00:35 ]

MCP 也就是模型上下文协议简单一句话总结 MCP 就是 A 的标准化工具箱 A 可以使用这个工具箱与外部系统对话代替人类完成一些操作。 [ 00:46 ]

[ 00:50 ] 1. ChromeDevTools MCP：操作浏览器

Host: 我们要介绍的第一个就是让 A 有能力操作浏览器的工。在之前的视频里面我们介绍过很多 AI 自动操作调示浏览器的 MCP。 [ 00:58 ]

比如这期视频里面介绍的 Browser Toolth MCP 还有这期介绍的 Chrome MCP 等等。这些 MCP 其实都是社区开发的。 [ 01:03 ]

所以配置起来比较麻烦使用的时候需要先往浏览器里面安装插件。 [ 01:10 ]

现在谷歌官方亲自下场直接终结了比赛。官方最近开发了一个 Chroma Dive 2MCP。 [ 01:18 ]

这个 MCP 不再需要任何的复杂配置只要电脑上安装过 rome 浏览器就可以直接使用。 [ 01:22 ]

我们来到 Chrom2 MCP 的 GHUB 首页往下找项目提供了很多种配置方式这里我们主要看 Cloud Code 还有 codex。 [ 01:30 ]

我找到一个测试文件夹进来以后在中端打开。我的电脑上已经安装过 loud Code 了。 [ 01:37 ]

有关 cloud Code 怎么安装怎么在国内免费使用在这期视频里面有国详细介绍了。 [ 01:44 ]

我们把 Cloud Code 的配置命令复制过来粘贴一下回车这样就安装成功了。 [ 01:47 ]

它默认是项目级别的只对当前这个项目生效。如果想对所有的项目生效可以在后面加两个横杠 scope 空格 user。 [ 01:57 ]

添加了这个参数以后这个 MCP 就变成了用户籍对这个电脑上的所有项目都会生效。 [ 02:01 ]

安装完成以后我们启动一下 Cloud code 然后输入这个命令斜杠 MCP 回车。 [ 02:08 ]

这里打上一个对钩显示 connected 就配置完成了。 [ 02:12 ]

接下来我们来看另外一个 A 边工具 codex 怎么配置 MCP。我这个电脑上已经安装过 codex 了。 [ 02:19 ]

有关 codex 怎么安装配置在这期视频里面有过详细介绍了。 [ 02:23 ]

我们来到这个地址 C 盘用户你的用户名点 codex 这个文件夹进来以后找到这个文件 CF 个.tomtl。 [ 02:30 ]

如果没有这个文件的话可以新建一个。苹果电脑或者 Linux 系统的话就是屏幕上的这个地址。 [ 02:37 ]

这里我们先以 Windows 电脑为例我们把 Windows 电脑的这一串配置复制下来来到配置文件粘贴过来。 [ 02:44 ]

可以把这个启动时间适当调高一点这里我调成 60 秒。 [ 02:47 ]

Windows 上面配置 codex MCP 比较比较繁琐。如果是苹果电脑的话可以进行简化把下面这两行删掉 npx 可以放到上面。 [ 02:58 ]

下面的斜杠跟 NPX 都不用写苹果电脑可以简化成这个样子。 [ 03:01 ]

这里我还是回退成 Windows 的样子把配置文件保存一下。 [ 03:05 ]

然后我们还是进入测试文件夹输入命令 codex 先把 codex 启动起来。 [ 03:08 ]

等待了一会启动完成我们输入斜杠 MCP 可以看到我们添加的 MCP server 这样在 codex 这边就配置完成了。 [ 03:16 ]

这个 MCP 的基础用法就是让 A 操作浏览器自动化完成一些操作。 [ 03:23 ]

我让 Codex 打开 KB 然后找到这个项目给它点个 star。 [ 03:27 ]

我们看到它调用了 MCP 工具打开了 KTub 找到了搜索栏然后输入对应的搜索指令。 [ 03:30 ]

成功搜索到了我们需要的项目这里也点上了 STAR。 [ 03:34 ]

除了基础的操作浏览器它这里面还有一些工具可以帮助我们辅助调示代码。 [ 03:40 ]

比如可以获取网络请求然后列出控制台的爆错等。 [ 03:44 ]

我让 A 测试一下这个网站的提交按钮看看如何有爆错的的话应该如何修改。 [ 03:50 ]

我们看到 A 触发了测试并且控制台已经有了爆错了。 [ 03:54 ]

他通过 MCP 工具读取到控制台信息还有网络请求然后 Codex 在代码里面找到了报错原因。 [ 04:01 ]

应该把这个 put 请求改成 post。这样使用 Chrome div to MCP 成功进行了页面的调示并且精准的修改好了代码非常的方。 [ 04:09 ]

[04:14] 2. Neon MCP：云端数据库

Host: 是一个基于 PGress 封装的免费的云端数据库。我们接入它的 MCP 就可以让 A 瞬间获得一个免费的云端数据库。 [ 04:23 ]

这里找到 DCS 然后搜索 MCP 找到这个文档 MCP 里面列出了各个客户端的配置方式。 [ 04:27 ]

我们先看 Cloud Code 这里有一个一件配置命令。 [ 04:31 ]

配置新的 MCP Server 之前我先把旧的移除掉。 MCP Server 不是配置越多越好每配置一个 MCP Server 都会增加一部分的上下文战用用。 [ 04:42 ]

所以 MCP server 最好是用哪个配置哪个。输入 CloudMCP list 这里列出的是之前装过的 MCP。 [ 04:46 ]

我把上一个移除掉输入命令 cloudmcp 然后粘贴上 mcp 的名字这样就移出干净了。 [ 04:55 ]

我们把样的这个命令复制过来添加进去。 [ 04:59 ]

再启动下 cloud 输入斜杠 MCP 这里显示的需要登录授权一下我们回车。 [ 05:03 ]

浏览器会打开一个窗口要求授权点击 aprove 这里显示授权完成。 [ 05:10 ]

我们回到 cloud code 样这里显示 connected 就配置成功了。 [ 05:15 ]

接下来我们看一下 codex 怎么配置。这里来到 codex 的配置文件 codex 直接配置 HTTP 的 MCP 会有问题。 [ 05:23 ]

这里我从文档里面找一个 npx 的配置方式。这里我把之前呢改造一下 MCP server 的名字改成 N。 [ 05:27 ]

接下来这个参数改成 MCP remote 最后网址改成样的网址这样就可以了。 [ 05:37 ]

如果您是苹果电脑可以把配置简化成这个样 Windows 的配置就复杂一些。 [ 05:41 ]

我们来启动 Codex 试一下这里点击 approve 回到 codex 输入命令斜线 MCP 这样 MCP 在 codex 这边也配置完成了。 [ 05:49 ]

我准备了一个 CSV 文件的测试数据这里面存储的是学生的学号名字还有分数。 [ 05:57 ]

我准备让 A 创建一个数据库然把这个表存进去。 [ 06:00 ]

我说新建一个 poject 把这个数据存到一个表里面。 [ 06:04 ]

codex 调用了 NEMCP 先新建了一个 poject 然后执行 CSQ 语句把表建出来了。 [ 06:07 ]

接下来执行 CSQ 语句把数据插入了表里面。 [ 06:11 ]

我们来到逆样的控制台就可以看到刚才新建的 poject。 [ 06:18 ]

在 poject 里面就可以看到我们的数据表。这样我们的 code agent 就有了一个完全操作一个数据库的能力。 [ 06:21 ]

我们也可以使用 A 在这里面把相应的数据表都建出来再让 AI 帮我们生成后端代码形成一个完整的具有数据库的后端应。 [ 06:31 ]

[06:36] 3. Supabase MCP：后端即服务

Host: Superbase 比样的功能更加强大。在强大的 PS GR 数据库的基础上封装了用户认证文件存储可试化的韵为面板等功能。 [ 06:43 ]

为开发者提供了一整套开箱可用的后端基础设施。我们来把 Serbase 的 MCP 也配置一下。 [ 06:47 ]

我们先来到 Serbase 的控制台创建一个新的项目给项目起个名字填个密码点击创建。 [ 06:54 ]

我们来到 Superbase 的文档站在 poject 这里选择我们刚才建的项目。 [ 07:00 ]

这里有一个配置方式这是一个远程调用的 MCP server。 [ 07:04 ]

我们先在 cloud code 里面配置一下 cloudmcpaderbase 然后两个横杠 http 表示这是一个远程调用的 MCP。 [ 07:11 ]

接下来就可以把 URL 复制一下粘贴过来回车。 [ 07:15 ]

启动一下 Cloud Code 输入斜线 MCP 选择 Sarbase 回车。 [ 07:19 ]

在浏览器打开的窗口下面点击授权这样就配置完成了。 [ 07:23 ]

我还是让它创建一个表把这个数据写进去。 [ 07:26 ]

这样在 soper base 的后台就可以看到我们创建的表了。 [ 07:30 ]

我 A 用 NJS 写一个项目利用 superbase 自带的用户健全功能实现用户登录。 [ 07:38 ]

好代码写完了项目里需要配置两个环节变量一个是 URL 还有一个 K。 [ 07:41 ]

这个完全可以使用 MCP 自动生成一个我跟 AAS 说一下你用 MCP 把环境变量填一下。 [ 07:49 ]

这里它成功调用了 MCP 帮我们填写好了还有 API case。 [ 07:52 ]

接下来我们把项目启动起来试一下 npmrongv。 [ 07:56 ]

进来以后是一个非常简单的登录跟注册页面这里我填一个油箱点击注册。 [ 08:04 ]

注册链接就发到了我的邮箱。这样来到邮箱收一下验证邮件邮箱验证完成以后点击登录。 [ 08:10 ]

这里显示登录成功我们去 Superbase 后台一下。 [ 08:13 ]

在左侧 authentication 里面就可以看到刚才注册进来的这个用户。 [ 08:17 ]

然后我们还可以结合上面的数据库创建一些业务表。 [ 08:20 ]

我们通过 superbase mcp 就可以创建出一个完整的带用户登录加后台数据库的一个完整应用。 [ 08:28 ]

我们看一下 codex 怎么配置 erbase 这里我从样的上面改造一下把名字改一下我叫做 superbase。 [ 08:35 ]

我们在 superbase 的文档站 MCP 这里选到自己的项目然后把这个链接复制来粘贴进来。 [ 08:40 ]

Windows 电脑就配置成这个样子如果是苹果电脑的话配置是这个样子。 [ 08:47 ]

在 codex 这边也需要先登录授权一下然后我们的 superbase MCP 就可以直接用。 [ 08:51 ]

[08:56] 4. Figma MCP：从设计稿到代码

Host: 成为了今年最流行的网页与 APP 设计工具可以让团队在浏览器上合作设计而不必依赖复杂本重的本地软件。 [ 09:03 ]

菲格里面有上百款可以免费使用的 UI 设计模板。 [ 09:06 ]

这里我找到一个登录页面并且把它改造了一下。 [ 09:09 ]

我想让 A 把这个页面实现成一个网站。 [ 09:13 ]

我们可以使用 Figma MCP 把这个设计稿对接到 coding agent 里面一句话就能生成这样的网页。 [ 09:17 ]

我们先在 cloud Code 里面把它配置一下。 [ 09:20 ]

这个 MCP 有点特殊它后面需要填这些参数我们先把基础的配置好。 [ 09:27 ]

跟之前一样 cloudMCPAD 后面起个名字可以叫空格 npx 空格然后把这个 MCP 包的名字复制过来。 [ 09:35 ]

后面参数可以不用填直接回车它会告诉我们 MCP 是安装到这个文件里面。 [ 09:39 ]

接下来我们在电脑的目录里面找到这个文件把它打开找到我们的 MCP。 [ 09:46 ]

这里需要把没完成的配置给它添加上。 [ 09:50 ]

首先填写一个参数- 外号接下来把这个参数填写上。 [ 09:54 ]

这里需要填写一个 fig 的 API key。 [ 09:58 ]

我们回到自己的 fig 网站左上角点击 stings 在 security generate new token 然后把下面的这些权线都勾选上创建 token。 [ 10:03 ]

把 API 可以复制一下填写到配置文件里面打个逗号还有最后一个参数也就是 stio。 [ 10:11 ]

这样就配置完成我们启动一下 Cloud 这里显示连接成功了。 [ 10:15 ]

在 cloud code 这边遇到这种参数比较复杂的 MCP 我们可以先在命令行这把基础的配置好然后进入配置文件里面再把参数填写上。 [ 10:26 ]

然后我们来看 Codex。这是 Windows 电脑上在 codex 配置文件里面配置 fig MCP 的方式。 [ 10:30 ]

这是在 Mac 电脑上面配置飞马 mcp 的方式。 [ 10:34 ]

配置好 MCP 我们来试一下。我的提示词是用 NJS15 框架制作一个登录页面严格遵照这个飞马的设计稿。 [ 10:46 ]

我们选中这个设计稿的页面当然也可以选择某个区域或者某些元素。 [ 10:50 ]

选中页面右键 copy link to selection 然后把链接粘贴过来。 [ 10:53 ]

这样执行 codex 调用了 FM MCP 获取到了这个设计稿的结构信息。 [ 10:58 ]

它还调用了 download 的方法把设计稿里面的图片下载了下来然后根据设计稿开始编写代码。 [ 11:06 ]

我们来看一下最终的效果。最后生成的网页跟我的原始设计稿差不多有九成的相似。 [ 11:13 ]

稍微调整一下让 A 充一些后台逻辑就可以直接上线使。 [ 11:16 ]

[ 11:20 ] 5. Codiumate (codex7) MCP：查找新知识

Host: 众所周知 A 大模型的知识都是有截止日期的。 [ 11:24 ]

A 一些经典代码可以完全胜但是许多的新技术都在 A 的知识体系之外了。 [ 11:28 ]

CEX7MCP 可以帮助 A 查找文档补充的编程知识。 [ 11:32 ]

我们先把它来配置一下这里我还是先从 cloud code 来配置一下。 [ 11:36 ]

我们把配置命令复制一下后面的 APK 可以不用填这样回车配置完成。 [ 11:43 ]

启动一下 Cloud 我们来看一个例子。 [ 11:47 ]

Python3.14 于 25 年 10 月 7 日发布这里面有一个新特性叫做模板字符串也叫做 T 字符串。 [ 11:51 ]

我让 A 写一个 Python 文件来演示自符串有什么用。 [ 11:55 ]

我们看到 A 没有理解我的意思我说的是 t 字符串它给我弄成了二字符串。 [ 12:02 ]

生成的代码也是完全错误的。我把这个代码删除。 [ 12:06 ]

我在提示词后面加了一个柚子 7 也就是让 A 在编码之前先用 Cex7mcp 查找文档。 [ 12:13 ]

我们看到 A 调用 Cex7mcp 成功查找到了一些文档然后开始编写代码。 [ 12:18 ]

我们看到 A 这次写的代码这是 Python 3.14 引入的 T 字符串也就是模板字符串。 [ 12:25 ]

下面有它的主要作用可以进行延迟求职自定处理最重要的一个安全检查。 [ 12:32 ]

基本上把替字符串出的功能都列清楚了代码生成的很不错。 [ 12:35 ]

从这个例子里面我们使用 CEX7MCP 为 AAA 引入了 Python 3.14 的最新知识。 [ 12:39 ]

在它的 getub 文档里面有 codex 的配置方式苹果电脑就用这一串然后 Windows 电脑就用这一串。 [ 12:46 ]

这里我就不赘数。 [ 12:46 ]

[12:52] 6. RefMCP：灵活的文档检索

Host: 与 Contex7mcp 类似的是这一个 REFMCP 也可以用来查找文档。 [ 12:56 ]

他们的主要区别是 CEX7MCP 只能从它的 CEX7 的标准文件库里面进行检锁而这个 EFMCP 就更加灵活一些。 [ 13:05 ]

它可以从更冷门的地方进行文档的深入检锁比如减锁论文减锁 GU 仓库等。 [ 13:10 ]

下面也有详细的配置方式它跟 CEX 期的功能用起来差不多这里我就不详细演示。 [ 13:18 ]

[ 13:20 ] 7. Replicate MCP：AI 图像生成

Host: 我们使用 A 编程的时候有时候想快速生产一个产品圆形但是这里面的配图不太好找。 [ 13:25 ]

这时候完全可以让 A 帮我们先生成一张图片放在这里面先用着。 [ 13:29 ]

这样可以改善产品的美观度大幅提高观感。 [ 13:32 ]

这里我用的图片生成网站是 replicate。它提供 API 的调用方式来生成 AI 图片。 [ 13:40 ]

replicate 也有 MCP 我们把这个 MCP 来配置一下。 [ 13:43 ]

我们先在 cloud Code 里面配置 CloudMCPAD 后面给它起个名字我我叫 replicate。 [ 13:49 ]

然后命令是 npx 后面把 npx 包的名字添加上。这里的参数可以先不用填。 [ 13:53 ]

然后我们来修改它生成的配置文件。 [ 13:56 ]

我们这里要做的是把这个参数添加上在 env 这里把参数添加上。 [ 14:00 ]

这里需要一个 replicate token。 [ 14:03 ]

我们来到 replicate 首页这里找到 API token 随便起个名字然后点击 create。 [ 14:08 ]

这样把 token 复制一下粘贴到配置文件里面这样就配置成功了。 [ 14:12 ]

我们启动下 cloud code。 [ 14:15 ]

我让它生成一个可爱的猫的图片图片提示词注意用英文的。 [ 14:18 ]

调用了 replicate MCP 工具然后生成了一张图片。 [ 14:22 ]

我们快速来看一下怎么在 codex 里面配置这个 MCP。 [ 14:25 ]

进入 Codex 的配置文件。这是在 Windows 上面的配置方法注意我们要在配置里面把 replicate 的 API token 写上就是这一串。 [ 14:33 ]

接下来这是 Mac 电脑的配置文件写法。 [ 14:37 ]

我们来看一个实际案例。给这个热气球网站新建一个销售套餐网页设计六个套餐可供选择。 [ 14:44 ]

图片调用 replicate 生成后端可以先不用实现。 [ 14:48 ]

AI 开始编写代码了。这里它调用了 replicate MCP 工具一口气生成了六个图片。 [ 14:51 ]

我们来看一下 A 的效果。 [ 14:55 ]

这是注册页面输入 package 进入套餐的购买页面。 [ 14:58 ]

我们看到它的配图跟这个套餐还是很贴合的基本上完美的实现了我们的需求而且给网页增色不。 [ 15:07 ]

[15:11] 8. Vercel MCP：项目部署

Host: 代码写好了现在需要一个平台速把它部署上线。 [ 15:11 ]

WSEL 就是一个免费提供项目署的平台。 [ 15:15 ]

NJS 就是由 WSEL 开发维护的框架。 [ 15:19 ]

我们使用 NJS 开发的这个热气球网站跟 WSEL 平台是绝配。 [ 15:23 ]

接下来我们就使用 wor 的 MCP 一句话把它不署上。 [ 15:27 ]

我们来到 WSEL 的文档站这里搜索 MCP。 [ 15:31 ]

在左侧找到 WSELMCP Server 这里有 cloud Code 的配置方式把这个配置命令复制一下。 [ 15:35 ]

把命令粘贴过来回车。我们启动下 Cloud Code 斜杠 MCP。 [ 15:38 ]

这里 WSEL 的 MCP 需要先登录一下回车浏览器会自动打开一个窗口。 [ 15:46 ]

我们点击授权授权完成以后就连接成功了。 [ 15:49 ]

我让 A 用 MCP 把这个项目署到 WSEL 上面。 [ 15:53 ]

这样就完成了部署。这里有一个预览地址我们看一下。 [ 15:56 ]

WSEL 的这个域名名在国外的上网环境才可以看到页面都成功显示出来了部署完成。 [ 16:00 ]

除了部署项目 cp 还可以用来查找信息。 [ 16:03 ]

比如我问他我有哪些 WS 项目。 [ 16:07 ]

他先调用 MCP 工具获取到我的团队信息然后查找这个团队下面所有的项目。 [ 16:10 ]

最终查找到了这三个项目是完全正确的。 [ 16:14 ]

我们来快速看一下怎么把 Worsell 的 MCP 配置到 Codex 里面。 [ 16:17 ]

这是 Windows 系统的配置文件的写法。 [ 16:21 ]

这是 MC 电脑上面配置文件的写。 [ 16:26 ]

[ 16:30 ] 9. 4everland Pages MCP：国内部署平台

Host: Warsell 是一个国外的部署平台在国内使用可能会遇到各种各样的网络问题。 [ 16:30 ]

在国内也有一个类似的部署平台 H1 Pages。 [ 16:33 ]

它同样提供 MCP 工具可以把项目一件免费部署到 H1 Pages 上面。 [ 16:42 ]

在这期视频里面我对 1 PageMCP 有过详细介绍了这里我就不赘数。 [ 16:46 ]

[16:48] 10. Cloudflare MCP：无服务器部署与监控

Host: 另外一个重要的无服务器部署平台就是 Cloud Far,cloud Fare 提供了很多种 MCP Server。 [ 16:51 ]

可以用来查找文档可以把项目部署到 cloud Flare Worker 上面可以用来监控日制。 [ 16:59 ]

可以用来查询全球互联网流量趋势启动杀开发环境等等。 [ 17:03 ]

每个 MCP Server 后面都有一个对应的 URL。 [ 17:06 ]

我们在配置的时候注意把后面的 URL 替换一下就可以获得各种各样的功能。 [ 17:13 ]

如果想知道它的具体功能可以点击这个链接进行更深入的查看。 [ 17:16 ]

基本上上 cloud FL 所有的 API 功能都被整合进来了。 [ 17:19 ]

它的用法跟 WSEL 比较相似这里我就不展开演示。 [ 17:23 ]

[17:25] 11. GitHub MCP：自动化代码管理

Host: Getub MCP server 由 Gub 的官方推出。可以把我们的 A Coding Agent 直接连接到 Gub 平台。 [ 17:29 ]

这样 A 就能读取到资源还有代码文件。 [ 17:33 ]

可以用来管理问题和创建 PR 分析代码并且自动化的执行流程。 [ 17:40 ]

这里我先从 cloud code 配置一下 cloudMCPAD 后面起个名字我叫 Gitab。 [ 17:45 ]

两个横杠 ransport 协议是 HDTdP 最后把它的 MCP 的远程地址粘贴过来回车。 [ 17:50 ]

接下来我们来到到配置文件再把 API 添加上。 [ 17:55 ]

找到 gitab MCP 的配置像打一个逗号在下面加 header,Her 里面要填写 Gub 的 API token。 [ 18:04 ]

我们来到 gitab 右上角 stitings 左边找到 developering generate new token。 [ 18:10 ]

这里选择经典随便起个名字然后在下面把权线都给它勾选上然后点击生成。 [ 18:13 ]

把创建出来的 token 复制一下粘贴到配置文件里面。 [ 18:17 ]

我们再启动一下 Cloud code 配置完成我们就把 A 跟 getub 屏平台完全打通了。 [ 18:20 ]

我们来快速看一下 Codex 上面怎么配置 getub MCP Server。 [ 18:28 ]

这是 Windows 的配置文件的写法注意这里要填一个参数叫 HER 然后在里面填写上 ggetub 的 API token。 [ 18:37 ]

这是麦克电脑上面的配置文件的写法。 [ 18:37 ]

我有这么一个 AI 你画我猜的游戏右下角的这个让 AI 猜一猜的按钮非常的淡看不清楚写的是什么。 [ 18:46 ]

然后代码是在 GHub 上面的。这时候可能下载到我这套代码的人会在上面提一个艺术。 [ 18:50 ]

有人会提交艺术说提交按钮看不清楚。 [ 18:53 ]

然后我们就可以让 A 结合 getub MCP 自动把这个问题修复。 [ 18:56 ]

我的提示词是你看一下数 3 然后自动修复一下创建一个 P request。 [ 19:04 ]

它调用了 ub MCP 先获取到了这个医术 A 进行了代码修改修复了这个问题。 [ 19:08 ]

我们看到按钮已经可以看得清楚了。 [ 19:11 ]

然后它又调用了 Gub MCP 创建了一个 p request 把刚才的修改以一个 PR 的形式提交了上去。 [ 19:18 ]

我们在 GHub 的 P request 里面就可以看到 A 推送上来来的代码。 [ 19:22 ]

这里有它的改动内容最终任务完成。 [ 19:26 ]

这样一个从 GUB 这边产生的艺术 A 队代码进行了本地修改又以一个 P request 的形式推送到了 GHub 上面把一个 bug 修复的全流程就跑。 [ 19:32 ]

[19:36] 12. Stripe MCP：集成支付功能

Host: Stripe 是近期最流行的收款服务平台。 [ 19:41 ]

SRIPEMCP 就是把 Stripe 平台的各种能力对接给 A。 [ 19:41 ]

这是我的一个测试账号现在只创建了一个沙核环境我们使用它来演示一下 Stripe MCP。 [ 19:48 ]

在 Cloud Code 里面执行 Cloud MCPADSPE 两个横杠 HTTP 后面是 StripeMCP 的地址。 [ 19:53 ]

然后进入 Cloud Code 斜线 MCP 这里登录一下在浏览器点击授权。 [ 20:01 ]

我的提示词是用 S 创建一个商品支付页面。 [ 20:05 ]

商品信息用 MCP 从 Stripe 获取只实现基础的支付功能即可无需复杂的后台逻辑。 [ 20:13 ]

A 调用了 StripeMCP 获取了商品的信息调用 stripeMCP 获取到了这些商品的价格。 [ 20:21 ]

然后它开始编写业务代码。代码编写完成以后我们需要从 DPE 的控制台获取着两个 key 一个公药一个私药。 [ 20:28 ]

配置完成以后我们把项目启动起来看一下。 [ 20:31 ]

这里有三个商品是从我 stripe 的产品目录取的然后然后客户可以下单购买。 [ 20:38 ]

这里我填写一个测试环境可以用的银行卡然后点击支付。 [ 20:41 ]

支付成功这个流程就跑通了。 [ 20:44 ]

在 Stripe 的后台里面就可以看到这条交易信息。 [ 20:48 ]

这样我们使用 Stripe MCP 给产品接入了支付的能力。 [ 20:51 ]

[20:51] 13. shadcn/ui MCP：前端组件库

Host: SCN 是一个 SHCN 是一个非常好用的前端组建库。 [ 20:51 ]

在这里面几乎可以找到任何一种前端组件每关又好用。 [ 20:58 ]

我们可以在 comonent 这里选中一个组件然后在 code 这里把代码复制到我们的项目里面来。 [ 21:05 ]

当然我们也可以让 A 自动来这边查找然后把代码给我们复制到项目里面。 [ 21:08 ]

在左边找到 MCP server 这里面有 cloud code 的配置方式。 [ 21:12 ]

把这个命令复制下来执行一下。 [ 21:15 ]

我让 A 帮我弄一个 set CNN 的 but 组建。 [ 21:18 ]

这样 A 就完成了代码的编写。这个 MCP 用起来来很方便。 [ 21:21 ]

[21:24] 14. Semgrep MCP：代码安全扫描

Host: 我们使用 AS 写代码最不放心的就是它的安全性。 [ 21:26 ]

sem grip MCP 可以帮助我们进行安全漏洞的扫描。 [ 21:30 ]

它是一个安全的静态分析工具内置了 5000 多条安全规则。 [ 21:34 ]

我们可以使用这个 MCP Server 把它的安全扫描力对接给 A 对我们的项目进行一个整体扫描及时发现漏洞。 [ 21:41 ]

在文档站这里有一个 GHub 链接下面有它的配置方式。 [ 21:44 ]

这也是一个 HTDTP 的我们从 Cloud code 里面配置一下。 [ 21:48 ]

cloudMCPAD 后面起个名字叫 Script 两个横杠协议 HTP 然后把它的 MCP 地址添加到最后面。 [ 21:58 ]

启动下 Cloud code 这里显示 connected 就配置成功了。 [ 22:03 ]

我让它用这个 MCP 对代码进行安全扫描。 [ 22:07 ]

我们看到 A 调用了 MCP 工具对代码进行态的安全扫描。 [ 22:10 ]

扫描完成未发现安全问题。 [ 22:14 ]

下面是这些扫描都完美的符合了我们的代码还是写的不。 [ 22:18 ]

[22:19] 15. GitHub MCP SDK：创建自己的MCP与总结

Host: 终于我们来到了视频的最后第 15 个 MCP。 [ 22:19 ]

这里我不准备介绍具体的 MCP server 了我们看的是 GHub MCP 的官方仓库。 [ 22:26 ]

这里面提供了很多的 SDK 我们可以使用这些 SDK 创建属于我们自己的 MCPSver。 [ 22:30 ]

别人的写的再好终究不如自己的好用。 [ 22:34 ]

如果有什么想法我们可以选择自己喜爱的编程语言创建属于自己的 MCP Server。 [ 22:40 ]

在这期视频里面我详细介绍了如何使用 Python SDK 来创建一个属于自己的 MCP Server。 [ 22:44 ]

感兴趣的观众朋友们可以去看一下。 [ 22:48 ]

好今天的视频到这里感谢大家点赞支持我们下期再见。 [ 22:51 ]