🌐 Browser Automation Agent - VS Code Extension

类似 Claude Code 的浏览器自动化插件，使用本地 vLLM + Playwright MCP。

✨ 功能特性

🤖 AI 聊天界面 - 类似 Claude Code 的侧边栏聊天
🌐 浏览器自动化 - 通过 Playwright MCP 控制真实浏览器
🎯 工具调用 - 支持 navigate、click、fill_form 等操作
🔄 Agent 热重载 - 无需重启即可更新 Agent
🖼️ 多模态支持 - 支持图片和文件上传
⚡ 本地运行 - 使用你自己的 vLLM 模型

🚀 快速开始

1. 安装依赖

cd vscode-browser-agent
npm install

2. 编译扩展

npm run compile

3. 开发调试

在 VS Code 中打开 vscode-browser-agent 文件夹
按 F5 启动调试
在新窗口中点击左侧的 "Browser Agent" 图标

4. 打包安装

npm run package
# 生成 browser-automation-agent-0.1.0.vsix
# 在 VS Code 中: Extensions → ... → Install from VSIX

⚙️ 配置

打开 VS Code 设置，搜索 "Browser Agent"：

API URL: vLLM 服务地址（默认: http://127.0.0.1:8003/v1）
Model Name: 模型名称（默认: Qwen/Qwen2.5-3B-Instruct-AWQ）
Python Path: Python 路径（默认: python3）

📁 项目结构

vscode-browser-agent/
├── package.json           # 扩展配置
├── tsconfig.json         # TypeScript 配置
├── src/
│   ├── extension.ts      # 扩展入口
│   └── chatViewProvider.ts  # Webview 聊天界面
├── out/                  # 编译输出
└── README.md

🔧 开发指南

修改聊天界面

编辑 src/chatViewProvider.ts 中的 _getHtmlForWebview() 方法。

添加新命令

在 package.json 的 contributes.commands 中添加
在 src/extension.ts 中注册命令处理

集成 Python 后端

在 chatViewProvider.ts 的 handleUserMessage() 中：

import { spawn } from 'child_process';

const python = spawn('python3', ['../agent_playwright_mcp.py']);
python.stdout.on('data', (data) => {
    // 处理 Python 输出
});

📝 待办事项

[ ] 完整的 Python 后端集成
[ ] 流式输出支持
[ ] 多模态文件上传
[ ] Agent 热重载实现
[ ] 配置持久化
[ ] 错误处理优化

📄 License

MIT

现在开始开发你的专属 AI 助手！ 🚀

Browser Automation Agent

mingo