How to Integrate Getty Images API with V0

Start with the search interface — this is where V0 shines for image-heavy applications. Prompt V0 to build a search page with a text input, filter controls, and a responsive image grid. The grid should handle varying image aspect ratios gracefully — use a masonry or fixed-aspect-ratio grid depending on your aesthetic preference. For displaying Getty images, you have two options depending on your API tier: the embed tier uses iframes with Getty's hosted embed code (which includes the Getty watermark and copyright), while paid API tiers allow direct image URL display. Design your component to accept both cases — use an iframe container for embed codes and an img tag for direct URLs. Include filter controls that map to Getty's search parameters: orientation (horizontal, vertical, square), image type (photography, illustration, vector), and editorial/creative flag. These filters significantly narrow results to match a user's intent. Also include a loading skeleton state for the search results — Getty API calls typically take 300-800ms, and users need visual feedback that the search is in progress. Prompt V0 to add infinite scroll or pagination to the image grid — Getty's search returns up to 500 results per query and your users will want to browse beyond the first page. A 'Load More' button at the bottom of the grid is simpler to implement than infinite scroll and works well for this use case.

Build the Next.js API route that authenticates with the Getty Images API and searches the image catalog. Getty's API uses OAuth2 client credentials flow — you exchange your API key and secret for an access token, then use that token to make search requests. Access tokens are valid for 30 minutes. The Getty Images REST API v3 base URL is https://api.gettyimages.com/v3. The search endpoint is GET /search/images with parameters for phrase (search keywords), fields (which data to return), page, page_size, orientations, image_type, and many more filters. By default, the API returns a large set of fields — specify only what you need using the fields parameter to improve performance. For embed tier access, the most important field to return is embed_content_url — this is the iframe URL you display to end users. The response also includes id, title, caption, display_sizes (thumbnail URL array), artist, collection_name, and asset_family (editorial vs. creative). Authentication uses HTTP Basic Auth for the token request: base64-encode 'api_key:api_secret' and pass as the Authorization header. The token endpoint is POST https://authentication.gettyimages.com/oauth2/token with grant_type=client_credentials. Cache the resulting token for its expiration period (typically 1800 seconds) to avoid repeated token requests.

1import { NextResponse } from 'next/server';
2
3const GETTY_API_KEY = process.env.GETTY_API_KEY!;
4const GETTY_API_SECRET = process.env.GETTY_API_SECRET!;
5const GETTY_BASE = 'https://api.gettyimages.com/v3';
6const GETTY_AUTH_URL = 'https://authentication.gettyimages.com/oauth2/token';
7
8// Simple in-memory token cache (resets on cold start)
9let cachedToken: { value: string; expiresAt: number } | null = null;
10
11async function getAccessToken(): Promise<string> {
12  if (cachedToken && Date.now() < cachedToken.expiresAt - 60000) {
13    return cachedToken.value;
14  }
15
16  const credentials = Buffer.from(`${GETTY_API_KEY}:${GETTY_API_SECRET}`).toString('base64');
17
18  const response = await fetch(GETTY_AUTH_URL, {
19    method: 'POST',
20    headers: {
21      Authorization: `Basic ${credentials}`,
22      'Content-Type': 'application/x-www-form-urlencoded',
23    },
24    body: 'grant_type=client_credentials',
25  });
26
27  if (!response.ok) {
28    throw new Error(`Getty auth failed: ${response.status}`);
29  }
30
31  const data = await response.json();
32  cachedToken = {
33    value: data.access_token,
34    expiresAt: Date.now() + data.expires_in * 1000,
35  };
36  return data.access_token;
37}
38
39export async function GET(request: Request) {
40  const { searchParams } = new URL(request.url);
41  const phrase = searchParams.get('phrase') || '';
42  const page = searchParams.get('page') || '1';
43  const orientation = searchParams.get('orientation') || '';
44
45  if (!phrase) {
46    return NextResponse.json({ error: 'phrase parameter required' }, { status: 400 });
47  }
48
49  try {
50    const token = await getAccessToken();
51
52    const params = new URLSearchParams({
53      phrase,
54      page_size: '30',
55      page,
56      fields: 'id,title,caption,display_sizes,embed_content_url,artist,collection_name,asset_family',
57      ...(orientation && { orientations: orientation }),
58    });
59
60    const response = await fetch(`${GETTY_BASE}/search/images?${params}`, {
61      headers: {
62        Authorization: `Bearer ${token}`,
63        'Api-Key': GETTY_API_KEY,
64      },
65      next: { revalidate: 300 },
66    });
67
68    if (!response.ok) {
69      return NextResponse.json(
70        { error: 'Getty search failed' },
71        { status: response.status }
72      );
73    }
74
75    const data = await response.json();
76
77    const images = data.images.map((img: any) => ({
78      id: img.id,
79      title: img.title,
80      caption: img.caption,
81      thumbnail: img.display_sizes?.find((s: any) => s.name === 'thumb')?.uri || '',
82      embedUrl: img.embed_content_url || '',
83      artist: img.artist,
84      collection: img.collection_name,
85      isEditorial: img.asset_family === 'editorial',
86    }));
87
88    return NextResponse.json({
89      images,
90      totalCount: data.result_count,
91      page: parseInt(page),
92    });
93  } catch (error) {
94    console.error('Getty API error:', error);
95    return NextResponse.json({ error: 'Failed to search Getty Images' }, { status: 500 });
96  }
97}

