用過上百款編程MCP，只有這15個真正好用，Claude Code與Codex配置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這邊就配置完成了。這個MCP的基礎用法就是讓AI操作瀏覽器，自動化完成一些操作。我讓Codex打開Github，然后找到這個項目，給它點個star。我們看到它調用了MCP工具，打開了Github，找到了搜索欄，然后輸入對應的搜索指令，成功搜索到了我們需要的項目，這里也點上了star。除了基礎的操作瀏覽器，它這里面還有一些工具可以幫助我們輔助調試代碼，比如可以獲取網絡請求，然后列出控制臺的報錯等等。

我讓AI測試一下這個網站的提交按鈕，看看如果有報錯的話應該如何修改。我們看到AI觸發了測試，并且控制臺已經有了報錯，他通過MCP工具讀取到控制臺信息，還有網絡請求，然后Codex在代碼里面找到了報錯原因，應該把這個put請求改成post，這樣使用Chrome dev tools MCP成功進行了頁面的調試，并且精準地修改好了代碼，非常的方便。

Neon

Neon是一個基于Postgres封裝的免費的云端數據庫。 https://neon.com 我們接入它的MCP，就可以讓AI瞬間獲得一個免費的云端數據庫。這里找到Docs，然后搜索MCP，找到這個文檔Connect MCP，里面列出了各個客戶端的配置方式。

我們先看Claude Code，這里有一個一鍵配置命令。

claude mcp add --transport http neon https://mcp.neon.tech/mcp

配置新的MCP Server之前，我先把舊的移除掉。MCP Server不是配置越多越好，每配置一個MCP Server都會增加一部分的上下文占用，所以MCP Server最好是用哪個配置哪個。輸入claude mcp list，這里列出的是之前裝過的MCP。我把上一個移除掉，輸入命令claude mcp remove，然后粘貼上MCP的名字，這樣就移除干凈了。我們把Neon的這個命令復制過來，添加進去，再啟動下claude，輸入/mcp，這里顯示Neon的需要登錄授權一下。我們回車，瀏覽器會打開一個窗口要求授權，點擊approve，這里顯示授權完成。我們回到Claude Code，Neon這里顯示Connected，就配置成功了。

接下來，我們看一下Codex怎么配置。這里來到Codex配置文件，Codex直接配置http的MCP會有問題，這里我從文檔里面找一個npx的配置方式：

C:/用戶/{你的用戶名}/.codex/config.toml

[mcp_servers.Neon]
command = "cmd"
args = [
  "/c",
  "npx",
  "-y",
  "mcp-remote@latest",
  "https://mcp.neon.tech/mcp"
]
env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files" }
startup_timeout_ms = 60_000

如果您是蘋果電腦：

~/.codex/config.toml

[mcp_servers.Neon]
command = "npx"
args = [
 "-y",
 "mcp-remote@latest", I
 "https://mcp.neon.tech/mcp"
]

回到Codex，輸入命令/mcp，這樣Neon MCP在Codex這邊也配置完成了。我準備了一個CSV文件的測試數據，這里面存儲的是學生的學號名字，還有分數。

我準備讓AI創建一個數據庫，然后把這個表存進去。我說新建一個project，把這個數據存到一個表里面。

Codex調用了Neon MCP，先新建了一個project，然后執行SQL語句，把表建出來了。接下來執行SQL語句，把數據插入了表里面。我們來到Neon的控制臺，就可以看到剛才新建的project，在project里面，就可以看到我們的數據表。這樣我們的code agent就有一個，完全操作一個數據庫的能力。我們也可以使用AI，在這里面把相應的數據表都建出來，再讓AI幫我們生成后端代碼，形成一個完整的具有數據庫的后端應用。

SupaBase MCP

