AI Browser：我用 CC 做了个桌面版 Manus

一、项目背景

作为一名开发者,我经常需要做一些重复性的网页操作:

每天采集特定网站的数据
定期检查某些信息的更新
批量处理网页表单
自动化测试

这些任务虽然简单,但手动操作费时费力。我尝试过用 Puppeteer、Playwright 等工具写脚本,但每次都要写代码、调试、维护,成本太高。

于是我想:能不能直接用自然语言告诉 AI 我想做什么,让它帮我完成这些任务?

经过一段时间的开发,这个想法变成了现实 —— AI Browser。

二、项目简介

AI Browser 是一个基于 Next.js + Electron 的智能浏览器应用,它的核心功能是:

用自然语言描述任务,AI 自动规划并执行网页操作

特点

✅ 支持 5 个主流 AI 服务商 (DeepSeek、通义千问、Gemini、Claude、OpenRouter)
✅ 实时可视化 AI 的思考和执行过程
✅ 定时任务调度 (支持分钟/小时/天级别)
✅ 任务历史保存和回放
✅ 跨平台支持 (macOS、Windows、Linux)

GitHub 地址: https://github.com/DeepFundAI/ai-browser 下载地址：https://www.deepfundai.com/altas

三、功能演示

3.1 任务输入界面

启动后,你会看到一个简洁的输入框。在这里用自然语言描述你想做的事情即可。

示例任务:

“帮我采集掘金前端分类今天的热门文章”
“打开知乎,搜索’人工智能’,收集前 5 个回答的标题”
“访问我的 GitHub 仓库,统计今天新增的 Star 数量”

3.2 执行过程可视化

执行任务时,界面分为两部分:

左侧: AI 思考区

显示 AI 的思维过程
每一步的工具调用
执行状态 (进行中/已完成/出错)

右侧: 浏览器预览

实时显示浏览器操作
可以看到 AI 正在访问哪个网页
如何提取数据

这种设计让整个过程透明可控,你能清楚地知道 AI 在做什么。

3.3 定时任务

对于需要定期执行的任务,可以创建计划任务:

设置任务名称和描述
添加执行步骤 (可多步)
配置执行间隔
- 每 X 分钟执行一次
- 每 X 小时执行一次
- 每天特定时间执行
启用任务

比如:每天早上 9 点自动采集行业新闻并发送到邮箱。

3.4 历史记录

所有执行过的任务都会被保存,支持:

按关键词搜索
查看详细执行日志
回放任务过程
重新执行历史任务

四、技术架构

4.1 技术选型

层级	技术栈
UI 框架	Next.js 15 + React 19
桌面框架	Electron 33
UI 组件库	Ant Design 5 + Tailwind CSS
状态管理	Zustand
数据存储	IndexedDB (electron-store)
AI 引擎	@jarvis-agent (基于 Eko)
构建工具	Vite + TypeScript

4.2 架构设计

┌──────────────────────────────────────────────┐
│            Web UI (Next.js)                  │
│                                              │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐    │
│  │  Home    │ │  Main    │ │ History  │    │
│  │  页面    │ │  页面    │ │  页面    │    │
│  └──────────┘ └──────────┘ └──────────┘    │
└──────────────────┬───────────────────────────┘
                   │ IPC
┌──────────────────▼───────────────────────────┐
│        Electron Main Process                 │
│                                              │
│  ┌────────────────────────────────────┐     │
│  │   Eko Service (AI Agent Core)      │     │
│  │                                    │     │
│  │  ┌──────────┐    ┌──────────┐     │     │
│  │  │ Planner  │───▶│ Executor │     │     │
│  │  └──────────┘    └──────────┘     │     │
│  └────────────────────────────────────┘     │
│                                              │
│  ┌────────────────────────────────────┐     │
│  │         Browser Agent              │     │
│  │  - Navigate  - Click  - Extract    │     │
│  └────────────────────────────────────┘     │
│                                              │
│  ┌────────────────────────────────────┐     │
│  │         File Agent                 │     │
│  │  - Read  - Write  - Search         │     │
│  └────────────────────────────────────┘     │
└──────────────────────────────────────────────┘

4.3 数据流

用户输入任务
    ↓
Next.js API (/api/mcp/message)
    ↓
IPC 调用 Electron 主进程
    ↓
Eko Service 解析任务
    ↓
生成执行计划 (多步骤)
    ↓
调用工具 (Browser Agent / File Agent)
    ↓
流式返回结果 (SSE)
    ↓
前端实时更新 UI
    ↓
保存到 IndexedDB

4.4 核心技术点

1. MCP 协议

使用 Model Context Protocol 实现 AI 与工具的标准化通信:

// Define a tool
const tool = {
  name: "browser_navigate",
  description: "Navigate to a specific URL",
  parameters: {
    type: "object",
    properties: {
      url: {
        type: "string",
        description: "The URL to navigate to"
      }
    },
    required: ["url"]
  }
}

// AI calls the tool
await agent.call(tool, { url: "https://example.com" })

2. 流式响应

通过 Server-Sent Events (SSE) 实现实时推送:

// API Route
export async function GET(req: Request) {
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of aiResponse) {
        const data = `data: ${JSON.stringify(chunk)}\n\n`
        controller.enqueue(new TextEncoder().encode(data))
      }
      controller.close()
    }
  })

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    }
  })
}

