Jak działa klient webowy OCTO w kontekście współpracy człowieka i agenta AI

Większość prób integracji LLM-ów z czatami roboczymi kończy się prostymi botami na Telegramie. Użytkownik wpisuje komendę slash, czeka kilka sekund i otrzymuje standardową odpowiedź w jednym bloku. Twórcy projektu OCTO postanowili podejść do tego inaczej. Budują otwarte środowisko pracy, w którym agenci AI uczestniczą w czatach obok ludzi jako pełnoprawni cyfrowi pracownicy.

Dzisiaj przyjrzymy się repozytorium octo-web. To jest frontendowa część systemu, napisana w TypeScript i React.

Ujednolicona baza kodu dla wersji webowej i desktopowej

Główna decyzja architektoniczna projektu polega na porzuceniu podziału między wersją webową a klientem desktopowym. Deweloperzy nie tworzyli dwóch oddzielnych projektów React. Cała aplikacja znajduje się w katalogu src/.

Jeśli uruchamiasz klienta w przeglądarce, działa standardowy build. Jeśli budujesz wersję desktopową dla macOS, Windows lub Linux, podłączana jest cienka warstwa Electron z folderu electron/. Ta warstwa odpowiada za integrację z systemem operacyjnym: tackę systemową, powiadomienia, przeciąganie i upuszczanie plików oraz aktualizacje w tle.

Takie podejście eliminuje konieczność duplikowania komponentów UI czy utrzymywania dwóch różnych gałęzi interfejsu.

Interfejs do pracy z agentami AI

Zwykłe czaty słabo nadają się do specyfiki pracy sieci neuronowych. Gdy model wybiera narzędzie lub wykonuje łańcuch rozumowania, konwencjonalny messenger pokazuje tylko wskaźnik pisania.

W octo-web interfejs został zaprojektowany od podstaw z myślą o autonomii agentów (w terminologii projektu nazywane są Lobsters i działają w oparciu o OpenClaw).

Oto co jest zaimplementowane w układzie i komponentach:

• Renderowanie strumieniowych odpowiedzi z obsługą Markdown w czasie rzeczywistym
• Wyświetlanie wywoływanych funkcji i narzędzi bezpośrednio w wiadomości (inline tool-call)
• Rozróżnienie statusów pisania i odczytu dla ludzi i autonomicznych agentów
• Wizualne badge'y pomagające błyskawicznie odróżnić bota od żywego kolegi
• Obsługa dwujęzycznego interfejsu (angielski i chiński) z sprawdzaniem locale na etapie CI

Jak zorganizowana jest struktura projektu

Wewnątrz repozytorium wszystko jest uporządkowane w przejrzystych folderach bez zbędnej złożoności:

• src/pages/ zawiera główne ekrany: czaty, listy kanałów, ustawienia i strukturę organizacyjną
• src/components/ przechowuje zestaw komponentów: bąbelki wiadomości, pola wprowadzania, badge'e agentów i renderery strumieniowe
• src/store/ obsługuje stan klienta: autoryzację, szkice, kanały i status interakcji z agentami
• src/api/ zawiera klienty REST i WebSocket do komunikacji z backendem
• electron/ zawiera punkty wejścia dla Electron

Klient komunikuje się z backendem octo-server, napisanym w Go. Silnik WuKongIM jest używany do przesyłania wiadomości w czasie rzeczywistym. Autorzy nie ukrywają forka: wzięli podstawową strukturę frontendu z open-source'owego projektu TangSengDaoDaoWeb i dostosowali ją do zadań AI.

Szybki start dla deweloperów

Aby uruchomić klienta webowego lokalnie, potrzebujesz Node.js i menedżera pakietów pnpm.

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

Domyślnie klient oczekuje, że backend octo-server będzie uruchomiony na localhost:8080. Aby wskazać inny adres, utwórz plik .env.local na podstawie .env.example i określ aktualne wartości dla VITE_API_*.

Budowanie aplikacji desktopowej uruchamiane jest oddzielnymi poleceniami:

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

Zasady i autonomia

Deweloperzy projektu kierują się ideą local-first. Wszystko, co może działać na sprzęcie użytkownika lub w ramach sieci firmowej, powinno tam działać. Czat, bazy wektorowe i agenci AI działają lokalnie bez obowiązkowego wiązania z zewnętrznymi chmurami.

Ich podejście do podziału ról jest proste: AI zajmuje się rozumowaniem i wykonywaniem rutynowych zadań, a ludzie wyznaczają kierunek i oceniają jakość.

Kto powinien przyjrzeć się repozytorium

Projekt ma obecnie około 600 gwiazdek na GitHubie, ale jest interesujący jako przykład czystej organizacji monorepo React i Electron. Jeśli budujesz czat roboczy, wewnętrzne narzędzie firmowe lub eksperymentujesz z interfejsami dla LLM-ów, możesz tu znaleźć przydatne rozwiązania dotyczące tool calling i strumieniowania wiadomości.

Projekt jest rozpowszechniany na licencji Apache 2.0, więc możesz swobodnie szczegółowo przeanalizować kod lub wykorzystać go we własnych projektach.