Comment fonctionne le client web OCTO pour la collaboration humain-agent IA

La plupart des tentatives d'intégration de LLM dans les salons de discussion professionnels se limitent à de simples bots Telegram. L'utilisateur tape une commande slash, attend quelques secondes, et reçoit une réponse standard en un seul bloc. Les créateurs du projet OCTO ont choisi une approche différente. Ils construisent un environnement de travail ouvert où les agents IA participent aux discussions aux côtés des personnes en tant qu'employés numériques à part entière.

Aujourd'hui, nous décortiquons le dépôt octo-web. Il s'agit de la partie frontend du système, écrite en TypeScript et React.

Base de code unifiée pour le web et le desktop

La principale décision architecturale du projet est d'abandonner la séparation entre la version web et le client desktop. Les développeurs n'ont pas créé deux projets React distincts. L'ensemble de l'application réside dans le répertoire src/.

Si vous exécutez le client dans un navigateur, la compilation standard fonctionne. Si vous construisez une version desktop pour macOS, Windows ou Linux, une fine couche Electron issue du dossier electron/ est connectée. Cette couche gère l'intégration avec le système d'exploitation : barre d'état système, notifications, glisser-déposer de fichiers et mises à jour en arrière-plan.

Cette approche élimine le besoin de dupliquer les composants UI ou de maintenir deux branches d'interface différentes.

Interface pour travailler avec les agents IA

Les discussions classiques ne sont pas bien adaptées aux spécificités du fonctionnement des réseaux de neurones. Lorsqu'un modèle sélectionne un outil ou exécute une chaîne de raisonnement, un messenger classique ne montre qu'un indicateur de frappe.

Dans octo-web, l'interface a été conçue dès le départ pour l'autonomie des agents (dans la terminologie du projet, ils s'appellent des Lobsters, et ils fonctionnent basés sur OpenClaw).

Voici ce qui est implémenté dans la mise en page et les composants :

• Rendu des réponses en streaming avec support Markdown en temps réel
• Affichage des fonctions et outils invoqués directement dans le message (appel d'outils inline)
• Séparation des statuts de frappe et de lecture pour les humains et les agents autonomes
• Badges visuels permettant de distinguer instantanément un bot d'un collègue en chair et en os
• Support de l'interface bilingue (anglais et chinois) avec vérification des locales à l'étape CI

Comment la structure du projet est organisée

Dans le dépôt, tout est organisé en dossiers clairs sans complexité inutile :

• src/pages/ contient les écrans principaux : discussions, listes de canaux, paramètres et structure organisationnelle
• src/components/ stocke l'ensemble des composants : bulles de message, champs de saisie, badges d'agent et rendus de streaming
• src/store/ gère l'état côté client : autorisation, brouillons, canaux et statut d'interaction avec les agents
• src/api/ contient les clients REST et WebSocket pour la communication avec le backend
• electron/ contient les points d'entrée pour Electron

Le client communique avec le backend octo-server, écrit en Go. Le moteur WuKongIM est utilisé pour la transmission des messages en temps réel. Les auteurs ne cachent pas le fork : ils ont pris la structure frontend de base du projet open-source TangSengDaoDaoWeb et l'ont adaptée pour les tâches IA.

Démarrage rapide pour le développement

Pour exécuter le client web en local, vous avez besoin de Node.js et du gestionnaire de paquets pnpm.

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

Par défaut, le client s'attend à ce que le backend octo-server soit en cours d'exécution sur localhost:8080. Pour pointer vers une adresse différente, créez un fichier .env.local basé sur .env.example et spécifiez les valeurs actuelles pour VITE_API_*.

La construction de l'application desktop est déclenchée par des commandes séparées :

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

Principes et autonomie

Les développeurs du projet suivent l'idée local-first. Tout ce qui peut s'exécuter sur le matériel de l'utilisateur ou dans le périmètre réseau de l'entreprise devrait s'exécuter là-bas. Les discussions, les bases de données vectorielles et les agents IA s'exécutent localement sans liaison obligatoire aux clouds tiers.

Leur approche de la division des rôles est simple : l'IA gère le raisonnement et l'exécution des tâches routinières, tandis que les humains fixent la direction et évaluent la qualité.

Qui devrait regarder ce dépôt

Le projet compte actuellement environ 600 étoiles sur GitHub, mais il est intéressant comme exemple d'organisation propre d'un monorepo React et Electron. Si vous construisez un chat de travail, un outil interne d'entreprise ou si vous expérimentez avec des interfaces pour les LLM, vous pouvez y trouver des solutions utiles pour les appels d'outils et le streaming de messages.

Le projet est distribué sous la licence Apache 2.0, vous pouvez donc librement examiner le code en détail ou l'utiliser dans vos propres projets.