3. Electron IPC

主进程与渲染进程的安全通信:

// Preload script
contextBridge.exposeInMainWorld('electronAPI', {
  ekoRun: (task: string) => ipcRenderer.invoke('eko:run', task),
  ekoStop: () => ipcRenderer.invoke('eko:stop')
})

// Main process
ipcMain.handle('eko:run', async (event, task) => {
  const result = await ekoService.execute(task)
  return result
})

五、支持的 AI 模型

AI Browser 支持多个主流 AI 服务商,你可以根据需求选择:

服务商	模型	特点
DeepSeek	deepseek-chat, deepseek-reasoner	性价比高,推理能力强
通义千问	qwen-max, qwen-plus, qwen-vl-max	国产大模型,支持视觉
Google	gemini-1.5-flash, gemini-2.0-flash	速度快,免费额度高
Claude	claude-3.7-sonnet, claude-3.5-sonnet	任务理解能力强
OpenRouter	多模型聚合	一个 API 访问多个模型

六、快速开始

6.1 环境要求

Node.js >= 20.19.3
pnpm >= 10.18.2

6.2 安装步骤

# 1. 克隆项目
git clone [你的仓库地址]
cd ai-browser

# 2. 安装依赖
pnpm install

# 3. 配置 API Key
cp .env.template .env.local
# 编辑 .env.local,填入至少一个 AI 服务商的 API Key

# 4. 构建 Electron 依赖
# mac
pnpm run build:deps
# windows
pnpm run build:deps:win

# 5. 启动开发服务器
pnpm run next

# 6. 启动 Electron (新终端)
pnpm run electron

6.3 打包应用

# mac
pnpm run build

# windows
pnpm run build:win

打包后的应用位于 /release 目录。

七、应用场景

7.1 信息采集

任务: “帮我采集 Hacker News 首页的热门文章”

AI 执行步骤:

打开 https://news.ycombinator.com
提取文章标题、链接、评论数
整理成结构化数据
保存为 JSON 文件

7.2 数据监控

定时任务: “每天早上 9 点检查我的 GitHub 仓库 Star 数”

执行逻辑:

访问 GitHub 仓库页面
提取 Star 数量
与昨天对比
如有变化,发送通知

7.3 批量操作

任务: “访问这 10 个网址,提取正文并保存为 Markdown”

AI 会:

依次访问每个网址
识别正文内容
转换为 Markdown 格式
保存到本地文件

7.4 自动化测试

任务: “测试登录功能是否正常”

执行流程:

打开登录页面
输入测试账号密码
点击登录按钮
检查是否跳转到首页
返回测试结果

八、技术特色

8.1 任务规划能力

AI 会将复杂任务拆解为多个子任务:

用户任务: "帮我采集最新的 AI 新闻并总结"

AI 规划:
1. [Browser] 访问 AI 新闻网站
2. [Browser] 提取文章列表
3. [Browser] 依次访问每篇文章
4. [Browser] 提取文章正文
5. [AI] 总结文章要点
6. [File] 保存总结结果

8.2 工具调用机制

支持的工具类型:

工具	功能
Browser Agent	浏览器操作 (导航、点击、提取)
File Agent	文件读写 (读取、保存、搜索)

8.3 错误处理

AI 能自动处理常见错误:

页面加载失败 → 重试
元素未找到 → 调整选择器
数据格式异常 → 尝试其他提取方式

九、后续规划

[ ] Agent 配置: Agent 配置: 支持 Agent 提示词更改，Mcp Tools 配置
[ ] 人工干预: 人工干预:允许在会话过程中进行人工干预（如遇到登录）
[ ] 支持语音输入: 可以通过语音进行会话消息输入
[ ] 支持更多 Agent: 支持更多的 Agent，如 ShellAgent

十、开源协议

MIT License – 可自由使用、修改、商用

十一、致谢

感谢 Eko 框架提供的强大 Agent 能力。

十二、联系方式

GitHub: https://github.com/DeepFundAI/ai-browser
作者: lsustc
Email: lsustc@mail.ustc.edu.cn

如果这个项目对你有帮助,欢迎点个 Star ⭐️

有任何问题或建议,欢迎在评论区讨论!

#人工智能 #浏览器自动化 #开源项目 #Electron #前端开发

AI Browser：我用 CC 做了个桌面版 Manus

一、项目背景

二、项目简介

特点

三、功能演示

3.1 任务输入界面

3.2 执行过程可视化

3.3 定时任务

3.4 历史记录

四、技术架构

4.1 技术选型

4.2 架构设计

4.3 数据流

4.4 核心技术点

1. MCP 协议

2. 流式响应

3. Electron IPC

五、支持的 AI 模型

六、快速开始

6.1 环境要求

6.2 安装步骤

6.3 打包应用

七、应用场景

7.1 信息采集

7.2 数据监控

7.3 批量操作

7.4 自动化测试

八、技术特色

8.1 任务规划能力

8.2 工具调用机制

8.3 错误处理

九、后续规划

十、开源协议

十一、致谢

十二、联系方式

评论

发表回复 取消回复

更多文章

AI Browser: 从想法到产品，我们走了多远？

AI Browser：我用 CC 做了个桌面版 Manus

AI Browser：一个破产项目的重生之路

发表回复取消回复