Gerador de Componentes AI Shadcn

Portado do repositório upstream CopilotKit/shadify.

Descreve uma interface de utilizador em inglês simples. Recebe de volta um componente shadcn/ui 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 - 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 - 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 - 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 - 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 - 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)

Início Rápido

pnpm install

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.

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:

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.

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

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

pnpm dev

UI corre em localhost:5173. Runtime na porta 4000, agente na porta 8123.

Deploy

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