MCP 通用知识 - Cursor接入apifox、playwrigth、choreme示例

1,711 阅读4分钟

1. MCP协议官方文档

2. MCP 是什么的通俗理解

简单来说,MCP就是AI助手的"工具箱"和"外挂"系统。 想象一下: AI助手就像一个很聪明的人,但只能通过文字和你交流。MCP就像给这个聪明人配了一套工具,让它不仅能说话,还能:

  • 上网查资料
  • 操作数据库
  • 控制浏览器
  • 访问你的文件
  • 调用各种API

也可以看做,MCP 是给 AI 配了手脚:

  • 没有MCP:AI只能"纸上谈兵",告诉你理论
  • 有MCP:AI可以"动手操作",帮你实际解决问题

3. 为什么需要MCP

没有MCP之前:

  • AI只能基于训练数据回答

  • 无法访问实时信息

  • 无法执行实际操作

  • 只能"纸上谈兵"

有MCP之后:

  • AI可以访问最新信息

  • 可以执行实际任务

  • 可以操作你的系统

  • 真正成为你的"智能助手"

4. 如何配置(Cursor 中配置 MCP 示例)?

示例1:apifox

Apifox MCP Server

通过 MCP 使用 Apifox 项目内的 API 文档

  1. 登录Apifox
  2. 进入个人设置 -> API访问令牌
  3. 创建新的访问令牌 image.png

image.png

image.png

  1. 获取项目 ID image.png

  2. 配置代码

{
  "mcpServers": {
    "PMS 2.0 API 自定义名字(键),用来标识这个 API 服务的配置": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "apifox-mcp-server@latest",
        "--project=项目id"
      ],
      "env": {
        "APIFOX_ACCESS_TOKEN": "复制的访问令牌(token)"
      }
    }
  }
}
  1. 测试连接

方法一:命令行测试

# 测试Apifox连接
npx apifox-mcp-server --project=6437846 --token=your-token

连接成功: image.png

方法二:cursor中新建chat询问以验证连接是否正常工作。如果 AI 能够返回你 Apifox 项目中的 API 信息,说明连接成功。

image.png

示例2:Playwright

MCP配置代码:

"test-automation": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@executeautomation/playwright-mcp-server",
    "--browser-type=chrome",
    "--default-url=http://192.168.3.183:2888/"
  ]
}

--default-url:配置默认的打开地址,可配可不配。没有配置的话需要告诉 cursor 打开哪个网址。

前置准备:

  1. 第一种:全局安装 playwright
npx playwright install

image.png

如果标了小红点,说明不可用 image.png 可用: image.png 可以打开 Cursor 的 auto-run 模式,允许Agent运行如命令执行和文件写入(会有安全风险,对于一些敏感操作,例如数据库相关的,要注意设置好只读权限。) image.png

  1. 第二种:指定目录下安装的 playwright

需要修改配置,配置好指定的plarywright所在目录(env):

"test-automation": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@executeautomation/playwright-mcp-server",
    "--browser-type=chrome",
    "--default-url=http://192.168.3.183:2888/"
  ],
  "env": {
    "PLAYWRIGHT_BROWSERS_PATH": "playwright的安装目录,假如我想到指定的目录为:demo/playwright"
  }
}

这里顺便扩展下:

  • playwright 标准安装位置:C:\Users\登录的用户\AppData\Local\ms-playwright
    image.png
  • 可以从全局 playwright 安装的文件中复制chromium-1179、winldd-1007 文件夹到 demo/playwright 这个指定的目录下(确保Playwright能在当前项目目录下找到所需的浏览器文件) image.png

测试: 直接在 chat 中输入要测试的内容,便会自动打开浏览器执行自动化测试。 image.png

image.png

我们前面不是配了默认测试地址吗。如果我在对话框中输入,“帮我测试一下登录功能” 没有指定网址,那么就会打开我们默认的网址进行测试。这里要注意的是,登录如果包含验证码图片,需要另外下载 ocr。

示例3:调用谷歌浏览器chrome

Node版本需要14+

  1. 下载谷歌插件后解压 github.com/hangwin/mcp… image.png
  2. 到谷歌插件管理中导入
    image.png image.png

image.png

  1. 按照插件显示的步骤,先安装 npm install -g mcp-chrome-bridge image.png

  2. 打开cursor的设置 setting -> Tools & MCP,填入地址配置 image.png 配置可以从插件中复制
    image.png image.png

"streamable-mcp-server": {
  "type": "streamable-http",
  "url": "http://127.0.0.1:12306/mcp"
}
  1. 完成,显示可用之后进行测试 image.png

agent模式cursor输入以下案例: 使用 MCP 浏览器工具:

  1. 打开 Chrome 访问 www.baidu.com
  2. 在搜索框输入"稀土掘金"并提交搜索
  3. 点击搜索结果中的第一个网站
  4. 网站搜索栏输入“MCP 通用知识 - Cursor接入apifox、playwrigth、choreme示例”并提交搜索