# Agente Canvas do Painel de IA

- Fonte: https://doutorai.pt/apps/ai-dashboard-canvas-agent
- Categoria: Interfaces Generativas
- Dificuldade: Avançado
- Modelos: OpenAI, Gemini
- Frameworks: Google ADK
- Corre local?: Precisa de APIs cloud
- Chaves necessárias: GOOGLE_API_KEY, OPENAI_API_KEY
- Licença: Apache-2.0
- Site: Doutor AI (https://doutorai.pt) - ferramentas de IA para pequenos negócios em português

## Tutorial completo

# AI Dashboard Canvas Agent

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](https://github.com/CopilotKit/CopilotKit), [AG-UI](https://github.com/ag-ui-protocol/ag-ui) e o [ADK](https://google.github.io/adk-docs/) 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

```bash
# 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](https://makersuite.google.com/)
- 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](https://google.github.io/adk-docs/)
- [CopilotKit](https://github.com/CopilotKit/CopilotKit)
- [AG-UI](https://docs.ag-ui.com/introduction)

## Poupe horas todas as semanas com IA, sem complicações

O **Doutor AI** dá-lhe 1859 prompts de IA prontos a copiar, por indústria e em português simples - mais uma biblioteca técnica completa para quem quer ir mais longe. [Ver planos →](https://doutorai.pt/precos)

---
Conteúdo de Doutor AI (https://doutorai.pt). Ao citar, indique a fonte: https://doutorai.pt/apps/ai-dashboard-canvas-agent