How to Integrate Shutterstock API with V0

Open V0 at v0.dev and describe the media browser or search interface you want to build. Shutterstock's API returns rich image data — preview URLs, thumbnail URLs, asset dimensions, keywords, contributor names, and category information. V0 generates excellent image gallery components when you describe the specific layout: masonry grids, uniform grid layouts, list views with metadata, or card-based layouts all work well. For stock image browsers, describe the exact search interaction flow: what happens when the user types in the search bar (debounced search or submit-on-enter), how images are displayed in results (thumbnail size, whether contributor name shows, whether keywords are visible), what hovering or clicking an image does (selection state, detail modal, or inline preview expansion), and how the selected/licensed state is communicated visually. Specify that the component should call GET /api/shutterstock/search with a query parameter when the user searches. The API will return an array of image objects with fields like id, description, preview.url, preview.width, preview.height, contributor.id, and keywords. Ask V0 to design the component to receive this array as props or to fetch it directly. The most common issue with image galleries is handling different aspect ratios — a masonry layout handles this best, or you can specify that images should be displayed in a uniform grid with cover-fit cropping.

Create a Next.js API route that authenticates with Shutterstock using the client credentials OAuth flow and proxies search requests. The Shutterstock OAuth token endpoint is https://api.shutterstock.com/v2/oauth/access_token and accepts a POST with grant_type: 'client_credentials', client_id, client_secret, and scope: 'licenses.create,purchases.view,licenses.view,user.view'. The access token returned is valid for approximately 30 days (check the expires_in field in the response) and should be cached in a module-level variable to avoid authenticating on every search request. All Shutterstock API requests use the access token as a Bearer token in the Authorization header. The image search endpoint is GET /v2/images/search with query parameters: query (search keywords), image_type (photo/illustration/vector), orientation (horizontal/vertical/square), safe (true/false for safe search), sort (relevance/newest/popular/random), per_page (number of results, max 500), and page (pagination). The response contains a data array of image objects with preview URLs, asset IDs, descriptions, keywords, and contributor data. Important: the preview image URLs returned by the Shutterstock API include watermarks and are intended only for display purposes. These preview images are served from Shutterstock's CDN and will load directly in browser img tags — you do not need to proxy them through your server.

1// app/api/shutterstock/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SHUTTERSTOCK_API = 'https://api.shutterstock.com/v2';
5
6let cachedToken: { token: string; expiresAt: number } | null = null;
7
8async function getAccessToken(): Promise<string> {
9  if (cachedToken && Date.now() < cachedToken.expiresAt) {
10    return cachedToken.token;
11  }
12
13  const clientId = process.env.SHUTTERSTOCK_CLIENT_ID;
14  const clientSecret = process.env.SHUTTERSTOCK_CLIENT_SECRET;
15
16  if (!clientId || !clientSecret) {
17    throw new Error('Shutterstock credentials are not configured');
18  }
19
20  const response = await fetch(`${SHUTTERSTOCK_API}/oauth/access_token`, {
21    method: 'POST',
22    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
23    body: new URLSearchParams({
24      grant_type: 'client_credentials',
25      client_id: clientId,
26      client_secret: clientSecret,
27      scope: 'licenses.view purchases.view user.view',
28    }),
29  });
30
31  if (!response.ok) {
32    const error = await response.json();
33    throw new Error(error.error_description || 'Shutterstock authentication failed');
34  }
35
36  const data = await response.json();
37  const expiresIn = (data.expires_in || 2592000) * 1000; // Default 30 days in ms
38  cachedToken = { token: data.access_token, expiresAt: Date.now() + expiresIn - 60000 };
39  return data.access_token;
40}
41
42export async function GET(request: NextRequest) {
43  const { searchParams } = request.nextUrl;
44  const query = searchParams.get('query');
45  const imageType = searchParams.get('type') || 'all';
46  const orientation = searchParams.get('orientation') || '';
47  const sort = searchParams.get('sort') || 'relevance';
48  const page = searchParams.get('page') || '1';
49  const perPage = Math.min(parseInt(searchParams.get('perPage') || '20'), 50);
50
51  if (!query) {
52    return NextResponse.json({ error: 'query parameter is required' }, { status: 400 });
53  }
54
55  try {
56    const token = await getAccessToken();
57
58    const params = new URLSearchParams({
59      query,
60      sort,
61      page,
62      per_page: perPage.toString(),
63      safe: 'true',
64      view: 'minimal',
65    });
66
67    if (imageType !== 'all') params.set('image_type', imageType);
68    if (orientation) params.set('orientation', orientation);
69
70    const response = await fetch(
71      `${SHUTTERSTOCK_API}/images/search?${params.toString()}`,
72      { headers: { Authorization: `Bearer ${token}` } }
73    );
74
75    if (!response.ok) {
76      throw new Error(`Shutterstock search failed: ${response.statusText}`);
77    }
78
79    const data = await response.json();
80
81    const images = (data.data || []).map((img: Record<string, unknown>) => ({
82      id: img.id,
83      description: img.description,
84      contributor: (img.contributor as Record<string, unknown>)?.id,
85      preview: img.assets && (img.assets as Record<string, unknown>).preview,
86      thumbnail: img.assets && (img.assets as Record<string, unknown>).small_thumb,
87      keywords: (img.keywords as string[] || []).slice(0, 10),
88      mediaType: img.media_type,
89    }));
90
91    return NextResponse.json({
92      images,
93      total: data.total_count,
94      page: data.page,
95      perPage: data.per_page,
96    });
97  } catch (error) {
98    const message = error instanceof Error ? error.message : 'Search failed';
99    return NextResponse.json({ error: message }, { status: 500 });
100  }
101}