Supabase比Neon的功能更加強大，在強大的Postgres數據庫的基礎上，封裝了用戶認證、文件存儲、可視化的運維面板等功能，為開發者提供了一整套開箱可用的后端基礎設施。我們來把Supabase的MCP也配置一下。我們先來到Supabase的控制臺，創建一個新的項目，給項目起個名字，填個密碼，點擊創建。我們來到Supabase的文檔站，在project這里選擇我們剛才建的項目。這里有一個配置方式，這是一個遠程調用的MCP Server，我們先在Claude Code里面配置一下，

claude mcp add supabase --transport http https://mcp.supabase.com/mcp?project_ref=jnwzzd1lytseoseovqfbr

注意：https://mcp.supabase.com/mcp?project_ref=jnwzzd1lytseoseovqfbr 這是官網的提供的mcp地址，

每個項目都不一樣

回車啟動一下Claude Code，輸入/mcp，選擇Supabase，回車，在瀏覽器打開的窗口下面點擊授權，這樣就配置完成了。我還是讓他創建一個表，把這個數據寫進去，這樣在Supabase的后臺，就可以看到我們創建的表了。

我讓AI用nextjs寫一個項目，利用Supabase自帶的用戶鑒權功能，實現用戶登錄，代碼寫完了。

項目里需要配置兩個環境變量，一個是URL，還有一個Key。這個完全可以使用MCP自動生成一個。我跟AI說一下，你用MCP把環境變量填一下。這里他成功調用了MCP，幫我們填寫好了URL，還有API Key。接下來我們把項目啟動起來，試一下npm run dev。進來以后，是一個非常簡單的登錄跟注冊頁面，這里我填一個郵箱，點擊注冊，注冊鏈接就發到了我的郵箱。來到郵箱收一下驗證郵件，郵箱驗證完成以后，點擊登錄，這里顯示登錄成功。我們去supabase后臺看一下，在左側Authentication里面，就可以看到剛才注冊進來的這個用戶。

然后我們還可以結合上面的數據庫，創建一些業務表。我們通過Supabase MCP就可以創建一個完整的帶用戶登錄加后臺數據庫的一個完整應用。

我們看一下Codex怎么配置Supabase，

Windows電腦： C:/用戶/{你的用戶名}/.codex/config.toml

[mcp_servers.supabase]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "mcp-remote@latest",
    "https://mcp.supabase.com/mcp?project_ref=jnwzzdllytseseovqfbr"
]
env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files" }
startup_timeout_ms = 60_000

蘋果電腦

~/.codex/config.toml

[mcp_servers.supabase]
command = "npx"
args = [
  "-y",
  "mcp-remote@latest",
  "https://mcp.supabase.com/mcp?project_ref=jnwzzdllytseseovqfbr"
]

Figma MCP

Figma成為了今年最流行的網頁與APP設計工具，可以讓團隊在瀏覽器上合作設計，而不必依賴復雜笨重的本地軟件。Figma里面有上百款可以免費使用的UI設計模板，這里我找到一個登錄頁面，并且把它改造了一下，我想讓AI把這個頁面實現成一個網站。我們可以使用Figma MCP，把這個設計稿對接到coding agent里面，一句話就能生成這樣的網頁。我們先在Claude Code里面把它配置一下。這個MCP有點特殊，它后面需要填這些參數。我們先把基礎的配置好，跟之前一樣，claude mcp add figma npx，然后把這個MCP包的名字復制過來，

后面參數可以不用填，直接回車。它會告訴我們MCP是安裝到這個文件里面。

接下來，我們在電腦的目錄里面找到這個文件，把它打開，找到我們的MCP。這里需要把沒完成的配置給它添加上。

我們回到自己的Figma網站，左上角點擊Settings，在Security -> Generate new TOKEN，

然后把下面的這些權限都勾選上，創建TOKEN，

把API Key復制一下，填寫到配置文件里面，打個逗號，還有最后一個參數，也就是--stdio。這樣就配置完成。

在Claude Code這邊，遇到這種參數比較復雜的MCP，我們可以先在命令行這里把基礎的配置好，然后進入配置文件里面再把參數填寫上。

然后我們來看Codex，這是Windows電腦上

