赋能 AI Agent：Visual Agentic Dev —— 沉浸式浏览器开发新范式

Brucetooo
189 阅读3分钟

效果演示

示例任务描述：add one more todo item, not done state, task name is "hey it's new one", clike this new item show dialog and say "you click me"

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

项目简介

Visual Agentic Dev 是一款沉浸式浏览器开发环境。通过首创的 "点击定位 + Agent 协同编辑" 闭环，让 AI 不再仅仅是一个“聊天框”，而是真正深度集成进你的开发流程中。

无需在 IDE、浏览器和聊天窗口之间反复横跳。直接在页面上点击元素，由 AI Agent（如 Claude Code）联动本地终端完成从定位到修改的全部工作。

核心特性

  • 🎯 零配置源码定位：深度集成 React Fiber 链表，精准识别组件源码位置，无需在业务代码中插入冗余属性。
  • 📂 多项目并行开发：自动根据当前浏览的页面识别所属项目路径，智能切换对应的终端会话与 Agent 上下文。
  • 🤖 动态 Agent 注册：可扩展架构，原生支持 Claude Code、CCR 等多种 AI Agent，动态检测环境就绪状态。
  • 🖱️ 批量元素修改：支持多选页面元素，一键将上下文发送给 Agent 进行批量样式调整或逻辑优化。
  • ⌨️ 极速快捷键：通过 Cmd + Shift + S (Mac) 或 Ctrl + Shift + S (Win) 随时激活定位模式。
  • 🛠 内置终端集成：深度集成终端会话历史持久化，支持上下文智能切换与会话重连。

为什么选择 Visual Agentic Dev？

传统的 AI 辅助开发方案往往局限于“聊天窗口”，开发者需要手动告知 AI 源码位置，或者在 IDE 中手动选择代码。

Visual Agentic Dev 改变了这一切：

  1. 所见即所得：在浏览器看到哪个组件不爽，点一下，AI 就知道在哪里改。
  2. 闭环体验：定位 -> 提需 -> Agent 自动执行修改 -> 页面热更新，全程无需离开浏览器。
  3. 拥抱 React 19：针对 React 19 移除 _debugSource 的重大变化，我们提供了 unplugin 插件方案，确保在最新技术栈下依然保持精准定位。

快速上手

1. 安装 Chrome 插件

  • 从 Chrome Web Store 下载（即将上线）
  • 或下载 extension.zip 并通过“加载解压的扩展程序”手动安装。

2. 启动 Bridge Server

# 全局安装
npm install -g @visual-agentic-dev/bridge-server

# 启动服务器
vdev-server

3. 集成到 React 项目

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

// App.tsx
import { DevToolsProvider } from '@visual-agentic-dev/react-devtools';

export default function App() {
  return (
    <DevToolsProvider enabled={process.env.NODE_ENV === 'development'}>
      <YourApp />
    </DevToolsProvider>
  );
}

注意 (React 19+)：React 19 需要配置构建插件以恢复源码定位能力，我们提供了通用 unplugin 插件：

// vite.config.ts
import { vitePlugin as visualDev } from '@visual-agentic-dev/react-devtools/unplugin';
export default defineConfig({ plugins: [visualDev()] });

结语

我们相信，未来的 AI 开发不应该只是“问答”，而应该是“工具化”的延伸。Visual Agentic Dev 正在这一领域进行前沿探索。

欢迎在 GitHub 点个 Star 关注我们的进度！

avatar
文章
阅读
粉丝