Update your V0-generated search component to fetch real Shutterstock results from your API route and display them. The API route returns image objects with preview URLs in the preview field and thumbnail URLs in the thumbnail field — use the thumbnail URL for grid display (faster loading, smaller file) and the preview URL for the detail modal. Implement debounced search so the API is not called on every keystroke — wait 400-500ms after the user stops typing before triggering a search. The search component should maintain search state: the current query, selected filters (image type, orientation), current page, and whether results are loading. For pagination, add Previous/Next buttons that increment the page parameter and re-fetch. When displaying images in the grid, set the img src to the thumbnail URL (from the API response) — these are direct Shutterstock CDN URLs and load quickly. The Shutterstock CDN serves images with CORS headers, so they load cleanly in browser img tags without needing your server to proxy the image bytes. Test the integration locally by adding SHUTTERSTOCK_CLIENT_ID and SHUTTERSTOCK_CLIENT_SECRET to your .env.local file, running npm run dev, and searching for a few terms. Verify that watermarked preview images appear in the grid. If images don't load, check the browser console for CORS errors and verify the preview URL format in the API response.

Push your code to GitHub and configure Shutterstock credentials in the Vercel Dashboard. Navigate to Settings → Environment Variables and add two variables: SHUTTERSTOCK_CLIENT_ID (the client ID from your Shutterstock developer application, found at developers.shutterstock.com → My Apps — a long alphanumeric string) and SHUTTERSTOCK_CLIENT_SECRET (the client secret from the same app page — treat this as a server-only secret). Neither should have the NEXT_PUBLIC_ prefix. Set both for Production and Preview environments and save. After redeploying, test the search on your Vercel URL by searching for a common term like 'business people' — results should appear within 1-2 seconds. The first request will take slightly longer as the API route authenticates with Shutterstock and fetches the access token; subsequent requests use the cached token and are much faster. If you receive a 401 error from Shutterstock, verify the client credentials in Vercel match exactly what is shown in the Shutterstock developer portal. If you need to implement actual image licensing (allowing users to purchase and download full-resolution images through your app), you will need to implement a per-user Shutterstock OAuth flow where each user authorizes your app to license images on their behalf — this requires a Shutterstock subscription and the user-based OAuth flow, which is a more complex integration. For enterprise licensing workflows, RapidDev's team can help design the full user authorization and download architecture.