前端工程师聊聊 MCP

前端宝哥
160 阅读7分钟

译文：vueschool.io/articles/vu…

也许你最近在社交媒体上看到 MCP 这个词被大家疯狂提及，但不太清楚它到底是什么，或者作为一名网页开发者，它对你具体有什么用。本文就来解答这两个问题。

什么是模型上下文协议 (Model Context Protocol)？

模型上下文协议 (MCP) 是一个开源标准，用于为大型语言模型 (LLM) 提供来自外部来源的数据（即上下文），并让 LLM 能够执行函数（通常称为“工具”）。

在 MCP 出现之前，每个开发者都必须自己实现定制化的解决方案，才能将他们的数据传递给 LLM，并根据 LLM 的响应触发自定义的函数调用。这虽然是可行的，但由于缺乏统一的标准，整个生态系统中的团队和系统很难共享这些解决方案。正因如此，Anthropic 公司创建了模型上下文协议。

可以看看官方文档中的这张图，它描述了 MCP 的基本架构。

MCP 架构图

那么，这意味着什么呢？简单来说，MCP 包含三个基本部分：

  1. 客户端 (Clients)
  2. 服务器 (Servers)
  3. 以及外部数据源或 API (External data sources or APIs)

为了理解它们如何协同工作，我们来看一个简单的例子：

  • 假设你正在使用名为 Cursor 的 AI 驱动的集成开发环境 (IDE)。它可以被视为“宿主 (host)”，因为它内置了一个 MCP 客户端。
  • 你同时在 Cursor 上安装了一个 MCP Atlassian (Jira) 服务器，这个服务器你可能是在 Anthropic 官方的 MCP 目录 或 awesome-mcp-servers 仓库 中找到的。
  • 现在，你让 Cursor 帮你构思完成 Jira 工单 #blah-blah-blah 的执行步骤。
    • 这时，Cursor 的客户端会与 Jira MCP 服务器进行交互。
    • 该服务器调用 jira_issue 工具，向 Jira REST API 发出请求以获取工单信息。
    • API 返回响应数据，这些数据通过服务器转发回客户端…
    • 最终，Cursor 就能将这个工单数据用作 LLM 的上下文信息了。

就是这样！MCP 就这么简单。它的真正价值在于，全世界有大量的这类服务器正在被构建和共享出来，你可以即插即用地使用它们。

MCP 服务器对网页开发者有何帮助？

现在到了最关键的问题：MCP 对你这个网页开发者来说有何帮助？嗯，既然你可能大部分时间都在 IDE 里度过，那么像 Cursor 这样内置了 MCP 客户端的工具，就为 MCP 发挥作用奠定了重要基础。

你也可以在其他应用程序（宿主）中找到内置的 MCP 客户端，例如：

这些集成到你已在使用的程序中的客户端，意味着你已经准备好从海量可供安装的服务器集合中获益了。

那么，有哪些 MCP 服务器可能对你有用呢？

将工单信息纳入 Cursor 的上下文

一个显而易见的例子，就像上面解释 MCP 时提到的，就是能够将你正在处理的功能或 Bug 的相关信息添加到 Cursor Agent 的上下文中，甚至可以直接在 Cursor 聊天界面里更新工单状态。这意味着你可以减少在项目管理工具（如 Jira、Asana 等）和 IDE 之间来回切换以及复制粘贴的次数。此外，像 Google Docs 或 Notion 这类相关信息来源，也有可用的 MCP 服务器。

更重要的是，在 Agent 模式下运行时，Cursor 可以自行判断是否需要从工单中获取更多信息。

官方 Atlassian MCP 服务器与 Claude 桌面版配合使用的演示动图 (来自官方 MCP 页面)

将 Figma 设计稿转化为代码

除了帮助你高效地与团队协作，MCP 还可以通过 Figma MCP 服务器 将设计稿转化为代码。根据该服务器文档的说法：“当 Cursor 能够访问 Figma 设计数据时，它在一次性准确生成设计对应代码方面的表现，远超粘贴截图等替代方法。”

你可以在 Graham Lipsman 的这个 YouTube 视频中看到实际效果。据我所见，这并非“银弹”（万能解决方案），但对于任何项目的启动来说，仍然是一个很棒的开端。

