How to Integrate Lovable with Shutterstock API

Navigate to developers.shutterstock.com and sign in with your Shutterstock account. Click 'Create an application'. Fill in the application name, description, and the OAuth2 callback URL. Use your deployed Lovable app URL followed by /auth/shutterstock/callback — for example, https://your-app.lovable.app/auth/shutterstock/callback. After creating the application, Shutterstock provides a Client ID and Client Secret (also called Consumer Key and Consumer Secret in older documentation). Copy both values. These are the credentials used for both the client credentials flow (for search) and the authorization code flow (for user-specific licensing). Shutterstock's API has two authentication modes. The client credentials flow (two-legged OAuth) gives read access to search results and image metadata without a specific user login. The authorization code flow (three-legged OAuth) authorizes operations on behalf of a logged-in Shutterstock user's account, including licensing images against their subscription. For most Lovable integrations — where the developer manages a single Shutterstock account — the authorization code flow with a long-lived token is the practical approach. To generate a user-level access token, use Shutterstock's OAuth authorization URL: https://www.shutterstock.com/oauth/authorize?client_id={CLIENT_ID}&response_type=code&redirect_uri={REDIRECT_URI}&scope=licenses.create+licenses.view+subscriptions.read After authorizing, exchange the code for an access token with an expiry and refresh token.

Open your Lovable project and navigate to Cloud → Secrets via the '+' icon next to Preview. Add the following secrets: - Name: SHUTTERSTOCK_CLIENT_ID — Value: your Shutterstock application Client ID - Name: SHUTTERSTOCK_CLIENT_SECRET — Value: your Shutterstock application Client Secret - Name: SHUTTERSTOCK_ACCESS_TOKEN — Value: your OAuth2 access token (with licensing scope) - Name: SHUTTERSTOCK_REFRESH_TOKEN — Value: your OAuth2 refresh token The access token authorizes image licensing — actions that consume your Shutterstock subscription credits. This credential requires strong protection. Store it in Cloud → Secrets and never include it in frontend code, Lovable chat, or source code repositories. Shutterstock licensing is irreversible and billable. An exposed access token could be used to license images against your subscription, consuming credits you paid for. Apply extra caution with this credential.

Create a Supabase Edge Function that proxies Shutterstock API v2 calls. The Shutterstock API base URL is https://api.shutterstock.com/v2/ and uses the Authorization: Bearer {token} header. The function handles three core actions: search (search images or videos with filters), license (license a specific image against the account's subscription), and licensed_images (retrieve the account's licensing history). The search action uses the client credentials token for read-only access. The license and licensed_images actions use the user-level access token with the licensing scope. Shutterstock search returns image metadata including preview image URLs (display_sizes array), contributor information, keywords, and image dimensions. The preview URLs do not require authentication and can be displayed in the browser as watermarked thumbnails. The full-resolution licensed download URL is only returned after a successful license call.

1// supabase/functions/shutterstock-api/index.ts
2const SHUTTERSTOCK_BASE = 'https://api.shutterstock.com/v2';
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': 'POST, OPTIONS',
10        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
11      },
12    });
13  }
14
15  const accessToken = Deno.env.get('SHUTTERSTOCK_ACCESS_TOKEN');
16  if (!accessToken) {
17    return new Response(JSON.stringify({ error: 'Shutterstock credentials not configured' }), {
18      status: 500,
19      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
20    });
21  }
22
23  const headers = {
24    'Authorization': `Bearer ${accessToken}`,
25    'Content-Type': 'application/json',
26  };
27
28  const { action, params } = await req.json();
29  let url: string;
30  let fetchOptions: RequestInit;
31
32  if (action === 'search') {
33    const q = new URLSearchParams({
34      query: params.query || '',
35      image_type: params.image_type || 'photo',
36      orientation: params.orientation || 'horizontal',
37      per_page: params.per_page || '20',
38      page: params.page || '1',
39      view: 'full',
40    });
41    if (params.category) q.set('category', params.category);
42    url = `${SHUTTERSTOCK_BASE}/images/search?${q}`;
43    fetchOptions = { method: 'GET', headers };
44  } else if (action === 'license') {
45    url = `${SHUTTERSTOCK_BASE}/images/licenses`;
46    fetchOptions = {
47      method: 'POST',
48      headers,
49      body: JSON.stringify({
50        images: [{
51          image_id: params.image_id,
52          subscription_id: params.subscription_id,
53          format: 'jpg',
54          size: 'huge',
55        }],
56      }),
57    };
58  } else if (action === 'licensed_images') {
59    url = `${SHUTTERSTOCK_BASE}/images/licenses?per_page=100`;
60    fetchOptions = { method: 'GET', headers };
61  } else if (action === 'subscriptions') {
62    url = `${SHUTTERSTOCK_BASE}/subscriptions`;
63    fetchOptions = { method: 'GET', headers };
64  } else {
65    return new Response(JSON.stringify({ error: 'Invalid action' }), {
66      status: 400,
67      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
68    });
69  }
70
71  const response = await fetch(url, fetchOptions);
72  const data = await response.json();
73
74  return new Response(JSON.stringify(data), {
75    status: response.ok ? 200 : response.status,
76    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
77  });
78});

Use Lovable's chat to build the stock image search and licensing interface. The UI needs three views: search results (watermarked previews with metadata), the licensed assets library (images your account has licensed), and a licensing workflow (preview → confirm → license → store). For the search results view, display Shutterstock's preview images (from display_sizes[0].url in the search response) in a masonry grid. Show the contributor name (contributor.id or contributor.display_name), the main category, and the image dimensions. Add filter controls for image type (photo, illustration, vector) and orientation. For the licensing workflow, clicking an image should open a confirmation modal that shows the image, its Shutterstock ID, the licensing cost from your subscription, and a 'License Image' button. When the user confirms, call the Edge Function with action='license', then save the result to a Supabase 'licensed_assets' table with the image ID, the license ID from Shutterstock's response, the download URL, and the user who licensed it. For the licensed assets library, call the Edge Function with action='licensed_images' and display previously licensed images with their license dates, contributor names, and direct download links. This view serves as your internal asset management system, giving the team access to previously licensed images without re-licensing. For enterprises managing multiple brand accounts and large stock media libraries, RapidDev's team can help design the multi-account architecture and automated license compliance tracking.