Как устроен веб-клиент OCTO для совместной работы людей и ИИ-агентов

Большинство попыток встроить LLM в рабочие чаты заканчивается банальными телеграм-ботами. Пользователь пишет команду через слэш, ждет несколько секунд и получает стандартный ответ в один блок. Создатели проекта OCTO решили пойти с другого конца. Они делают открытую рабочую среду, где ИИ-агенты сидят в чатах рядом с людьми как полноценные цифровые сотрудники.

Сегодня разберем репозиторий octo-web. Это фронтенд-часть системы, написанная на TypeScript и React.

Единая кодовая база для веба и десктопа

Главное архитектурное решение проекта заключается в отказе от разделения веб-версии и десктопного клиента. Разработчики не стали создавать два разных проекта на React. Все приложение живет в директории src/.

Если вы запускаете клиент в браузере, работает стандартная сборка. Если собираете десктопную версию под macOS, Windows или Linux, подключается тонкий слой на Electron из папки electron/. Этот слой отвечает за интеграцию с операционной системой: системный трей, уведомления, перетаскивание файлов и фоновые обновления.

Такой подход избавляет от необходимости дублировать UI-компоненты или поддерживать две разные ветки интерфейса.

Интерфейс для работы с ИИ-агентами

Обычные чаты плохо приспособлены к специфике работы нейросетей. Когда модель подбирает инструмент или выполняет цепочку размышлений, в привычном мессенджере виден только индикатор печати.

В octo-web интерфейс сразу проектировали под автономию агентов (в терминологии проекта их называют Lobsters, они работают на базе OpenClaw).

Вот что сделано в верстке и компонентах:

• Потоковый рендеринг ответов с поддержкой Markdown в реальном времени
• Отображение вызванных функций и инструментов прямо внутри сообщения (inline tool-call)
• Разделение статусов печати и прочтения для людей и автономных агентов
• Визуальные плашки, которые помогают с первого взгляда отличить бота от живого коллеги
• Поддержка двуязычного интерфейса (английский и китайский) с проверкой локалей на этапе CI

Как устроена структура проекта

Внутри репозитория все разложено по понятным папкам без усложнений:

• src/pages/ содержит основные экраны: чаты, списки каналов, настройки и организационную структуру
• src/components/ хранит набор компонентов: пузыри сообщений, поля ввода, плашки агентов и стриминговые рендеры
• src/store/ отвечает за состояние клиента: авторизацию, черновики, каналы и статус взаимодействия с агентами
• src/api/ содержит клиенты REST и WebSocket для связи с серверной частью
• electron/ содержит точки входа для Electron

Клиент общается с бэкендом octo-server, написанным на Go. Для передачи сообщений в реальном времени используется движок WuKongIM. Авторы не скрывают форк: базовую структуру фронтенда они взяли у открытого проекта TangSengDaoDaoWeb и доработали под задачи ИИ.

Быстрый запуск для разработки

Чтобы поднять веб-клиент локально, нужен Node.js и менеджер пакетов pnpm.

git clone https://github.com/Mininglamp-OSS/octo-web.git
cd octo-web
pnpm install
pnpm dev

По умолчанию клиент рассчитывает, что бэкенд octo-server запущен на localhost:8080. Чтобы направить его на другой адрес, создайте файл .env.local на основе .env.example и укажите актуальные значения для VITE_API_*.

Сборка десктопного приложения запускается отдельными командами:

pnpm build        # обычная веб-сборка
pnpm pc:dev       # запуск Electron-клиента
pnpm pc:package   # упаковка приложения под нужную ОС

Принципы и автономность

Разработчики проекта следуют идее local-first. Все, что может работать на оборудовании пользователя или внутри контура компании, должно работать там. Чаты, векторные базы и ИИ-агенты запускаются локально без обязательной привязки к сторонним облакам.

Их подход к разделению ролей прост: ИИ занимается размышлениями и выполнением рутины, а человек задает направление и оценивает качество.

Кому стоит взглянуть на репозиторий

У проекта пока около 600 звёзд на GitHub, но он интересен как пример чистой организации монорепозитория на React и Electron. Если вы делаете рабочий чат, внутренний инструмент для компании или экспериментируете с интерфейсами для LLM, здесь можно подсмотреть удачные решения по вызову инструментов и стримингу сообщений.

Проект распространяется под лицензией Apache 2.0, поэтому код можно свободно разбирать на детали или использовать в своих проектах.