Construye con CometAPI¿Necesitas una sola API para varios modelos?Prueba el flujo en el Playground y luego crea una clave de API cuando el modelo y el costo encajen con tu caso de uso.
Aprende cómo Lovable crea aplicaciones web, explora sus funciones principales y conecta CometAPI a través de un backend seguro mediante un tutorial práctico de asistente de redacción.
Deon GoodwinEquipo de investigación de modelos de IA y API
Lovable es una plataforma de desarrollo con IA que convierte instrucciones en lenguaje natural en código de aplicaciones web editables. Ayuda a fundadores, diseñadores, equipos de producto y desarrolladores a crear interfaces, conectar servicios de backend y publicar aplicaciones mediante una conversación iterativa. Esta guía explica sus capacidades, la arquitectura del proyecto y una integración práctica de CometAPI para un asistente de escritura. La integración añade inferencia de modelos a la aplicación que construyas; no establece una forma de reemplazar el propio agente de codificación de Lovable. Quienes lean esto deberían entender solicitudes HTTP básicas y JavaScript, y tener acceso a un proyecto de Lovable y a una cuenta de CometAPI antes de seguir los pasos de implementación.
Puntos clave
Desarrollo con IA: Genera y perfecciona aplicaciones usando indicaciones en lenguaje natural.
Capacidades full‑stack: Crea experiencias de frontend con funciones de backend, bases de datos, autenticación y hosting.
Arquitectura moderna: Los proyectos nuevos de Lovable adoptaron TanStack Start basado en React y SSR en mayo de 2026.
Revisado para mayor claridad, atribución de fuentes y terminología API actual.
Compatibilidad con CometAPI: Añade inferencia de modelos externa mediante una función de backend segura.
Mejores casos de uso: MVPs, asistentes de IA, herramientas internas, aplicaciones de contenido y portales de clientes.
¿Qué es Lovable y cómo funciona?
Lovable (lovable.dev) es una plataforma con IA para crear aplicaciones web full‑stack de nivel producción usando lenguaje natural. Su sitio web oficial y la visión general del producto son el punto de partida para explorar la plataforma.
Describes lo que quieres en una interfaz de chat y genera una aplicación funcional con:
Backend, base de datos, autenticación y almacenamiento (mediante Lovable Cloud integrado, que es Supabase gestionado)
Integraciones, despliegue y código editable del que eres propietario
Admite todo el ciclo de vida del producto—desde prototipado hasta despliegue—y puede sincronizar el código con GitHub, GitLab o Bitbucket. Está orientado a fundadores, product managers, no desarrolladores y equipos que quieren moverse rápido conservando la propiedad del código. Se originó en el proyecto de código abierto GPT Engineer (fundado en Estocolmo en 2023 por Anton Osika y Fabian Hedin) y fue renombrado/comercializado como Lovable.
Cómo convierte Lovable las indicaciones en aplicaciones
Describe usuarios, páginas, funciones y reglas de negocio de la aplicación.
Genera la primera app e inspecciona la vista previa.
Conecta la base de datos, el inicio de sesión, pagos o APIs externas.
Prueba el comportamiento y perfecciona el código, el diseño y los flujos.
Publica o continúa manteniendo el código de la aplicación exportada.
El artículo de ingeniería del 1 de junio de 2026 de Lovable describe el paso a TanStack Start basado en React y el renderizado del lado del servidor para proyectos nuevos desde el 13 de mayo de 2026. Los proyectos existentes con React + Vite mantienen su arquitectura anterior; verifica el proyecto real antes de elegir una implementación de función de servidor o de Edge Function.
Especificaciones técnicas de Lovable
Especificación
Lovable
Categoría
Constructor de aplicaciones web con IA
Interacción principal
Indicaciones en lenguaje natural
Framework para proyectos nuevos
React y TanStack Start
Renderizado
Renderizado del lado del servidor para proyectos nuevos
Arquitectura anterior
React + Vite
Backend
Lovable Cloud e integraciones compatibles
Autenticación y base de datos
Compatible
APIs externas
Conectores y solicitudes API personalizadas
Integración de IA
Lovable AI y APIs de modelos externos
Acceso al código
Código generado y workflows con GitHub
Colaboración
Funciones de espacio de trabajo y proyecto
Despliegue
Opciones integradas y externas compatibles
Lovable es una plataforma de desarrollo de aplicaciones, no un modelo fundacional. Por lo tanto, parámetros, ventanas de contexto, rendimiento de tokens y puntuaciones MMLU no describen a Lovable en sí. Esos pertenecen a los modelos de IA específicos implicados en el desarrollo o la inferencia.
¿Puedes configurar CometAPI en Lovable?
Sí—dentro de las aplicaciones generadas con Lovable. CometAPI puede gestionar solicitudes de modelo desde una función de backend protegida. Eso es distinto de cambiar qué LLM impulsa el propio agente de codificación de Lovable.
Puedes integrar CometAPI en aplicaciones creadas con Lovable, siempre que los modelos e interfaces seleccionados sean compatibles.
Esto no significa que puedas sustituir directamente el modelo proxy de desarrollo que usa el propio Lovable.
Si tu objetivo es controlar qué modelos invoca tu aplicación, debes configurar el enrutamiento de modelos dentro de tu propio código del lado del servidor.
Integración
Compatibilidad
Explicación
Funciones de IA en una app generada
Sí
Solicitudes de API del lado del servidor protegidas
Chatbot o asistente de escritura
Sí
Llama a modelos de chat compatibles con CometAPI
App multimodelo
Sí
Configura IDs de modelo en el enrutamiento de backend
Sustituir el modelo interno de codificación de Lovable
No establecido como ajuste estándar
La selección del modelo del agente interno es independiente
Servicio de backend a través de CometAPI
Sí
Integración HTTP personalizada o función de servidor
API de gestión de espacios de trabajo de Lovable
Separada
Controla recursos de la plataforma, no la inferencia del modelo
La explicación de la orquestación de modelos internos de Lovable describe cómo funciona el enrutamiento de su agente de desarrollo. La integración de CometAPI a continuación se refiere a la inferencia de la aplicación; este artículo no afirma que exista un ajuste documentado de CometAPI para ese agente interno.
Cómo funciona la arquitectura de Lovable y CometAPI
Lovable admite esto de dos formas principales para las apps que construyes:
Secrets (recomendado para uso directo)
Almacena tu clave de CometAPI como un secreto del proyecto (por ejemplo, COMETAPI_KEY o OPENAI_API_KEY). Pide a Lovable en el chat del proyecto que integre la API a través de una Edge Function segura. La clave permanece del lado del servidor y nunca se expone en el navegador.
Conector personalizado
Crea un conector personalizado en el catálogo de Connectors del espacio de trabajo. Configura la URL base (https://api.cometapi.com/v1), la autenticación (token Bearer o cabecera personalizada) y añade una conexión pegando tu clave de CometAPI. Las solicitudes pasan por la puerta de enlace de conectores de Lovable, manteniendo las credenciales cifradas y fuera de tu código.
Notas:
Las funciones de IA integradas de Lovable para apps usan claves gestionadas por Lovable y consumen créditos del espacio de trabajo. No puedes sustituirlas por una clave de CometAPI (u otro proveedor).
Para llamadas de IA externas dentro de tu app (chatbots, generación, etc.), los enfoques de secretos o conector personalizado funcionan y facturan el uso a tu cuenta de CometAPI en lugar de a los créditos de Lovable.
No hay evidencia de compatibilidad nativa/preconstruida de CometAPI en el catálogo de conectores de Lovable según la documentación más reciente; lo configuras como una integración genérica compatible con OpenAI o una API personalizada.
En resumen: Lovable es un potente generador de apps de “vibe‑coding” / de indicaciones a full‑stack, y sí—puedes configurar y usar de forma segura una clave de CometAPI para funciones de IA dentro de las apps que crees con él.
El navegador envía la entrada a un backend de la aplicación. El backend lee un secreto, llama a CometAPI y devuelve el resultado. Nunca coloques claves de API privadas en componentes de React u otro código del lado del cliente.
Cómo construir un asistente de escritura con Lovable y CometAPI
El siguiente ejemplo construye SmartWrite, un asistente de escritura con un campo de texto, selección de tono y una solicitud a CometAPI en el servidor. Elige el patrón de boundary de TanStack para un proyecto más nuevo o el punto de entrada completo de Supabase Edge Function para un proyecto anterior. Elige una implementación de backend que coincida con tu proyecto, configura sus secretos y confirma un modelo de chat compatible en tu cuenta de CometAPI. Antes de publicar, ejecuta el ejemplo con tus propios secretos de proyecto y un modelo de chat disponible en tu cuenta.
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.
Paso 2: Configura la credencial de CometAPI
Genera una clave en tu cuenta de CometAPI y verifica un ID de modelo de chat disponible en esa cuenta. Este tutorial usa una integración directa de backend, con COMETAPI_API_KEY y COMETAPI_MODEL como configuración del lado del servidor. Sigue el mecanismo de acceso a secretos compatible con el backend de tu proyecto generado.
Ejemplo de configuración: dónde almacenar y usar las credenciales de CometAPI
Para conectar CometAPI de forma segura, pide a Lovable que cree una integración del lado del servidor y solicite la clave de API a través de su formulario seguro. También puedes gestionar los secretos del proyecto en More → Settings → Secrets. Para un backend externo de Supabase, configura los secretos en Supabase. Consulta la guía oficial de Secrets de Lovable.
Sigue estos cuatro requisitos:
Almacena y lee las claves de API solo en el servidor. Añade COMETAPI_API_KEY mediante la interfaz segura de Secrets del proyecto. Léela exclusivamente desde secretos del servidor o bindings de tiempo de ejecución. Nunca incluyas la clave en código de frontend, variables de entorno accesibles por el navegador, mensajes de chat ni capturas de pantalla.
Mantén la configuración de la API fuera de las solicitudes del frontend. Configura COMETAPI_MODEL en el servidor usando un ID de modelo de CometAPI verificado. El frontend solo debe enviar prompt y tone. Valida las solicitudes contra estos campos permitidos y rechaza propiedades inesperadas, incluyendo config, apiKey y model. Nunca permitas que los clientes suministren claves de API arbitrarias ni que sobrescriban la configuración del modelo del lado del servidor.
Usa el método correcto de acceso a secretos para el runtime. La implementación debe coincidir con el entorno de backend real del proyecto. Los despliegues basados en Workers usan bindings inyectados, mientras que Supabase Edge Functions pueden acceder a secretos mediante Deno.env. No asumas que process.env, Deno.env y los bindings de Workers son intercambiables. Verifica cómo se inyectan los secretos antes de implementar el manejador de la API.
Verifica la protección de secretos después de publicar. Inspecciona el bundle JavaScript de producción, el panel Network de las DevTools del navegador y los registros de la aplicación. Confirma que las claves de API nunca aparecen en assets del lado del cliente, cargas de solicitud, respuestas, URLs ni logs. Verifica también que las solicitudes a CometAPI se ejecutan en el servidor y que se rechazan anulaciones de configuración no autorizadas.
Un secreto guardado no significa automáticamente que la integración sea segura o funcional. La integración está lista solo cuando las llamadas a la API desde el servidor funcionan, las solicitudes del cliente no pueden anular ajustes protegidos y las verificaciones en producción confirman que las credenciales permanecen privadas.
Usa el siguiente diagrama de arquitectura para identificar el límite frontend‑backend y la ubicación de las credenciales protegidas. El diagrama es conceptual, no una captura de la interfaz de configuración de Lovable.
Indicaciones para darle a Lovable
Conecta SmartWrite directamente a CometAPI mediante una función de backend autenticada. Pídeme COMETAPI_API_KEY en un formulario seguro de secretos y usa COMETAPI_MODEL para el ID exacto de modelo que te proporcione. Envía solicitudes POST a https://api.cometapi.com/v1/chat/completions solo desde el servidor. Acepta prompt y tone, valídalos, aplica límites por usuario y devuelve únicamente el texto generado al frontend. Usa el runtime de backend ya presente en este proyecto. No coloques credenciales en el chat, el código de frontend ni las solicitudes del navegador. No generes resultados simulados de éxito. Explica cómo probar la integración y muestra errores sanitizados cuando falle.
Lovable también admite conectores personalizados gestionados. Las instrucciones aquí usan intencionalmente el camino de integración directa documentado en su guía de integración de cualquier API, por lo que coinciden con el helper del lado del servidor a continuación.
Paso 3: Prueba el endpoint de chat de CometAPI
Desde una terminal Bash de confianza, establece COMETAPI_API_KEY y COMETAPI_MODEL localmente, luego prueba POST a https://api.cometapi.com/v1/chat/completions. La guía oficial de solicitudes de CometAPI documenta la URL base, la autenticación Bearer y el formato de respuesta del chat. Selecciona un modelo que admita este endpoint; la compatibilidad no garantiza todas las funciones o parámetros del proveedor.
# 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")"
Punto de control: una respuesta correcta contiene choices[0].message.content. Si la autenticación falla o el modelo no está disponible, corrige eso antes de conectar la interfaz de usuario. No pegues credenciales completas ni prompts privados en capturas de diagnóstico.
Paso 4: Conecta CometAPI mediante un backend seguro
Lovable admite dos arquitecturas de backend:
Proyectos nuevos (TanStack Start): usa createServerFn para manejar solicitudes de API en el servidor.
Proyectos antiguos React + Vite: usa Supabase Edge Functions para llamadas a la API del lado del servidor.
Elige la implementación que coincida con la arquitectura de tu proyecto.
Almacena COMETAPI_API_KEY y COMETAPI_MODEL como bindings de Worker del lado del servidor. Si tu despliegue usa otro adaptador, utiliza el mecanismo de acceso a secretos que admita.
Añade COMETAPI_API_KEY y COMETAPI_MODEL a los secretos del proyecto de Supabase, luego despliega la función.
En ambos enfoques, mantén las credenciales de la API en el servidor. Las aplicaciones en producción también deberían implementar autenticación, validación de entrada y límites de uso por usuario.
Paso 5: Conecta la interfaz de Lovable
Cliente de 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;
Usa el cliente que coincida con tu rama elegida. TanStack usa su endpoint RPC generado; Supabase usa la función generate-writing desplegada. Ninguno requiere inventar una ruta separada /api/generate. El navegador puede enviar su token de sesión de la aplicación para autenticación, pero nunca debe enviar la credencial privada de CometAPI ni un objeto de configuración. Muestra estados de carga, fallo y reintento en la interfaz.
Paso 6: Prueba y publica la aplicación
Después de publicar, prueba la URL en vivo en lugar de depender solo de la vista previa del editor. Usa una credencial de prueba privada y mantén las capturas de pantalla y evidencias libres de valores secretos. Completa estas comprobaciones antes de un acceso más amplio:
Inspecciona el JavaScript del navegador compilado, los mapas de origen y la configuración pública en busca de la clave privada de CometAPI. Busca localmente sin imprimir la clave en la salida de terminal compartida ni guardarla en informes. Un nombre de variable por sí solo no es evidencia de un valor filtrado.
Inspecciona las solicitudes de red del navegador, incluidos payloads, cabeceras y respuestas de error. La solicitud debe contener solo las entradas de escritura permitidas y los datos de autenticación de la aplicación; la cabecera Authorization privada de CometAPI pertenece solo a la solicitud del servidor al proveedor.
Revisa los logs de funciones, logs de la aplicación, trazas de monitorización e informes de errores. No registres claves, tokens Bearer, objetos de configuración ni cuerpos completos de errores upstream. Si se ha expuesto una clave, revócala y sustitúyela, luego elimina la exposición antes de volver a probar.
Prueba solicitudes de usuario no autenticado y con sesión expirada; ambas deben rechazarse antes de la llamada al proveedor. Envía apiKey, config o model como campo extra y verifica el rechazo. Prueba prompts vacíos y sobredimensionados, un tono no válido, fallos del proveedor y tu cuota por usuario desplegada.
Confirma que una solicitud válida con sesión iniciada produce texto con el modelo que seleccionaste. Registra la versión del despliegue y resultados de aprobado/fallido sanitizados; los ejemplos no establecen que tu propio despliegue haya superado estas pruebas.
¿Qué puedes construir con Lovable y CometAPI?
Proyecto
Rol de CometAPI
Funciones posibles
Asistente de escritura con IA
Redactar y reescribir contenido
Selección de tono, plantillas, editor
Resumen de documentos
Resumir texto extraído
Cargas, preguntas y respuestas de documentos, puntos clave
Mesa de soporte al cliente
Clasificar y redactar respuestas
Triaje de tickets, respuestas sugeridas
Asistente de analítica de negocio
Explicar datos del negocio
Paneles de KPI, insights en lenguaje natural
Los prompts normales producen respuestas legibles del modelo.
Los prompts en blanco y sobredimensionados se rechazan de forma segura.
Las credenciales de API nunca aparecen en el panel de red del navegador.
Las caídas del modelo devuelven mensajes de error no sensibles.
Los usuarios autenticados tienen límites de solicitudes y monitorización de actividad.
El diseño se comporta correctamente en escritorio y móvil.
Estos son patrones de proyecto sugeridos, no afirmaciones sobre despliegues completados o evaluados de forma independiente.
Preguntas frecuentes
¿Cómo debería una app multiempresa evitar que los registros de un cliente aparezcan en la respuesta de IA de otro cliente?
Deriva la identidad del inquilino y del usuario de la sesión del servidor verificada, luego delimita cada búsqueda de base de datos antes de ensamblar el contexto del modelo. Nunca confíes en un ID de inquilino suministrado por el navegador ni en una instrucción del prompt para hacer cumplir el acceso. Donde sea compatible, añade políticas de filas en la base de datos y verifícalas con dos cuentas de prueba. Prueba IDs de registro, resultados de búsqueda, archivos exportados e historial de conversación para detectar accesos cruzados entre inquilinos. Esta es una recomendación de diseño de aplicación; el código generado y los escaneos de la plataforma no establecen que la política sea correcta.
¿Cuándo es preferible la recuperación aumentada (RAG) a poner documentos directamente en cada prompt?
Usa recuperación cuando la colección de documentos es demasiado grande para enviarla cada vez, cambia con frecuencia o necesita trazabilidad a nivel de fuente. Analiza e indexa los documentos, recupera un conjunto pequeño relevante y adjunta identificadores de fuente a la respuesta. La recuperación aún requiere evaluación: una respuesta fluida puede citar un pasaje irrelevante. Mantén los filtros de acceso en la consulta de recuperación y prueba preguntas cuyas respuestas estén ausentes. Para un documento pequeño y estable, el contexto directo puede ser un punto de partida más simple.
¿Cómo se puede añadir streaming sin mostrar respuestas rotas o engañosas?
Trata el streaming como una función de transporte aparte, no como un reemplazo de una línea de stream: false. Confirma el formato de streaming del modelo seleccionado, haz que el backend retransmita eventos y gestiona fragmentos parciales, cancelación, timeouts y pérdida de conexión en la UI. Marca una respuesta interrumpida como incompleta y permite que el usuario reintente deliberadamente. Evita mostrar texto transmitido como HTML de confianza. Prueba en la ruta de hosting publicada porque intermediarios pueden bufferizar un stream que parecía funcionar localmente.
¿Qué debería comprobar una política de fallback antes de cambiar a otro modelo?
Define qué fallos justifican un reintento o fallback, luego verifica si la alternativa admite el mismo endpoint, instrucciones, esquema de herramientas y formato de salida. Mantén los reintentos acotados y evita cambiar de modelo en silencio para flujos que requieren comportamiento consistente. Evalúa el fallback con prompts representativos, incluidos casos de rechazo y salida malformada. Si la salida del modelo desencadena una acción externa, protege esa acción con una confirmación separada o una regla de idempotencia para que una generación reintentada no pueda repetirla.
¿Qué evidencia debería conservar un equipo antes de promover una función de IA de piloto a uso regular?
Conserva un conjunto de evaluación versionado con comportamientos esperados, configuración de modelo y prompt, metadatos de solicitud redactados y registros de casos fallidos. Define criterios de aceptación para exactitud factual, forma de respuesta, latencia y límites de acceso; compara resultados tras cambios de modelo o prompt. Para entradas sensibles, decide qué se puede transmitir y retener antes de habilitar la función. Estas son medidas de control de ingeniería sugeridas, no afirmaciones de que Lovable o CometAPI garanticen un resultado regulatorio concreto.
Conclusión: ¿Vale la pena usar Lovable?
Lovable facilita convertir ideas en aplicaciones funcionales. Su tooling full‑stack y las integraciones externas son especialmente útiles para validar rápidamente conceptos de producto. CometAPI añade una ruta flexible para la inferencia de modelos en chat, escritura, analítica y otros flujos impulsados por IA.
Empieza con una aplicación pequeña y segura, prueba la conexión con CometAPI, revisa el código generado y amplía después de que la experiencia central demuestre ser fiable.
