前端 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 能否读取控制台信息

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

相关推荐
童先生2 小时前
Nginx + Vue/React 前端 + API:防止路径混淆漏洞与跨域问题实战分享
前端·vue.js·nginx
Stringzhua4 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
万少5 小时前
可可图片编辑 HarmonyOS 上架应用分享
前端·harmonyos
你的人类朋友5 小时前
git常见操作整理(持续更新)
前端·git·后端
无羡仙5 小时前
Webpack 核心实战:从零搭建支持热更新与 Babel 转译的现代前端环境
前端·webpack·前端框架
你的人类朋友5 小时前
git中的Fast-Forward是什么?
前端·git·后端
初遇你时动了情5 小时前
uniapp vue3 ts自定义底部 tabbar菜单
前端·javascript·uni-app
JarvanMo6 小时前
天塌了?Flutter工程总监跑去苹果了?
前端
烛阴7 小时前
掌握 TypeScript 的边界:any, unknown, void, never 的正确用法与陷阱
前端·javascript·typescript
Jerry7 小时前
迁移到 Jetpack Compose
前端