Como o Cliente Web OCTO Funciona para Colaboração entre Humanos e Agentes de IA

A maioria das tentativas de integrar LLMs em chats de trabalho termina como simples bots do Telegram. O usuário digita um comando de barra, espera alguns segundos e recebe uma resposta padrão em um único bloco. Os criadores do projeto OCTO decidiram abordar isso de um ângulo diferente. Eles estão construindo um ambiente de trabalho aberto onde agentes de IA participam de chats ao lado de pessoas como funcionários digitais de pleno direito.

Hoje vamos analisar o repositório octo-web. Esta é a parte frontend do sistema, escrita em TypeScript e React.

Base de Código Unificada para Web e Desktop

A principal decisão arquitetural do projeto é abandonar a separação entre a versão web e o cliente desktop. Os desenvolvedores não criaram dois projetos React separados. Toda a aplicação reside no diretório src/.

Se você executar o cliente em um navegador, o build padrão funciona. Se estiver construindo uma versão desktop para macOS, Windows ou Linux, uma camada fina de Electron da pasta electron/ é conectada. Essa camada cuida da integração com o sistema operacional: bandeja do sistema, notificações, arrastar e soltar arquivos e atualizações em segundo plano.

Essa abordagem elimina a necessidade de duplicar componentes de UI ou manter duas ramificações diferentes de interface.

Interface para Trabalhar com Agentes de IA

Chats convencionais são pouco adequados às especificidades do trabalho de redes neurais. Quando um modelo seleciona uma ferramenta ou executa uma cadeia de raciocínio, um mensageiro convencional apenas mostra um indicador de digitação.

No octo-web, a interface foi projetada desde o início para autonomia de agentes (na terminologia do projeto, eles são chamados de Lobsters, e funcionam baseados em OpenClaw).

Aqui está o que está implementado no layout e nos componentes:

• Renderização de respostas em streaming com suporte a Markdown em tempo real
• Exibição de funções e ferramentas invocadas diretamente na mensagem (chamadas de ferramentas inline)
• Separação de status de digitação e leitura para humanos e agentes autônomos
• Badges visuais que ajudam a distinguir instantaneamente um bot de um colega ao vivo
• Suporte a interface bilíngue (inglês e chinês) com verificação de locale no estágio de CI

Como a Estrutura do Projeto é Organizada

Dentro do repositório, tudo está organizado em pastas claras sem complexidade desnecessária:

• src/pages/ contém as telas principais: chats, listas de canais, configurações e estrutura organizacional
• src/components/ armazena o conjunto de componentes: bolhas de mensagem, campos de entrada, badges de agentes e renderizações de streaming
• src/store/ gerencia o estado do cliente: autorização, rascunhos, canais e status de interação com agentes
• src/api/ contém clientes REST e WebSocket para comunicação com o backend
• electron/ contém pontos de entrada para o Electron

O cliente se comunica com o backend octo-server, escrito em Go. O motor WuKongIM é usado para transmissão de mensagens em tempo real. Os autores não escondem o fork: eles pegaram a estrutura básica do frontend do projeto open-source TangSengDaoDaoWeb e a adaptaram para tarefas de IA.

Início Rápido para Desenvolvimento

Para executar o cliente web localmente, você precisa do Node.js e do gerenciador de pacotes pnpm.

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

Por padrão, o cliente espera que o backend octo-server esteja em execução em localhost:8080. Para apontar para um endereço diferente, crie um arquivo .env.local com base em .env.example e especifique os valores atuais para VITE_API_*.

A construção da aplicação desktop é acionada por comandos separados:

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

Princípios e Autonomia

Os desenvolvedores do projeto seguem a ideia local-first. Tudo que pode executar no hardware do usuário ou dentro do perímetro de rede da empresa deve executar lá. Chats, bancos de dados vetoriais e agentes de IA são executados localmente sem vinculação obrigatória a nuvens de terceiros.

Sua abordagem para divisão de papéis é simples: a IA lida com raciocínio e execução de rotinas, enquanto os humanos definem a direção e avaliam a qualidade.

Quem Deve Olhar o Repositório

O projeto atualmente tem cerca de 600 estrelas no GitHub, mas é interessante como exemplo de organização limpa de monorepo React e Electron. Se você está construindo um chat de trabalho, uma ferramenta interna de empresa ou experimentando com interfaces para LLMs, pode encontrar soluções úteis aqui para chamadas de ferramentas e streaming de mensagens.

O projeto é distribuído sob a licença Apache 2.0, então você pode examinar o código em detalhes ou usá-lo em seus próprios projetos.