Agente Canvas do Painel de IA

https://github.com/user-attachments/assets/9201d528-573f-43cc-9d31-571c362318a7

Um agente que preenche gráficos ao vivo, métricas e dados em tempo real num painel Canvas em vez de apenas transmitir texto. Construído com CopilotKit, AG-UI e o ADK da Google.

Conceito Gen UI - canvas agentico. O chat é uma barra lateral fina; a verdadeira superfície é um Canvas persistente onde o agente escreve. Gráficos, KPIs e painéis são artefatos endereçáveis que o agente pode colocar, atualizar e rearranjar ao longo das interações - mais próximo de um colaborador a usar um quadro branco do que de um chatbot a devolver respostas.

🔧 Início Rápido

# from the awesome-llm-apps repo root
cd generative_ui_agents/ai-dashboard-canvas-agent

# install JS deps + agent
pnpm install        # or npm/yarn/bun

# install Python deps separately for the ADK agent
pnpm install:agent

# set your Google API key
cp .env.example .env
# edit .env and set GOOGLE_API_KEY=...

# start UI + agent together
pnpm run dev

📦 Pré-requisitos

• Node.js 18+
• Python 3.8+
• Google Makersuite API Key → obtém uma aqui
• Qualquer gestor de pacotes (pnpm recomendado)

💡 Lockfiles (package-lock.json, yarn.lock, etc.) estão gitignored - cada dev gere o seu próprio.

🛠 Scripts Disponíveis

• dev → Iniciar UI + agente (por defeito)
• dev:debug → Iniciar com registo de depuração
• dev:ui → Executar apenas a aplicação Next.js
• dev:agent → Executar apenas o agente ADK
• build / start → Compilação de produção + servidor
• lint → Executar ESLint
• install:agent → Instalar dependências Python dentro de agent/.venv

🎨 Personalização

• UI Principal → src/app/page.tsx
• Alterar tema/cores e aparência da barra lateral
• Adicionar novos componentes de visualização
• Estender a lógica do agente em /agent

📚 Documentação

• ADK
• CopilotKit
• AG-UI