[mcp_servers.figma]
command = "cmd"
args = [
"/c",
"npx",
"-y",
"figma-developer-mcp",
"--figma-api-key=figd_zYMLXKdr9arw3akf4pzxlfpfnxaqr3UT0Y5SnnWT",
"--stdio"
]
env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files" }
startup_timeout_ms = 60_000

這是在Mac電腦上面配置Figma MCP的方式。

[mcp_servers.figma]
command = "npx"
args = [
  "-y",
  "figma-developer-mcp",
  "--figma-api-key=figd_zYMLXKdr9arw3akf4pzx1fpfnxaqr3UT0Y5SnnWT",
  "--stdio"
]

配置好MCP，我們來試一下。我的提示詞是：

用Next.js 15框架制作一個登錄頁面，嚴格遵照這個Figma的設計稿。我們選中這個設計稿的頁面，當然也可以選擇某個區域，或者某些元素。選中頁面，右鍵copy -> copy link to selection，然后把鏈接粘貼過來，這樣執行。

Codex調用了Figma MCP，獲取到了這個設計稿的結構信息。他還調用了Download的方法，把設計稿里面的圖片下載了下來，然后根據設計稿開始編寫代碼。我們來看一下最終的效果，最后生成的網頁，跟我的原始設計稿差不多，有9成的相似，稍微調整一下，讓AI補充一些后臺邏輯，就可以直接上線使用了。

Context 7

眾所周知，AI大模型的知識都是有截止日期的，AI寫一些經典代碼可以完全勝任，但是許多的新技術都在AI的知識體系之外了。Context7 MCP可以幫助AI查找文檔，補充最新的編程知識。我們先把它來配置一下，這里我還是先從Claude Code來配置一下。我們把配置命令復制一下，

claude mcp add --transport http context7 https://mcp.context7.com/mcp

后面的API Key可以不用填（如果調用量不大）。這樣回車，配置完成。啟動一下claude。我們來看一個例子，Python 3.14于25年10月7日發布，這里面有一個新特性叫做模板字符串，也叫做t-字符串。

我讓AI寫一個Python文件來演示t字符串有什么用。我們看到AI沒有理解我的意思，

我說的是t字符串，它給我弄成了r字符串，生成的代碼也是完全錯誤的。我把這個代碼刪除。我在剛才的提示詞后面加了一個use context7

也就是讓AI在編碼之前，先用context7 MCP查找文檔。我們看到AI調用context 7 MCP，成功查找到了一些文檔，然后開始編寫代碼。

我們看到AI這次寫的代碼，這是Python 3.14引入的t字符串，也就是模板字符串，下面有它的主要作用，可以進行延遲求值，自定義處理，最重要的一個安全檢查，基本上把t字符串的功能都列清楚了，代碼生成的很不錯。

從這個例子里面，我們使用context 7 MCP為AI引入了Python 3.14的最新知識。在它的GitHub文檔里面，有Codex的配置方式，

蘋果電腦就用這一串，

[mcp_servers.context7]
args = ["-y", "@upstash/context7-mcp", "--api-key", "YOUR_API_KEY"]
command = "npx"

然后Windows電腦就用這一串，

[mcp_servers.context7]
command = "cmd"
args = [
"/c",
"npx",
"-y",
"@upstash/context7-mcp",
"--api-key",
"YOUR_API_KEY"
]
env = { SystemRoot="C:\Windows" }
startup_timeout_ms = 20_000

這里我就不贅述了。

Ref MCP

與context7 MCP類似的是，這一個Ref MCP也可以用來查找文檔。https://github.com/ref-tools/ref-tools-mcp

它們的主要區別是Context7 MCP只能從它的Context7的標準文件庫里面進行檢索，而這個Ref MCP就更加靈活一些，它可以從更冷門的地方進行文檔的深入檢索，比如檢索論文，檢索Github倉庫等等。下面也有詳細的配置方式，它跟context7的功能用起來差不多，這里我就不詳細演示了。

Replica MCP

