# 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.

{% steps %}
{% step title="Gere o projeto" %}
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:

```bash
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.
{% /step %}

{% step title="Instale e rode" %}
Siga os três passos que a CLI imprimiu:

```bash
cd minha-loja
npm install
npm run dev
```

O app é um projeto Vite. O dev server sobe em `http://localhost:5173`.
{% /step %}
{% /steps %}

{% callout type="tip" %}
✓ 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`.
{% /callout %}

Para dados de exemplo ao consumir os pacotes em código (os providers mock nascem vazios), veja [Mock e dados de exemplo](/pt-BR/docs/apps/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. |

{% callout type="info" %}
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`.
{% /callout %}

Deixe o `npm run dev` rodando: os próximos passos editam o manifesto e você recarrega a página para ver o efeito.

---

[Próximo: 02 · Explorar a anatomia →](/pt-BR/docs/tutorial/02-explorar-a-anatomia)