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

"有些最好的产品，源于那些本不该存在的项目。"

大家好，我是 AI Browser 的作者。

今天想和大家聊聊这个开源项目背后的故事 —— 它的诞生，其实是个意外。

一、缘起：一个绩效驱动的探索

故事要从我的本职工作说起。

作为团队 AI 方向的前端主程，2024 年上半年我一直在维护一个不温不火的 AI 项目。如果你也是打工人，应该懂：想要年底有好绩效，就得搞点亮点项目。

于是，我和负责 AI 产品的老谈（化名）开启了为期两个月的探索之旅。

老谈一开始也不太清楚要做什么，给出的需求很"宏大"：

"忘记历史包袱，畅想未来！我们的产品一定要惊艳老板！"

他总结了很多竞品应用，最终敲定的概念是：钢铁侠里的 Jarvis。

用户提出一个问题，智能体就自己去搜集信息，调用不同的工具，最后给出答案。

我当时对标的产品是 Fellou（借鉴学习哈）。这个 AI 浏览器在交互和 UI 上确实很惊艳，让我眼前一亮。

就这样，第一期探索开始了。

二、技术预研：200+ 美元烧出的教训

问题来了：怎么让 AI 操控浏览器？

首先要解决的核心问题是：如何通过代码去操控浏览器，自动完成网页上的任务。

我们果断摒弃了公司那套特别老旧的 C++ 客户端。作为前端出身的我，直接选择了 Electron 来做桌面应用开发。

调研发现，浏览器自动化工具有很多，比如 browser-use。当时火爆的 Manus 就是用的 browser-use，于是我打算在 Electron 中融合 browser-use。

但最终，我失败了。

Cursor 会员的疯狂消耗

现在回想起当时的场景，还挺魔幻的。

那时候 Cursor 还没"作死"，Claude Code (CC) 也还没壮大。我用着老谈的 Cursor 会员开始预研，满怀信心地问：

"Electron + browser-use + Playwright 能融合成一个应用吗？"

Cursor 回答："可以！"

然后就开始不断尝试... 很快，老谈的会员额度用完了。

我咬咬牙，充了个 20 美元月会员继续干，结果半天不到又用完了。

再咬咬牙，充了个 200 美元的 Max 会员！心想这下够了吧？

一天，仅仅一天，200 美元额度全部耗尽，依然没有一个能跑的 Demo。

一个残酷的结论

那一刻，我很沮丧。

由于我对 Electron、browser-use、Playwright 的底层原理都不太了解，根本不知道该怎么做。此时我得出一个结论：

AI 能极大助力你已知的领域 —— 你可以告诉它怎么做。

但如果你在做一件连自己都不了解的事情，AI 也大概率做不出来。除非这事已经有很多人走通过，并且很普遍。

这个教训，价值 200+ 美元。

三、转折：深入学习后的柳暗花明

既然 AI 帮不上忙，那就只能靠自己了。

我开始深入学习 Electron、browser-use、Playwright 的文档和源码。几天后，我得出了结论：

  • Electron 可以构建桌面应用（这个没问题）
  • browser-use 是一个 Python 实现的独立服务
  • Playwright 是另一个独立的应用

这三者融合到一个应用中，基本不可能。

寻找替代方案

于是我开始找替代方案。

首先搜到了 Fellou 团队开源的 Eko 框架。仔细研究后，我发现：

在 Electron 中使用 Eko 是可行的！无非是做一些兼容工作。

接下来，我又想在 Electron 中嵌入一个本地前端服务。我选择了 Next.js（因为比较流行）。

我又花了几天时间，让 Cursor 帮我在 Electron 中加载 Next.js 服务。说实话，我以为这很简单，但 Cursor 又一次让我失望了。

没办法，我只能自己啃 Next.js 文档。

最终，我通过自定义服务器成功将 Next.js 嵌入到 Electron 中 —— 这有点类似开源项目 bolt.diy 的做法。

技术方案终于跑通了！

四、开发期：从零开始的学习之旅

解决了 Electron + Next.js 的问题后，就进入具体开发阶段了。

学习 React 和 Electron

由于我之前的技术栈是 Vue，为了这个项目，我花了一个周末过了一遍 React 基础知识。

同时，我也在不断翻阅 Electron 官方文档，学习主进程、渲染进程、IPC 通信等概念。

Eko 框架的适配

接下来是让 Eko 框架兼容 Electron，实现操控视图窗口内的网页。

