How to Integrate Bolt.new with Getty Images API

1// lib/getty.ts
2export async function gettyRequest<T>(
3  endpoint: string,
4  queryParams: Record<string, string | number | boolean> = {}
5): Promise<T> {
6  const apiKey = process.env.GETTY_API_KEY;
7
8  const params = new URLSearchParams();
9  Object.entries(queryParams).forEach(([key, value]) => {
10    if (value !== undefined && value !== null && value !== '') {
11      params.append(key, String(value));
12    }
13  });
14
15  const url = `https://api.gettyimages.com/v3${endpoint}${params.toString() ? '?' + params.toString() : ''}`;
16
17  const response = await fetch(url, {
18    headers: {
19      'Api-Key': apiKey!,
20      'Accept-Language': 'en-US',
21      'Content-Type': 'application/json',
22    },
23  });
24
25  if (!response.ok) {
26    const errorText = await response.text();
27    throw new Error(`Getty API error ${response.status}: ${errorText}`);
28  }
29
30  return response.json() as Promise<T>;
31}

1// app/api/images/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { gettyRequest } from '@/lib/getty';
4
5interface GettyImage {
6  id: string;
7  title: string;
8  caption: string;
9  artist: string;
10  asset_type: string;
11  date_created: string;
12  display_sizes: Array<{ name: string; uri: string }>;
13  keywords: Array<{ text: string }>;
14}
15
16interface GettySearchResponse {
17  result_count: number;
18  images: GettyImage[];
19}
20
21export async function GET(request: NextRequest) {
22  const { searchParams } = new URL(request.url);
23  const q = searchParams.get('q') || '';
24  const page = parseInt(searchParams.get('page') || '1');
25  const pageSize = Math.min(parseInt(searchParams.get('pageSize') || '20'), 100);
26  const assetType = searchParams.get('assetType') || 'creative';
27  const orientation = searchParams.get('orientation') || '';
28
29  if (!q) {
30    return NextResponse.json({ images: [], totalCount: 0 });
31  }
32
33  const data = await gettyRequest<GettySearchResponse>('/search/images', {
34    phrase: q,
35    page,
36    page_size: pageSize,
37    asset_type: assetType,
38    ...(orientation && { orientations: orientation }),
39    fields: 'id,title,caption,artist,asset_type,date_created,display_sizes,keywords',
40    sort_order: 'best_match',
41  });
42
43  const getDisplayUrl = (sizes: Array<{ name: string; uri: string }>, name: string) =>
44    sizes.find((s) => s.name === name)?.uri || '';
45
46  const images = (data.images || []).map((img) => ({
47    id: img.id,
48    title: img.title,
49    caption: img.caption,
50    artist: img.artist,
51    assetType: img.asset_type,
52    dateCreated: img.date_created,
53    thumbUrl: getDisplayUrl(img.display_sizes, 'thumb'),
54    previewUrl: getDisplayUrl(img.display_sizes, 'preview'),
55    compUrl: getDisplayUrl(img.display_sizes, 'comp'),
56    keywords: img.keywords?.slice(0, 8).map((k) => k.text) || [],
57  }));
58
59  return NextResponse.json({ images, totalCount: data.result_count, page, pageSize });
60}

1// app/images/[id]/page.tsx
2import { gettyRequest } from '@/lib/getty';
3import { notFound } from 'next/navigation';
4
5interface GettyImageDetail {
6  id: string;
7  title: string;
8  caption: string;
9  artist: string;
10  date_created: string;
11  asset_type: string;
12  display_sizes: Array<{ name: string; uri: string; is_watermarked: boolean }>;
13  keywords: Array<{ text: string; type: string }>;
14}
15
16type Props = { params: { id: string } };
17
18export async function generateMetadata({ params }: Props) {
19  const image = await gettyRequest<GettyImageDetail>(`/images/${params.id}`)
20    .catch(() => null);
21  if (!image) return { title: 'Image Not Found' };
22  return {
23    title: `${image.title} | Getty Images`,
24    description: image.caption?.slice(0, 155),
25  };
26}
27
28export default async function ImageDetailPage({ params }: Props) {
29  const image = await gettyRequest<GettyImageDetail>(`/images/${params.id}`, {
30    fields: 'id,title,caption,artist,date_created,asset_type,display_sizes,keywords',
31  }).catch(() => null);
32
33  if (!image) notFound();
34
35  const compImage = image.display_sizes?.find((s) => s.name === 'comp');
36  const gettyLicenseUrl = `https://www.gettyimages.com/detail/photo/${image.id}`;
37
38  return (
39    <div className="max-w-4xl mx-auto px-4 py-8">
40      <div className="relative aspect-video bg-gray-100 rounded-lg overflow-hidden mb-6">
41        {compImage && (
42          <img
43            src={compImage.uri}
44            alt={image.caption || image.title}
45            className="w-full h-full object-contain"
46          />
47        )}
48        <span className="absolute top-2 right-2 text-xs bg-black/60 text-white px-2 py-1 rounded">
49          {image.asset_type === 'editorial' ? 'Editorial Use Only' : 'Creative'}
50        </span>
51      </div>
52      <h1 className="text-2xl font-bold mb-2">{image.title}</h1>
53      <p className="text-gray-600 mb-4">{image.caption}</p>
54      <div className="flex gap-4 text-sm text-gray-500 mb-6">
55        <span>Photo by: {image.artist}</span>
56        <span>Date: {new Date(image.date_created).toLocaleDateString()}</span>
57        <span>ID: {image.id}</span>
58      </div>
59      <a
60        href={gettyLicenseUrl}
61        target="_blank"
62        rel="noopener noreferrer"
63        className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700"
64      >
65        License on Getty Images
66      </a>
67    </div>
68  );
69}