OCTO Web 客户端如何实现人机协作
大多数将 LLM 集成到工作聊天中的尝试最终都变成了简单的 Telegram 机器人。用户输入一条斜杠命令，等待几秒后收到一个标准的单块响应。OCTO 项目的创建者决定采用不同的方式。他们正在构建一个开放的工作环境，AI 代理与人类以正式数字员工的身份共同存在于聊天中。
今天我们来深入解析 octo-web 代码库。这是系统的前端部分，使用 TypeScript 和 React 编写。
统一的 Web 和桌面代码库
项目的主要架构决策是放弃 Web 版本和桌面客户端之间的分离。开发者没有创建两个独立的 React 项目。整个应用程序位于 src/ 目录中。
如果在浏览器中运行客户端，标准构建即可工作。如果要为 macOS、Windows 或 Linux 构建桌面版本，则会连接来自 electron/ 文件夹的轻量级 Electron 层。该层负责与操作系统的集成：系统托盘、通知、文件拖放和后台更新。
这种方法无需重复 UI 组件或维护两个不同的界面分支。
AI 代理交互界面
常规聊天不太适合神经网络工作的特点。当模型选择工具或执行推理链时，传统的即时通讯软件只能显示一个打字指示器。
在 octo-web 中，界面从零开始为代理自主性而设计（在项目术语中，它们被称为 Lobsters，基于 OpenClaw 工作）。
以下是布局和组件中实现的功能：
- 支持实时 Markdown 的流式响应渲染
- 在消息内直接显示调用的函数和工具（内联工具调用）
- 区分人类和自主代理的打字状态和已读状态
- 视觉徽章帮助即时区分机器人和真实同事
- 支持双语界面（英语和中文），在 CI 阶段进行语言环境检查
项目结构是如何组织的
在代码库中，一切都组织在清晰的文件夹中，没有不必要的复杂性：
src/pages/包含主要界面：聊天、频道列表、设置和组织结构src/components/存储组件集：消息气泡、输入框、代理徽章和流式渲染器src/store/处理客户端状态：授权、草稿、频道和代理交互状态src/api/包含与后端通信的 REST 和 WebSocket 客户端electron/包含 Electron 的入口点
客户端与使用 Go 编写的 octo-server 后端通信。实时消息传输使用 WuKongIM 引擎。作者不隐瞒这个分支：他们从开源项目 TangSengDaoDaoWeb 中获取了基本的前端结构，并针对 AI 任务进行了适配。
快速开始开发
要在本地运行 Web 客户端，需要 Node.js 和 pnpm 包管理器。
默认情况下，客户端期望 octo-server 后端运行在 localhost:8080。要将其指向不同的地址，请基于 .env.example 创建 .env.local 文件，并指定 VITE_API_* 的当前值。
构建桌面应用程序由单独的命令触发：
构建桌面应用程序由单独的指令触发：
原则与自主性
项目开发者遵循本地优先的理念。一切可以在用户硬件上或公司网络范围内运行的内容都应该在那里运行。聊天、向量数据库和 AI 代理在本地运行，无需强制绑定到第三方云服务。
他们的角色分工方法很简单：AI 负责推理和日常执行，而人类设定方向并评估质量。
谁应该关注这个代码库
该项目目前在 GitHub 上有约 600 颗星，但作为清晰的 React 和 Electron 单体仓库组织示例值得关注。如果你正在构建工作聊天、内部公司工具或实验 LLM 界面，你可以在这里找到有关工具调用和消息流式传输的有用解决方案。
该项目采用 Apache 2.0 许可证分发，因此你可以自由地详细检查代码或将其用于自己的项目中。
相关项目