# Building AI Agents & AI Features in Lovable

- Tool: Lovable
- Difficulty: Intermediate
- Fix time: ~30-60 min for a basic chat or agent feature
- Compatibility: Lovable Cloud AI connector — Free, Pro, and Business plans get a monthly AI credit grant; usage beyond that draws from workspace credits
- Last updated: September 2026

## TL;DR

Lovable builds AI-powered features — chatbots, agents, summarization, semantic search — through its built-in Cloud AI gateway, which routes chat requests to Gemini 3.7 Flash by default (with GPT-5.6 variants available) without you managing your own API key. Image, video, embedding, and voice features default to their own gateway models too. Streaming is on by default, and you can bring your own Anthropic or OpenAI key via Secrets when you need a specific model the gateway does not offer.

## Why Lovable has a separate AI gateway from its own builder

It helps to separate two very different things that both involve AI inside a Lovable project. The first is Lovable's builder agent itself — the AI that writes your code, which runs on Anthropic Claude and is not something you configure. The second is the Cloud AI gateway: a built-in AI connector your published app can call at runtime to power chatbots, summarization, sentiment analysis, document Q&A, translation, image and document analysis, semantic search, and image, video, or voice generation, all without you managing a separate API key.

The gateway routes each type of request to a default model — Gemini 3.7 Flash for chat, GPT Image 2 for image generation, Veo 3.1 Lite for video, Gemini Embedding 2 for embeddings, and GPT-4o Mini for text-to-speech and transcription — with alternative models available for some categories. Streaming via server-sent events is on by default for chat-style features, so responses appear token by token instead of all at once.

Usage draws from a 4-credit monthly AI grant on Free, Pro, and Business plans, then falls back to your regular workspace credits once that is used up. Cost varies by model, token count, and — notably — video length, since video generation is billed per second and gets expensive fast at higher resolutions. For teams that need a specific model version, higher throughput, or full control over the provider relationship, bringing your own Anthropic or OpenAI key through Secrets and an Edge Function remains the alternative path.

- The Lovable builder (which writes your code) runs on Anthropic Claude and is separate from the Cloud AI gateway your app calls at runtime
- The Cloud AI gateway needs no separate API key for standard chat, image, video, embedding, and voice features — it is billed through your workspace credits
- Default models per category: Gemini 3.7 Flash (chat), GPT Image 2 (images), Veo 3.1 Lite (video), Gemini Embedding 2 (embeddings), GPT-4o Mini (TTS/transcription)
- SSE streaming is on by default for chat features, and video generation billed per second is the most expensive category to watch

## Before you start

- A Lovable project on any plan (Free, Pro, or Business) for the built-in Cloud AI gateway
- A clear description of the AI feature you want, written as if briefing a developer
- Lovable Cloud enabled for the vector store, if you're building RAG or semantic search
- Your own Anthropic or OpenAI key in Secrets only if you're bypassing the built-in gateway

## How to fix it

### 1. Decide between the built-in gateway and your own API key

*This decision shapes every following step*

Use the built-in Cloud AI gateway for most features — it needs no key management, works out of the box, and covers chat, image, video, embeddings, and voice with sensible defaults. Bring your own Anthropic or OpenAI key via Secrets and an Edge Function only when you need a specific model version the gateway does not expose, higher rate limits than the shared gateway offers, or a direct vendor relationship for compliance reasons.

**Expected result:** A clear choice of integration path before you start prompting the feature.

### 2. Prompt Lovable to add the AI feature you need

*Describing the feature clearly lets Lovable wire the right gateway model automatically*

Describe the feature in plain terms — for example, 'add a support chatbot that answers from our FAQ content' or 'summarize long-form user submissions before showing them to admins.' Lovable typically wires an Edge Function that calls the Cloud AI gateway with SSE streaming enabled by default for chat-style responses, so your UI can render tokens as they arrive instead of waiting for the full response.

**Expected result:** A working AI feature backed by an Edge Function calling the gateway, with no API key required in your Secrets for the default models.

### 3. Choose the right gateway model for each feature type

*Different tasks map to different default models, and knowing them helps you prompt precisely*

For chat and reasoning tasks, the gateway defaults to Gemini 3.7 Flash, with GPT-5.6 variants available as an alternative. For image generation, it defaults to GPT Image 2; for video, Veo 3.1 Lite; for embeddings used in search or RAG, Gemini Embedding 2; and for text-to-speech or transcription, GPT-4o Mini variants. If your feature needs a specific one of these, say so explicitly in your prompt rather than leaving it to the default.

**Expected result:** The correct gateway model handles each feature, rather than a generic default that may not fit your use case.

### 4. Build RAG or semantic search with embeddings

*Document Q&A and semantic search need vector storage, not just a chat call*

For document Q&A or semantic search features, ask Lovable to generate embeddings with the gateway's default embedding model and store them in Lovable Cloud's vector store, built on pgvector under the hood. Remember Lovable Cloud is managed Supabase and is not visible in your own Supabase dashboard — this matters if you ever need to inspect or migrate that vector data directly.

**Expected result:** A working retrieval pipeline where user queries are embedded, matched against stored document embeddings, and used to ground the AI's answers.