我們使用AI編程的時候，有時候想快速生產一個產品原型，但是這里面的配圖不太好找，這時候完全可以讓AI幫我們先生成一張圖片，放在這里面先用著。這樣可以改善產品的美觀度，大幅提高觀感。這里我用的圖片生成網站是Replicate。https://replicate.com，它提供API的調用方式來生成AI圖片。Replicate也有MCP，我們把這個MCP來配置一下。我們先在Claude Code里面配置，

修改生產的配置文件，C:\Users\你的用戶名.claude.json

我們這里要做的是把這個參數添加上，這里需要一個Replicate API TOKEN。我們來到Replicate的首頁，這里找到API TOKEN，隨便起個名字然后點擊create，這樣把TOKEN復制一下，粘貼到配置文件里面。

{
  "mcpServers": {
    "Replicate Flux MCP": {
      "command": "npx",
      "args": [
        "-y",
        "replicate-flux-mcp"
      ],
      "env": {
        "REPLICATE_API_TOKEN": "你的API KEY"
      }
    }
  }
}

這樣就配置成功了。我們啟動下Claude Code。我讓它生成一個可愛的貓的圖片，提示詞注意用英文的。調用了Replicate MCP工具，然后生成了一張圖片。我們快速來看一下怎么在Codex里面配置這個MCP。

進入Codex的配置文件，這是在Windows上面的配置方法，

[mcp_servers.replicate]
command = "cmd"
args = [
  "/c",
  "npx",
  "-y",
  "replicate-flux-mcp"
]
env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files", REPLICATE_API_TOKEN="r8_MPwJVCYxBSvrYNSETThDE69JQwAAk9SC3r7XSW" }
startup_timeout_ms = 60_000

注意我們要在配置項里面把replicate的API token寫上。接下來這是Mac電腦的配置文件寫法。

[mcp_servers.replicate]
command = "npx"
args = [
  "-y",
  "replicate-flux-mcp"
]
env = {"REPLICATE_API_TOKEN="r8_MPwJVCYxbSvrYNSETHDE69JQwAAk9sC3r7XSW"}

我們來看一個實際案例，給這個熱氣球網站新建一個銷售套餐網頁，設計6個套餐可供選擇，圖片調用Replicate生成，后端可以先不用實現。AI開始編寫代碼了，這里它調用了Replicate MCP工具，一口氣生成了6個圖片。我們看到它的配圖跟這個套餐還是很貼合的，基本上完美的實現了我們的需求，而且給網頁增色不少。

Vercel

代碼寫好了，現在需要一個平臺快速把它部署上線。Vercel就是一個免費提供項目部署的平臺。Next.js就是由Vercel開發維護的框架，我們使用Next.js開發的這個熱氣球網站跟Vercel平臺是絕配。接下來我們就使用Vercel的MCP，一句話把它部署上線。我們來到Vercel 的文檔站，https://vercel.com/docs，這里搜索MCP，在左側找到Vercel MCP Server。

這里有Claude Code的配置方式，把這個配置命令復制一下，把命令粘貼過來回車。我們啟動一下Claude Code，/mcp，這里Vercel的MCP需要先登錄一下，回車，瀏覽器會自動打開一個窗口，我們點擊授權，授權完成以后就連接成功了。

我讓AI用MCP把這個項目部署到Vercel上面，這樣就完成了部署。這里有一個預覽地址，我們看一下，Vercel的這個域名只有在國外的上網環境才可以看到。https://hot-air-balloon-travel-ixqulcc39-tech-shrimps-projects.vercel.app/

頁面都成功顯示出來了，部署完成。除了部署項目Vercel MCP，還可以用來查找信息。比如我問他我有哪些Vercel項目，他先調用MCP工具，獲取到我的團隊信息，然后查找這個團隊下面所有的項目，最終查找到了這三個項目，是完全正確的。我們來快速看一下怎么把Vercel的MCP配置到Codex里面，這是Windows系統的配置文件的寫法。

[mcp_servers.vecel]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "mcp-remote@latest",
    "https://mcp.vercel.com"
]
env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files" }
startup_timeout_ms = 60_000

