Lovable and OpenAI GPT integration: Step-by-Step Guide 2025

 

Setting Up the OpenAI Service File

 

• Create a new file in your Lovable project called openaiService.ts. This file will hold the TypeScript code for communicating with the OpenAI API.
• Copy and paste the following code into openaiService.ts:

export interface ChatMessage {
  role: "system" | "user" | "assistant";
  content: string;
}

export async function callOpenAIGPT(messages: ChatMessage[], apiKey: string): Promise {
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": Bearer ${apiKey}
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages,
    }),
  });

  if (!response.ok) {
    throw new Error(OpenAI API returned an error: ${response.statusText});
  }

  return await response.json();
}

• This code defines an interface for chat messages and an asynchronous function, callOpenAIGPT, that sends a POST request to the OpenAI API using the built-in fetch API.
• No external dependency installation is necessary because the fetch API is available natively in browsers.

 

Integrating the OpenAI Service into Your Project

 

• Open the file where you want to integrate GPT functionality. This could be your main application file or any file where you intend to call the OpenAI API.
• Import the function and interface from openaiService.ts by adding the following code at the top:

import { callOpenAIGPT, ChatMessage } from "./openaiService";

• Next, add the following code snippet to call the OpenAI API. Replace YOUROPENAIAPI_KEY with your actual OpenAI API key.

const apiKey = "YOUROPENAIAPI_KEY"; // Insert your OpenAI API key here

async function sendMessageToGPT() {
  const messages: ChatMessage[] = [
    { role: "system", content: "You are an assistant that helps with coding." },
    { role: "user", content: "How do I integrate GPT with my project?" }
  ];
  
  try {
    const result = await callOpenAIGPT(messages, apiKey);
    console.log("GPT response:", result);
  } catch (error) {
    console.error("Error calling GPT:", error);
  }
}

// Trigger the function when needed (e.g., on page load or via a button click)
sendMessageToGPT();

• This code sets up a sample conversation and calls the callOpenAIGPT function.
• When executed, it sends a request to the OpenAI API and logs the response or any error to the browser console.

 

Final Adjustments and Testing

 

• Ensure that all file paths match your project structure. The import path "./openaiService" in your main file should correctly point to the location of the openaiService.ts file.
• Make sure to replace YOUROPENAIAPI_KEY within the code with your actual OpenAI API key.
• Save all your changes. Since Lovable does not have a terminal, these code changes are all managed within the code editor of the platform.
• Test the integration by navigating to the part of your application where sendMessageToGPT is called. Open your browser’s console to view the output or any error messages.