How to Integrate Lovable with OpenAI GPT

Your OpenAI API key is the most important credential to protect in this integration. A leaked API key can result in significant unexpected charges — someone who finds your key can generate text at your expense, and OpenAI charges per token, so a badly exposed key in a public repository has resulted in four-figure bills for developers who discovered the exposure too late. Lovable's security system blocks approximately 1,200 hardcoded API keys per day, but the safest practice is never giving the system a chance to catch the mistake. To store your key, click the '+' icon next to the Preview label at the top of the Lovable editor. In the Cloud panel that opens, click the 'Secrets' tab. Click 'Add new secret'. Add: - Name: OPENAI_API_KEY — Value: your OpenAI API key (starts with sk-proj- for project keys or sk- for legacy personal keys) Also consider adding: - Name: OPENAI_MODEL — Value: gpt-4o (or gpt-4o-mini for lower cost per token) Storing the model name as a secret (or VITE_OPENAI_MODEL as a build-time env var) makes it easy to switch models across all your Edge Functions by updating one value rather than searching through code. IMPORTANT: Never paste your API key into Lovable's chat. On the free tier, Lovable chat history is publicly accessible. Even on paid tiers, keys pasted in chat can end up in your Git commit history. The Secrets panel is the only safe place for OpenAI API keys.

With your API key secured, create the Edge Function that calls OpenAI's Chat Completions API. The openai npm package is available from esm.sh with full TypeScript types and works natively in Deno's environment. The package handles request formatting, response parsing, and error handling, making it significantly more ergonomic than raw fetch calls to the API. The Edge Function accepts a messages array (the conversation history in OpenAI's format) and an optional system prompt override. It reads the model from the OPENAI_MODEL secret (defaulting to gpt-4o-mini for cost efficiency during development) and returns the model's response as JSON. For a simple one-shot AI feature (not a multi-turn chat), the messages array will contain just a single user message. For a conversational interface, the frontend maintains the message history in React state and passes the full history on each request so the model has context from previous turns. To create this Edge Function, open Lovable's chat and paste the prompt below. Lovable will create the file, deploy it, and show you how to call it from the frontend.

1// supabase/functions/openai-chat/index.ts
2import OpenAI from 'https://esm.sh/openai@4';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9const DEFAULT_SYSTEM_PROMPT = 'You are a helpful assistant. Be concise and friendly.';
10
11Deno.serve(async (req) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
13
14  try {
15    const { messages, systemPrompt } = await req.json();
16
17    if (!Array.isArray(messages) || messages.length === 0) {
18      return new Response(JSON.stringify({ error: 'messages array is required' }), {
19        status: 400,
20        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
21      });
22    }
23
24    const openai = new OpenAI({ apiKey: Deno.env.get('OPENAI_API_KEY')! });
25    const model = Deno.env.get('OPENAI_MODEL') || 'gpt-4o-mini';
26
27    const completion = await openai.chat.completions.create({
28      model,
29      messages: [
30        { role: 'system', content: systemPrompt || DEFAULT_SYSTEM_PROMPT },
31        ...messages,
32      ],
33      max_tokens: 1000,
34      temperature: 0.7,
35    });
36
37    const content = completion.choices[0].message.content;
38    return new Response(JSON.stringify({ content, usage: completion.usage }), {
39      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
40    });
41  } catch (error) {
42    console.error('OpenAI error:', error);
43    const status = (error as { status?: number }).status ?? 500;
44    return new Response(JSON.stringify({ error: String(error) }), {
45      status,
46      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
47    });
48  }
49});

Streaming transforms the user experience for longer AI responses. Instead of waiting 3-10 seconds for a complete response, text appears word-by-word as the model generates it — exactly like ChatGPT. The OpenAI SDK supports streaming with the stream option, and Deno's edge runtime handles streaming responses natively. The streaming Edge Function below uses OpenAI's stream mode and returns a ReadableStream that the frontend can consume. The frontend uses the Fetch API's streaming reader to process each chunk as it arrives and update the UI in real time. Note that supabase.functions.invoke() does not natively support streaming response consumption — for streaming, call the Edge Function URL directly using fetch(), which gives you access to the ReadableStream. The Edge Function URL follows the pattern: https://{your-project-ref}.supabase.co/functions/v1/openai-chat-stream. For a polished streaming chat interface, Lovable can generate the complete frontend component with the streaming fetch call, token-by-token state updates, and automatic scrolling. Describe what you need in the chat and Lovable will handle the component logic.

