Dashboards com dados em tempo real são o coração de sistemas de monitoramento, analytics e operações. Com agentes de IA, você pode construir um dashboard funcional com gráficos dinâmicos, WebSockets e filtros interativos em uma fração do tempo. Neste tutorial, você vai aprender a criar um dashboard React com dados em tempo real usando Claude Code e Codex de forma orquestrada no Windows 11.
O que vamos construir
Vamos desenvolver um dashboard de monitoramento de servidores com dados em tempo real:
- Cards de métricas (CPU, memória, disco, rede) com atualização ao vivo
- Gráficos de linha para histórico de métricas
- Tabela de servidores com status e alertas
- Filtros por servidor, período e tipo de métrica
- Notificações de alerta em tempo real
- Tema claro/escuro e layout responsivo
Imagem sugerida: Captura de tela do dashboard final com cards de métricas, gráficos em tempo real e tabela de servidores.
Setup do projeto com Claude Code
Vamos usar Claude Code para configurar o projeto Next.js com todas as dependências necessárias.
Inicialização
claude "Crie um projeto Next.js 14 com TypeScript e App Router para um dashboard de monitoramento em tempo real. Configure: TypeScript strict, Tailwind CSS, ESLint. Instale recharts (gráficos), socket.io-client (WebSocket), lucide-react (ícones), date-fns (formatação de datas), @tanstack/react-table (tabela), zustand (estado global). Crie estrutura: src/components/dashboard (MetricCard, ChartPanel, ServerTable, AlertList), src/hooks (useWebSocket, useMetrics), src/lib (socket, formatters, constants), src/types, src/app/dashboard."
Claude Code configura todo o projeto e instala as dependências compatíveis.
Servidor WebSocket com Codex
O backend WebSocket envia métricas em tempo real. Codex gera o servidor rapidamente.
Servidor de métricas
opencode "Crie um servidor WebSocket em Node.js com Socket.IO em server/index.ts: 1. Porta 3001, CORS configurado para localhost:3000 2. Eventos: 'metrics:update' envia métricas a cada 2 segundos para todos clientes conectados 3. Simulação de 5 servidores com dados realistas: cpu (0-100%), memory (0-100%), disk (0-100%), network (mb/s), uptime (segundos), status (online/offline/degraded) 4. Evento 'alert:new' para alertas aleatórios (cpu alta, disco cheio, servidor offline) 5. Evento 'server:status' quando servidor muda de status 6. Tratar conexão, desconexão e error events Use typescript, socket.io, cors, dotenv. Gere tsconfig.json e package.json para o servidor."
Dados mockados realistas
opencode "Crie server/mockData.ts com dados simulados realistas: 1. 5 servidores: api-server-01, web-server-01, db-server-01, cache-server-01, worker-server-01 2. Cada servidor tem IP, região (us-east, eu-west, ap-southeast), e specs (4-16 vCPUs, 8-64GB RAM) 3. Função generateMetric(serverId): gera valor de métrica com variação aleatória realista 4. Função generateAlert(): gera alerta aleatório com tipo, severidade, mensagem e timestamp 5. Função generateServerStatus(): simula mudanças de status ocasionais"
Componentes do dashboard com Claude Code
Claude Code cria os componentes visuais do dashboard com contexto completo do design system.
Layout do dashboard
claude "Crie src/app/dashboard/page.tsx com: 1. Layout responsivo em grid: header com título e filtros, cards de métricas (2x2), gráficos (2x1), tabela de servidores, lista de alertas 2. Estado global com zustand: servidores selecionados, período, filtros ativos 3. Loading skeletons enquanto dados não chegam 4. Error boundary para falhas de conexão WebSocket 5. Auto-reconnect com backoff exponencial"
MetricCard
claude "Crie src/components/dashboard/MetricCard.tsx com: 1. Props: title, value, unit, change (percentual), icon, trend (up/down/stable), color 2. Animação de contagem quando valor muda (contagem progressiva) 3. Indicador visual de tendência (seta verde/vermelha) 4. Sparkline (mini gráfico) dos últimos 20 valores 5. Tooltip com detalhes ao passar o mouse Use recharts para o sparkline e framer-motion (se instalado) para animações."
ServerTable
claude "Crie src/components/dashboard/ServerTable.tsx usando @tanstack/react-table: 1. Colunas: Nome, Status (com badge colorido), IP, Região, CPU, Memória, Uptime, Ações 2. Ordenação por qualquer coluna 3. Filtro por texto (nome, IP, região) 4. Seleção múltipla de servidores 5. Destaque visual para servidores com alertas ativos 6. Atualização em tempo real dos valores (sem piscar a linha inteira)"
Gráficos e visualizações
Gráficos em tempo real são o destaque do dashboard. Vamos usar Codex para configuração e Claude Code para integração.
ChartPanel com Recharts
claude "Crie src/components/dashboard/ChartPanel.tsx com: 1. Gráfico de linha mostrando histórico de métrica selecionada 2. Botões para selecionar métrica: CPU, Memória, Disco, Rede 3. Botões de período: 5min, 15min, 1h, 6h 4. Múltiplas linhas (um servidor por linha) com cores distintas 5. Tooltip com valores exatos, legenda interativa (clica para ocultar/mostrar servidor) 6. Área sombreada abaixo das linhas 7. Animação de transição quando novos dados chegam"
AlertList
opencode "Crie src/components/dashboard/AlertList.tsx: 1. Lista rolável de alertas com ícone por severidade (critical, warning, info) 2. Timestamp relativo (há 2 minutos atrás) 3. Botão de dismiss para cada alerta 4. Badge com contagem de alertas não lidos 5. Auto-scroll para novos alertas 6. Filtro por severidade e servidor"
Testes e performance
Testar um dashboard em tempo real exige estratégias específicas. Codex gera os testes e Claude Code otimiza a performance.
Testes de componentes
opencode "Crie tests/MetricCard.test.tsx: 1. Deve renderizar título, valor e unidade 2. Deve exibir seta para cima quando trend é up 3. Deve exibir seta para baixo quando trend é down 4. Deve mostrar sparkline com dados fornecidos 5. Deve animar contagem quando valor muda Crie tests/ChartPanel.test.tsx: 1. Deve renderizar gráfico com dados mockados 2. Deve alternar métrica ao clicar nos botões 3. Deve ocultar servidor ao clicar na legenda"
Otimização de performance
claude "Analise o dashboard e otimize para dados em tempo real: 1. Adicione React.memo em MetricCard, ServerRow e AlertItem 2. useMemo para dados transformados (formatação, agregação) 3. useCallback para handlers passados para componentes filhos 4. Virtualização da ServerTable com react-window se mais de 50 servidores 5. Throttle de atualizações: max 10 atualizações por segundo 6. WebSocket batch: agrupar múltiplas mensagens em uma atualização"
FAQ — Perguntas Frequentes
Preciso de conhecimentos avançados em React para criar um dashboard com IA?
Conhecimento intermediário de React é suficiente. Os agentes geram a estrutura dos componentes, gráficos e lógica de WebSocket. Você precisa entender hooks, contexto e componentização para revisar.
Claude Code ou Codex para gráficos e visualizações?
Claude Code entende melhor o contexto do layout e integração entre componentes. Codex é mais rápido para configurações de gráficos e funções de formatação.
Os dados em tempo real funcionam com WebSockets no Windows?
Sim. WebSockets são suportados nativamente no Windows 11. Socket.IO funciona sem necessidade de WSL.
Posso conectar o dashboard a APIs externas?
Sim. Claude Code configura chamadas a APIs REST, bancos de dados e mensageria como fontes de dados para o dashboard.
É possível orquestrar Claude Code e Codex no mesmo dashboard?
Sim. Com o Orquestra, Claude Code cuida dos componentes visuais enquanto Codex gera hooks de dados, gráficos e testes. Tudo em paralelo.
Construa seu dashboard com agentes hoje
Neste tutorial, você aprendeu a criar um dashboard React com dados em tempo real usando Claude Code e Codex. Do servidor WebSocket aos gráficos dinâmicos, cada etapa foi acelerada pelos agentes.
Quer levar essa orquestração para o próximo nível? O Orquestra conecta Claude Code, Codex e outros agentes no mesmo canvas infinito no Windows 11. Baixe o Orquestra e comece seu teste grátis de 7 dias.
Links internos recomendados
- APIs REST com Agentes de IA — crie a API que alimenta seu dashboard
- TypeScript React com Agentes de IA — tutorial complementar de componentes React
- Testes Automatizados com Agentes de IA — aprenda a testar dashboards
Pronto para orquestrar seus agentes?
Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Grátis por 7 dias.