Lovable and Getty Images API integration: Step-by-Step Guide 2025

 

Setting Up Getty API Configuration

 

• Create a new file named gettyConfig.ts in your project’s source folder (for example, alongside your other TypeScript files).
• Paste the following code into gettyConfig.ts. This file will store your Getty Images API key. Replace YOURGETTYAPIKEYHERE with your actual Getty Images API key.

export const GETTYAPIKEY = "YOURGETTYAPIKEYHERE";

 

Creating the Getty API Client

 

• Create a new file named gettyApiClient.ts in the same folder as gettyConfig.ts.
• Paste the following TypeScript code into gettyApiClient.ts. This code defines a function to search for images using the Getty Images API.

import { GETTYAPIKEY } from './gettyConfig';

const BASE_URL = 'https://api.gettyimages.com/v3';

export async function searchGettyImages(query: string, page: number = 1, pageSize: number = 10): Promise {
  const url = ${BASE_URL}/search/images?phrase=${encodeURIComponent(query)}&page=${page}&page_size=${pageSize};
  const response = await fetch(url, {
    headers: {
      'Api-Key': GETTYAPIKEY
    }
  });
  if (!response.ok) {
    throw new Error(Getty API error: ${response.statusText});
  }
  return await response.json();
}

 

Integrating the Getty API Client Into Your Project

 

• Open the main file where you want to use Getty image functionalities (for instance, your app.ts or a component file).
• Import the searchGettyImages function at the top of the file.
• Add the following code snippet into your file to call the function when needed (for example, after a user search input). This example demonstrates how to call the function and log the results.

import { searchGettyImages } from './gettyApiClient';

// Example function to handle image search
async function handleImageSearch(query: string) {
  try {
    const data = await searchGettyImages(query);
    console.log('Getty Images data:', data);
    // Insert additional code here to update your project UI with the image data
  } catch (error) {
    console.error('Error fetching Getty Images:', error);
  }
}

// Example trigger for the search function (e.g., call this function on a button click event)
handleImageSearch("nature");

 

Setting Up API Key Without a Terminal

 

• Since Lovable projects do not have a terminal, you cannot run install commands. Instead, make sure all code files (like gettyConfig.ts and gettyApiClient.ts) are saved in your project’s file explorer.
• If your project management interface allows you to define global configurations or environment files, ensure that your Getty API key is stored securely there and update gettyConfig.ts accordingly.

 

Testing the Integration

 

• Save all changes in your Lovable project.
• Trigger the search functionality (for example, by using the demo call in handleImageSearch).
• Check your project’s console output to verify that Getty Images data is returned without errors.
• If the data is retrieved successfully, update your UI code to display the images as needed in your project.