這是Mac電腦上面配置文件的寫法。

[mcp_servers.vecel]
command = "npx"
args = [
  "-y",
  "mcp-remote@latest",
  "https://mcp.vercel.com"
]

Edgeone Pages

Vercel是一個國外的部署平臺，在國內使用可能會遇到各種各樣的網絡問題。在國內也有一個類似的部署平臺EdgeOne Pages，https://console.tencentcloud.com/edgeone/pages，它同樣提供MCP工具，可以把項目一鍵免費部署到EdgeOne Pages上面。在這期視頻里面，我對EdgeOne Pages MCP有過詳細介紹了，這里我就不贅述了。https://www.bilibili.com/video/BV1o6ngztEKx/

Cloudflare

另外一個重要的無服務器部署平臺就是Cloudflare。https://github.com/cloudflare/mcp-server-cloudflare，Cloudflare提供了很多種MCP Server，可以用來查找文檔，可以把項目部署到Cloudflare Worker上面，可以用來監控日志，可以用來查詢全球互聯網流量趨勢，啟動沙箱開發環境等等。每個MCP Server后面都有一個對應的URL，我們在配置的時候注意把后面的URL替換一下，就可以獲得各種各樣的功能。如果想知道它的具體功能，可以點擊這個鏈接進行更深入的查看。基本上Cloudflare所有的API功能都被整合進來了。它的用法跟Vercel比較相似，這里我就不展開演示了。

Github

Github MCP Server由Github的官方推出，https://github.com/github/github-mcp-server，可以把我們的AI coding agent直接連接到Github平臺。這樣AI就能讀取到資源庫，還有代碼文件，可以用來管理問題和創建PR，分析代碼，并且自動化的執行流程。這里我先從Claude Code配置一下，

claude mcp add github --transport http https://api.githubcopilot.com/mcp/

接下來我們來到配置文件，再把API Key添加上。我們來到GitHub右上角settings，左邊找到Developer settings -> generate new TOKEN，

這里選擇經典，隨便起個名字，然后在下面把權限都給它勾選上，然后點擊生成，把創建出來的TOKEN復制一下，粘貼到配置文件里面(Bearer 后面就是API Key)。我們再啟動一下Claude Code，配置完成。我們就把AI跟GitHub平臺完全打通了。

我們來快速看一下Codex上面怎么配置GitHub MCP Server，這是Windows的配置文件的寫法，

[mcp_servers.github]
command = "cmd"
args = [
  "/c",
  "npx",
  "-y",
  "mcp-remote@latest",
  "https://api.githubcopilot.com/mcp/",
  "--header",
  "Authorization: Bearer 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"
]
env = { SystemRoot="C:\Windows", PROGRAMFILES="C:\Program Files" }
startup_timeout_ms = 60_000

注意這里要添一個參數叫header，然后在里面填寫上GitHub的API TOKEN。這是Mac電腦上面的配置文件的寫法。

[mcp_servers.github]
command = "npx"
args = [
    "-y",
    "mcp-remote@latest",
    "https://api.githubcopilot.com/mcp/",
    "--header",
    "Authorization: Bearer ghp_AchbdqXqYqGCsVHU5HQZGK447lCfgT0Vyyd6"
]

我有這么一個AI你畫我猜的游戲，右下角的這個讓AI猜一猜的按鈕非常的淡，看不清楚寫的是什么。然后代碼是在Github上面的，這時候可能下載到我這套代碼的人會在上面提一個issue。有人會提交issue，說提交按鈕看不清楚。然后我們就可以讓AI結合Github MCP自動把這個問題修復。我的提示詞是你看一下issue3，然后自動修復一下，創建一個pull request。

它調用了Github MCP，先獲取到了這個issue。AI進行了代碼修改，修復了這個問題。我們看到按鈕已經可以看得清楚了。然后他又調用了Github MCP，創建了一個pull request，把剛才的修改以一個PR的形式提交了上去。我們在Github的pull request里面就可以看到AI推送上來的代碼，

