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/"