How to Integrate Lovable with Getty Images API

Navigate to developers.gettyimages.com and click 'Get API Key'. You will be prompted to sign in with a Getty Images account (or create one). Once signed in, click 'Register a new application'. Fill in your application name, description, and the primary use case — select 'Editorial website or app' for editorial use or 'Commercial application' for paid use. Enter your app's URL. After submitting, Getty Images reviews your application. This review can take 24 to 72 hours for new accounts, though existing Getty customers often receive faster approval. You will receive an email with your API key once approved. Important: understand which tier you have access to. Basic API access grants search and embed capabilities — you can search Getty's catalog and display watermarked thumbnails or use Getty's iframe embed code. Download access requires a Getty subscription (starting at $35 per month for smaller plans) or enterprise agreement. The API key is the same format either way, but the /downloads endpoint is only available to accounts with download rights. For testing the integration during development, the search endpoints work without any download rights. You can search, retrieve image metadata, and generate embed codes with a basic API key. Only add download functionality once you have confirmed your Getty account has the appropriate licensing level.

Open your Lovable project and click the '+' icon at the top of the editor next to the Preview label to open the Cloud panel. Click the Secrets tab, then 'Add new secret'. Add the following secret: - Name: GETTY_API_KEY — Value: your Getty Images API key from the developer portal If your Getty API tier also includes a client secret (some API plans require both a key and secret for OAuth2 authentication), add it as well: - Name: GETTY_CLIENT_SECRET — Value: your Getty client secret (if applicable) Getty's standard API tier uses a single API key passed as the Api-Key header on every request. More advanced Getty API plans (enterprise tier) use OAuth2 client credentials. The Edge Function in the next step uses the single API key approach, which covers the vast majority of Getty API use cases. Never paste your Getty API key into Lovable's chat prompt. The Getty API key authorizes download requests that can incur licensing fees — an exposed key could be used to download licensed images on your account without your knowledge. Lovable's security system blocks approximately 1,200 hardcoded API keys per day, but using the Secrets panel is the correct approach regardless.

Create a Supabase Edge Function that proxies search requests to Getty Images API. The function accepts a search query, optional filters, and page parameters from the frontend, forwards the request to Getty's search endpoint with your API key, and returns the results. Getty's primary search endpoint is GET /v3/search/images with parameters including phrase (the search keyword), fields (which metadata to return), orientations, image_type, editorial_use_only, and page and page_size for pagination. The function returns image IDs, titles, captions, thumbnails, and display sizes. Paste the prompt below into Lovable's chat to generate and deploy the function. After creation, test it by calling it with a simple search term and verifying that Getty image metadata appears in the response.

1// supabase/functions/getty-api/index.ts
2const GETTY_BASE_URL = 'https://api.gettyimages.com/v3';
3
4Deno.serve(async (req) => {
5  if (req.method === 'OPTIONS') {
6    return new Response(null, {
7      headers: {
8        'Access-Control-Allow-Origin': '*',
9        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
10        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
11      },
12    });
13  }
14
15  const apiKey = Deno.env.get('GETTY_API_KEY');
16  if (!apiKey) {
17    return new Response(JSON.stringify({ error: 'Getty API key not configured' }), {
18      status: 500,
19      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
20    });
21  }
22
23  const url = new URL(req.url);
24  const phrase = url.searchParams.get('phrase');
25  if (!phrase) {
26    return new Response(JSON.stringify({ error: 'phrase parameter is required' }), {
27      status: 400,
28      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
29    });
30  }
31
32  const imageType = url.searchParams.get('image_type') || 'editorial';
33  const orientations = url.searchParams.get('orientations') || '';
34  const page = url.searchParams.get('page') || '1';
35  const pageSize = url.searchParams.get('page_size') || '20';
36
37  const gettyParams = new URLSearchParams({
38    phrase,
39    image_type: imageType,
40    page,
41    page_size: pageSize,
42    fields: 'id,title,caption,date_created,artist,display_sizes,keywords',
43  });
44  if (orientations) gettyParams.set('orientations', orientations);
45
46  const gettyResponse = await fetch(
47    `${GETTY_BASE_URL}/search/images?${gettyParams.toString()}`,
48    {
49      headers: {
50        'Api-Key': apiKey,
51        'Accept': 'application/json',
52      },
53    }
54  );
55
56  const data = await gettyResponse.json();
57
58  return new Response(JSON.stringify(data), {
59    status: gettyResponse.status,
60    headers: {
61      'Content-Type': 'application/json',
62      'Access-Control-Allow-Origin': '*',
63    },
64  });
65});

With the Edge Function deployed, use Lovable's chat to generate the frontend components. Describe the image search interface, gallery layout, and any filtering controls you want. Lovable will create React components that call your Edge Function and display results with proper attribution. Getty requires attribution in all displays of their images: the photographer's name and 'Getty Images' must appear with each image. Make this a requirement in your Lovable prompt so the generated components include proper credit. For the embed tier, also include the Getty Images logo or watermark — Getty's embed code handles this automatically if you use the iframe approach, but custom displays need explicit attribution. For the free embed tier, prompt Lovable to use Getty's official iframe embed code rather than displaying thumbnail images directly. This is both legally required and provides Getty-hosted watermarking automatically. For the paid download tier, you can display clean images directly from Supabase Storage after downloading them via the API. Add pagination to the gallery — Getty returns results in pages of up to 100 images per request. Implement infinite scroll or numbered pagination using the result_count and page fields in Getty's response.