So funktioniert der OCTO Web Client für die Zusammenarbeit von Menschen und KI-Agenten

Die meisten Versuche, LLMs in Arbeitschats zu integrieren, enden als einfache Telegram-Bots. Der Benutzer gibt einen Slash-Befehl ein, wartet ein paar Sekunden und erhält eine Standard-Einzelblock-Antwort. Die Entwickler des OCTO-Projekts haben sich für einen anderen Ansatz entschieden. Sie bauen eine offene Arbeitsumgebung, in der KI-Agenten als vollwertige digitale Mitarbeiter in Chats neben Menschen sitzen.

Heute werden wir das octo-web Repository aufschlüsseln. Dies ist der Frontend-Teil des Systems, geschrieben in TypeScript und React.

Einheitliche Codebasis für Web und Desktop

Die wichtigste architektonische Entscheidung des Projekts ist die Aufgabe der Trennung zwischen der Web-Version und dem Desktop-Client. Die Entwickler haben keine zwei separaten React-Projekte erstellt. Die gesamte Anwendung befindet sich im Verzeichnis src/.

Wenn Sie den Client in einem Browser ausführen, funktioniert der Standard-Build. Wenn Sie eine Desktop-Version für macOS, Windows oder Linux erstellen, wird eine dünne Electron-Schicht aus dem Ordner electron/ verbunden. Diese Schicht verarbeitet die Integration mit dem Betriebssystem: System-Tray, Benachrichtigungen, Datei-Drag-and-Drop und Hintergrund-Updates.

Dieser Ansatz eliminiert die Notwendigkeit, UI-Komponenten zu duplizieren oder zwei verschiedene Interface-Zweige zu pflegen.

Interface für die Arbeit mit KI-Agenten

Normale Chats sind schlecht geeignet für die Besonderheiten der Arbeit mit neuronalen Netzen. Wenn ein Modell ein Tool auswählt oder eine Kette von Schlussfolgerungen ausführt, zeigt ein konventioneller Messenger nur einen Tipp-Indikator.

In octo-web wurde das Interface von Grund auf für Agenten-Autonomie entwickelt (in der Terminologie des Projekts werden sie Lobsters genannt und arbeiten basierend auf OpenClaw).

Hier ist, was im Layout und in den Komponenten implementiert ist:

• Streaming-Response-Rendering mit Echtzeit-Markdown-Unterstützung
• Anzeige von aufgerufenen Funktionen und Tools direkt in der Nachricht (Inline-Tool-Call)
• Trennung von Tipp- und Lese-Status für Menschen und autonome Agenten
• Visuelle Badges, die sofort helfen, einen Bot von einem echten Kollegen zu unterscheiden
• Unterstützung der zweisprachigen Oberfläche (Englisch und Chinesisch) mit Locale-Prüfung in der CI-Phase

Wie die Projektstruktur organisiert ist

Im Repository ist alles in klaren Ordnern organisiert, ohne unnötige Komplexität:

• src/pages/ enthält die Hauptscreens: Chats, Kanallisten, Einstellungen und Organisationsstruktur
• src/components/ speichert den Komponentensatz: Nachrichtenblasen, Eingabefelder, Agent-Badges und Streaming-Renderer
• src/store/ verwaltet den Client-Status: Autorisierung, Entwürfe, Kanäle und Agenten-Interaktionsstatus
• src/api/ enthält REST- und WebSocket-Clients für die Kommunikation mit dem Backend
• electron/ enthält Einstiegspunkte für Electron

Der Client kommuniziert mit dem octo-server Backend, geschrieben in Go. Die WuKongIM-Engine wird für die Echtzeit-Nachrichtenübertragung verwendet. Die Autoren verstecken den Fork nicht: Sie haben die grundlegende Frontend-Struktur aus dem Open-Source-Projekt TangSengDaoDaoWeb genommen und für KI-Aufgaben angepasst.

Schnellstart für die Entwicklung

Um den Web-Client lokal auszuführen, benötigen Sie Node.js und den pnpm-Paketmanager.

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

Standardmäßig erwartet der Client, dass das Backend octo-server auf localhost:8080 läuft. Um ihn auf eine andere Adresse zu zeigen, erstellen Sie eine .env.local-Datei basierend auf .env.example und geben Sie die aktuellen Werte für VITE_API_* an.

Der Build der Desktop-Anwendung wird durch separate Befehle ausgelöst:

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

Prinzipien und Autonomie

Die Projektentwickler folgen der Local-First-Idee. Alles, was auf der Hardware des Benutzers oder innerhalb des Netzwerkperimeters des Unternehmens laufen kann, sollte dort laufen. Chats, Vektordatenbanken und KI-Agenten laufen lokal ohne obligatorische Bindung an Drittanbieter-Clouds.

Ihr Ansatz zur Rollenverteilung ist einfach: KI übernimmt Schlussfolgerungen und routinemäßige Ausführung, während Menschen die Richtung vorgeben und die Qualität bewerten.

Für wen lohnt sich ein Blick auf das Repository

Das Projekt hat derzeit etwa 600 Sterne auf GitHub, aber es ist interessant als Beispiel für saubere React- und Electron-Monorepo-Organisation. Wenn Sie einen Arbeitschat, ein internes Unternehmenstool entwickeln oder mit Interfaces für LLMs experimentieren, können Sie hier nützliche Lösungen für Tool-Calling und Nachrichten-Streaming finden.

Das Projekt wird unter der Apache 2.0-Lizenz vertrieben, sodass Sie den Code frei im Detail untersuchen oder in Ihren eigenen Projekten verwenden können.