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

# Crie um painel com dados de API em tempo real

> Transforme uma API pública em um painel sempre atualizado.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Construa um painel ao vivo de métricas principais, gráficos e filtros a partir de uma API. Ele
atualiza automaticamente, oferece suporte a exportação e mostra apenas o que os dados
realmente contêm. Armazene qualquer informação que precise persistir no Replit Database.

## Ideal para

* Gerentes de produto que precisam de um painel que as pessoas possam revisar, não uma captura de tela.
* Líderes de operações e dados que precisam de um painel privado sempre atualizado a partir de uma API.

## Antes de começar

Anote a decisão que o painel deve apoiar. Tenha a URL da API pronta, ou use os endpoints do
DummyJSON abaixo.

<Info>
  Para fins de teste, você pode experimentar com estes endpoints gratuitos da API DummyJSON:

  * Pedidos: `https://dummyjson.com/carts?limit=0`
  * Clientes: `https://dummyjson.com/users?limit=0`
  * Catálogo: `https://dummyjson.com/products?limit=0`
  * Categorias: `https://dummyjson.com/products/categories`
</Info>

## Prompt para o agente

<AiPrompt>
  Construa um painel ao vivo a partir desta API \[URL]. Mostre métricas
  principais, gráficos e filtros que respondam a \[a decisão]. Atualize
  automaticamente e ofereça suporte a exportação. Armazene qualquer
  informação que precise persistir no Replit Database. Mostre apenas o que
  os dados realmente contêm.
</AiPrompt>

## O que esperar

O Agent carrega os dados, escolhe métricas de resumo e gráficos, e adiciona filtros. Verifique
pelo menos um número em relação à fonte. Se você usou o DummyJSON, escolha um pedido e abra
`https://dummyjson.com/carts/{id}` para confirmar se os totais coincidem. Alterne um filtro e
confirme se todos os cards e gráficos são atualizados. Exporte uma vez e verifique uma linha
em relação à API.

## Adapte ao seu caso

<AiPrompt>
  Adicione um filtro de categoria que recalcula todos os números na página.
</AiPrompt>

<AiPrompt>Faça cache das respostas da API para que o painel continue rápido ao carregar.</AiPrompt>

## Solução de problemas

* **A API está indisponível ou o formato parece errado:** verifique a URL e se a resposta inclui os campos esperados. Para um teste rápido, use os endpoints do DummyJSON acima.
* **Os números parecem diferentes do esperado:** peça ao Agent para mostrar a consulta ou transformação, e depois verifique pelo menos um número em relação à fonte.
* **Os filtros não atualizam os gráficos:** peça ao Agent para conectar cada filtro tanto aos cards de resumo quanto aos dados dos gráficos. Se o painel estiver lento, faça cache das respostas da API ou reduza os registros carregados na inicialização.

## Relacionados

<CardGroup cols={2}>
  <Card title="Gerar um relatório semanal de vendas" href="/pt/use-cases/weekly-pipeline-report">
    Uma visão semanal em vez de um painel ao vivo.
  </Card>

  <Card title="Lance um site de evento pago" href="/pt/use-cases/launch-event-website">
    Outro app do Replit ao vivo a partir de dados que você já possui.
  </Card>
</CardGroup>