MCP插件使用（browser-tools-mcp为例）

Ne0inhk

— 2 min read
MCP插件使用（browser-tools-mcp为例）

1. 环境配置（Brower Tools为例）

python 安装 nodejs 安装 mkdir C:\Users\Suoxd\Documents\Cline\MCP\browser-tools-mcp git clone https://github.com/AgentDeskAI/browser-tools-mcp.git "C:\Users\Suoxd\Documents\Cline\MCP\browser-tools-mcp"

2. MCP服务安装启动

cd C:\Users\Suoxd\Documents\Cline\MCP\browser-tools-mcp npminstall @agentdeskai/[email protected] npx @agentdeskai/[email protected] npx @agentdeskai/[email protected]

参考https://browsertools.agentdesk.ai/installation

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述
在这里插入图片描述


在这里插入图片描述
在这里插入图片描述

3. 浏览器插件配置

https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip
在这里插入图片描述

4. Cline 服务配置

"browser-tools-mcp":{"command":"node","args":["d:/Suo/code/tmp-AI/browser-tools-mcp/browser-tools-mcp/dist/mcp-server.js"],"disabled":false,"autoApprove":[]}

5. 最终效果

浏览器端调试工具增加了插件页面

在这里插入图片描述


在这里插入图片描述
在这里插入图片描述

Read more

AI 直接生成前端代码：我的软件原型设计流，从此告别重复画图

AI 直接生成前端代码：我的软件原型设计流，从此告别重复画图

近年来，AI 辅助开发越来越成熟，尤其是在快速原型设计方面。今天分享一下我如何借助 Cursor、Trace solo、ChatGPT、Qoder 等 AI 工具，高效完成软件原型的自动绘制与代码生成。 📌 核心流程三步走 1️⃣ 用 AI 输出需求文档（非技术描述） 首先，我会让 AI 根据产品思路或功能描述，生成一份清晰、无技术细节的需求文档。这一步不写代码，只聚焦逻辑与用户流程。 2️⃣ AI 生成 HTML 原型代码 基于上一步的需求文档，直接让 AI 生成对应的 HTML 代码，快速搭建出可交互的前端原型。支持实时预览，直观看到界面效果。 3️⃣ 反复微调，直至满意 生成的原型往往需要多次调整。通过自然语言描述修改方向，AI 可快速迭代代码，直至达到想要的交互与视觉效果。

By Ne0inhk
WebAgent详解+实战：用开源AI智能体搞定产品与竞品市场调研

WebAgent详解+实战：用开源AI智能体搞定产品与竞品市场调研

在市场调研场景中，产品及竞品分析往往需要投入大量人力，手动浏览网页、提取信息、整理数据，不仅效率低下，还容易出现信息遗漏、误差等问题。WebAgent作为通义实验室开源的端到端自主网页智能体，凭借强大的中文语义理解、多步骤推理和结构化输出能力，可完全本地部署且永久免费，能高效替代人工完成网页信息采集、竞品数据提取、产品信息汇总等调研工作。本文将从WebAgent核心介绍、部署要点入手，聚焦产品与竞争对手调研场景，一步步实现实战示例，让无论是开发者还是市场从业者，都能快速上手，用AI提升调研效率，摆脱重复劳动。 一、初识WebAgent：阿里开源的网页智能体“神器” 1.1 什么是WebAgent？ WebAgent是阿里巴巴通义实验室开源的自主网页智能体框架，核心定位是“模拟人类浏览网页的完整流程”，能理解自然语言指令、规划浏览路径、执行网页操作（点击、翻页、搜索等）、提取关键信息并结构化输出，无需人工干预即可完成复杂的网页相关任务。 与国外的AgentQL相比，WebAgent最大的优势的是完全开源免费、支持本地部署、中文语义优化，无需调用云端API，数据可完全保存在内网，

By Ne0inhk

前端转型AI的“第一公里”：如何建立正确的AI心智模型？

前端转型AI的“第一公里”：如何建立正确的AI心智模型？ 在过去的一年里，我见证了太多前端同行的焦虑与迷茫。AI浪潮袭来，很多人匆忙上阵，学会了调用OpenAI的API，甚至跑通了LangChain的Demo，但在实际落地时却频频踩坑。 我们习惯了确定性的世界：输入1 + 1，输出必然是2；写了display: flex，布局必然改变。然而，AI开发是一个概率性的世界：同样的Prompt，两次调用可能得到截然不同的结果。这种底层逻辑的冲突，是前端转型AI最大的“拦路虎”。 很多前端工程师把大模型仅仅当成一个“智能API接口”，试图用传统的硬编码逻辑去控制它，结果往往是Prompt越写越长，系统却越来越不稳定。这并非技术能力不足，而是心智模型尚未完成迁移。 从“函数思维”到“上下文思维” 传统前端开发的核心是“函数思维”：我们定义输入、处理逻辑和输出，追求的是精准控制。但在AI应用开发中，这种思维必须升级为“上下文思维”。 大模型本质上是一个“概率预测机”。它不像函数那样执行指令，而是像人一样理解语境。前端开发者转型AI的第一步，不是去学Python深度学习框架，而是学会如

By Ne0inhk