01 · Criar o app
Gere o projeto com a CLI, instale as dependências e rode em modo mock. Ao fim deste passo você tem um app Fayz abrindo no navegador — sem configurar nenhuma variável de ambiente.
A CLI cria um projeto repo-por-app. A forma é fayz create <tipo> <nome>, onde o tipo é storefront, admin ou member e o nome é kebab-case. Rode com npx para não instalar nada global:
npx @fayz-ai/cli create admin minha-loja
Saída exata:
✓ Created admin app "minha-loja" cd minha-loja npm install npm run dev
O comando não tem flags — ele imprime os próximos passos manuais em vez de rodá-los.
Siga os três passos que a CLI imprimiu:
cd minha-loja npm install npm run dev
O app é um projeto Vite. O dev server sobe em http://localhost:5173.
✓ Você deve ver: o Vite anunciando Local: http://localhost:5173/ no terminal e, ao abrir a URL, a tela inicial do app com o nome minha-loja. Nenhuma env foi necessária — o backend está em modo mock.
Para dados de exemplo ao consumir os pacotes em código (os providers mock nascem vazios), veja Mock e dados de exemplo.
O que foi gerado
O comando cria um app pequeno e legível. Cada arquivo tem um papel:
| Arquivo | Para que serve |
|---|---|
app.manifest.json | A configuração do app: surfaces, plugins, tema, locale e backend.provider. É o arquivo que você mais edita. |
src/main.tsx | Ponto de entrada. Monta o app a partir do manifesto. |
src/plugins.generated.ts | Mapa dos plugins do manifesto para os factories da plataforma (gerado — não edite à mão). |
src/registry.tsx | Seu código custom: blocos, páginas e componentes próprios. |
src/lib/fayz-runtime.ts | O runtime do app (ver nota abaixo). |
vite.config.ts · index.html · tsconfig.json | Config padrão de um app Vite + React. |
.env.example | Modelo das variáveis do Supabase — você copia para .env.local no passo 05. |
AGENTS.md | Guia para agentes de IA (ou humanos) trabalharem no app — padrão aberto, não amarrado a nenhum fornecedor. |
Hoje o app local renderiza uma tela-âncora que confirma a fiação do manifesto; o runtime completo (shell, navegação, telas dos plugins) é fornecido pela plataforma Fayz. As edições de manifesto dos próximos passos são a configuração real que esse runtime consome — por isso o tutorial é todo feito a partir do app.manifest.json.
Deixe o npm run dev rodando: os próximos passos editam o manifesto e você recarrega a página para ver o efeito.