跟上潮流,在Cursor里面加一点点MCP,在Agent中调试页面

简述

最近MCP概念变得很火爆,公司后端已经如火如荼的学习起来了,进行了很多次技术分享。我寻思前端也不能落下,所以在搜集资料了解了具体概念以后,打算尝试一下前端结合MCP能做一些什么。最终,将本次尝试的结论记录下来,进行分享。

概念介绍

  • Cursor:AI辅助的集成开发环境(IDE),提升编程效率
  • Agent模式:Cursor中用于自动化代码生成与任务执行的功能模块
  • MCP(模型上下文协议) :最新标准接口,连接大语言模型与外部数据源

Cursor中配置MCP服务

先打开Cursor的设置界面。

然后选中MCP标签页,打开MCP服务配置列表,如果没有该标签页需要检查是否最新的Cursor。因为我已经添加过了,所以会显示一个browser-tools,如果全新添加会是一个空列表。

点击添加全局MCP服务以后,会弹出一个json进行配置,其中browser-tools是配置名,可以自定义命名。整体json结构要了解MCP相关内容,这里不在赘述。

不同环境配置方式可能不同,我将我自己的贴在这里,如果有不同的可以在后续安装时在MCP服务官方文档了解其他方式。

json 复制代码
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/[email protected]"
      ],
      "enabled": true
    }
  }
}

安装插件并配置

下面是插件官网,里面有详细内容,这里简单描述一下我自己的安装步骤。

Installation - AgentDesk - BrowserToolsMCP

访问链接下载谷歌浏览器插件压缩包并解压。

github.com/AgentDeskAI...

然后在浏览器中安装插件,先打开扩展管理界面。

然后点击右上角开发者模式,打开后选择加载已解压的扩展程序。

然后一直选中到解压的文件夹最后一层,即内部是插件文件。确定后提示加载成功,就可以在插件列表看到该插件了,然后默认启用。

最后需要配置json,官网提供了不同方式的配置,如果是Cursor则使用mcp.josn的配置方式。

配置完成后确定,查看列表,如果没有报错,显示小绿点,则证明配置成功。这里刚配置完可能有个更新时间,不会立即显示小绿点,可以等几秒看看。

使用MCP完成浏览器调试

在最终使用前,按照官网步骤,需要先执行命令启动服务。

cmd 复制代码
npx @agentdeskai/[email protected]

看到运行成功在3025端口后,就代表服务已启动。

此时打开浏览器,然后打开开发者工具,就能看到页面上提示正在调试此浏览器。打开f12中对应的tab,也能看到插件相关配置。

现在可以使用Agent模式询问一些问题了,不过在询问前注意将模型调整为claude。

下面问一个简单的控制台问题:

此时需要手动点击run,让命令行执行工具命令,最终得到结果:

查看当前浏览器,确实存在描述的问题:

到这一步基本的使用就完成了,后续更深层次的使用还是要在实际开发时摸索。按照官网描述,在agent模式中,如果ai判断需要使用某个MCP服务,会自己调用,而不需要指定,因此上面这种使用方法是最简单的用法。

结语

在当前ai快速发展的浪潮中,ai辅助开发的使用可能会日新月异,只能保持跟进和学习,防止被时代甩开,或许以后得前端开发会是另一番摸样。

相关推荐
森叶19 小时前
Windows11 VS code 安装 Cline 调用 Github MCP 配置过程坑点汇总
github·ai编程
程序员陆通1 天前
MCP协议与Dify集成教程
人工智能·ai编程
gs801402 天前
MCP智能体多Agent协作系统设计(Multi-Agent Cooperation)
人工智能·mcp
liaowenxiong2 天前
修改或禁用Cursor的全局搜索默认快捷键
cursor
怪我冷i3 天前
k8s笔记——kubebuilder工作流程
云原生·kubernetes·ai编程·ai写作
puyihuan3 天前
AI编程新选择!VSCode + RooCode,超越Cursor
ide·vscode·ai编程·roocode
VyrnSynx3 天前
从0到上线,CodeBuddy 如何帮我快速构建旅游 App?
腾讯云·ai编程·旅游·腾讯云ai代码助手
琢磨先生David3 天前
重构编程范式:解码字节跳动 AI 原生 IDE Trae 的技术哲学与实践价值
人工智能·ai编程
哈全网络3 天前
如何使用 DeepSeek 帮助自己的工作?
人工智能·算法·ai编程·ai写作
斯普信专业组4 天前
AI Agent新范式:FastGPT+MCP协议实现工具增强型智能体构建
人工智能·智能体·mcp