How to Integrate Lovable with Pixabay API

Navigate to pixabay.com and create a free account if you do not have one. Once logged in, go to pixabay.com/api/docs. The API documentation page shows your personal API key at the top — it is automatically generated for every registered Pixabay user. Your API key is a numeric string. Copy it. This key authenticates your API calls and is associated with your Pixabay account's rate limit quota (500 requests per hour for standard accounts). Pixabay's API terms of service require that you add a link back to Pixabay (pixabay.com/service/license-summary/) when displaying images from the API in your application. Display this link somewhere visible in your image gallery or picker UI — in a footer, a tooltip on each image, or an attribution note. Attribution to individual photographers is optional but recommended as good practice. One important API restriction: you cannot display Pixabay image URLs directly as hotlinked images in a large-scale production app without prior approval from Pixabay. For apps with expected high traffic (millions of image views), contact Pixabay through their developer contact form to discuss usage. For most Lovable projects, standard API usage is fully permitted.

Open your Lovable project and click the '+' icon next to the Preview label to open the Cloud panel. Navigate to the Secrets tab and add: - Name: PIXABAY_API_KEY — Value: your Pixabay API key from the documentation page While Pixabay's API key is less sensitive than a payment credential or social OAuth token (it only provides access to public content search), keeping it in Cloud → Secrets prevents it from appearing in browser network logs, protects your rate limit quota from being used by others who might inspect your frontend code, and follows the security best practice of keeping all API credentials server-side. Lovable's infrastructure blocks approximately 1,200 hardcoded API keys per day — the Secrets panel is always the correct approach regardless of how sensitive the credential appears to be.

Create a Supabase Edge Function that proxies Pixabay search requests and implements simple caching in Supabase. The caching layer stores recent search results in a Supabase table, returning cached results if the same query was made within the last 30 minutes. This reduces API calls for popular searches and improves response speed. Pixabay's API search endpoint is https://pixabay.com/api/ for images and https://pixabay.com/api/videos/ for videos. The main parameters are key (your API key), q (the search query), image_type (photo, illustration, vector, all), orientation (horizontal, vertical, all), category, min_width, min_height, page, and per_page (max 200). The response includes an array of hits with thumbnail URLs (webformatURL), large image URLs (largeImageURL), image dimensions, tags, and photographer username. Display webformatURL thumbnails in the grid and largeImageURL for lightbox or download.

1// supabase/functions/pixabay-api/index.ts
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
3
4const PIXABAY_BASE = 'https://pixabay.com/api';
5const CACHE_TTL_MINUTES = 30;
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response(null, {
10      headers: {
11        'Access-Control-Allow-Origin': '*',
12        'Access-Control-Allow-Methods': 'GET, OPTIONS',
13        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
14      },
15    });
16  }
17
18  const apiKey = Deno.env.get('PIXABAY_API_KEY');
19  if (!apiKey) {
20    return new Response(JSON.stringify({ error: 'Pixabay API key not configured' }), {
21      status: 500,
22      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
23    });
24  }
25
26  const url = new URL(req.url);
27  const q = url.searchParams.get('q') || 'nature';
28  const imageType = url.searchParams.get('image_type') || 'photo';
29  const orientation = url.searchParams.get('orientation') || 'all';
30  const category = url.searchParams.get('category') || '';
31  const page = url.searchParams.get('page') || '1';
32  const perPage = url.searchParams.get('per_page') || '20';
33  const mediaType = url.searchParams.get('media_type') || 'image';
34
35  const cacheKey = `${q}:${imageType}:${orientation}:${category}:${page}:${perPage}:${mediaType}`;
36
37  const supabase = createClient(
38    Deno.env.get('SUPABASE_URL')!,
39    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
40  );
41
42  // Check cache
43  const { data: cached } = await supabase
44    .from('pixabay_cache')
45    .select('result, fetched_at')
46    .eq('cache_key', cacheKey)
47    .single();
48
49  if (cached) {
50    const age = (Date.now() - new Date(cached.fetched_at).getTime()) / 60000;
51    if (age < CACHE_TTL_MINUTES) {
52      return new Response(JSON.stringify(cached.result), {
53        headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
54      });
55    }
56  }
57
58  // Fetch from Pixabay
59  const apiEndpoint = mediaType === 'video' ? `${PIXABAY_BASE}/videos/` : `${PIXABAY_BASE}/`;
60  const params = new URLSearchParams({ key: apiKey, q, image_type: imageType, orientation, page, per_page: perPage, safesearch: 'true' });
61  if (category) params.set('category', category);
62
63  const pixabayResponse = await fetch(`${apiEndpoint}?${params}`);
64  const data = await pixabayResponse.json();
65
66  // Store in cache
67  await supabase.from('pixabay_cache').upsert({ cache_key: cacheKey, result: data, fetched_at: new Date().toISOString() }, { onConflict: 'cache_key' });
68
69  return new Response(JSON.stringify(data), {
70    status: pixabayResponse.status,
71    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
72  });
73});

With the Edge Function running, use Lovable's chat to generate the image search interface. Pixabay returns rich metadata with each image: the webformatURL for thumbnails, largeImageURL for full-size, imageWidth and imageHeight for responsive sizing, tags for keyword display, user (photographer name), and pageURL (link back to Pixabay as required by terms). For a good image picker UX, build a masonry or grid layout that displays thumbnails. When a user clicks an image, open a lightbox showing the full-size image with the photographer credit and a link to the Pixabay page. Include an insert or select button to trigger the callback that returns the image to the parent component. Add filter controls: image type (photo, illustration, vector), orientation (horizontal, vertical), and popular Pixabay categories (nature, science, backgrounds, technology, travel, food, music). These map directly to Pixabay's API parameters. For the Pixabay attribution requirement, add a small 'Free images via Pixabay' link in the footer of the image picker modal. This satisfies Pixabay's terms of service while keeping the attribution unobtrusive. If you are building a feature where users save images for repeated use, prompt Lovable to add the 'Save to Library' flow that downloads the image from Pixabay into Supabase Storage.