How to Integrate Bolt.new with Shutterstock API

1// lib/shutterstock.ts
2const SS_BASE = 'https://api.shutterstock.com/v2';
3
4function getAuthHeader(): string {
5  const clientId = process.env.SHUTTERSTOCK_CLIENT_ID!;
6  const clientSecret = process.env.SHUTTERSTOCK_CLIENT_SECRET!;
7  return `Basic ${Buffer.from(`${clientId}:${clientSecret}`).toString('base64')}`;
8}
9
10export interface SSImage {
11  id: string;
12  description: string;
13  previewUrl: string;
14  previewWidth: number;
15  previewHeight: number;
16  contributor: string;
17  categories: string[];
18}
19
20export interface SSSearchResult {
21  data: SSImage[];
22  total_count: number;
23  page: number;
24  per_page: number;
25}
26
27export async function searchImages(
28  query: string,
29  page = 1,
30  perPage = 20,
31  orientation?: 'horizontal' | 'vertical' | 'square'
32): Promise<SSSearchResult> {
33  const url = new URL(`${SS_BASE}/images/search`);
34  url.searchParams.set('query', query);
35  url.searchParams.set('page', String(page));
36  url.searchParams.set('per_page', String(perPage));
37  url.searchParams.set('view', 'full');
38  if (orientation) url.searchParams.set('orientation', orientation);
39
40  const res = await fetch(url.toString(), {
41    headers: { Authorization: getAuthHeader() },
42  });
43
44  if (!res.ok) throw new Error(`Shutterstock search failed: ${res.status}`);
45
46  const json = await res.json();
47  return {
48    data: json.data.map((item: Record<string, unknown>) => ({
49      id: item.id,
50      description: item.description,
51      previewUrl: (item.assets as Record<string, { url: string; width: number; height: number }>)?.preview?.url ?? '',
52      previewWidth: (item.assets as Record<string, { url: string; width: number; height: number }>)?.preview?.width ?? 0,
53      previewHeight: (item.assets as Record<string, { url: string; width: number; height: number }>)?.preview?.height ?? 0,
54      contributor: (item.contributor as { id: string })?.id ?? '',
55      categories: (item.categories as Array<{ name: string }>)?.map((c) => c.name) ?? [],
56    })),
57    total_count: json.total_count,
58    page: json.page,
59    per_page: json.per_page,
60  };
61}

1// app/api/shutterstock/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { searchImages } from '@/lib/shutterstock';
4
5export async function GET(request: NextRequest) {
6  const params = request.nextUrl.searchParams;
7  const query = params.get('q');
8  const page = parseInt(params.get('page') ?? '1', 10);
9  const perPage = parseInt(params.get('per_page') ?? '20', 10);
10  const orientation = params.get('orientation') as 'horizontal' | 'vertical' | 'square' | undefined;
11
12  if (!query || query.length < 2) {
13    return NextResponse.json({ data: [], total_count: 0, page: 1, per_page: perPage });
14  }
15
16  try {
17    const results = await searchImages(query, page, perPage, orientation);
18    return NextResponse.json(results);
19  } catch (error) {
20    console.error('Shutterstock search error:', error);
21    return NextResponse.json({ error: 'Search failed' }, { status: 500 });
22  }
23}

1// app/api/shutterstock/license/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { cookies } from 'next/headers';
4
5export async function POST(request: NextRequest) {
6  const cookieStore = await cookies();
7  const accessToken = cookieStore.get('ss_access_token')?.value;
8
9  if (!accessToken) {
10    return NextResponse.json({ error: 'Not authenticated with Shutterstock' }, { status: 401 });
11  }
12
13  const { imageId, format = 'jpg', subscriptionId } = await request.json();
14
15  const licenseRes = await fetch('https://api.shutterstock.com/v2/images/licenses', {
16    method: 'POST',
17    headers: {
18      Authorization: `Bearer ${accessToken}`,
19      'Content-Type': 'application/json',
20    },
21    body: JSON.stringify({
22      images: [{ image_id: imageId, subscription_id: subscriptionId, format }],
23    }),
24  });
25
26  if (!licenseRes.ok) {
27    const err = await licenseRes.json();
28    return NextResponse.json({ error: err }, { status: licenseRes.status });
29  }
30
31  const licenseData = await licenseRes.json();
32  const licenseId = licenseData.data[0]?.license_id;
33
34  // Get download URL
35  const downloadRes = await fetch(
36    `https://api.shutterstock.com/v2/images/licenses/${licenseId}/downloads`,
37    { method: 'POST', headers: { Authorization: `Bearer ${accessToken}` } }
38  );
39
40  const downloadData = await downloadRes.json();
41  return NextResponse.json({ downloadUrl: downloadData.url });
42}