当前位置：首页 > news >正文

前端er在Cursor使用MCP实现精选照片的快速上手教程

news 来源：原创 2025/5/25 19:14:58

0. 前言

作为一个对LLM感兴趣的前端er，本文将阐述如何在Cursor使用MCP Server（MCP服务器），实现精选本地照片的功能，通过实际的示例和操作去理解MCP这一概念。

1. MCP是什么

进入实操前，先了解一下MCP这个概念，已了解的可以略过本小节

MCP (Model Context Protocol，模型上下文协议) 是由 Anthropic 在 2024 年底推出的一种开放协议，它通过提供一种标准化的接口，旨在通过标准化的接口实现大语言模型 (LLM) 与外部数据源及工具的无缝集成。

LLM 的模型参数蕴含丰富的通用知识，但通常无法掌握以下两类信息：

LLM 无法访问你的专属内容，例如文件系统中的文件、数据库里的订单，或私有 wiki 和笔记中的文本。
若无法联网，LLM 也无法获取实时信息，例如当前股价、最新财报、明日天气预报或前沿科技新闻。

MCP 提供一套标准协议来解决这些问题。简而言之，它通过一组外部工具，帮助 LLM 获取其无法直接知晓的信息或者难以执行的操作。

下面是一个基本的 MCP 工作流程图，其中：

User：用户。
MCP Client：实现了 MCP 的客户端，也就是上面提到的 Claude 桌面 app，Cursor 等一众 app，以及未来可能进行支持的各个 Chat box app 等。
MCP Server：通常是一段运行在本地的 Python 或 JavaScript 代码。为确保安全，Anthropic 当前仅支持 MCP 在本地运行。该 Server 既可执行本地操作 (如浏览文件系统)，也能通过网络访问 API (包括第三方 API 或远程数据库)。
支持 MCP 的 LLM：当前主要是 Claude 的系列模型。

MCP流程
启动客户端后，客户端读取配置文件，连接 Server 并按照协议获取工具列表。和传统一问一答或者推理模型不同，当存在可用的 MCP 工具时，在发送用户问题时，需要把可用工具列表一并发送。LLM 将判断是否需要调用工具完成任务，并把这个指示返回给客户端。客户端如果接受到需要调用工具的指示，则按照 LLM 的指示和 MCP 中规定的调用方式，配置好参数联系 Server 进行工具调用，并将调用结果再次发给 LLM，组织出最后的答案。

这一小节主要摘取自：MCP 是什么，现状和未来这篇文章。有关MCP的其他文章，还可以参考文章末尾的链接。

2. 在Cursor使用MCP

这一小节是本文的重点，将逐步解析如何在MCP Client（Cursor）使用MCP Server，以实现具体功能

2.1. 需求

现在来实现一个小需求吧 (*￣︶￣)

我有一个习惯，每次和我对象出去玩的照片，都会收集起来放置在一个文件夹内，我想让LLM帮我挑选哪张照片拍得最好，按照以往的思路，我需要把一整个文件夹的图片都投喂给LLM，才可能得到我想要的结果，我想实现的需求是，只告诉LLM我的照片在哪个文件夹下，它就能自动帮我选出来，这时候，MCP就派上用场了。

2.2. 准备

在第1小节提到的，使用MCP需要具备几个要素：

MCP Client：使用Cursor。
LLM：使用claude-3.7-sonnet，在Cursor使用Ctrl+L打开对话框，直接选择模型即可。
MCP Server：根据需求，我们需要一个可以读取本地文件系统的Server，我们选用官方的提供的Filesystem MCP Server。当然，如果有其他特殊的需求也可以自己实现一个，但是Server具体的开发实现并不是本文的重点，有兴趣可以自行参考文末链接，后续有空也可以单独写一篇介绍
Node.js环境：本示例使用Node.js环境，Node v20.15.0，NPX 10.7.0

2.3. 配置Server

打开文档：在Filesystem MCP Server仓库文档，我们可以看到有Features、Tools和Usage等介绍

配置：文档的Usage下有Claude Desktop的配置，我们看到有Docker和NPX两种配置方式，我们选择对前端er友好的NPX，如下：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/path/to/other/allowed/dir"
      ]
    }
  }
}

Cursor的配置：
- 使用Cursor打开一个已有工程
- 打开Cursor设置: File > Preferences > Cursor Settings -> MCP
- 添加mcp.json: 1. 可以直接右上角按钮点击Add new global MCP server创建一个全局的MCP Server；2. 也可以在本地目录下创建.cursor/mcp.json使用非全局的MCP Server；本示例采用后者
- 添加mcp.json配置：创建了mcp.json后，把上面提到的NPX配置直接复制，如果是MAC系统直接使用即可，如果是Windows系统，需要做如下修改：
```
{
  "mcpServers": {
    "filesystem": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/path/to/other/allowed/dir"
      ]
    }
  }
}
```
- 指定目录：注意上述命令最后两个示例路径，就是允许MCP Server读取的文件系统路径，我们只需要修改成自己本地的真实路径即可，我的照片是放在D盘下的daily目录，在我Windows系统下最终的配置为：
  
  配置完的MCP设置的页面应该显示：

2.4. 启动Server

点击Disabled，变为Enabled
在这里插入图片描述
然后再点击右边的刷新按钮，会弹出终端窗口，这是NPX启动的服务，稍等片刻，左边的小圆点变为绿色，说明服务已经启动

2.5. 执行任务

选择Agent模式：使用MCP必须使用Agent模式
测试：输入：你可以读取daily目录吗

看到Run tool选项，说明MCP功能生效了，因为出于安全考虑，Agent调用MCP的tools需要经过用户的同意（也可以设置默认同意，这样就不需要每次都点同意了，在File > Preferences > Cursor Settings -> Enable auto-run mode 开启），测试的最终结果为：
执行任务：输入问题：在daily文件夹下，帮我找出你认为拍得最好的一张情侣合照

PS：这是我的daily文件夹：

这是Agent + MCP调用的结果：

可以看到，Agent在经过允许后使用了Filesystem MCP Server的list_allowed_directories，list_directory和get_file_info工具方法，查出了哪里的daily目录是可访问的，然后查询目录内具体的文件信息，综合对比得出最终的答案（就是上面截图的第2张^_^）

还可以继续给出解释：

3. 后话

如果仔细看上述的过程，可以发现，Filesystem MCP Server对图片文件最多只能做到读取文件元信息，并不具备真正的“查看”图片的功能，因此离真正实现精选照片的功能还有一定距离，为此我们可以自己开发一个Server，这个Server要求具有对图像数据的读取和解码等分析工具函数，可能还需要多模态LLM的支持（下次有机会可以再聊一聊MCP Server的具体实现），但这都是实现细节，不影响理解MCP的架构及其配置和应用场景，如果觉得本文不错，可以收藏或分享哈，谢谢~Thanks♪(･ω･)ﾉ