Lovable cria aplicações full-stack a partir de linguagem natural. Este guia mostra como criar uma tela de cotações com a API REST da brapi.
Cole este prompt no Lovable:
Adicione dados do mercado financeiro brasileiro a este app usando a API da brapi.
Fontes oficiais:
- REST: https://brapi.dev/api/v2
- OpenAPI: https://brapi.dev/openapi.json
- Dicionário de campos: https://brapi.dev/api/v2/dictionary
Requisitos:
- Crie uma função backend para chamar GET /api/v2/stocks/quote.
- Aceite uma lista de tickers em um parâmetro symbols separado por vírgulas.
- Comece com symbols=PETR4,VALE3.
- Use BRAPI_TOKEN como secret do backend para chamadas protegidas.
- Envie Authorization: Bearer ${BRAPI_TOKEN} quando o token existir.
- Permita um primeiro teste sem token com PETR4, VALE3, MGLU3 ou ITUB4.
- Mostre preço, variação, moeda, volume e a data do dado quando existirem.
- Mostre estados de carregamento, erro e resposta sem resultados.
- Preserve campos null. Não transforme null em zero.
- Nunca exponha BRAPI_TOKEN em código do navegador.
- Não crie recomendação de compra ou venda.
Antes de gerar o código, leia o OpenAPI para confirmar os parâmetros e a resposta.
Depois valide a chamada com PETR4.No projeto Lovable, adicione BRAPI_TOKEN nas variáveis secretas. Use um token
para endpoints protegidos e para dados fora do sandbox.
O sandbox permite testar PETR4, VALE3, MGLU3 e ITUB4 sem token.
Cole o prompt acima no Lovable. Peça uma segunda revisão se o app gerar uma chamada para uma rota legada ou colocar o token em um componente cliente.
export async function getQuotes(symbols: string) {
const url = new URL("https://brapi.dev/api/v2/stocks/quote");
url.searchParams.set("symbols", symbols);
const response = await fetch(url, {
headers: process.env.BRAPI_TOKEN
? { Authorization: `Bearer ${process.env.BRAPI_TOKEN}` }
: undefined,
});
if (!response.ok) {
throw new Error(`brapi respondeu HTTP ${response.status}`);
}
return response.json();
}Mantenha esta função em uma edge function ou em outro código server-side.
Não coloque BRAPI_TOKEN em variáveis públicas, em componentes cliente ou em
chamadas feitas diretamente pelo navegador.