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

图片来自 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 官方文档。

原文链接：

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

文章来自于微信公众号 “InfoQ”，作者 “InfoQ”