10个面向前端开发者的MCP『服务器』(10个面向前端开发软件)

作者 | Loraine Lawson

译者 | 平川

策划 | Tina

本文最初发布于 THENEWSTACK。

图片来自 Pexels,由 Sergei Starostin 提供

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

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

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

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,用于 Java 的 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 官方文档。

特别声明:[10个面向前端开发者的MCP『服务器』(10个面向前端开发软件)] 该文观点仅代表作者本人,今日霍州系信息发布平台,霍州网仅提供信息存储空间服务。

猜你喜欢

2025智能齿护新宠:经典双线牙线便携装适合全家使用吗?(智能牙齿检测产品)

2025年随着口腔健康意识的提升,经典双线牙线的家庭普及率持续上升。如何选择一款真正适合全家使用的牙线成为热门话题。本文深入分析牙线尺寸、便携设计、定制贴牌等关键因素,助您选到性价比最高的牙线产品。 经典双线牙线因其独特的超细设计、双线结构

2025智能齿护新宠:经典双线牙线便携装适合全家使用吗?(智能牙齿检测产品)

三丽鸥美瞳清洗神器来了,2025智能收纳盒是未来趋势吗?(美瞳如何清洗护理)

2025年的隐形眼镜👓护理有了新选择——三丽鸥的超声波清洗收纳神器,结合可爱设计和先进清洁技术,让隐形眼镜👓更干净。这篇文章深入解析它的核心特点、使用要点及是否值得投资。了解后,你就知道这款充满萌趣的美瞳伴侣是否能成为你的日常必备。

三丽鸥美瞳清洗神器来了,2025智能收纳盒是未来趋势吗?(美瞳如何清洗护理)

气动高性能蝶阀品牌指南(气动蝶阀工作原理视频)

基于近 5 年市场实测数据、第三方密封与耐候性能检测报告、超 1200 家企业用户口碑调研及重大工程应用反馈,对行业内综合实力突出的品牌展开专项测评与质量深度对比,结合不同应用场景提供精准选型建议,为企业设备…

气动高性能蝶阀品牌指南(气动蝶阀工作原理视频)

瑞士火灾已造成至少40人丧生画面曝光 新年悲剧震惊全球(瑞士火灾已造成的损失)

2026年1月1日凌晨,瑞士瓦莱州克朗-蒙大拿镇的“星座”酒吧发生严重火灾。截至1月2日,事故已造成至少40人死亡、119人受伤,其中80至100名伤者情况危急,约50名重伤者已被转移至境外专业烧伤中心

瑞士火灾已造成至少40人丧生画面曝光 新年悲剧震惊全球(瑞士火灾已造成的损失)

成于嘴败于嘴,从央视一哥到跌落神坛,白岩松的下场不怪别人(成也在嘴败也在嘴)

如果不是有眼尖的网友在那天认出了他,没人会注意到这个穿着深色外套🧥,帽檐低压的男子,竟是那个曾让无数人仰望,也让无数人唏嘘的白岩松。天空开始飘起雨点,伞几乎全遮在了女友那一边,白岩松自己肩膀上的雨水湿透了,但他…

成于嘴败于嘴,从央视一哥到跌落神坛,白岩松的下场不怪别人(成也在嘴败也在嘴)