> ## Documentation Index
> Fetch the complete documentation index at: https://ajuda.memberkit.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Comece com o template

> Use Claude Code, Cursor ou Codex para criar o seu site de área de membros a partir do template da MemberKit.

O jeito mais rápido de ter um site próprio é pedir a um agente de IA de programação, como **Claude Code**, **Cursor** ou **Codex**, que o construa a partir do **template** da MemberKit. O template já tem todas as telas de uma área de membros e as instruções que o agente precisa seguir, então o trabalho dele é mudar o visual, conectar a sua área de membros e publicar.

## Antes de começar

Tenha em mãos:

* **Acesso ao template.** Depois da [compra](TODO_URL_COMPRA), aceite o convite para o repositório no GitHub e deixe o agente com acesso à sua conta do GitHub (por exemplo, com `gh auth login`), para que ele consiga clonar o repositório privado.
* O **subdomínio** da sua área de membros (a parte antes de `.memberkit.com.br`) ou o seu domínio próprio.
* Uma **conta de aluno para testes**, com e-mail e senha, matriculada em pelo menos um curso. Não use a conta de dono: donos pulam o onboarding e não perdem a sessão quando outra pessoa entra, então os testes não mostrariam o que um aluno vê.
* A sua identidade visual: cores, fontes, logotipo, ou um site de referência para o agente se inspirar.

## Peça ao agente

Abra o agente em uma pasta vazia e cole o pedido abaixo, trocando o que estiver entre colchetes:

```text Pedido para o agente theme={null}
Clone https://github.com/rainerborene/memberkit-starter e leia o AGENTS.md
dele antes de qualquer outra coisa. É um site de área de membros que usa a
API de membros da MemberKit.

1. Instale com pnpm e rode o site com os dados de exemplo, sem conta.
2. Mude o visual para [descreva a sua marca: cores, fontes, estilo, ou um
   site de referência]. Mantenha todas as telas e recursos.
3. Depois de cada mudança, rode pnpm check, pnpm test e pnpm test:e2e.
   Atualize os testes que mudarem de propósito; nunca apague um teste.
4. Conecte a área de membros real: VITE_MEMBERKIT_HEADLESS_KEY=[sua chave headless]
   e VITE_MEMBERKIT_API_URL=https://memberkit.com.br/api/headless/v1.
   Teste com a conta de aluno [e-mail], que eu vou passar a senha.
5. Me ajude a publicar o site em [Netlify, Cloudflare Pages ou Vercel].
```

## O que o agente vai fazer

**1. Rodar com dados de exemplo**

Sem nenhuma configuração, o template roda com dados fictícios: todas as telas funcionam com qualquer e-mail e senha. O agente trabalha no visual sem precisar da sua conta. Veja [Dados de exemplo](#dados-de-exemplo).

**2. Mudar o visual**

O tema fica em variáveis CSS, em `app/styles/global.css`. O agente começa pelas variáveis e depois ajusta as telas. A cor da marca, o logotipo e a imagem de fundo do login vêm do painel da MemberKit, então continuam mudando quando você muda o painel.

**3. Manter os testes passando**

O template vem com testes de ponta a ponta que simulam a API. Eles garantem que nenhuma tela ou recurso foi perdido na mudança de visual.

**4. Conectar a sua área de membros**

Com as duas variáveis de ambiente definidas, o site passa a usar os seus cursos e alunos reais.

**5. Publicar**

O site é estático: basta enviar a pasta gerada para uma hospedagem. Veja [Publique no seu domínio](https://ajuda.memberkit.com.br/headless/publique-em-seu-dominio.md).

## Quando está pronto

O template define quando o trabalho termina. Confira com o agente que:

* `pnpm check` e `pnpm test:e2e` passam.
* Todas as telas funcionam com os dados de exemplo.
* A conta de aluno de teste consegue entrar, assistir a uma aula e baixar um arquivo na área de membros real.
* O site publicado abre direto um endereço interno, como `/courses/1`, em vez de mostrar um erro 404.

## O que só você pode fazer

Duas etapas acontecem no painel da MemberKit e o agente não consegue fazê-las por você:

* **Passar a senha da conta de teste**, de preferência fora da conversa com o agente, num arquivo `.env` que não vai para o repositório.
* **Editar os templates de e-mail**, para que os links dos e-mails abram o seu site em vez da área de membros hospedada. Veja [E-mails para o seu site](https://ajuda.memberkit.com.br/headless/emails-para-seu-frontend.md).

> [!WARNING]
>
> Nunca entregue ao agente, nem coloque no site, a chave da [API de operador](https://ajuda.memberkit.com.br/referencia-api/introducao.md). Ela controla a área de membros inteira. O site usa só a API de membros, com o login de cada aluno.

## Dúvidas

Quem compra o template tem suporte pelo GitHub. Abra a sua dúvida no repositório do template, e a equipe da MemberKit responde por lá. Antes de abrir, veja se alguém já perguntou a mesma coisa.

## Dados de exemplo

Enquanto `VITE_MEMBERKIT_API_URL` estiver vazia, o template responde às chamadas da API no próprio navegador, a partir do arquivo `app/mocks/data.ts`. Os cursos, alunos e comentários são fictícios e nada é enviado para a MemberKit. Quando uma tela precisa de dados que os exemplos não têm, o agente os adiciona nesse arquivo, para que o site continue funcionando sem conta.

![Página inicial do template com dados de exemplo](https://mintcdn.com/memberkit/ndYxi8GQwAFsJO88/images/headless/starter-mock-home.jpg?fit=max\&auto=format\&n=ndYxi8GQwAFsJO88\&q=85\&s=21eaf90c5c9c0f4dc917c3b19098e7d9)

O template rodando com os dados de exemplo

Para usar a sua área de membros, defina as duas variáveis no `.env`:

| Variável | Valor |
| - | - |
| `VITE_MEMBERKIT_API_URL` | `https://memberkit.com.br/api/headless/v1` |
| `VITE_MEMBERKIT_HEADLESS_KEY` | A chave headless da sua área de membros, em **Configurações > Acesso via API**. |

As duas são públicas: acabam no código que o navegador baixa, como tudo num site estático.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.