前端 mcp 的使用

在泡泡里2025-07-09 13:45

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

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