Como o theo funciona por baixo
Visão geral pra quem quer entender o que acontece quando você clica em "Gerar" ou "Publicar".
Visão macro
O iframe sandboxed
App rodando = código TSX gerado pela IA executando dentro de um iframe com:
- Babel standalone (compila TSX → JS no browser)
- React 18 + ReactDOM via CDN
- Tailwind via CDN (JIT, classes detectadas em runtime)
- BeaUI (
/beaui.js) — wrapper de componentes prontos - Lucide icons via CDN
- Helpers globais:
db,user,auth,files,email,webhook,Bea.*
Banco de dados
- Cada app cria suas próprias tabelas com sufixo único (ex:
app_clientes_g7k2) - Filtro
WHERE owner_id = $1é obrigatório — RLS no PostgreSQL é a defesa final - Permissões granulares por categoria de dado (ver Categorias e permissões)
- DB Explorer (admin) permite ver tabelas e dados — útil pra debug
Autenticação
3 camadas:
- Sessão da plataforma (better-auth) — controla acesso ao Creator, /apps, etc.
- Sessão dentro de app — independente. Você pode ter um app público de e-commerce onde clientes fazem login dentro do app, sem ter conta no theo.
- App tokens / API tokens — pra integrações server-to-server (Zapier, Make).
Deploy de plataforma
A própria theo:
- Next.js 15 App Router em modo standalone
- PM2 com 1 processo node + Postgres local + nginx
- Build-id polling: detecta deploy novo, mostra banner pro user atualizar quando puder (não recarrega sozinho)
- better-auth pra session
- Drizzle ORM pra queries
- Resend pra emails
O que é stateless e o que persiste
| Componente | Estado | Onde |
|---|---|---|
| Sessão de chat (Creator) | Persistente | creator_sessions no DB |
| Código gerado | Persistente | modules.code |
| Versões / histórico | Persistente | module_versions |
| Uploads do app | Persistente | Disco (uploads/<slug>/) + module_files no DB |
| Dados do app (clientes, etc) | Persistente | Tabelas app_*_* no DB |
| Estado de UI dentro do iframe | Volátil | React state — perde ao recarregar |
| Auto-fix em flight | Volátil | sessionStorage |