Aplicativo Personalizado de Centro de Comando para OpenClaw: PWA React com Proxy WebSocket e Tailscale
Um usuário do Reddit (Weird_Night_2176) compartilhou seu aplicativo personalizado de centro de comando construído sobre seu gateway OpenClaw. O aplicativo substitui seu método de controle anterior baseado no WhatsApp, que era limitado pelo limite de 50 mensagens/dia do sandbox do Twilio. A configuração roda em um dispositivo Jetson, servindo um React PWA acessível de qualquer lugar via Tailscale.
Arquitetura e Componentes Principais
- Proxy WebSocket: O OpenClaw vincula apenas ao loopback, então o desenvolvedor criou um servidor proxy Express leve que faz a ponte da conexão WebSocket. Isso permite que o frontend React se comunique com o gateway OpenClaw de qualquer dispositivo na malha Tailscale.
- Frontend: Um Progressive Web App (PWA) React servido diretamente do Jetson.
- Rede: Malha Tailscale para acesso remoto seguro; o aplicativo funciona no iPhone via Tailscale.
Funcionalidades do Centro de Comando
- Interface de Chat ao Vivo: Chat direto com o agente de IA "Bosefus".
- Painel de Agentes: Mostra 14 agentes com sua última tarefa e status.
- Mesa de Negociações: Posições Alpaca ao vivo e P&L de criptomoedas.
- Histórico de Execuções da Equipe: Cada trabalho automatizado registrado por nome.
- Status do Modelo Ollama: Status ao vivo do servidor de modelos Orange Pi.
- Rastreador de Fundos de Construção: Acompanha as economias para a próxima atualização de hardware.
- Notificações Push: Substitui o WhatsApp para alertas.
Para Quem é Isso
Desenvolvedores que executam o OpenClaw como um gateway de agente de IA e precisam de uma UI dedicada, além da linha de comando ou aplicativos de mensagens de terceiros, especialmente aqueles com múltiplos agentes e integrações de negociação.
Recursos
O usuário mencionou que um tutorial completo de construção será lançado no YouTube. Por enquanto, o post no Reddit tem detalhes sobre a arquitetura e motivação.
📖 Read the full source: r/openclaw
👀 See Also
Dividindo o Contexto do Agente em Três Camadas para Resolver o Problema do Monólito de 700 Linhas
Uma equipe construindo um sistema autônomo de 6 agentes resolveu o inchaço de arquivos de contexto separando o contexto do agente em três camadas baseadas no tipo de preocupação e frequência de mudança: CLAUDE.md para identidade, BRIEFING.md para missão e PLAYBOOK.md para operações. Essa abordagem evita falhas silenciosas por limites de argumentos e torna a edição previsível.
Tutorial da primeira hora do OpenClaw: crie um painel de reivindicações do Reddit para o Airtable
Uma construção OpenClaw passo a passo: puxa dois feeds RSS do Reddit, filtra posts com uma rubrica, grava claims de modelos no Airtable, salva o fluxo como uma skill e o agenda.
Guia para Configurar Camadas de Segurança para Codificação com Claude Code
Um guia passo a passo mostra como implementar camadas de segurança de defesa em profundidade para programação com Claude Code, abordando hooks de pré-commit, arquivos CLAUDE.md, agentes de revisão locais, GitHub Actions CI e proteção de branch.
Constituição CLAUDE.md: Construindo um Agente de IA Pessoal — Parte II Passo a Passo do Arquivo
Um CEO compartilha o arquivo CLAUDE.md anotado — 16 seções cobrindo identidade, iniciativa proativa, memória, prazos e regras rígidas — construído ao longo de 6 semanas para uma empresa de 50 pessoas.