> ## Documentation Index
> Fetch the complete documentation index at: https://docs.citou.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Início rápido

> Pegue sua chave de API de conteúdo e faça a primeira chamada em minutos.

Em poucos passos você lista o conteúdo publicado da sua marca e o renderiza no seu próprio site.

<Steps>
  <Step title="Pegue sua chave de API de conteúdo">
    No painel da citou, abra a sua marca → **Configurações** → seção **Chave de API de conteúdo**
    e copie a chave (algo como `citou_cd_…`). Guarde também a **base da API** exibida ao lado dela.

    <Info>Neste guia usamos `https://api.citou.me` como base de exemplo — troque pela sua.</Info>
  </Step>

  <Step title="Liste o conteúdo publicado">
    ```bash theme={null}
    curl "https://api.citou.me/cd/content?key=SUA_CHAVE"
    ```

    A resposta é um array de itens publicados, cada um com o corpo em markdown/HTML e o JSON-LD
    pronto (veja [Listar conteúdo](/api/conteudo)).
  </Step>

  <Step title="Renderize no seu site">
    Exemplo com Astro, buscando as páginas em tempo de build:

    ```js title="src/pages/[slug].astro (frontmatter)" theme={null}
    const base = "https://api.citou.me";
    const key = import.meta.env.CITOU_KEY;

    export async function getStaticPaths() {
      const res = await fetch(`${base}/cd/content?type=page&key=${key}`);
      const pages = await res.json();
      return pages.map((p) => ({ params: { slug: p.slug }, props: { page: p } }));
    }
    const { page } = Astro.props;
    ```

    ```astro theme={null}
    <article set:html={page.html} />
    <script type="application/ld+json" set:html={page.jsonLd} />
    ```
  </Step>

  <Step title="Rebuild automático ao publicar (opcional)">
    Configure um **webhook de rebuild** (Configurações da marca) apontando para o deploy hook do
    seu host (Vercel/Netlify/Cloudflare Pages). A citou o aciona sempre que você publica ou edita
    conteúdo, mantendo o site atualizado.
  </Step>
</Steps>

## Próximos passos

<CardGroup cols={2}>
  <Card title="Autenticação" icon="key" href="/autenticacao">
    `?key=` no cliente vs. header `x-api-key` no build.
  </Card>

  <Card title="Referência da API" icon="code" href="/api/conteudo">
    Conteúdo, navegação, configurações, busca e formulários.
  </Card>
</CardGroup>