Visual Agentic Dev：打造浏览器里的可视化编码方案

[brucetoo]

前言

大家在用现在的 AI 编程工具（比如 Claude Code CLI, Cursor, Windsurf ）时，有没有遇到这样的痛点：

你看着浏览器里的页面，发现一个样式有问题，或者想改一个文案。 然后你需要：

1. 切换到编辑器。
2. 搜索文案或组件名，找到对应的文件。
3. 定位到具体的代码行。
4. 复制代码上下文，或者把文件路径告诉 AI：“帮我改一下这里”。

这个过程频繁打断思路，被称为“Context Switching Cost”。

既然浏览器是渲染结果的地方，为什么不能直接在浏览器里点击那个组件，告诉 AI：“把这个颜色改深一点”，然后 AI 直接去修改本地代码呢？

Visual Agentic Dev 是什么？

Visual Agentic Dev 正是为解决这个问题而生的开源工具。它连接了Chrome 浏览器和你的本地开发环境。

🔗 开源地址：https://github.com/brucetoo/visual-agentic-dev

👉 核心功能：

• 🎯 零配置源码定位：利用 React Fiber 自动识别源码位置，无需在业务代码中插入冗余属性。
• 📂 多项目并行开发：自动识别当前 Tab 所属项目，并智能切换到对应的终端会话。
• 🤖 动态 Agent 注册体系：可扩展架构支持多种 AI Agent （如 Claude Code, CCR 等），具备动态就绪检测能力。
• 🖱️ 批量元素修改：支持选中多个页面元素并发送给 Agent 进行批量修改。
• ⌨️ 便捷快捷键：仅需 Cmd + Shift + S (Mac) 或 Ctrl + Shift + S (Windows/Linux) 即可快速访问。
• 🛠 内置终端集成：深度集成的终端，具备会话持久化、历史记录恢复及智能上下文切换功能。

效果演示

(图片描述：点击页面上的 Todo Item ，侧边栏直接弹出 AI 对话框，输入指令后，本地代码自动更新)

技术实现原理

这个项目主要包含三个部分：

1. Chrome Extension (前端)

负责在页面上注入遮罩层，捕获用户的点击事件。 最关键的技术点是React Fiber 遍历。我们通过查找 DOM 节点对应的 __reactFiber$ 属性，向上追溯找到对应的组件源文件路径 (_source)。这意味着你不需要在编译时做复杂的 AST 注入，只要是 React Dev Mode 运行的项目，大概率都能直接支持。

2. Bridge Server (中转)

一个运行在本地的 WebSocket 服务端。它像一座桥梁，一端连接 Chrome Extension ，另一端连接本地的 Shell 会话。 它负责把浏览器里选中的文件路径、代码片段发送给 Agent ，同时也把 Agent 在终端的输出实时流式传输回浏览器。

3. Agent Integration (智能)

我们设计了一个 AgentRegistry，可以适配各种终端 AI 工具。 目前完美支持 Claude Code。当你在浏览器选中组件时，工具会自动把组件的代码上下文以 Prompt 的形式喂给 Agent ，让 AI 能够基于精准的上下文进行修改。

为什么做这个？

现在的 AI 编码工具很强，但它们大多还是“编辑器中心”的。而前端开发的很多时间其实花在浏览器里“看效果”。

Visual Agentic Dev 的愿景是打造一个以视觉为中心 (Visual-First) 的开发流。让 AI 不仅仅是在代码库里游走，而是能“看到”你指出的 UI 元素，真正像一个坐在你旁边的结对编程伙伴。

快速开始

安装只需两步：

1. 启动 Bridge Server:

   npm install -g @visual-agentic-dev/bridge-server
   vdev-server
   

2. 项目接入 React Devtools:

   npm install @visual-agentic-dev/react-devtools
   

   (具体参考 GitHub README)

最后

项目完全开源 ，非常欢迎大家试用、提 Issue 或 PR ！

如果你觉得这个想法有趣，求一个 Star ⭐️ 支持一下！

👉 GitHub: brucetoo/visual-agentic-dev