Store your Getty Images API key and API secret in Vercel's environment variable system. These credentials authenticate your entire application to the Getty Images API — if exposed, anyone could search the Getty catalog on your behalf and consume your API quota. Go to your Getty Images developer account at developers.gettyimages.com, navigate to your application's API credentials page, and copy your API key and API secret. These are separate from your Getty Images account login credentials — they're generated when you create a developer application. In Vercel Dashboard → Settings → Environment Variables, create two new variables: GETTY_API_KEY (your application's API key) and GETTY_API_SECRET (your application's secret key). Both should be server-only variables — do not add the NEXT_PUBLIC_ prefix, as these credentials must never reach the browser. Select all three scopes (Production, Preview, Development) and click Save. For local development, add both variables to your .env.local file. Getty's sandbox and production environments use the same API key — there is no separate sandbox environment, but the developer tier restricts access to embed-only content automatically based on your API agreement tier. After adding the variables in Vercel, redeploy your application from the Deployments tab.

1# .env.local
2GETTY_API_KEY=your_getty_api_key_here
3GETTY_API_SECRET=your_getty_api_secret_here

Getty Images has specific requirements for how images from the Embed API must be displayed. Images accessed via the embed tier must be shown using Getty's official iframe embed code — you cannot display them as plain img tags or download the image files. The iframe includes Getty's watermark and a link back to Getty Images, which is a licensing requirement. In your React component, replace the img tags in your gallery with iframe elements using the embedUrl from the API response. Getty's embed iframes are designed to be responsive — set width to 100% and let the height be determined by the iframe content, or use a fixed aspect ratio container. Update your V0-generated component to render iframes for embed-tier images. Use the embedUrl from your API response as the iframe src. Add a title attribute for accessibility. The Getty iframe handles its own loading state, but you can show a loading skeleton in the container div before the iframe loads by listening to the iframe's onLoad event. For applications that need direct image URLs (for use as CSS backgrounds, canvas drawing, or server-side processing), you must have a full commercial API licensing agreement with Getty. The embed tier is explicitly for web display only via their hosted iframe player. This is important to communicate in your app's terms of service.

1// components/GettyImageCard.tsx
2interface GettyImageCardProps {
3  id: string;
4  title: string;
5  caption?: string;
6  embedUrl: string;
7  artist?: string;
8  isEditorial: boolean;
9}
10
11export function GettyImageCard({ title, embedUrl, artist, isEditorial }: GettyImageCardProps) {
12  return (
13    <div className="rounded-lg overflow-hidden border border-gray-200 shadow-sm">
14      <div className="relative" style={{ aspectRatio: '16/9' }}>
15        {embedUrl ? (
16          <iframe
17            src={embedUrl}
18            title={title}
19            width="100%"
20            height="100%"
21            style={{ border: 'none' }}
22            allowFullScreen
23            scrolling="no"
24            referrerPolicy="no-referrer-when-downgrade"
25          />
26        ) : (
27          <div className="w-full h-full bg-gray-100 flex items-center justify-center">
28            <span className="text-gray-400 text-sm">No preview available</span>
29          </div>
30        )}
31        <span
32          className={`absolute top-2 right-2 text-xs px-2 py-0.5 rounded font-medium ${
33            isEditorial
34              ? 'bg-blue-100 text-blue-800'
35              : 'bg-green-100 text-green-800'
36          }`}
37        >
38          {isEditorial ? 'Editorial' : 'Creative'}
39        </span>
40      </div>
41      <div className="p-3">
42        <p className="text-sm font-medium line-clamp-2">{title}</p>
43        {artist && (
44          <p className="text-xs text-gray-500 mt-1">© {artist} / Getty Images</p>
45        )}
46      </div>
47    </div>
48  );
49}