作者 | Loraine Lawson

譯者 | 平川

策劃 | Tina

本文最初發(fā)布于 THENEWSTACK。

圖片來自 Pexels，由 Sergei Starostin 提供

如今，幾乎轉(zhuǎn)個身的功夫就會聽到又有公司創(chuàng)建了新的 MCP 服務(wù)器。

MCP 是 Anthropic 推出的一個新興的開放標(biāo)準(zhǔn)，為 AI 模型提供了一種與外部數(shù)據(jù)源和工具進行交互的方式。它就像一種通用語言和一套規(guī)則，使 大型語言模型 能夠與自身之外的其他系統(tǒng)進行對話。

MCP 服務(wù)器 的推出速度讓人應(yīng)接不暇，但這些服務(wù)器對開發(fā)者來說大有裨益，因為 MCP 可以與集成開發(fā)環(huán)境（IDE）中的 AI 協(xié)同工作，提供文檔與技術(shù)支持。

幾乎每天都有新的 MCP 服務(wù)器發(fā)布，該如何判斷哪一個最適合自己？通過大量的研究和 Gemini 的一點幫助，我們識別出了十個可以支持和簡化前端開發(fā)工作的 MCP 服務(wù)器（加上一個實驗性 MCP 服務(wù)器）。

1. Canva MCP 服務(wù)器

為什么有用：在 Canva MCP 服務(wù)器 推出之前，構(gòu)建 Canva 應(yīng)用是一個漫長的過程。為了確保應(yīng)用與 Canva 的外觀風(fēng)格保持一致，開發(fā)者必須來回與 Canva 溝通。Canva意識到，它可以將使用開發(fā)工具的工作轉(zhuǎn)移到 Canva 之外，并在 IDE 中為開發(fā)者提供訪問權(quán)限。MCP 服務(wù)器：

• 通過單個提示生成 Canva 應(yīng)用。遵循既定的最佳實踐，通過調(diào)用 Canva CLI 應(yīng)用生成器，MCP 服務(wù)器可以創(chuàng)建一個結(jié)構(gòu)完整的應(yīng)用程序。然后，一旦應(yīng)用創(chuàng)建完成，它就可以幫助你使用 Apps SDK 提供的各種方法添加新功能；

• 適配 App UI Kit，允許開發(fā)者將現(xiàn)有 UI 遷移到 App UI Kit 組件，確保整個應(yīng)用程序在功能上和美學(xué)上保持一致；

• 使遵守 Canva 的設(shè)計指南更加容易；

• 根據(jù) Canva 設(shè)計指南生成一個提供”必須 / 應(yīng)該 / 可以“建議的報告。它甚至提供了代碼改進建議；

• 與像 Claude 這樣的 AI 聊天助手集成，開發(fā)者可以和它討論 Canva Apps SDK 或 Connect API；

• 借助 Connect API 與 Canva 集成，通過生成 Canva Connect API 客戶端代碼來創(chuàng)建新設(shè)計或上傳資源。

2. Dart MCP 服務(wù)器

為什么有用：Dart MCP 服務(wù)器 允許 AI 代理與 Dart 平臺進行交互。這個 MCP 服務(wù)器允許 AI 助手以編程方式訪問和管理 Dart 工作區(qū)內(nèi)的數(shù)據(jù)，如客戶信息、項目、任務(wù)、時間跟蹤和計費。關(guān)鍵特性如下：

• 工作區(qū)交互，允許 AI 代理 連接并執(zhí)行特定 Dart 工作區(qū)中的操作；

• 客戶和項目管理，允許查詢甚至管理客戶詳細(xì)信息、項目和相關(guān)任務(wù)；

• 任務(wù)和時間跟蹤訪問，允許開發(fā)者訪問 Dart 中記錄的任務(wù)信息、狀態(tài)和時間條目；

• 計費和財務(wù)數(shù)據(jù)，能夠檢索發(fā)票、預(yù)付款及 Dart 中管理的其他方面的財務(wù)信息；

• 協(xié)作和溝通，包括支持與項目和任務(wù)相關(guān)的更新；

• 自定義字段和數(shù)據(jù)，使開發(fā)者可以訪問在 Dart 工作區(qū)中配置的自定義字段中存儲的數(shù)據(jù)。

