10 个面向前端开发者的 MCP 服务器

本文最初发布于 THENEWSTACK。

图片来自 Pexels，由 Sergei Starostin 提供

如今，几乎转个身的功夫就会听到又有公司创建了新的 MCP 服务器。

MCP 是 Anthropic 推出的一个新兴的开放标准，为 AI 模型提供了一种与外部数据源和工具进行交互的方式。它就像一种通用语言和一套规则，使大型语言模型能够与自身之外的其他系统进行对话。

MCP服务器的推出速度让人应接不暇，但这些服务器对开发者来说大有裨益，因为 MCP 可以与集成开发环境（IDE）中的 AI 协同工作，提供文档与技术支持。

几乎每天都有新的 MCP 服务器发布，该如何判断哪一个最适合自己？通过大量的研究和 Gemini 的一点帮助，我们识别出了十个可以支持和简化前端开发工作的 MCP 服务器（加上一个实验性 MCP 服务器）。

1. Canva MCP 服务器

为什么有用：在Canva MCP服务器推出之前，构建 Canva 应用是一个漫长的过程。为了确保应用与 Canva 的外观风格保持一致，开发者必须来回与 Canva 沟通。Canva意识到，它可以将使用开发工具的工作转移到 Canva 之外，并在 IDE 中为开发者提供访问权限。MCP 服务器：

• 通过单个提示生成 Canva 应用。遵循既定的最佳实践，通过调用 Canva CLI 应用生成器，MCP 服务器可以创建一个结构完整的应用程序。然后，一旦应用创建完成，它就可以帮助你使用 Apps SDK 提供的各种方法添加新功能；

• 适配 App UI Kit，允许开发者将现有 UI 迁移到 App UI Kit 组件，确保整个应用程序在功能上和美学上保持一致；

• 使遵守 Canva 的设计指南更加容易；

• 根据 Canva 设计指南生成一个提供”必须/应该/可以“建议的报告。它甚至提供了代码改进建议；

• 与像 Claude 这样的 AI 聊天助手集成，开发者可以和它讨论 Canva Apps SDK 或 Connect API；

• 借助 Connect API 与 Canva 集成，通过生成 Canva Connect API 客户端代码来创建新设计或上传资源。

2. Dart MCP 服务器

为什么有用：Dart MCP服务器允许 AI 代理与 Dart 平台进行交互。这个 MCP 服务器允许 AI 助手以编程方式访问和管理 Dart 工作区内的数据，如客户信息、项目、任务、时间跟踪和计费。关键特性如下：

• 工作区交互，允许AI代理连接并执行特定 Dart 工作区中的操作；

• 客户和项目管理，允许查询甚至管理客户详细信息、项目和相关任务；

• 任务和时间跟踪访问，允许开发者访问 Dart 中记录的任务信息、状态和时间条目；

• 计费和财务数据，能够检索发票、预付款及 Dart 中管理的其他方面的财务信息；

• 协作和沟通，包括支持与项目和任务相关的更新；

• 自定义字段和数据，使开发者可以访问在 Dart 工作区中配置的自定义字段中存储的数据。

3. DigitalOcean MCP 服务器

为什么有用：DigitalOcean MCP服务器允许 AI 与云基础设施进行交互，为前端开发者提供了一个简单的自然语言界面来管理他们的后端。MCP 服务器：

• 允许开发者从头开始构建应用程序并将其部署到DigitalOcean，而无需离开 IDE；

• 直接从 GitHub 存储库部署新应用；

• 用单个提示更改代码并重新部署；

• 创建所有应用程序的列表，检查它们，重启它们或从编辑器中删除它们。

• 强制重新构建或删除应用程序；

• 检查哪些区域可用，并据此规划部署。

4. Figma Dev Mode MCP 服务器

为什么有用：Dev Mode MCP服务器为 AI 代理提供设计信息和上下文，从Figma设计文件生成代码。本地服务器允许 AI 助手以编程方式获取当前 Figma 文件、项目和选定设计元素（节点）的详细信息，并将 AI 能力整合到设计-开发工作流中。它能：

• 从选定的 frame 或节点生成代码。Figma 用户可以在 Figma 中选择一个 frame 或提供节点 URL，让 AI 代理将设计转换为代码；

• 从 layer 中获取变量、组件和布局来提取设计上下文，确保构建遵循设计模式；

• Code Connect。MCP 服务器会根据 Code Connect 信息向 AI 代理通报现有组件，支持重用。

5. GitHub MCP 服务器

为什么有用：GitHub MCP服务器是专门为开发者构建的，并允许 AI 代理直接与代码库、拉取请求和问题进行交互。GitHub MCP 服务器将 AI 工具直接连接到 GitHub 平台，使 AI 代理、助手和聊天机器人能够读取存储库和代码文件，管理问题和 PR，分析代码，并自动化工作流。所有这些都通过自然语言交互完成。MCP 服务器提供：