這里有他的改動內容，最終任務完成。這樣一個從Github這邊產生的issue，AI對代碼進行了本地修改，又以一個pull request的形式推送到了Github上面，把一個bug修復的全流程就跑通了。

Stripe

Stripe是近期最流行的收款服務平臺。Stripe MCP就是把Stripe平臺的各種能力對接給AI。這是我的一個測試賬號，現在只創建了一個沙盒環境。我們使用它來演示一下Stripe MCP。在Claude Code里面執行

claude mcp add stripe --transport http https://mcp.stripe.com/

然后進入Claude Code，/mcp，這里登錄一下，在瀏覽器點擊授權。我的提示詞是，用Next.js創建一個商品支付頁面，商品信息用MCP從Stripe獲取，只實現基礎的支付功能即可，無需復雜的后臺邏輯。AI調用了Stripe MCP獲取了商品的信息，調用Stripe MCP獲取到了這些商品的價格，然后他開始編寫業務代碼。代碼編寫完成以后，我們需要從Stripe的控制臺獲取這兩個key，一個公鑰，一個私鑰。

配置完成以后，我們把項目啟動起來，看一下。這里有3個商品，是從我Stripe的產品目錄讀取的。然后客戶可以下單購買，這里我填寫一個測試環境可以用的銀行卡，然后點擊支付，支付成功。這個流程就跑通了。在Stripe的后臺里面就可以看到這條交易信息。這樣我們使用Stripe MCP給產品接入了支付的能力。..

ShadCN

ShadCN是一個非常好用的前端組件庫，https://ui.shadcn.com/#，在這里面幾乎可以找到任何一種前端組件，美觀又好用。我們可以在component這里選中一個組件，然后在code這里把代碼復制到我們的項目里面來。當然我們也可以讓AI自動來這邊查找，然后把代碼給我們復制到項目里面。在左邊找到MCP Server，這里面有Claude Code的配置方式。把這個命令復制下來執行一下。我讓AI幫我弄一個ShadCN的Button組件，這樣AI就完成了代碼的編寫。這個MCP用起來很方便。

Semgrep

我們使用AI寫代碼，最不放心的就是它的安全性。Semgrep MCP可以幫助我們進行安全漏洞的掃描。https://semgrep.dev/docs/mcp?utm_source=chatgpt.com，它是一個安全靜態分析工具，內置了5,000多條安全規則。我們可以使用這個MCP Server，把它的安全掃描能力對接給AI，對我們的項目進行一個整體掃描，及時發現漏洞。在文檔站這里有一個Github鏈接，下面有它的配置方式。這也是一個Http的。我們從Claude Code里面配置一下，

我讓他用這個MCP對代碼進行安全掃描。我們看到AI調用了MCP工具，對代碼進行靜態的安全掃描。掃描完成，未發現安全問題。下面是這些掃描項都完美的符合了我們的代碼，還是寫得不錯的。

MCP SDK

終于我們來到了視頻的最后第15個MCP，這里我不準備介紹具體的MCP Server了。我們看的是GitHub MCP的官方倉庫，https://github.com/modelcontextprotocol，這里面提供了很多的SDK，

我們可以使用這些SDK創建屬于我們自己的MCP Server。別人的寫的再好，終究不如自己的好用。如果有什么想法，我們可以選擇自己喜愛的編程語言創建屬于自己的MCP Server。在這期視頻里面，我詳細介紹了如何使用Python SDK來創建一個屬于自己的MCP Server，感興趣的觀眾朋友們可以去看一下。https://www.bilibili.com/video/BV1RNTtzMENj

好，今天的視頻到這里，感謝大家點贊支持，我們下期再見！

posted @ 2025-10-29 16:39 技術爬爬蝦閱讀(349) 評論(0) 收藏舉報

刷新頁面返回頂部

tech-shrimp