### 5. Add streaming and, if useful, reasoning display

*Streaming keeps chat-style features feeling responsive instead of frozen while generating*

SSE streaming is on by default for chat features, so most agent-style UIs will already render incrementally. Lovable also shipped a reasoning-display feature in August 2026 that can show end users a summarized version of the model's intermediate reasoning steps for supported flows — useful for agent-style features where users benefit from seeing the 'why' behind an answer, though it is optional and not every use case needs it.

**Expected result:** A chat or agent feature that streams responses in real time, with optional reasoning visibility for more complex flows.

### 6. Watch AI costs and know when to bring your own key

*Video generation and heavy chat usage can consume credits faster than expected*

Video generation is billed per second and rises quickly at higher resolutions, so prototype with short clips before scaling up. Track your monthly 4-credit AI grant separately from the credits your feature consumes once that grant runs out. For AI features with production-scale usage or a specific model requirement the gateway doesn't offer, RapidDev's engineers can wire your own Anthropic or OpenAI key through Edge Functions instead of the shared gateway, giving you direct control over model choice and cost.

**Expected result:** An AI feature whose cost profile you understand and can control, with a clear upgrade path to your own API key if the gateway's economics stop working for you.

## Complete code example

File: `supabase/functions/ai-chat/index.ts`

```typescript
// Illustrative shape only — Lovable wires the actual Edge Function and gateway
// call automatically when you prompt for an AI feature. No separate API key is
// needed in Secrets for the default gateway models.
import { serve } from "https://deno.land/std/http/server.ts";

serve(async (req) => {
  const { message } = await req.json();

  if (!message || typeof message !== "string") {
    return new Response(JSON.stringify({ error: "Message is required" }), {
      status: 400,
      headers: { "Content-Type": "application/json" },
    });
  }

  // The Cloud AI gateway call — model and auth are handled by Lovable Cloud,
  // not a key you manage yourself in Secrets.
  const gatewayResponse = await fetch(Deno.env.get("LOVABLE_AI_GATEWAY_URL")!, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "gemini-3.7-flash",
      stream: true,
      messages: [{ role: "user", content: message }],
    }),
  });

  return new Response(gatewayResponse.body, {
    headers: { "Content-Type": "text/event-stream" },
  });
});
```

## Best practices

- Use the built-in Cloud AI gateway for standard features — no key management is needed for most use cases
- Reach for embeddings and the vector store (Gemini Embedding 2 default) for RAG and document search instead of stuffing raw text into prompts
- Enable streaming for any chat-style feature — it's on by default and keeps the UI responsive
- Watch video generation costs closely — it's billed per second and rises fast at higher resolutions
- Bring your own Anthropic or OpenAI key via Secrets when you need a specific model version or higher throughput
- Be specific about the model role (chat, summarization, image, embeddings) in your prompt so Lovable wires the right gateway model
- Test agent or chat features with adversarial inputs before publishing — gateway models can still be prompt-injected
- Track your monthly AI credit grant separately from build credits, since the unified balance still meters AI usage

## Frequently asked questions

### What AI model does an AI agent in Lovable actually use?

Chat-style AI features built through the Cloud AI gateway default to Gemini 3.7 Flash, with GPT-5.6 variants available. This is separate from Lovable's own builder agent, which runs on Anthropic Claude and writes your code — see our dedicated page on what model Lovable uses for that distinction.

### Does building AI agents in Lovable cost extra?

Yes, beyond a monthly 4-credit AI grant included on Free, Pro, and Business plans. After that grant is used, AI feature usage draws from your regular workspace credits, with cost varying by model, token volume, and especially video length, which is billed per second.

### Can I use my own OpenAI or Anthropic key instead of the built-in gateway?

Yes. Add your key to Secrets and wire it into an Edge Function the same way you would for any third-party API. This gives you a specific model version and your own rate limits, at the cost of managing the key and billing relationship yourself.

### Does Lovable support streaming responses for AI features?

Yes, server-sent event streaming is enabled by default for chat-style features built through the Cloud AI gateway, so responses render incrementally instead of appearing all at once.

### Can Lovable build a fully autonomous AI agent, not just a chatbot?

You can build agent-style workflows — multi-step reasoning, tool calls through Edge Functions, retrieval-augmented answers — on top of the Cloud AI gateway, but it is not a dedicated autonomous-agent framework. For heavier agent orchestration needs, treat Lovable as the app layer and consider whether a specialized agent framework belongs behind an Edge Function.

### How do I build RAG or document search in Lovable?

Generate embeddings for your documents using the gateway's default embedding model, store them in Lovable Cloud's built-in vector store, and query with the same embedding approach at request time to retrieve relevant context before calling the chat model.

### What if my AI feature needs more than the built-in gateway can offer?

For production-scale usage, a specific model requirement, or full control over provider costs, RapidDev's engineers can wire your own Anthropic or OpenAI key through Edge Functions instead of the shared gateway, and help architect the retrieval and agent logic around it.

---

Source: https://www.rapidevelopers.com/lovable-issues/building-ai-agents-in-lovable
© RapidDev — https://www.rapidevelopers.com/lovable-issues/building-ai-agents-in-lovable