How to Integrate Bolt.new with Pixabay API

1// lib/pixabay.ts
2const PIXABAY_BASE = 'https://pixabay.com/api';
3
4export interface PixabayImage {
5  id: number;
6  pageURL: string;
7  type: string;
8  tags: string;
9  previewURL: string;
10  previewWidth: number;
11  previewHeight: number;
12  webformatURL: string;
13  webformatWidth: number;
14  webformatHeight: number;
15  largeImageURL: string;
16  imageWidth: number;
17  imageHeight: number;
18  downloads: number;
19  likes: number;
20  views: number;
21  user: string;
22  userImageURL: string;
23}
24
25export interface PixabayVideo {
26  id: number;
27  pageURL: string;
28  tags: string;
29  duration: number;
30  picture_id: string;
31  user: string;
32  userImageURL: string;
33  views: number;
34  downloads: number;
35  likes: number;
36  videos: {
37    tiny: { url: string; width: number; height: number; size: number };
38    small: { url: string; width: number; height: number; size: number };
39    medium: { url: string; width: number; height: number; size: number };
40    large: { url: string; width: number; height: number; size: number };
41  };
42}
43
44export interface PixabaySearchOptions {
45  imageType?: 'all' | 'photo' | 'illustration' | 'vector';
46  orientation?: 'all' | 'horizontal' | 'vertical';
47  category?: string;
48  colors?: string;
49  order?: 'popular' | 'latest';
50  page?: number;
51  perPage?: number;
52  safeSearch?: boolean;
53}
54
55export async function searchImages(
56  query: string,
57  options: PixabaySearchOptions = {}
58): Promise<{ hits: PixabayImage[]; total: number; totalHits: number }> {
59  const params = new URLSearchParams({
60    key: process.env.PIXABAY_API_KEY!,
61    q: query,
62    image_type: options.imageType ?? 'photo',
63    orientation: options.orientation ?? 'all',
64    order: options.order ?? 'popular',
65    page: String(options.page ?? 1),
66    per_page: String(Math.min(options.perPage ?? 20, 200)),
67    safesearch: options.safeSearch !== false ? 'true' : 'false',
68  });
69
70  if (options.category) params.set('category', options.category);
71  if (options.colors) params.set('colors', options.colors);
72
73  const res = await fetch(`${PIXABAY_BASE}/?${params}`);
74  if (!res.ok) throw new Error(`Pixabay API error: ${res.status}`);
75  return res.json();
76}
77
78export async function searchVideos(
79  query: string,
80  options: { order?: 'popular' | 'latest'; page?: number; perPage?: number } = {}
81): Promise<{ hits: PixabayVideo[]; total: number; totalHits: number }> {
82  const params = new URLSearchParams({
83    key: process.env.PIXABAY_API_KEY!,
84    q: query,
85    order: options.order ?? 'popular',
86    page: String(options.page ?? 1),
87    per_page: String(Math.min(options.perPage ?? 20, 200)),
88  });
89
90  const res = await fetch(`${PIXABAY_BASE}/videos/?${params}`);
91  if (!res.ok) throw new Error(`Pixabay Videos API error: ${res.status}`);
92  return res.json();
93}

1// app/api/pixabay/images/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { searchImages } from '@/lib/pixabay';
4
5export async function GET(request: NextRequest) {
6  const params = request.nextUrl.searchParams;
7  const query = params.get('q') ?? '';
8
9  if (!query.trim()) {
10    return NextResponse.json({ hits: [], total: 0, totalHits: 0 });
11  }
12
13  try {
14    const results = await searchImages(query, {
15      imageType: (params.get('type') as 'photo' | 'illustration' | 'vector') ?? 'photo',
16      orientation: (params.get('orientation') as 'horizontal' | 'vertical' | 'all') ?? 'all',
17      order: (params.get('order') as 'popular' | 'latest') ?? 'popular',
18      page: parseInt(params.get('page') ?? '1', 10),
19      perPage: parseInt(params.get('per_page') ?? '20', 10),
20      safeSearch: true,
21    });
22
23    // Cache for 5 minutes
24    return NextResponse.json(results, {
25      headers: { 'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=60' },
26    });
27  } catch (error) {
28    console.error('Pixabay search error:', error);
29    return NextResponse.json({ error: 'Image search failed' }, { status: 500 });
30  }
31}

1// utils/download.ts
2export async function downloadMedia(url: string, filename: string): Promise<void> {
3  try {
4    const response = await fetch(url);
5    const blob = await response.blob();
6    const objectUrl = URL.createObjectURL(blob);
7    
8    const link = document.createElement('a');
9    link.href = objectUrl;
10    link.download = filename;
11    document.body.appendChild(link);
12    link.click();
13    document.body.removeChild(link);
14    URL.revokeObjectURL(objectUrl);
15  } catch (error) {
16    console.error('Download failed:', error);
17    // Fallback: open in new tab
18    window.open(url, '_blank');
19  }
20}
21
22// Usage in component:
23// downloadMedia(image.largeImageURL, `pixabay-${image.id}.jpg`);