前端 mcp 的使用

figma AI Bridge

需要同时配置idea 和 figma

idea 配置

{ "mcpServers": { "Figma AI Bridge": { "command": "npx", "args": [ "-y", "figma-developer-mcp", "--stdio" ], "env": { "FIGMA_API_KEY": "xxx" } } } }

figma 配置

配置如上 另外figma 要能开启dev mode

然后再 preferences- enable dev mode mcp server 开启

开启后就可以通过鼠标右键 copy/paste as => copy link ti selection 进行对AI 提问

browser-tools

IDE 配置

trae 本身的那个我没有成功过 github.com/AgentDeskAI...

配置

perl 复制代码
{
  "mcpServers": {
    "Browser Tools": {
      "command": "npx @agentdeskai/browser-tools-mcp@latest",
      "args": [],
      "env": {}
    }
  }
}

浏览器端需要装一个插件

目前没有上架应用市场 要上面的github url 地址里找

上面的压缩包解压后加载进去就好了

成功啦! 然后就是测试下 这个mcp 能否读取控制台信息

目前只感觉这两个有用,有其他的可以一起分享呀

相关推荐
再学一点就睡16 分钟前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
前端工作日常1 小时前
我理解的eslint配置
前端·eslint
前端工作日常1 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔2 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖2 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴2 小时前
ABS - Rhomb
前端·webgl
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
桑晒.3 小时前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf
宋辰月3 小时前
Vue2-VueRouter
开发语言·前端·javascript