开源了一个 AI 浏览器,让 AI 帮你自动完成网页任务
项目介绍
大家好!我最近开源了一个基于 Next.js + Electron 的 AI 智能浏览器项目 —— AI Browser。这个项目的核心理念是:让 AI 成为你的浏览器助手,帮你自动完成各种重复性的网页任务。
GitHub 地址: github.com/DeepFundAI/…
为什么做这个项目?
在日常工作中,我们经常需要:
- 定期采集某些网站的信息
- 批量处理网页表单
- 监控网页内容变化
- 自动化测试网页功能
这些任务重复且枯燥,于是我想:能不能用自然语言告诉 AI 我想做什么,让它帮我完成这些任务?
核心功能
1. 自然语言任务执行
只需用中文描述你想做什么,AI 会自动分析并执行:
比如:"帮我采集最新的 AI 新闻并总结"
2. 实时任务可视化
左边显示 AI 的思考和执行步骤,右边实时预览浏览器操作:
你可以清楚地看到:
- AI 正在执行哪一步
- 使用了哪些工具
- 浏览器在做什么操作
3. 定时任务调度
创建计划任务,让 AI 定期帮你完成重复工作:
支持:
- 自定义执行间隔 (分钟/小时/天)
- 多步骤任务编排
- 立即执行或定时启动
4. 任务历史回溯
所有执行过的任务都会保存,支持搜索回溯:
技术架构
前端技术栈
Next.js 15 + React 19 # UI 框架
Ant Design + Tailwind CSS # 样式系统
Zustand # 状态管理
桌面应用层
Electron 33 # 跨平台桌面框架
Vite # 构建工具
TypeScript # 类型安全
AI 引擎
基于 Eko 框架,通过 @jarvis-agent 包实现:
- 多步骤任务规划
- 工具调用 (浏览器操作、文件读写等)
- 流式输出展示
支持的 AI 模型
- DeepSeek: deepseek-chat, deepseek-reasoner
- 通义千问 (Qwen): qwen-max, qwen-plus, qwen-vl-max
- Google Gemini: gemini-1.5-flash, gemini-2.0-flash, gemini-1.5-pro
- Claude: claude-3.7-sonnet, claude-3.5-sonnet, claude-3-opus
- OpenRouter: 聚合多个 AI 服务商
架构设计
┌─────────────────────────────────────────────────┐
│ 用户界面 (Next.js) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 任务输入 │ │ 执行展示 │ │ 历史记录 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────┬───────────────────────────────────┘
│ IPC Communication
┌─────────────▼───────────────────────────────────┐
│ Electron 主进程 │
│ ┌──────────────────────────────────────┐ │
│ │ AI Agent 服务 (Eko 框架) │ │
│ │ ┌────────────┐ ┌────────────────┐ │ │
│ │ │ 任务规划器 │ │ 工具调度器 │ │ │
│ │ └────────────┘ └────────────────┘ │ │
│ └──────────────────────────────────────┘ │
│ ┌──────────────────────────────────────┐ │
│ │ 浏览器自动化工具 │ │
│ │ - 页面导航 - 元素操作 - 内容提取 │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
数据流
- 用户输入任务 → Next.js 页面
- IPC 调用 → Electron 主进程
- AI 解析任务 → Eko Agent 规划步骤
- 工具执行 → 浏览器自动化/文件操作
- 流式返回 → SSE 推送到前端
- UI 更新 → 实时显示执行进度
- 历史保存 → IndexedDB 持久化
快速开始
1. 安装依赖
pnpm install
2. 配置 API Key
复制配置模板:
cp .env.template .env.local
编辑 .env.local,填入你的 API Key:
# 选择一个你有的 API Key 即可
DEEPSEEK_API_KEY=sk-xxx
# QWEN_API_KEY=sk-xxx
# GOOGLE_API_KEY=xxx
# ANTHROPIC_API_KEY=sk-xxx
# OPENROUTER_API_KEY=sk-xxx
3. 运行项目
# 构建 Electron 部分（mac 端）
pnpm run build:deps
# 构建 Electron 部分（windows 端）
pnpm run build:deps:win
# 启动开发服务器
pnpm run next
# 新开终端,启动 Electron
pnpm run electron
4. 打包应用
# mac端
pnpm run build
# windows端
pnpm run build:win
支持打包为:
- macOS:
.dmg安装包 - Windows:
.exe安装程序
应用场景
1. 信息采集
"帮我采集掘金前端分类的热门文章标题和链接"
2. 数据监控
定时任务:"每天早上 9 点检查 GitHub 项目的 Star 数"
3. 自动化操作
"帮我在 B 站搜索'前端面试',收集前 10 个视频的标题和播放量"
4. 内容整理
"访问这些网址,提取文章正文并保存为 Markdown"
技术亮点
1. MCP 协议集成
使用 Model Context Protocol 实现 AI 与工具的标准化通信:
// Tool definition
const browserTool = {
name: "browser_navigate",
description: "Navigate to a URL in the browser",
parameters: {
url: { type: "string", description: "Target URL" }
}
}
2. 流式响应
通过 SSE (Server-Sent Events) 实现 AI 响应的实时推送:
// API route: /api/mcp/sse
export async function GET(req: Request) {
const encoder = new TextEncoder()
const stream = new ReadableStream({
async start(controller) {
for await (const chunk of aiResponse) {
controller.enqueue(encoder.encode(chunk))
}
}
})
return new Response(stream)
}
3. 任务持久化
使用 IndexedDB 保存任务历史,支持快速检索:
// Task storage
export const taskStorage = {
async save(task: Task) {
const db = await openDB('tasks', 1)
await db.put('tasks', task)
},
async search(keyword: string) {
// Full-text search implementation
}
}
后续规划
- 支持 Agent 的提示词配置
- 支持 SellAgent
- 支持计划阶段的调整
- 支持语音输入
- 支持人工干预
致谢
特别感谢 Eko 框架,为本项目提供了强大的 AI Agent 能力。
开源协议
MIT License
写在最后
这个项目从想法到实现花了不少时间,目前还在持续优化中。如果你对 AI + 浏览器自动化感兴趣,欢迎 Star 和提 Issue!
如果有任何问题或建议,欢迎在评论区交流讨论!
GitHub: github.com/DeepFundAI/…
作者: lsustc
技术栈: Next.js 15 + Electron 33 + TypeScript + Ant Design
