# Gerador de Componentes AI Shadcn

> Portado do repositório upstream CopilotKit/shadify.

- Fonte: https://doutorai.pt/apps/ai-shadcn-component-generator
- Categoria: Interfaces Generativas
- Dificuldade: Avançado
- Modelos: OpenAI
- Frameworks: LangChain
- Corre local?: Precisa de APIs cloud
- Chaves necessárias: OPENAI_API_KEY, TAVILY_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 Shadcn Component Generator

> Portado do repositório upstream [CopilotKit/shadify](https://github.com/CopilotKit/shadify).

Descreve uma interface de utilizador em inglês simples. Recebe de volta um componente [shadcn/ui](https://ui.shadcn.com/) interativo e ao vivo. Exporta-o como código React limpo.

https://github.com/user-attachments/assets/b14bebd6-527a-48bd-94f5-d27fea8808aa

**Gen UI concept - composição de componentes orientada a esquemas.** O esquema completo do componente shadcn é passado como contexto do agente, para que o modelo saiba exatamente quais primitivas existem, quais propriedades aceitam e como se aninham. A "saída" do agente é uma árvore estruturada dessas primitivas - transmitida para o navegador, montada como React real, exportável como código. O sistema de design é o espaço de ação.

## Construído Com

- **[shadcn/ui](https://ui.shadcn.com/)** - A IA compõe a partir de componentes shadcn reais (cartões, gráficos, formulários, menus, layouts). Cada componente gerado é acessível, polido e utiliza as mesmas primitivas que tu `npx shadcn add` no teu próprio projeto.
- **[CopilotKit](https://github.com/CopilotKit/CopilotKit)** - Transmite UI estruturada do agente para o navegador em tempo real. Passa o esquema completo do componente como contexto do agente para que o modelo saiba exatamente o que pode construir.
- **[AG-UI](https://github.com/ag-ui-protocol/ag-ui)** - O protocolo agente ↔ UI que transporta chamadas de ferramentas e instruções de componentes entre o backend do LangGraph e o frontend do React.
- **[LangGraph](https://www.langchain.com/langgraph)** - Alimenta o backend do agente. Lida com raciocínio, uso de ferramentas (pesquisa na web, extração de sites via Tavily) e memória de conversação entre turnos.
- **[Render](https://render.com/)** - Todos os três serviços são implementados a partir de um único Blueprint `render.yaml`. O Render liga automaticamente as URLs dos serviços através de referências `fromService` - faz push para `main` e estás ao vivo.

## Arquitetura

Três serviços num monorepo pnpm:

```
UI (React + Vite)  →  Runtime (Hono + CopilotKit)  →  Agent (FastAPI + LangGraph)
```

| Serviço | Caminho | O que faz |
|---|---|---|
| `ui` | `apps/ui` | Interface de chat, renderização de componentes, exportação de código |
| `runtime` | `apps/runtime` | Runtime do CopilotKit, roteia mensagens para o agente |
| `agent` | `apps/agent` | Agente LangGraph com ferramentas de pesquisa, devolve UI estruturada |

## Início Rápido

```bash
pnpm install
```

```markdown
# Adiciona as tuas chaves:

Para começar a utilizar a aplicação, precisas de adicionar as tuas chaves de API. Segue os passos abaixo:

1. **Cria uma conta** na plataforma que fornece a API.
2. **Gera uma chave de API** na secção de configurações da tua conta.
3. **Adiciona a chave ao teu ambiente**. Podes fazer isso definindo a variável de ambiente `API_KEY` com o valor da tua chave.

```bash
export API_KEY='tua-chave-aqui'
```

## Exemplo de utilização

Após adicionares a chave, podes começar a utilizar a API. Aqui está um exemplo de como fazer uma chamada:

```python
import os
import requests

api_key = os.getenv('API_KEY')
response = requests.get('https://api.exemplo.com/dados', headers={'Authorization': f'Bearer {api_key}'})

print(response.json())
```

## Resolução de problemas

Se tiveres problemas ao utilizar a API, verifica o seguinte:

- A chave de API está correta?
- A variável de ambiente `API_KEY` está definida?
- Estás a utilizar o endpoint correto?

Para mais informações, consulta a [documentação da API](https://api.exemplo.com/docs).
```

```bash
# apps/runtime/.env
OPENAI_API_KEY=sk-...

# apps/agent/.env
OPENAI_API_KEY=sk-...
TAVILY_API_KEY=tvly-...
```

```bash
pnpm dev
```

UI corre em [localhost:5173](http://localhost:5173). Runtime na porta 4000, agente na porta 8123.

## Deploy

Ou liga o teu repositório - `render.yaml` define tudo.

## 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-shadcn-component-generator