用 Claude Code 从零构建 AI 队友：Grok Bot 克隆实战

从 xAI 的 Grok Bot 到 Meta 的 Muse，再到 OpenAI 的 Dots，AI 队友正在成为大厂竞相布局的新赛道。但早在这些产品出现之前，开源项目 OpenClaw 就已经证明 AI 可以替你订机票、发邮件。只是它太面向技术达人，模型能力也还不够成熟。如今，B站 UP 主用 Claude Code 完整复刻了一套可生产部署的 AI 队友系统——从界面到沙箱、从记忆到计费，全程展示了「用 AI 构建 AI 产品」的工程方法论。

为什么 AI 队友突然火了

多家公司几乎同时盯上了这个方向，原因并不复杂。OpenClaw^广告 证明了 AI 可以操作真实电脑完成任务，但它最初的门槛太高，普通用户很难上手。大厂看到了机会：把 OpenClaw 的能力封装进熟悉的交互界面，提供官方连接器，再由更强的模型驱动。这就是 Grok Bot、Dots、Muse 的共同逻辑。

这个项目的核心目标是复刻同样的能力，同时保持开源和可定制。用户可以选择 Grok Bot 外观，也可以换成 Dots 或 Muse 的样式，甚至完全自定义。关键在于，整个开发过程不是「氛围编程」——每一步都清楚在做什么，用技能（Skills）和 MCP 来约束智能体的行为，避免产出 AI 垃圾代码。

架构设计：Next.js + Trigger.dev + 沙箱

应用界面分为三块：全局侧边栏、对话区、以及可调整大小的桌面预览面板。用户可以在对话中让智能体操作远程桌面，也可以随时接管。

当用户提交一条消息时，它先到达 Next.js 应用的服务端操作或路由处理程序。但 Next.js 环境并不适合长时间运行的 AI 任务——它可能超时，部署或崩溃会中断任务。所以消息会被转交给一个无状态持久化工作节点，这里用的是 Trigger.dev。这个工作进程独立于 Next.js，没有请求超时限制，崩溃后能自动恢复。

真正的核心操作发生在这个工作进程中：调用 AISDK 智能体，赋予它沙箱执行工具、沙箱文件工具和沙箱截图工具。这三种工具组合起来，能覆盖 99% 的计算机使用任务。

Trigger.dev 是一个面向 AI 工作流和后台任务的开源编排平台，核心价值在于提供不受请求生命周期约束的持久化执行环境。与传统的 Next.js API 路由或 Serverless 函数不同，Trigger.dev 的任务运行在独立的长驻工作节点上，支持长达数小时的执行时间、自动重试、断点续跑和崩溃恢复。它的任务模型基于「运行（run）」和「任务（task）」抽象，每个 run 都有唯一 ID 和持久化状态，可以通过 SDK 进行查询、取消或回放。在 AI 智能体场景中，这种「无状态调度 + 有状态存储」的组合特别合适：工作进程本身可以随时重启，但任务的状态被持久化到外部数据库，因此即使部署新版本或节点崩溃，正在执行的智能体任务也能从断点继续，不会丢失上下文。

远程桌面与用户接管

远程桌面基于 VNC 协议实现。每次创建智能体时，同时创建一个沙箱实例，沙箱使用基于 NoVNC 的开放虚拟网络计算协议，并开放特定端口。在 UI 端，通过内嵌框架加载一个带签名 URL 的页面，用户点击后以全屏对话框形式接管，启用输入功能。

这套机制让「人类介入」变得非常自然。比如智能体在订机票时遇到不知道的信息（如支付密码），会卡住等待。用户接管桌面手动输入后，智能体还能记住这些细节，下次自动完成。

VNC（Virtual Network Computing） 是一种基于 RFB（Remote Framebuffer）协议的远程桌面共享技术，通过在服务端捕获帧缓冲变化、编码后传输到客户端，再由客户端发送键盘和鼠标事件来实现远程控制。NoVNC 则是用 HTML5 和 JavaScript 实现的 VNC 客户端，它利用 WebSocket 将 RFB 协议封装为浏览器可用的通信通道，因此无需安装任何插件或本地客户端，直接嵌入网页即可。在本项目中，沙箱容器内运行 VNC 服务端，NoVNC 提供浏览器端渲染和输入处理，内嵌框架则负责将带签名 URL 的 NoVNC 页面集成到应用 UI 中。签名 URL 的作用是临时授权访问沙箱端口，避免直接暴露内部服务，同时支持在会话结束后自动失效，提升安全性。

技能系统：让智能体可靠工作

项目大量使用了「技能」机制。安装 ShadCN 技能后，智能体就能可靠地使用组件库，不再需要从网上抓取文档或依赖训练数据。安装 Firecrawl 后，智能体能绕过 JavaScript 渲染限制，抓取完整网页信息，甚至直接调用 Y Combinator 数据注册表搜索竞争对手。

