Hoe de OCTO Web Client werkt voor menselijke en AI-agent samenwerking

De meeste pogingen om LLMs te integreren in werkchats eindigen als eenvoudige Telegram bots. De gebruiker typt een slash commando, wacht een paar seconden, en krijgt een standaard enkelvoudige reactie. De makers van het OCTO project kozen voor een andere aanpak. Ze bouwen een open werkomgeving waar AI-agents naast mensen in chats zitten als volwaardige digitale medewerkers.

Vandaag lichten we de octo-web repository uit. Dit is het frontend deel van het systeem, geschreven in TypeScript en React.

Unified Codebase voor Web en Desktop

De belangrijkste architecturale beslissing van het project is het loslaten van de scheiding tussen de webversie en de desktopclient. De ontwikkelaars hebben geen twee aparte React-projecten gemaakt. De gehele applicatie bevindt zich in de src/ directory.

Als je de client in een browser draait, werkt de standaard build. Als je een desktopversie bouwt voor macOS, Windows of Linux, wordt een dunne Electron laag uit de electron/ folder verbonden. Deze laag verzorgt de integratie met het besturingssysteem: systeemvak, notificaties, bestand drag-and-drop en achtergrond updates.

Deze aanpak elimineert de noodzaak om UI-componenten te dupliceren of twee verschillende interface takken te onderhouden.

Interface voor het Werken met AI Agents

Conventionele chats zijn nauwelijks toereikend voor de specifieke aard van neurale netwerk taken. Wanneer een model een tool selecteert of een redeneerketen uitvoert, toont een conventionele messenger slechts een typ-indicator.

In octo-web is de interface vanaf de basis ontworpen voor agent-autonomie (in de terminologie van het project worden ze Lobsters genoemd, en ze werken op basis van OpenClaw).

Dit is wat er is geïmplementeerd in de layout en componenten:

• Streaming response rendering met real-time Markdown ondersteuning
• Weergave van aangeroepen functies en tools direct binnen het bericht (inline tool-call)
• Scheiding van typing en gelezen statussen voor mensen en autonome agents
• Visuele badges die helpen om direct een bot te onderscheiden van een levende collega
• Tweetalige interface ondersteuning (Engels en Chinees) met locale checking in de CI fase

Hoe de Projectstructuur is Georganiseerd

Binnen de repository is alles georganiseerd in duidelijke folders zonder onnodige complexiteit:

• src/pages/ bevat de hoofdschermen: chats, kanaallijsten, instellingen en organisatiestructuur
• src/components/ bevat de componenten set: berichtbellen, invoervelden, agent badges en streaming renders
• src/store/ beheert de client status: autorisatie, concepten, kanalen en agent interactie status
• src/api/ bevat REST en WebSocket clients voor communicatie met de backend
• electron/ bevat entry points voor Electron

De client communiceert met de octo-server backend, geschreven in Go. De WuKongIM engine wordt gebruikt voor real-time berichttransmissie. De auteurs verbergen de fork niet: ze hebben de basis frontend structuur van het open-source TangSengDaoDaoWeb project genomen en aangepast voor AI taken.

Snelle Start voor Ontwikkeling

Om de web client lokaal te draaien, heb je Node.js en de pnpm package manager nodig.

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

Standaard verwacht de client dat de octo-server backend draait op localhost:8080. Om het naar een ander adres te laten wijzen, maak een .env.local bestand aan op basis van .env.example en specificeer de huidige waarden voor VITE_API_*.

Het bouwen van de desktop applicatie wordt geactiveerd door aparte commando's:

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

Principes en Autonomie

De projectontwikkelaars volgen het local-first idee. Alles wat kan draaien op de hardware van de gebruiker of binnen het netwerk perimeter van het bedrijf, zou daar moeten draaien. Chats, vector databases en AI agents draaien lokaal zonder verplichte binding aan clouds van derden.

Hun aanpak voor rolverdeling is eenvoudig: AI handelt redenering en routine-uitvoering af, terwijl mensen de richting bepalen en kwaliteit evalueren.

Voor Wie is deze Repository Interessant

Het project heeft momenteel ongeveer 600 sterren op GitHub, maar het is interessant als voorbeeld van een schone React en Electron monorepo organisatie. Als je een werkchat, een intern bedrijfsmiddel bouwt, of experimenteert met interfaces voor LLMs, kun je hier bruikbare oplossingen vinden voor tool calling en bericht streaming.

Het project wordt gedistribueerd onder de Apache 2.0 licentie, dus je kunt de code vrij in detail bekijken of gebruiken in je eigen projecten.