• 存储库管理：开发者可以浏览和查询代码，搜索文件，分析提交记录，并了解他们有权访问的任何存储库的项目结构；

• 问题和拉取请求自动化：创建、更新并管理问题和拉取请求。AI 可以帮助分类错误，审查代码更改，并维护项目看板；

• 实现 CI/CD 和工作流智能化。它可以监控GitHub Actions工作流的运行情况，分析构建失败的原因，管理版本发布并深入洞察开发管道的运行情况；

• 分析代码，检查发现的安全问题，审查 Dependabot 告警，理解代码模式，并全面了解代码库。

• 通过提供讨论组访问权限、管理通知、分析团队活动、简化团队流程来实现团队协作。

6. JetBrains MCP 代理服务器

为什么它很有用：JetBrains 提供 IDE，包括用于 Java 和 Kotlin 的 IntelliJ IDEA，用于 Python 的 PyCharm，用于 JavaScript 的 WebStorm，用于.NET 的 Rider，以及用于 C/C++的 CLion。它为其MCP代理服务器提供了一个插件，允许 AI 工具利用 IDE 的代码理解能力，执行重构，生成代码，并直接在 AI 助手运行的开发环境中访问项目上下文。它促成了：

• IDE 集成，为外部 AI 代理与在 JetBrains IDE 中运行的 AI 助手插件之间提供通信桥梁；

• 代码理解和分析，使 AI 代理能够获取 IDE 对代码库的理解，包括语法、语义和项目结构；

• 代码生成和修改，由 IDE 执行，有利于 AI 驱动的代码生成、自动补全、重构和其他代码操作任务；

• 项目上下文访问，使 AI 代理能够获取当前项目、已打开文件和光标位置的信息，从而提供与上下文相关的帮助；

• 本地执行，这意味着代理在本地运行，有助于本地 AI 代理或开发工具与本地 JetBrains IDE 实例之间进行通信。

7. MongoDB MCP 服务器

为什么它很有用：MongoDB MCP服务器允许 AI 与其数据库进行交互。前端开发者可以使用 AI 代理：

• 查询数据库来获取特定的信息；

• 通过自然语言向数据库添加管理数据的新用户；

• 通过为数据库创建新集合来管理集合；

• 获取数据库的模式；

• 创建可感知上下文的代码生成功能，也就是说，开发者可以描述所需的数据，并让 AI 生成 MongoDB 查询甚至与之交互的代码。

8. React MCP 服务器（第三方）

Meta 尚未宣布 React MCP 服务器的发布计划，但 Drishya AI Labs 前端开发人员 Kalivaraprasad Gonapa 已经创建了一个。该React MCP服务器集成了 Claude Desktop，据其 GitHub 页面介绍，它能够根据用户提示创建和修改 React 应用程序。它可以：

• 创建新的 React 应用程序；

• 运行 React 开发服务器；

• 管理文件和目录；

• 安装 npm 包；

• 执行终端命令；

• 跟踪和管理长期运行的进程。

9. Shopify Dev MCP 服务器

为什么它很有用：这个MCP服务器可以将开发者的 AI 助手连接到 Shopify 的开发资源，使 AI 助手能够搜索 Shopify 文档，探索 API 模式，构建功能，并获取关于 Shopify API 和最佳实践的最新方案。MCP 服务器能够：

• 向 AI 助手咨询使用 Shopify 进行开发的相关问题；

• 支持 Shopify API，包括 Admin GraphQL API、函数、Polaris Web 组件（可选）和 Liquid（可选）；

• 与 AI 开发工具集成，如 Cursor 和 Claude Desktop。

10. Vercel MCP 服务器

为什么它很有用：Vercel MCP服务器允许 AI 与前端开发和托管平台进行交互。它适用于 Gemini CLI、Gemini Code Assist、Windsurf、Goose、Raycast、Devin、VS Code with Copilot、Cursor、Claude 和 Claude Code 以及 ChatGPT。它能够：

• 部署应用程序的新版本；

• 获取有关应用程序的反馈，包括新功能；

• 通过检查应用程序的环境变量来管理应用程序设置；

• 处理新应用程序的配置。

即将推出的 Angular MCP 服务器（实验性）

为什么它很有用：Angular 有一个处于实验阶段的CLI MCP服务器，它将提供可以在开发工作流中为开发者提供帮助的工具。它能够：

• 提供最佳实践支持，允许开发者访问 Angular 最佳实践指南，确保所有代码都符合现代标准；

• 通过读取 angular.json 配置文件，列出 Angular 工作区中定义的所有应用程序和库；

• 搜索 Angular 官方文档。

声明：本文为 InfoQ 翻译，未经许可禁止转载。

原文链接：https://thenewstack.io/10-mcp-servers-for-frontend-developers/