JavaScriptNode.jsAI大前端
如何在 Cursor 中使用 MCP 服务
在 Cursor 编辑器中配置 MCP（Model Context Protocol）服务可调用地图、数据库及文件系统 API。演示通过 npx 安装 MySQL、高德地图及文件系统的 MCP Server，并在项目级 mcp.json 中配置环境变量。结合自然语言提示词，实现自动获取地铁线路、美食数据存入数据库，导出为文本并生成 HTML 展示页面的全流程，提升数据采集与自动化办公效率。
在 Cursor 编辑器中配置 MCP（Model Context Protocol）服务可调用地图、数据库及文件系统 API。演示通过 npx 安装 MySQL、高德地图及文件系统的 MCP Server，并在项目级 mcp.json 中配置环境变量。结合自然语言提示词，实现自动获取地铁线路、美食数据存入数据库，导出为文本并生成 HTML 展示页面的全流程，提升数据采集与自动化办公效率。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
随着 AI 编程助手的普及，越来越多开发者选择在 Cursor 等智能 IDE 中进行高效开发。Cursor 不仅支持代码补全、智能搜索，还能通过 MCP（Model Context Protocol）服务，轻松调用如高德地图 API、数据库等多种外部服务，实现数据采集、处理和自动化办公。
本文以'北京一日游自动化攻略'为例，详细讲解如何在 Cursor 中使用 MCP 服务，完成数据采集、数据库操作、文件生成和前端页面展示的全流程。
MCP（Model Context Protocol）是 Cursor 内置的多云服务接口，支持调用地图、数据库、文件系统等多种 API。通过 MCP，开发者无需手动写 HTTP 请求或繁琐配置，只需在对话中描述需求，AI 助手即可自动调用相关服务，极大提升开发效率。
确保已安装并配置好 Cursor 编辑器。
若已经配置 Python 环境，可使用以下命令安装：
pip install uv
若没有配置 Python 环境，在 Windows 下可以通过 PowerShell 运行命令来安装：
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
使用 uv --version 和 uvx --help 检查是否安装成功。
在 官网下载 Node.js，并配置环境变量。
在 Cursor 中添加 MCP Server 有两种配置方式。
通过 Cursor Settings -> MCP -> Add new global MCP server 添加全局可用的 MCP 服务。
在项目目录的 .cursor 目录中新建 mcp.json 文件进行配置，仅对特定项目生效。
选择平台：https://smithery.ai/。填写信息将 JSON 复制到 mcp.json 文件中。
可能粘贴后无法生效，建议直接从 GitHub 仓库复制配置信息。
注意：这个 MySQL MCP 服务，需要提前建好数据库，否则无法成功。
注意：验证是否生效 将 MCP 服务信息填在
mcp.json文件中后，需要打开 Settings -> MCP 检查你配置的 MCP Server 是否在列表中显示，并确认有绿点且状态为 Enabled。
高德地图的 MCP Server 需要从 MCP.so 平台获取。
申请高德地图的 API：https://console.amap.com/。
配置文件系统访问权限。
{
"mcpServers": {
"mysql": {
"command": "npx",
"args": ["-y", "@f4ww4z/mcp-mysql-server"],
"env": {
"MYSQL_HOST": "localhost",
"MYSQL_USER": "root",
"MYSQL_PASSWORD": "数据库密码",
"MYSQL_DATABASE": "beijing_trip"
}
},
"amap-maps": {
"command": "npx",
"args": ["-y", "@amap/amap-maps-mcp-server"],
"env":
现在交给你一个任务，编写一个北京一日游的出行攻略：
1、从高德地图的 MCP 服务中获取北京站到天安门、天安门到颐和园、颐和园到南锣鼓巷的地铁线路，并保存在数据库 beijing_trip 的表 subway_trips 中；
2、从高德地图的 MCP 中获取颐和园、南锣鼓巷附近的美食信息，每处获取三家美食店铺信息，并将相应的信息存入表 location_foods 中；
3、在工作目录 D:\DESKTOP\MCP 下创建一个新的文件夹，命名为'北京旅行'，在其中创建两个 txt，分别从数据库中将两个表的内容提取出存放进去；
4、最后根据 txt 中的内容，生成一个精美的 html 前端展示页面，并存放在该目录下。
生成的 SQL 定义如下：
-- auto-generated definition
create table location_foods (
id int auto_increment primary key,
location varchar(64) not null,
name varchar(128) not null,
address varchar(256) null,
tel varchar(64) null,
type varchar(64) null,
distance varchar(32) null
);
-- auto-generated definition
create table subway_trips (
id int auto_increment primary key,
start_location varchar(64) not null,
end_location varchar(64) not null,
subway_lines text not null,
duration varchar(32) null,
distance varchar(32) null
);
在 Cursor 中结合 MCP 服务和 AI 助手，可以极大提升开发和数据处理效率。无论是地图数据采集、数据库管理，还是自动化生成前端页面，都能一站式完成。