1// supabase/functions/openai-chat-stream/index.ts
2import OpenAI from 'https://esm.sh/openai@4';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9Deno.serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  try {
13    const { messages, systemPrompt } = await req.json();
14    const openai = new OpenAI({ apiKey: Deno.env.get('OPENAI_API_KEY')! });
15    const model = Deno.env.get('OPENAI_MODEL') || 'gpt-4o-mini';
16
17    const stream = await openai.chat.completions.create({
18      model,
19      messages: [
20        { role: 'system', content: systemPrompt || 'You are a helpful assistant.' },
21        ...messages,
22      ],
23      stream: true,
24      max_tokens: 2000,
25    });
26
27    const readableStream = new ReadableStream({
28      async start(controller) {
29        const encoder = new TextEncoder();
30        try {
31          for await (const chunk of stream) {
32            const text = chunk.choices[0]?.delta?.content || '';
33            if (text) {
34              controller.enqueue(encoder.encode(`data: ${JSON.stringify({ text })}\n\n`));
35            }
36          }
37          controller.enqueue(encoder.encode('data: [DONE]\n\n'));
38        } finally {
39          controller.close();
40        }
41      },
42    });
43
44    return new Response(readableStream, {
45      headers: {
46        ...corsHeaders,
47        'Content-Type': 'text/event-stream',
48        'Cache-Control': 'no-cache',
49        'Connection': 'keep-alive',
50      },
51    });
52  } catch (error) {
53    return new Response(JSON.stringify({ error: String(error) }), {
54      status: 500,
55      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
56    });
57  }
58});

OpenAI's structured output feature (introduced with GPT-4o) guarantees that the model returns a valid JSON object matching a schema you define. This eliminates the parsing errors and 'model returned invalid JSON' problems common with prompt-based JSON generation. Structured outputs use JSON Schema to define the expected shape of the response. For a Lovable app, structured outputs are particularly useful for data extraction use cases — parsing contact information from pasted text, extracting product attributes from descriptions, converting user search queries into database filter parameters, or summarizing long form content into structured records. The Edge Function uses OpenAI's response_format option with json_schema to enforce the output format. Define the schema inline in the Edge Function or pass it as a parameter from the frontend for dynamic schemas. The parsed JSON is returned directly — no regex, no JSON.parse() error handling needed. After creating the Edge Function, ask Lovable to build the frontend form that calls it: 'Build a contact extraction form with a large textarea where users paste any text containing contact information. On submit, call the openai-extract Edge Function and display the extracted name, email, phone, and company fields in a preview card below the textarea with Edit buttons for each field and a Save to Contacts button.'

1// supabase/functions/openai-extract/index.ts
2import OpenAI from 'https://esm.sh/openai@4';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9const contactSchema = {
10  name: 'contact_extraction',
11  schema: {
12    type: 'object',
13    properties: {
14      name: { type: 'string', description: 'Full name of the person' },
15      email: { type: 'string', description: 'Email address' },
16      phone: { type: 'string', description: 'Phone number in any format' },
17      company: { type: 'string', description: 'Company or organization name' },
18      notes: { type: 'string', description: 'Any other relevant information' },
19    },
20    required: ['name'],
21    additionalProperties: false,
22  },
23  strict: true,
24};
25
26Deno.serve(async (req) => {
27  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
28
29  try {
30    const { text } = await req.json();
31    if (!text?.trim()) {
32      return new Response(JSON.stringify({ error: 'text is required' }), {
33        status: 400,
34        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
35      });
36    }
37
38    const openai = new OpenAI({ apiKey: Deno.env.get('OPENAI_API_KEY')! });
39
40    const completion = await openai.chat.completions.create({
41      model: 'gpt-4o',
42      messages: [
43        { role: 'system', content: 'Extract contact information from the provided text. Only include fields that are clearly present in the text.' },
44        { role: 'user', content: text },
45      ],
46      response_format: { type: 'json_schema', json_schema: contactSchema },
47    });
48
49    const extracted = JSON.parse(completion.choices[0].message.content!);
50    return new Response(JSON.stringify({ contact: extracted }), {
51      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
52    });
53  } catch (error) {
54    console.error('Extraction error:', error);
55    return new Response(JSON.stringify({ error: String(error) }), {
56      status: 500,
57      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
58    });
59  }
60});

With the Edge Functions deployed, build the Lovable frontend components that surface the AI features to your users. Open Lovable's chat and describe the AI-powered feature you want — Lovable will generate the React components, form handling, state management, and Edge Function calls. For a chat interface: describe the conversation UI you need, the system prompt context for your use case, and any custom styling. Lovable will generate a complete chat component with message history, loading states, error handling, and the supabase.functions.invoke() call wired up. For structured extraction: describe the input form and the display of extracted results. Lovable will generate the textarea, submit handler, loading state, and result display component. An important operational consideration is OpenAI API costs. GPT-4o costs approximately $2.50 per million input tokens and $10 per million output tokens as of March 2026. For user-facing features where untrusted users can send arbitrary-length messages, add input length validation in your Edge Function (reject inputs over a configurable token limit) and consider adding rate limiting per user ID to prevent abuse. Log the token usage returned by the API (completion.usage) to Cloud → Logs so you can monitor costs per request and identify expensive queries early. For applications with high AI feature usage or complex prompt engineering requirements, RapidDev's team can help optimize prompts for cost and quality, implement caching for common queries, and design rate limiting strategies for production scale.