据 UP 主实测，用 Firecrawl 替代内置网页搜索，Token 消耗减少了 93%。安装 Clerk 技能后，智能体可以自动完成身份验证集成；安装 Neon 技能后，能配置 Drizzle ORM 和数据库推送；安装 Railway 技能后，可直接通过对话完成部署和环境变量同步。

MCP（Model Context Protocol） 是由 Anthropic 提出并开源的标准化协议，旨在让 AI 模型以统一方式连接外部工具、数据源和 API。它定义了工具、资源、提示等原语，模型通过客户端-服务端架构动态发现和调用这些能力，而不必在训练时硬编码。在本项目中，MCP 与「技能（Skills）」机制互补：技能更像是对某类任务的高层封装（如「使用 ShadCN 组件」或「通过 Firecrawl 抓取网页」），而 MCP 负责底层通信和工具暴露。通过技能约束智能体的行为边界，可以有效减少模型自由发挥带来的不可控输出，同时降低因反复查询文档或试错而产生的 Token 消耗——这也是 Firecrawl 替代内置搜索后 Token 减少 93% 的根本原因。

持久化、群聊与工具调用

最初的实现在路由处理程序中运行 AI 对话，问题很明显：刷新页面任务就中断。迁移到 Trigger.dev 后，每个聊天会话拥有独立的持久化存储，按 Chat ID 隔离。即使智能体在执行长任务时用户关闭页面，任务仍会继续，结果会被保存。

群聊功能展示了「一轮生成」的可能性。因为项目已经积累了足够的表单示例、对话示例和持久化基础，智能体只需在现有基础上构建，不需要发明新东西。UP 主仅用一条提示词就生成了可用的群聊功能，包括群聊头像（最多显示三个机器人头像，剩余用数字表示）、UI 切换对话机器人、以及消息元数据展示。

工具调用方面，智能体被赋予了文件读写、鼠标点击、键盘输入、截图等基础工具。当智能体需要查看屏幕时使用「查看屏幕」工具，当用户询问屏幕上有什么内容时使用「显示屏幕」工具并在聊天中渲染截图。

记忆系统与计费

记忆功能通过沙箱中的 memory.md 文件实现。最初尝试用文件上传方式写入，遇到 Node 运行时缺少 FormData 模块的错误。改用 Touch 命令直接创建文件后问题解决。随后为记忆增加了 get 和 set 工具，让调用更稳定。

计费使用 Clerk Billing。免费计划锁定所有功能，付费计划解锁机器人创建、消息发送、沙箱连接等。用户尝试操作时会收到通知，引导至定价页面。UP 主强调，这套方案适合小型演示，但真正核算成本需要账本系统来跟踪 AI Token 和沙箱使用量。

Clerk Billing 是 Clerk 身份认证平台推出的订阅与计费模块，它将用户管理、组织权限和付费墙能力整合在一起，开发者无需单独集成 Stripe 等支付网关即可实现计划（Plan）和功能门控（Feature Gating）。在本项目中，免费计划通过 Clerk Billing 锁定所有智能体功能，付费计划解锁机器人创建、消息发送和沙箱连接等操作。当用户尝试触发未授权操作时，系统会返回结构化的错误响应，前端据此弹出升级提示并跳转定价页。需要注意的是，Clerk Billing 主要解决「谁能用」的问题，而真正的成本核算——跟踪每个会话的 AI Token 消耗和沙箱资源占用——仍需独立的账本系统，否则容易出现收入与支出不匹配的隐性亏损。

可观测性：从 Next.js 到无状态机器

Sentry 被集成到整个链路。Next.js 应用中的错误、Trigger.dev 工作进程中的错误，都能被统一捕获。会话回放功能让开发者可以重放用户操作，精确看到报错时的鼠标位置和操作序列。Sentry 的代码审查智能体 Seer 还能自动分析错误根因、生成修复计划，甚至直接提交 PR。

UP 主在完成可观测性后感叹：如果早集成 Sentry，很多错误在部署前就能被发现。端到端的日志和错误追踪，加上 AI 的分析能力，让调试不再是猜谜游戏。

这套方法论的启示

这个项目的价值不仅在于复刻了一个 AI 队友产品，更在于展示了一种构建 AI 原生产品的工程范式：先用技能和基础组件教会智能体如何工作，再让它实现具体功能。每一步都有明确的基础设施支撑，避免智能体自由发挥产生不可控的代码。

从开源 OpenClaw 到商业化产品 Grok Bot，再到用 Claude Code 复刻整套系统，AI 队友的门槛正在快速降低。真正的壁垒可能不再是模型能力，而是如何设计可靠的工程框架，让智能体在人类可控的范围内完成复杂任务。