TL;DR
Lovable é uma plataforma de desenvolvimento com IA que transforma instruções em linguagem natural em código de aplicações web editável. Ajuda fundadores, designers, equipes de produto e desenvolvedores a criar interfaces, conectar serviços de backend e publicar aplicações por meio de uma conversa iterativa. Este guia explica suas capacidades, arquitetura de projetos e uma integração prática do CometAPI para um assistente de escrita. A integração adiciona inferência de modelo à aplicação que você cria; ela não estabelece uma forma de substituir o próprio agente de codificação do Lovable. Os leitores devem entender solicitações HTTP básicas e JavaScript, e ter acesso a um projeto no Lovable e a uma conta CometAPI antes de seguir as etapas de implementação.
Principais pontos
- Desenvolvimento com IA: gere e refine aplicações usando prompts em linguagem natural.
- Capacidades full-stack: construa experiências de frontend com funções de backend, bancos de dados, autenticação e hospedagem.
- Arquitetura moderna: novos projetos Lovable adotaram React com TanStack Start e SSR em maio de 2026.
- Compatibilidade CometAPI: adicione inferência de modelo externa por meio de uma função de backend segura.
- Melhores casos de uso: MVPs, assistentes de IA, ferramentas internas, aplicações de conteúdo e portais de clientes.
O que é Lovable e como funciona?
Lovable (lovable.dev) é uma plataforma com IA para construir aplicações web full-stack em nível de produção usando linguagem natural. Seu site oficial e o panorama do produto são os pontos de partida para explorar a plataforma.
Você descreve o que deseja em uma interface de chat, e ela gera um app funcional com:
- Frontend (tipicamente React, TypeScript, Tailwind CSS)
- Backend, banco de dados, autenticação e armazenamento (via Lovable Cloud integrado, que é Supabase gerenciada)
- Integrações, implantação e código editável de sua propriedade
Ela oferece suporte a todo o ciclo de vida do produto — do protótipo à implantação — e pode sincronizar código com GitHub, GitLab ou Bitbucket. É voltada para fundadores, gerentes de produto, não desenvolvedores e equipes que querem avançar rapidamente mantendo a propriedade do código. Originou-se do projeto open-source GPT Engineer (fundado em Estocolmo em 2023 por Anton Osika e Fabian Hedin) e foi rebatizado/comercializado como Lovable.
Como o Lovable transforma prompts em aplicações
- Descreva usuários, páginas, recursos e regras de negócio da aplicação.
- Gere o primeiro app e inspecione a visualização.
- Conecte o banco de dados, login, pagamentos ou APIs externas.
- Teste o comportamento e refine o código, o design e os fluxos.
- Publique ou continue mantendo o código exportado da aplicação.
O artigo de engenharia de 1º de junho de 2026 do Lovable descreve a mudança para React com TanStack Start e renderização no lado do servidor para novos projetos a partir de 13 de maio de 2026. Projetos existentes em React + Vite mantêm sua arquitetura anterior; verifique o projeto real antes de escolher uma implementação de função de servidor ou Edge Function.
Especificações técnicas do Lovable
Lovable é uma plataforma de desenvolvimento de aplicações, não um modelo fundacional. Portanto, parâmetros, janelas de contexto, throughput de tokens e pontuações MMLU não descrevem o Lovable em si. Eles pertencem aos modelos de IA específicos envolvidos no desenvolvimento ou na inferência.
É possível configurar CometAPI no Lovable?
Sim — dentro de aplicações geradas com Lovable. CometAPI pode lidar com solicitações de modelo a partir de uma função de backend protegida. Isso é distinto de alterar qual LLM alimenta o próprio agente de codificação do Lovable.
Você pode integrar CometAPI em aplicações construídas com Lovable, desde que os modelos e interfaces selecionados sejam suportados.
Isso não significa que você possa substituir diretamente o modelo proxy de desenvolvimento usado pelo próprio Lovable.
Se seu objetivo é controlar quais modelos sua aplicação chama, você deve configurar o roteamento de modelos em seu próprio código do lado do servidor.
A explicação do Lovable sobre orquestração de modelos internos descreve como o agente de desenvolvimento faz o roteamento. A integração do CometAPI abaixo diz respeito à inferência na aplicação; este artigo não afirma uma configuração documentada do CometAPI para aquele agente interno.
Como funcionam as arquiteturas de Lovable e CometAPI
Lovable oferece suporte a isso de duas formas principais para os apps que você constrói:
- Segredos (recomendado para uso direto)
- Armazene sua chave CometAPI como um segredo de projeto (por exemplo,
COMETAPI_KEYouOPENAI_API_KEY). Solicite ao Lovable no chat do projeto que integre a API por meio de uma Edge Function segura. A chave permanece no servidor e nunca é exposta no navegador. - Conector personalizado
- Crie um conector personalizado no catálogo de Connectors do workspace. Configure a URL base (
https://api.cometapi.com/v1), autenticação (token Bearer ou cabeçalho personalizado) e, em seguida, adicione uma conexão colando sua chave CometAPI. As solicitações passam pelo gateway de conectores do Lovable, mantendo as credenciais criptografadas e fora do seu código.
Notas:
- Os recursos de IA integrados do Lovable para apps usam chaves gerenciadas pelo próprio Lovable e consomem créditos do workspace. Você não pode trocar essas chaves por uma chave do CometAPI (ou de outro provedor).
- Para chamadas de IA externas dentro do seu app (chatbots, geração, etc.), a abordagem de segredos ou conector personalizado funciona e cobra o uso na sua conta CometAPI em vez de créditos do Lovable.
- Não há evidências de suporte nativo/pré-embutido ao CometAPI no catálogo de conectores do Lovable conforme a documentação mais recente; você o configura como uma integração genérica compatível com OpenAI ou API personalizada.
Em resumo: Lovable é um forte construtor “vibe-coding” / prompt-para-app full-stack, e sim — você pode configurar e usar uma chave CometAPI com segurança para recursos de IA dentro dos apps que criar com ele.
O navegador envia a entrada para um backend da aplicação. O backend lê um segredo, chama o CometAPI e retorna o resultado. Nunca coloque chaves privadas de API em componentes React ou outro código do lado do cliente.
Como construir um assistente de escrita com Lovable e CometAPI
O exemplo a seguir constrói o SmartWrite, um assistente de escrita com uma entrada de texto, seleção de tom e uma solicitação CometAPI no servidor. Escolha o padrão de boundary do TanStack para um projeto mais recente ou o ponto de entrada completo de Supabase Edge Function para um projeto mais antigo. Escolha uma implementação de backend que corresponda ao seu projeto, configure seus segredos e confirme um modelo de chat suportado em sua conta CometAPI. Antes de publicar, execute o exemplo com seus próprios segredos de projeto e um modelo de chat disponível para sua conta.
Etapa 1: Crie um projeto no Lovable
Abra https://lovable.dev/ e use este prompt de desenvolvimento:
Build a responsive AI writing assistant named SmartWrite.
Include a dashboard, a large prompt box, a tone selector
(Professional / Friendly / Concise), a Generate button,
and an output panel with Copy and Clear controls.
Use a clean responsive design with loading states and errors.
Implement AI generation only through a secure server function.
Never expose API credentials to the frontend.
Do not ship mock AI responses.
Etapa 2: Configure a credencial do CometAPI
Gere uma chave em sua conta CometAPI e verifique um ID de modelo de chat disponível para essa conta. Este tutorial usa uma integração direta no backend, com COMETAPI_API_KEY e COMETAPI_MODEL como configuração do lado do servidor. Siga o mecanismo de acesso a segredos suportado pelo backend em seu projeto gerado.
Exemplo de configuração: Onde armazenar e usar credenciais do CometAPI
Para conectar o CometAPI com segurança, peça ao Lovable para criar uma integração do lado do servidor e solicitar a chave de API por meio de seu formulário seguro de segredo. Você também pode gerenciar segredos do projeto em More → Settings → Secrets. Para um backend Supabase externo, configure os segredos no Supabase. Consulte o guia oficial de Secrets do Lovable.
Siga estes quatro requisitos:
- Armazene e leia chaves de API apenas no servidor. Adicione
COMETAPI_API_KEYpor meio da interface segura de Secrets do projeto. Leia-a exclusivamente a partir de segredos do servidor ou bindings de runtime. Nunca inclua a chave em código de frontend, variáveis de ambiente acessíveis pelo navegador, mensagens de chat ou screenshots. - Mantenha a configuração de API fora das solicitações do frontend. Configure
COMETAPI_MODELno servidor usando um ID de modelo CometAPI verificado. O frontend deve enviar apenas e . Valide as solicitações contra esses campos permitidos e rejeite propriedades inesperadas, incluindo , e . Nunca permita que clientes forneçam chaves de API arbitrárias ou substituam a configuração de modelo do servidor.
Um segredo salvo não significa automaticamente que a integração está segura ou funcional. A integração só está pronta quando chamadas de API do lado do servidor funcionam, as solicitações do cliente não podem substituir configurações protegidas e verificações de produção confirmam que as credenciais permanecem privadas.
Use o diagrama de arquitetura a seguir para identificar a fronteira frontend-backend e a localização das credenciais protegidas. O diagrama é conceitual e não uma captura da interface de configurações do Lovable.
Prompt para enviar ao Lovable
Conecte o SmartWrite diretamente ao CometAPI por meio de uma função de backend autenticada. Peça-me COMETAPI_API_KEY em um formulário seguro de segredo e use COMETAPI_MODEL para o ID exato do modelo que eu fornecer. Envie solicitações POST para https://api.cometapi.com/v1/chat/completions somente a partir do servidor. Aceite prompt e tone, valide-os, imponha limites por usuário e retorne apenas o texto gerado ao frontend. Use o runtime de backend já presente neste projeto. Não coloque credenciais no chat, no código de frontend ou nas requisições do navegador. Não gere resultados fictícios de sucesso. Explique como testar a integração e mostre erros sanitizados quando ela falhar.
Lovable também oferece suporte a conectores personalizados gerenciados. As instruções aqui usam intencionalmente o caminho de integração direta documentado em seu guia de integração de API, para corresponder ao helper de servidor abaixo.
Etapa 3: Teste o endpoint de chat do CometAPI
A partir de um terminal Bash confiável, defina COMETAPI_API_KEY e COMETAPI_MODEL localmente e teste POST https://api.cometapi.com/v1/chat/completions. O guia oficial de solicitações da CometAPI documenta a URL base, autenticação Bearer e formato de resposta de chat. Selecione um modelo que suporte esse endpoint; compatibilidade não garante todos os recursos ou parâmetros do provedor.
# Set COMETAPI_API_KEY securely in this terminal before running.
# Replace the model value with a chat model verified in your account.
export COMETAPI_MODEL="YOUR_VERIFIED_CHAT_MODEL_ID"
: "${COMETAPI_API_KEY:?Set COMETAPI_API_KEY first}"
curl --fail-with-body --max-time 45 \
https://api.cometapi.com/v1/chat/completions \
-H "Authorization: Bearer $COMETAPI_API_KEY" \
-H "Content-Type: application/json" \
--data "$(printf '{"model":"%s","messages":[{"role":"user","content":"Write a customer welcome email."}],"stream":false}' "$COMETAPI_MODEL")"
Ponto de verificação: uma resposta bem-sucedida contém choices[0].message.content. Se a autenticação falhar ou o modelo não estiver disponível, corrija isso antes de conectar a interface do usuário. Não cole credenciais completas ou prompts privados em screenshots de diagnóstico.
Etapa 4: Conecte o CometAPI por meio de um backend seguro
Lovable oferece suporte a duas arquiteturas de backend:
- Novos projetos (TanStack Start): use
createServerFnpara lidar com solicitações de API no servidor. - Projetos mais antigos React + Vite: use Supabase Edge Functions para chamadas de API do lado do servidor.
Escolha a implementação que corresponde à arquitetura do seu projeto.
Opção A: TanStack Start (novos projetos)
Crie src/server/writing.functions.ts:
import { createServerFn } from "@tanstack/react-start";
export const generateWriting = createServerFn({ method: "POST" })
.handler(async ({ data }: { data: { prompt: string } }) => {
const { env } = await import("cloudflare:workers");
const res = await fetch(
"https://api.cometapi.com/v1/chat/completions",
{
method: "POST",
headers: {
Authorization: `Bearer ${env.COMETAPI_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: env.COMETAPI_MODEL,
messages: [{ role: "user", content: data.prompt }],
}),
}
);
if (!res.ok) throw new Error("Generation failed.");
const result = await res.json();
return { text: result.choices[0].message.content };
});
Armazene COMETAPI_API_KEY e COMETAPI_MODEL como bindings do Worker no servidor. Se sua implantação usar outro adaptador, utilize o mecanismo de acesso a segredos suportado por ele.
Opção B: React + Vite (projetos mais antigos)
Crie supabase/functions/generate-writing/index.ts:
import { serve } from "https://deno.land/std@0.224.0/http/server.ts";
serve(async (req) => {
try {
const { prompt } = await req.json();
if (typeof prompt !== "string" || !prompt.trim()) {
return Response.json({ error: "Invalid prompt" }, { status: 400 });
}
const res = await fetch(
"https://api.cometapi.com/v1/chat/completions",
{
method: "POST",
headers: {
Authorization: `Bearer ${Deno.env.get("COMETAPI_API_KEY")}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: Deno.env.get("COMETAPI_MODEL"),
messages: [{ role: "user", content: prompt }],
}),
}
);
if (!res.ok) throw new Error("CometAPI request failed.");
const result = await res.json();
return Response.json({ text: result.choices[0].message.content });
} catch {
return Response.json({ error: "Generation failed." }, { status: 500 });
}
});
Adicione COMETAPI_API_KEY e COMETAPI_MODEL aos segredos do projeto Supabase e depois implante a função.
Em ambas as abordagens, mantenha as credenciais de API no servidor. Aplicações de produção também devem implementar autenticação, validação de entrada e limites de uso por usuário.
Etapa 5: Conecte a interface do Lovable
Cliente TanStack Start
import { generate } from "./server/writing.functions";
const { text } = await generate({ data: { prompt, tone } });
// Render text as text content, not as trusted HTML.
Cliente React + Vite
// Use the existing, signed-in Supabase client generated for your project.
const { data, error } = await supabase.functions.invoke("generate-writing", {
body: { prompt, tone },
});
if (error) throw new Error("Generation failed. Please try again.");
const text = data.text;
Use o cliente que corresponde à sua ramificação escolhida. TanStack usa seu endpoint RPC gerado; Supabase usa a função generate-writing implantada. Nenhum deles exige inventar uma rota separada /api/generate. O navegador pode enviar seu token de sessão da aplicação para autenticação, mas nunca deve enviar a credencial privada CometAPI ou um objeto de configuração. Exiba estados de carregamento, falha e tentativas novamente na interface.
Etapa 6: Teste e publique a aplicação
Após publicar, teste a URL em produção em vez de depender apenas da visualização no editor. Use uma credencial de teste privada e mantenha screenshots e evidências livres de valores secretos. Conclua estas verificações antes de ampliar o acesso:
- Inspecione o JavaScript do navegador construído, os source maps e a configuração pública em busca da chave privada do CometAPI. Pesquise localmente sem imprimir a chave em saída de terminal compartilhada ou salvá-la em relatórios. Apenas o nome da variável não é evidência de um valor vazado.
- Inspecione as requisições de Network do navegador, incluindo payloads, cabeçalhos e respostas de erro. A requisição deve conter apenas as entradas de escrita permitidas e os dados de autenticação da aplicação; o cabeçalho Authorization privado do CometAPI pertence apenas à requisição servidor→provedor.
- Revise logs de funções, logs da aplicação, rastros de monitoramento e relatórios de erro. Não registre chaves, tokens Bearer, objetos de configuração ou corpos completos de erro upstream. Se uma chave tiver sido exposta, revogue e substitua, e depois remova a exposição antes de testar novamente.
- Tente requisições de usuário deslogado e sessão expirada; ambas devem ser rejeitadas antes de uma chamada ao provedor. Envie apiKey, config ou model como campo extra e verifique a rejeição. Teste prompts vazios e superdimensionados, um tom inválido, falhas do provedor e sua cota por usuário implantada.
O que você pode construir com Lovable e CometAPI?
- Prompts normais produzem respostas legíveis do modelo.
- Prompts vazios e superdimensionados são rejeitados com segurança.
- Credenciais de API nunca aparecem no painel de rede do navegador.
- Interrupções do modelo retornam mensagens de erro não sensíveis.
- Usuários autenticados têm limites de requisição e monitoramento de atividade.
- O layout se comporta corretamente em desktop e mobile.
Esses são padrões de projeto sugeridos, não afirmações sobre implantações concluídas ou avaliadas de forma independente.
FAQ
Como um app multi-tenant deve evitar que registros de um cliente apareçam na resposta de IA de outro cliente?
Derive a identidade do tenant e do usuário a partir da sessão verificada no servidor, e então restrinja cada consulta ao banco de dados antes de montar o contexto do modelo. Nunca confie em um ID de tenant fornecido pelo navegador nem dependa de uma instrução no prompt para impor acesso. Onde suportado, adicione políticas de banco de dados em nível de linha e verifique-as com duas contas de teste. Teste IDs de registros, resultados de busca, arquivos exportados e histórico de conversa quanto a acesso entre tenants.
Quando a geração apoiada por recuperação é preferível a colocar documentos diretamente em todo prompt?
Use recuperação quando a coleção de documentos for grande demais para enviar toda vez, mudar com frequência ou precisar de rastreabilidade em nível de fonte. Faça o parsing e indexação dos documentos, recupere um pequeno conjunto relevante e anexe identificadores de origem à resposta. A recuperação ainda precisa de avaliação: uma resposta fluente pode citar um trecho irrelevante. Mantenha filtros de acesso na consulta de recuperação e teste perguntas cujas respostas estejam ausentes. Para um documento pequeno e estável, contexto direto pode ser um ponto de partida mais simples.
Como adicionar streaming sem exibir respostas truncadas ou enganosas?
Trate o streaming como um recurso de transporte separado, não como uma substituição de uma linha de stream: false. Confirme o formato de streaming do modelo selecionado, faça o backend retransmitir eventos e lide com chunks parciais, cancelamento, timeouts e perda de conexão na UI. Marque uma resposta interrompida como incompleta e permita que o usuário tente novamente de forma deliberada. Evite exibir texto transmitido como HTML confiável. Teste no caminho de hospedagem publicado, pois intermediários podem bufferizar um stream que parecia funcionar localmente.
O que uma política de fallback deve verificar antes de mudar para outro modelo?
Defina quais falhas justificam um retry ou fallback, e então verifique se a alternativa suporta o mesmo endpoint, instruções, esquema de ferramentas e formato de saída. Mantenha os retries limitados e evite mudar de modelo silenciosamente em fluxos que exigem comportamento consistente. Avalie o fallback em prompts representativos, incluindo casos de recusa e saída malformada. Se a saída do modelo acionar uma ação externa, proteja essa ação com uma confirmação separada ou regra de idempotência para que uma geração repetida não duplique a operação.
Que evidências uma equipe deve manter antes de promover um recurso de IA de piloto para uso regular?
Mantenha um conjunto de avaliação versionado com comportamentos esperados, configuração de modelo e prompt, metadados de requisição redigidos e registros de casos falhos. Defina critérios de aceitação para precisão factual, formato de resposta, latência e limites de acesso; compare resultados após mudanças de modelo ou prompt. Para entradas sensíveis, decida o que pode ser transmitido e retido antes de habilitar o recurso. Estes são controles de engenharia sugeridos, não garantias de que Lovable ou CometAPI atendem a um resultado regulatório específico.
Conclusão: vale a pena usar o Lovable?
Lovable facilita traduzir ideias em aplicações web funcionais. Suas ferramentas full-stack e integrações externas são particularmente úteis para validar rapidamente conceitos de produto. CometAPI adiciona uma rota flexível para inferência de modelo em chat, escrita, analytics e outros fluxos impulsionados por IA.
Comece com uma aplicação pequena e segura, teste a conexão com CometAPI, revise o código gerado e expanda após a experiência central provar-se confiável.