3. DigitalOcean MCP 服務(wù)器

為什么有用：DigitalOcean MCP 服務(wù)器 允許 AI 與云基礎(chǔ)設(shè)施進行交互，為前端開發(fā)者提供了一個簡單的自然語言界面來管理他們的后端。MCP 服務(wù)器：

• 允許開發(fā)者從頭開始構(gòu)建應(yīng)用程序并將其部署到 DigitalOcean，而無需離開 IDE；

• 直接從 GitHub 存儲庫部署新應(yīng)用；

• 用單個提示更改代碼并重新部署；

• 創(chuàng)建所有應(yīng)用程序的列表，檢查它們，重啟它們或從編輯器中刪除它們。

• 強制重新構(gòu)建或刪除應(yīng)用程序；

• 檢查哪些區(qū)域可用，并據(jù)此規(guī)劃部署。

4. Figma Dev Mode MCP 服務(wù)器

為什么有用：Dev Mode MCP 服務(wù)器 為 AI 代理提供設(shè)計信息和上下文，從 Figma 設(shè)計文件 生成代碼。本地服務(wù)器允許 AI 助手以編程方式獲取當(dāng)前 Figma 文件、項目和選定設(shè)計元素（節(jié)點）的詳細(xì)信息，并將 AI 能力整合到設(shè)計 - 開發(fā)工作流中。它能：

• 從選定的 frame 或節(jié)點生成代碼。Figma 用戶可以在 Figma 中選擇一個 frame 或提供節(jié)點 URL，讓 AI 代理將設(shè)計轉(zhuǎn)換為代碼；

• 從 layer 中獲取變量、組件和布局來提取設(shè)計上下文，確保構(gòu)建遵循設(shè)計模式；

• Code Connect。MCP 服務(wù)器會根據(jù) Code Connect 信息向 AI 代理通報現(xiàn)有組件，支持重用。

5. GitHub MCP 服務(wù)器

為什么有用：GitHub MCP 服務(wù)器 是專門為開發(fā)者構(gòu)建的，并允許 AI 代理直接與代碼庫、拉取請求和問題進行交互。GitHub MCP 服務(wù)器將 AI 工具直接連接到 GitHub 平臺，使 AI 代理、助手和聊天機器人能夠讀取存儲庫和代碼文件，管理問題和 PR，分析代碼，并自動化工作流。所有這些都通過自然語言交互完成。MCP 服務(wù)器提供：

• 存儲庫管理：開發(fā)者可以瀏覽和查詢代碼，搜索文件，分析提交記錄，并了解他們有權(quán)訪問的任何存儲庫的項目結(jié)構(gòu)；

• 問題和拉取請求自動化：創(chuàng)建、更新并管理問題和拉取請求。AI 可以幫助分類錯誤，審查代碼更改，并維護項目看板；

• 實現(xiàn) CI/CD 和工作流智能化。它可以 監(jiān)控 GitHub Actions 工作流的運行情況，分析構(gòu)建失敗的原因，管理版本發(fā)布并深入洞察開發(fā)管道的運行情況；

• 分析代碼，檢查發(fā)現(xiàn)的安全問題，審查 Dependabot 告警，理解代碼模式，并全面了解代碼庫。

• 通過提供討論組訪問權(quán)限、管理通知、分析團隊活動、簡化團隊流程來實現(xiàn)團隊協(xié)作。

6. JetBrains MCP 代理服務(wù)器

為什么它很有用：JetBrains 提供 IDE，包括用于 Java 和 Kotlin 的 IntelliJ IDEA，用于 Python 的 PyCharm，用于 JavaScript 的 WebStorm，用于.NET 的 Rider，以及用于 C/C++ 的 CLion。它為其 MCP 代理服務(wù)器 提供了一個插件，允許 AI 工具利用 IDE 的代碼理解能力，執(zhí)行重構(gòu)，生成代碼，并直接在 AI 助手運行的開發(fā)環(huán)境中訪問項目上下文。它促成了：

• IDE 集成，為外部 AI 代理與在 JetBrains IDE 中運行的 AI 助手插件之間提供通信橋梁；

• 代碼理解和分析，使 AI 代理能夠獲取 IDE 對代碼庫的理解，包括語法、語義和項目結(jié)構(gòu)；

• 代碼生成和修改，由 IDE 執(zhí)行，有利于 AI 驅(qū)動的代碼生成、自動補全、重構(gòu)和其他代碼操作任務(wù)；

• 項目上下文訪問，使 AI 代理能夠獲取當(dāng)前項目、已打開文件和光標(biāo)位置的信息，從而提供與上下文相關(guān)的幫助；

• 本地執(zhí)行，這意味著代理在本地運行，有助于本地 AI 代理或開發(fā)工具與本地 JetBrains IDE 實例之間進行通信。

7. MongoDB MCP 服務(wù)器

為什么它很有用：MongoDB MCP 服務(wù)器 允許 AI 與其數(shù)據(jù)庫進行交互。前端開發(fā)者可以使用 AI 代理：

• 查詢數(shù)據(jù)庫來獲取特定的信息；

• 通過自然語言向數(shù)據(jù)庫添加管理數(shù)據(jù)的新用戶；

• 通過為數(shù)據(jù)庫創(chuàng)建新集合來管理集合；

• 獲取數(shù)據(jù)庫的模式；

• 創(chuàng)建可感知上下文的代碼生成功能，也就是說，開發(fā)者可以描述所需的數(shù)據(jù)，并讓 AI 生成 MongoDB 查詢甚至與之交互的代碼。

8. React MCP 服務(wù)器（第三方）

Meta 尚未宣布 React MCP 服務(wù)器的發(fā)布計劃，但 Drishya AI Labs 前端開發(fā)人員 Kalivaraprasad Gonapa 已經(jīng)創(chuàng)建了一個。該 React MCP 服務(wù)器 集成了 Claude Desktop，據(jù)其 GitHub 頁面介紹，它能夠根據(jù)用戶提示創(chuàng)建和修改 React 應(yīng)用程序。它可以：

• 創(chuàng)建新的 React 應(yīng)用程序；

• 運行 React 開發(fā)服務(wù)器；

• 管理文件和目錄；

• 安裝 npm 包；

• 執(zhí)行終端命令；

• 跟蹤和管理長期運行的進程。

9. Shopify Dev MCP 服務(wù)器

為什么它很有用：這個 MCP 服務(wù)器 可以將開發(fā)者的 AI 助手連接到 Shopify 的開發(fā)資源，使 AI 助手能夠搜索 Shopify 文檔，探索 API 模式，構(gòu)建功能，并獲取關(guān)于 Shopify API 和最佳實踐的最新方案。MCP 服務(wù)器能夠：

• 向 AI 助手咨詢使用 Shopify 進行開發(fā)的相關(guān)問題；

• 支持 Shopify API，包括 Admin GraphQL API、函數(shù)、Polaris Web 組件（可選）和 Liquid（可選）；

• 與 AI 開發(fā)工具集成，如 Cursor 和 Claude Desktop。

10. Vercel MCP 服務(wù)器

為什么它很有用：Vercel MCP 服務(wù)器 允許 AI 與前端開發(fā)和托管平臺進行交互。它適用于 Gemini CLI、Gemini Code Assist、Windsurf、Goose、Raycast、Devin、VS Code with Copilot、Cursor、Claude 和 Claude Code 以及 ChatGPT。它能夠：

• 部署應(yīng)用程序的新版本；

• 獲取有關(guān)應(yīng)用程序的反饋，包括新功能；

• 通過檢查應(yīng)用程序的環(huán)境變量來管理應(yīng)用程序設(shè)置；

• 處理新應(yīng)用程序的配置。

即將推出的 Angular MCP 服務(wù)器（實驗性）

為什么它很有用：Angular 有一個處于實驗階段的 CLI MCP 服務(wù)器，它將提供可以在開發(fā)工作流中為開發(fā)者提供幫助的工具。它能夠：

• 提供最佳實踐支持，允許開發(fā)者訪問 Angular 最佳實踐指南，確保所有代碼都符合現(xiàn)代標(biāo)準(zhǔn)；

• 通過讀取 angular.json 配置文件，列出 Angular 工作區(qū)中定義的所有應(yīng)用程序和庫；

• 搜索 Angular 官方文檔。

https://thenewstack.io/10-mcp-servers-for-frontend-developers/

聲明：本文為 InfoQ 翻譯，未經(jīng)許可禁止轉(zhuǎn)載。