暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

Cline 使用BrowserTools MCP

        BrowserTools MCP可以实现代码编辑器和浏览器互动,方便前端业务的快速开发和自动编码,下面尝试下使用它。
           它的工作原理如下:首先我们的Cline作为mcp客户端需要连接上本地的BrowserTools MCP server,然后BrowserTools MCP server将请求转发给BrowserTools 代理,最后代理和chrome 的BrowserTools 插件交互。
    ┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
    │  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
    │  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
    │   Cursor)   │     │   Handler)   │     │               │     │             │
    └─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘
            首先安装BrowserTools代理
      npx @agentdeskai/browser-tools-server@1.2.0
      === Browser Tools Server Started ===
      Aggregator listening on http://0.0.0.0:3025
      Available on the following network addresses:
      For local access usehttp://localhost:3025
              接着安装MCP server
        npx @agentdeskai/browser-tools-mcp@1.2.0
        (Use `node --trace-warnings ...` to show where the warning was created)
        Successfully found server at 127.0.0.1:3025
        Successfully discovered server at 127.0.0.1:3025
                在Cline里配置我们的MCP server
            "browser-tools-mcp": {
            "command""npx",
            "args": [
              "-y",
              "@agentdeskai/browser-tools-mcp@1.2.0"
              ]
            } 
                  测试可以连接成功,最后我们安装下hrome 的BrowserTools 插件,下载地址是https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip,下载完成后添加到浏览器插件,重启浏览器后,当我们打开浏览器就可以看到
                  接着在Cline里尝试使用下,输入
            使用BrowserTools 分析下chrome浏览器当前打开的页面
            可以看到开始调用MCP了,但是,插件的实现质量比较堪忧,报了很多错误,
            同时Cline也没有完成我们的需求
              Cline is having trouble...
              Cline uses complex prompts and iterative task execution that may be challenging for less capable models. For best results, it's recommended to use Claude 3.7 Sonnet for its advanced agentic coding capabilities.
                Error
                Cline tried to use browser_action without value for required parameter 'action'. Retrying...
                整体来说,如果不使用Claude,这个插件很难完成我们预期的目标。

                文章转载自golang算法架构leetcode技术php,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

                评论