这部分工作说起来简单，做起来全是细节：窗口管理、视图切换、浏览器控制... 每一步都要小心翼翼。

各种 Agent 的实现

在这些基础能力完成后，我开始实现各种 Agent：

  • BrowserAgent：操控网页，执行自动化任务
  • FileAgent：处理文件的读写和管理
  • ClientAgent：操控公司客户端

最初的一版，我还学 Fellou 使用了屏幕共享，理论上可以同时操控多个窗口。但窗口位置一直无法移到屏幕外，即使用 Claude Code 给生成了几个 macOS 底层能力扩展文件，还是感觉成本太大，最后放弃了这个方案。

我们还尝试过完全语音输入输出，但效果不太理想。

最终，我们做出了一版"四不像"的 Demo —— 虽然不完美，但 BrowserAgent、FileAgent、ClientAgent 都实现了。

两个月，终于有了成果！

五、破产：被毙的那一刻

满心欢喜地去演示 Demo，期待着老板的惊艳表情。

结果，以种种不可描述的原因，项目被毙了。

这感觉就像是花两个月精心准备了一场表白，结果对方说："你是个好人。"

项目封存，我被拉去做公司层面的其他 AI 项目。那个 Demo 就这样躺在了硬盘的某个角落。

六、重生：一个周末的开源之作

一个月后，我突然想到一个问题：

"是否会有其他人在探索类似的能力 —— 在一个应用中操控网页？"

如果有，他们会不会遇到和我一样的困境？

于是，我用 Claude Code 在一个周末重建了一个开源纯净版本，基于 Electron + Eko + Next.js 的组合。

这次，没有公司的包袱，没有 KPI 的压力，只有纯粹的技术探索。

我把代码清理干净，发布到了 GitHub：

👉 https://github.com/DeepFundAI/ai-browser

然后，利用业余时间，我开始一步步完善之前的设想：

  • ✅ 历史任务回放
  • ✅ 人机交互能力
  • ✅ 语音输入支持
  • ✅ 多语言国际化
  • ✅ Agent 配置系统
  • ✅ 定时任务
  • ✅ 工具箱页面

每一个功能，都是在下班后的深夜和周末完成的。

七、感悟：破产项目的价值

回顾这段经历，我有几点感悟：

1. AI 工具的边界

AI 不是万能的。 它能加速你已知的领域，但无法替代你对底层原理的理解。

那 200 美元的 Cursor 会员，换来的不是代码，而是一个教训：遇到不懂的技术，还是要自己深入学习。

2. 失败项目的重生

公司内部的项目被毙了，但技术积累还在。

与其让它躺在硬盘里吃灰，不如开源出来，帮助更多人。

说不定，哪天就会有人觉得这个项目有用，甚至基于它做出更好的产品。

3. 开源的意义

开源不仅是分享代码，更是分享经验和思路。

我希望这个项目能帮助那些和我一样在探索的人 —— 至少，他们不用再烧 200 美元去验证"Electron + browser-use + Playwright 融不融合得了"。

八、未来：期待你的加入

现在，AI Browser 已经是一个相对完善的开源项目了。

但它还远远不够完美，还有很多功能等待实现：

  • 🎨 主题定制（深色模式）
  • 🔌 插件市场（MCP 工具生态）
  • 📊 工作流可视化编辑器
  • 🌐 更多 Agent 支持（Shell、Email、Notion...）

如果你对这个项目感兴趣，欢迎来 GitHub 给我们点个 ⭐ Star！

👉 项目地址：https://github.com/DeepFundAI/ai-browser

Star 不仅是鼓励，更能让更多人发现这个工具。

如果你是开发者，欢迎提 Issue、发 PR、参与讨论。

如果你是用户，欢迎下载体验，给我们反馈。

最后

从公司内部的绩效项目，到被毙后的封存，再到周末重建的开源版本 —— 这个破产项目，最终找到了属于它的价值。

或许，这就是开源的魅力：

没有 KPI 的束缚，只有技术的纯粹。

没有商业的压力,只有分享的快乐。

我期待这个项目在某一天能发光发热，帮助像我们一样在不断探索的人。

如果你觉得这个故事有共鸣，请帮我们点个 Star ⭐

快速链接

开源项目 #AI浏览器 #技术创业 #程序员日常 #Electron开发

关注我，持续分享 AI 工具开发的经验和踩坑记录。

下次见！

posted @ 2025-12-07 12:59  柳树艾  阅读(0)  评论(0)    收藏  举报