Introdução - Lovable Documentation

Lovable tem integrações nativas que permitem exportar código e adicionar um backend. Também é possível integrar uma API externa se você quiser adicionar uma funcionalidade específica ao seu site.

O que é uma API?

Uma API é uma forma de aplicativos de software se comunicarem e compartilharem dados entre si. APIs diferentes oferecem diferentes funcionalidades, como enviar e-mails ou processar pagamentos. Você pode ler mais sobre o poder das APIs neste artigo em nosso blog.

Integrações nativas

Explore as seções abaixo para começar mais rápido e saber mais sobre nossas integrações nativas com GitHub e Supabase.

Integração com GitHub

Entenda como integrar o Lovable ao GitHub para exportar seu código e ter um controle de versão integrado.

Integração com Supabase

Adicione um backend ao seu site usando o Supabase, com autenticação e armazenamento persistente de dados.

Integrações verificadas

As integrações verificadas funcionam melhor com o Lovable:

Stripe

Adicione recursos de processamento de pagamentos ao seu app.

OpenAI

Adicione recursos de IA ao seu app usando os modelos da OpenAI.

Anthropic

Adicione recursos de IA ao seu app usando os modelos Claude da Anthropic.

Resend

Adicione recursos de e-mail ao seu app usando a API moderna de e-mail da Resend.

Clerk

Plataforma completa de gerenciamento de usuários.

Three.js

Adicione gráficos 3D interativos ao seu app.

D3.js

Crie visualizações de dados dinâmicas e interativas.

Highcharts

Crie gráficos e visualizações profissionais e interativas.

p5.js

Crie projetos de creative coding e gráficos interativos.

Runware

Faça seu app gerar imagens a partir de instruções em texto.

ElevenLabs

Adicione funcionalidade de conversão de texto em fala.

Make

Plataforma visual para criar fluxos de trabalho que automatizam tarefas e conectam apps.

Replicate

Execute e faça ajuste fino de modelos de IA de código aberto.

Stability AI

Desenvolve modelos abertos de IA em várias modalidades.

Twilio

Adicione recursos de SMS ao seu app usando o Twilio.

n8n

Crie fluxos de trabalho com uma plataforma visual para o seu app.

Usando qualquer API com o Lovable

Todas as outras APIs que podem ser chamadas ainda podem ser integradas, mas muitas vezes exigem contexto e instruções adicionais. Você pode ter:

Sistemas internos com APIs personalizadas
Esses podem ser serviços que sua equipe criou (por exemplo, sistemas de inventário, pipelines de analytics, ferramentas internas) que expõem endpoints REST ou GraphQL, mas que não são documentados publicamente ou amplamente conhecidos. Você quer que o Lovable consuma ou envie dados para esses sistemas para automatizar fluxos de trabalho ou alimentar interfaces de usuário.
APIs de terceiros que o Lovable ainda não suporta
Talvez você use um produto SaaS de nicho, um provedor de dados especializado ou uma integração com um parceiro que o Lovable ainda não conhece nativamente. Mesmo que não seja oficialmente compatível, você ainda quer que o Lovable se conecte, faça chamadas e trabalhe com esses dados.

Nos dois casos, o desafio é o mesmo: o Lovable não “conhece” a API por padrão. Mas, com boa documentação e uma configuração de autenticação adequada, ele ainda pode usá-la de forma eficaz. De qualquer forma, a abordagem é a mesma: o Lovable ainda pode se conectar a ela. Veja como.

Dê ao Lovable o contexto de que ele precisa

O Lovable funciona melhor quando entende a API. Você pode fornecer:

Especificação OpenAPI (se disponível)
Documentação ou exemplos copiados e colados (especialmente endpoints e exemplos de requisições/respostas)

Quanto mais clara a documentação, melhor o Lovable consegue raciocinar sobre como chamar a API.

Trate a autenticação com segurança

Para APIs que exigem autenticação:Opção 1: Use Supabase Edge Functions como proxy

Armazene segredos com segurança no Supabase
Deixe o Lovable chamar o endpoint da API por meio da Função de borda (e não a API diretamente)

Opção 2: Implemente a integração com a API diretamente no seu Projeto Lovable

Exponha um endpoint de autenticação (por exemplo, para trocar credenciais por um token ou sessão)
Deixe o Lovable chamar esse endpoint de autenticação como parte do fluxo de integração
Inclua tokens, cabeçalhos ou informações de sessão nas chamadas de API subsequentes

APIs de exemplo: