搭一个能看着 agent 干活的工作区：MarbleOS

这篇咱们从零搭一个东西：一个把AI代理干活过程摊开给你看的图形界面，文件、工具、任务、输出，四样东西整整齐齐摆在桌面上，而不是缩在聊天线程里让你去考古。跑完大概四十分钟，你拿到的是一个装在自己浏览器里的工作区，不是一段只配出现在博客配图里的动图。

开搞之前先确认这几件事都齐了：

• 装了新版Chrome或者Edge，版本太老页面可能要挑毛病
• 终端能跑npm，Node 18以上（我用的20，问题不大）
• 去官网点了“加入候补名单”或者拿到了“下载测试版”的入口，两种都行

都齐了咱们就开搞，缺哪样先去补哪样。

Step 1：把测试版弄到本地

官网首页挂着的入口很直白：入门引导、下载测试版、查看更多演示、加入候补名单。别急着点候补，先点开“入门引导”读一遍——三分钟，值得花。那个引导本质上就讲了一件事：这个项目要把AI代理干活的现场从黑箱里搬出来摆到你面前。

拿到包之后，本地起一个开发服务器。不同入口拿到的包可能不太一样，以你手头为准，但基本上逃不出这组命令：

npm install
npm run dev

⚠️ 这一步很多人会卡在“跑完npm run dev浏览器没反应”上——多半是端口被占了。换个端口启动就行，别去翻网络设置，不是那的问题。能看见页面弹出来，这一步就算通了。

Step 2：从聊天框走到工作区

这个界面最反直觉的地方是：它不是聊天窗口。现在几乎所有AI界面都是聊天框，突然有个demo不这么做，得花几秒适应一下。这个工作区把四样东西摊开摆在大平面上：文件、工具、任务、输出——每个都有自己的面板。

页面跑通之后先别急着干别的，把这四样在界面上找齐了再继续。验证方式：看左侧有没有文件列表，右侧有没有任务和输出的位置——它们应该是平铺着露出来的，不是藏在某个二级菜单里等你翻。

Step 3：丢一个真实任务进去

我丢了一个任务进去：把仓库里所有FIXME注释列出来，整理成清单。然后我把眼睛从聊天框上挪开，盯住工作区。

有意思的来了：文件列表在动，一个文件被打开又关掉，工具调用在旁边排队，输出一行一行往下滚——整个现场是实时摊开在你面前的，不像聊天框只能干等一个最终的完成回答。这一步我跑通了心里一块石头落地，能看见，就是比看不见踏实。

插播一句：这步写到一半我才想起来必须提前交代——有些入口可能要等审核，别干等着，去“查看更多演示”那条路也能先上手玩起来。我当初就是在候补名单那卡了十分钟，换条路进去反而直接跑通了。

Step 4：把黑箱拆了，路才宽

最后聊一点我个人的判断。

只要你还盯着聊天框找agent改了哪个文件、调了哪个工具，本质上就是在隔着一层墙看它干活。聊天框把过程压扁成了一串一串的文本，文件变化、工具调用、中间产物全混在一起，你只能拿到它给你的最终结果。工作区的思路干脆反过来：文件摆在那，工具放在旁边，任务和输出并排跑，agent的每一步你都看得见——这背后的赌注是，让过程可见这件事本身，可能比结果更快更重要。

当然了，它现在只是个演示项目，别指望它扛生产负载，那不是它的定位。但这个方向我是很看好的。真要把自己常用的agent框架接进去，思路其实不复杂：输出暴露成流，文件挂靠到树，剩下的就是权限怎么跟着能力一步一步开——这个以后单开一篇细讲。

到这里，这个能看着agent干活的工作区就搭完了。跑起来了吗，照这个清单自查：

• 浏览器能打开MarbleOS的工作区界面
• 文件、工具、任务、输出，四样都能在界面上找到，不是藏在折叠菜单里
• 丢一个真实任务进去，能盯着它每一步动文件、调工具，而不是只看到最终结果

都打勾了，这篇就算交付。接下来你可以试着把它接到自己常用的agent框架上，或者反过来想一想：你现在手里的哪条链，也一直在当黑箱用？