与数据库更无缝地协作

MCP 的作用不止于前端。如果你正在编写任何与数据库交互的后端代码，有许多 MCP 服务器可以连接、读取、写入和查询主流的数据库解决方案。以下仅列出部分可用选项：

与此相关，如果你正在使用像 Supabase 或 Firebase 这样的后端即服务 (BaaS)，也有相应的 MCP 可用！

这有什么用呢？用处很多！如果你还没有通过像 Drizzle 或 Prisma 这样的 ORM（对象关系映射器）在代码库中以某种方式记录你的数据库结构（schema）（并且进行数据库迁移管理），那么数据库 MCP 服务器可以更好地将你的数据库结构信息告知 Cursor。

更棒的是，你可以直接询问关于数据的问题，并获得洞察，而无需手动编写任何数据库查询语句。

在 Cursor 中安装并使用 Postgres 数据库 MCP 查询客户月度潜在客户数量的动图

使用 Puppeteer 抓取网页数据

另一个对网页开发者有用的 MCP 是 Puppeteer MCP。它可以用于自动化网页交互、截取页面快照，以及在我看来最有价值的——从网络上抓取数据。

我尝试用它来抓取 Vue School 课程页面 的数据。整个过程花了 7 分多钟，期间需要与工具进行多次调用交互，最后还需要我手动解析一下 JSON 才能看到完整结果，但它确实成功了！

puppeteer-mcp.mp4 的动图演示

这里是抓取到的数据，可以证明。

在本地计算机上搜索文件

谁没有在赶项目、忙着上线功能时，随手把文件素材存放在随机的地方（比如下载文件夹！）呢？但六个月后，你需要找到那个原始尺寸的素材，却怎么也想不起它的确切名字了。文件系统 (filesystem) MCP 是一个很好的解决方案。它可以与你的文件系统交互，扫描目录、读取文件内容、写入文件等等。像这样的交互操作可以在每次执行时进行授权确认，确保控制权仍在你的手中。

在下面的截图中，我使用安装在 Claude 桌面版的 filesystem MCP 来帮助搜索一张丢失的个人头像照片。

下面的截图展示了我如何使用 Claude 桌面应用 搜索一张丢失的头像照片。注意看，它能够快速轻松地搜索可能的文件名变体：

向 Claude 桌面版提问“我找不到我的头像照片了，你能帮我在文件系统里找找吗？”后，得到一个包含潜在匹配文件列表的回复

而且，我只需要问一句，就能轻松找出最大的那个文件，节省了搜索时间：

补充上下文“它可能是这些里面最大的那个”后，Claude 桌面版指出了最大的文件，甚至按文件大小从大到小列出了可能的匹配项

值得一提的其他 MCP 和服务器目录

当然，还有很多其他的 MCP 值得探索。我觉得还有一些值得一提的包括：

  • Slack MCP - 或许可以用来在你搞不定某个特别难的需求时，自动给你的项目经理发点吐槽消息。
  • Git MCP - 用于读取仓库数据、切换分支、比较差异等。
  • Magic MCP - 用于创建更高阶的组件。
  • Cloudflare MCP - 用于管理 KV 存储、Workers、Queues 等。
  • Stripe MCP - 因为我们确实需要这个：让机器人来管理我们的钱。

当然，还有更多的 MCP 等待探索，你可以通过以下几个目录找到它们：

结语

尽管模型上下文协议 (MCP) 的名字听起来可能有点唬人，但它其实相当直观。使用它们非常简单，通常只需要在宿主应用（如 Cursor、Claude 桌面版）的配置文件中添加几行 JSON 即可。你对深入了解 MCP 感兴趣吗？想了解哪些方面的内容？欢迎在下面的评论区告诉我们！我们很乐意听到你的想法！

对编写自己的 MCP 客户端或服务器感兴趣？想要一个在 Cursor 中全局或项目级别设置 MCP 的演练教程？或者想了解更多关于实用 MCP 的技巧？随时告诉我们！

后记

小伙伴们，如果觉得本文对你有些许帮助，收藏起来，点个👍或者➕个关注再走吧^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

avatar
文章
阅读
粉丝