How to Integrate Bolt.new with YouTube Data API v3

The YouTube Data API v3 is a Google Cloud API, so you create your key through the Google Cloud Console rather than YouTube Studio. Start by going to console.cloud.google.com. If you do not have a Cloud project, click 'Select a project' > 'New project,' give it a name (e.g., 'My Bolt App'), and click 'Create.' Project creation takes about 30 seconds. With your project selected, navigate to 'APIs & Services' > 'Library' in the left sidebar. Search for 'YouTube Data API v3' and click on it. Click 'Enable.' Google takes about 10 seconds to activate the API for your project. Once enabled, go to 'APIs & Services' > 'Credentials' in the left sidebar. Click '+ Create Credentials' > 'API key.' Google generates a key immediately — copy it. For security, restrict the API key to prevent unauthorized use. Click on the newly created key to open its settings. Under 'API restrictions,' select 'Restrict key' and choose 'YouTube Data API v3' from the dropdown. Under 'Application restrictions,' for a server-side key used in a Next.js API route, you can leave it unrestricted for development. For production, consider adding 'IP addresses' restrictions using your Netlify or Bolt Cloud server IP, though serverless functions use dynamic IPs that change. The YouTube API has a free quota of 10,000 units per day — a standard search costs 100 units, a video details request costs 1 unit. Monitor quota usage in the Google Cloud Console under 'APIs & Services' > 'YouTube Data API v3' > 'Quotas.'

With your API key ready, use Bolt's AI to generate the full YouTube integration. Bolt understands the YouTube Data API v3 schema and generates proper fetch calls with the correct endpoint URLs, parameter names, and response handling. Be specific about which YouTube resources you need — the search endpoint, videos endpoint, channels endpoint, and playlistItems endpoint all have different parameters. After Bolt generates the code, you will see a Next.js API route that proxies YouTube requests server-side. This is important: calling the YouTube API directly from a React component would expose your API key in browser network requests (visible in DevTools). The API route pattern keeps your key server-side while your React components call your own `/api/youtube` endpoint. For the IFrame Player API, Bolt will generate a React component that loads the YouTube IFrame API script, creates a player instance using the `YT.Player` constructor, and handles player events. The IFrame API is loaded from YouTube's CDN (`https://www.youtube.com/iframe_api`), which works in Bolt's preview. Note that autoplay requires user interaction in modern browsers due to browser autoplay policies — the video will load paused until the user clicks play, unless it is muted.

1// app/api/youtube/route.ts
2import { NextResponse } from 'next/server';
3
4const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY;
5const BASE_URL = 'https://www.googleapis.com/youtube/v3';
6
7export async function GET(request: Request) {
8  const { searchParams } = new URL(request.url);
9  const type = searchParams.get('type');
10
11  if (!YOUTUBE_API_KEY) {
12    return NextResponse.json({ error: 'YouTube API key not configured' }, { status: 500 });
13  }
14
15  let url = '';
16  const params = new URLSearchParams({ key: YOUTUBE_API_KEY });
17
18  switch (type) {
19    case 'search': {
20      const query = searchParams.get('query') || '';
21      const maxResults = searchParams.get('maxResults') || '10';
22      params.set('part', 'snippet');
23      params.set('q', query);
24      params.set('type', 'video');
25      params.set('maxResults', maxResults);
26      params.set('order', 'relevance');
27      url = `${BASE_URL}/search?${params}`;
28      break;
29    }
30    case 'video': {
31      const videoId = searchParams.get('videoId') || '';
32      params.set('part', 'snippet,statistics,contentDetails');
33      params.set('id', videoId);
34      url = `${BASE_URL}/videos?${params}`;
35      break;
36    }
37    case 'channel': {
38      const channelId = searchParams.get('channelId') || '';
39      params.set('part', 'snippet,statistics');
40      params.set('id', channelId);
41      url = `${BASE_URL}/channels?${params}`;
42      break;
43    }
44    case 'playlist': {
45      const playlistId = searchParams.get('playlistId') || '';
46      const maxResults = searchParams.get('maxResults') || '50';
47      params.set('part', 'snippet,contentDetails');
48      params.set('playlistId', playlistId);
49      params.set('maxResults', maxResults);
50      url = `${BASE_URL}/playlistItems?${params}`;
51      break;
52    }
53    default:
54      return NextResponse.json({ error: 'Invalid type parameter' }, { status: 400 });
55  }
56
57  const response = await fetch(url);
58  if (!response.ok) {
59    const error = await response.json();
60    return NextResponse.json(error, { status: response.status });
61  }
62  return NextResponse.json(await response.json());
63}

Add your YouTube API key to the `.env` file in your Bolt project root. In Next.js, server-side environment variables (used in API routes) do not need a prefix — the key is only accessible inside server-side code and never bundled into client JavaScript. This is exactly how you want to handle your YouTube API key. Create or edit the `.env` file through Bolt's file editor and add your API key. After saving, if your Next.js dev server is running in Bolt's terminal, you may need to stop and restart it for the new environment variable to be picked up. Use the Bolt terminal to run `npm run dev`. Test the search endpoint by navigating to `/api/youtube?type=search&query=javascript+tutorial&maxResults=5` directly in your browser (or Bolt's preview URL). You should see a JSON response from YouTube with video results. If you see an error about API key, verify the key is in `.env` and the server has restarted. For the IFrame player, test by adding a known video ID (e.g., 'dQw4w9WgXcQ') to your player component — the video should load and play in Bolt's preview window. Bolt's WebContainer handles all outbound HTTPS calls to YouTube's API servers without any special configuration. The preview works exactly like a deployed environment for YouTube API calls. You will not see any CORS errors when the API calls go through your Next.js API route, since server-to-server calls do not have browser CORS restrictions.

1# .env
2YOUTUBE_API_KEY=your-google-api-key-here

The YouTube IFrame Player API is a separate system from the Data API — it handles video embedding and playback control via an iframe rather than data fetching. It works by loading a script from YouTube's CDN that creates a global `YT` object, which you use to create and control player instances. This script loads asynchronously and signals readiness by calling a global `onYouTubeIframeAPIReady` callback. In React, the IFrame API requires careful handling because React components mount and unmount, but the YouTube player wants to attach to a specific DOM element. The standard pattern uses a `useEffect` hook to load the API script and create the player when the component mounts, and a cleanup function to destroy the player on unmount. Use a `ref` to hold the player instance and a `div` element as the mount target. The player accepts parameters for autoplay, controls visibility, related videos, and more via the `playerVars` object. Key parameters: `autoplay: 1` (requires muted or user interaction), `controls: 1` (show controls), `rel: 0` (do not show related videos from other channels), `modestbranding: 1` (minimize YouTube branding), `origin: window.location.origin` (required for some security contexts). The player fires events you can listen to: `onReady` (player initialized), `onStateChange` (playing, paused, ended), `onError` (video unavailable, etc.). For Bolt's WebContainer specifically, the IFrame player works reliably in the preview window. The `origin` parameter should match the WebContainer's URL domain, which changes between sessions. For this reason, set `origin` to `window.location.origin` dynamically rather than hardcoding a domain.

1// components/YoutubePlayer.tsx
2import { useEffect, useRef, useState } from 'react';
3
4declare global {
5  interface Window {
6    YT: typeof YT;
7    onYouTubeIframeAPIReady: () => void;
8  }
9}
10
11interface YoutubePlayerProps {
12  videoId: string;
13  onReady?: () => void;
14  onEnd?: () => void;
15  width?: number;
16  height?: number;
17}
18
19export function YoutubePlayer({ videoId, onReady, onEnd, width = 640, height = 390 }: YoutubePlayerProps) {
20  const playerRef = useRef<YT.Player | null>(null);
21  const containerRef = useRef<HTMLDivElement>(null);
22  const [playerState, setPlayerState] = useState<'loading' | 'ready' | 'error'>('loading');
23
24  useEffect(() => {
25    // Load the YouTube IFrame API script if not already loaded
26    if (!window.YT) {
27      const tag = document.createElement('script');
28      tag.src = 'https://www.youtube.com/iframe_api';
29      document.head.appendChild(tag);
30    }
31
32    const initPlayer = () => {
33      if (!containerRef.current) return;
34      playerRef.current = new window.YT.Player(containerRef.current, {
35        width,
36        height,
37        videoId,
38        playerVars: {
39          autoplay: 0,
40          controls: 1,
41          rel: 0,
42          modestbranding: 1,
43          origin: window.location.origin,
44        },
45        events: {
46          onReady: () => {
47            setPlayerState('ready');
48            onReady?.();
49          },
50          onStateChange: (event: YT.OnStateChangeEvent) => {
51            if (event.data === window.YT.PlayerState.ENDED) {
52              onEnd?.();
53            }
54          },
55          onError: () => setPlayerState('error'),
56        },
57      });
58    };
59
60    if (window.YT?.Player) {
61      initPlayer();
62    } else {
63      window.onYouTubeIframeAPIReady = initPlayer;
64    }
65
66    return () => {
67      playerRef.current?.destroy();
68    };
69  }, [videoId]);
70
71  return (
72    <div className="relative">
73      <div ref={containerRef} />
74      {playerState === 'loading' && (
75        <div className="absolute inset-0 flex items-center justify-center bg-black text-white">
76          Loading player...
77        </div>
78      )}
79      {playerState === 'error' && (
80        <div className="flex items-center justify-center h-48 bg-gray-100 text-gray-600">
81          Video unavailable
82        </div>
83      )}
84    </div>
85  );
86}

For features that access user-specific YouTube data — a logged-in user's playlists, their channel's private analytics, upload management, or comment moderation — you need OAuth 2.0 instead of a plain API key. OAuth requires the user to authorize your app through Google's login flow, which uses a redirect URI (callback URL) that must be registered in Google Cloud Console. Here is the critical constraint: OAuth redirect URIs must be stable HTTPS URLs registered in advance. Bolt's WebContainer uses dynamic preview URLs that change between sessions (e.g., `https://[hash].local.webcontainer-api.io/`). You cannot register these as OAuth redirect URIs, which means OAuth-based YouTube features cannot be fully tested in the Bolt preview. You must deploy first. Deploy your app to Netlify or Bolt Cloud by connecting your GitHub account in Bolt settings and pushing to a repository, then connecting that repo in Netlify. Once deployed, you have a stable URL like `https://your-app.netlify.app`. Go to Google Cloud Console > Credentials > OAuth 2.0 Client IDs, create a new Web Application credential, and add your deployed URL plus the callback path (e.g., `https://your-app.netlify.app/api/auth/callback/google`) as an authorized redirect URI. For the OAuth implementation in Next.js, use the `googleapis` npm package which handles the OAuth token exchange. Install it in your Bolt project: in the terminal run `npm install googleapis`. The package is pure JavaScript and works in Bolt's WebContainer for the token exchange logic, though the actual OAuth redirect must go to your deployed URL.

1// app/api/youtube/auth/route.ts
2import { NextResponse } from 'next/server';
3import { google } from 'googleapis';
4
5const oauth2Client = new google.auth.OAuth2(
6  process.env.GOOGLE_CLIENT_ID,
7  process.env.GOOGLE_CLIENT_SECRET,
8  process.env.GOOGLE_REDIRECT_URI // e.g., https://your-app.netlify.app/api/youtube/callback
9);
10
11export async function GET() {
12  // IMPORTANT: This OAuth flow requires a deployed URL.
13  // The redirect URI must match exactly what is registered in Google Cloud Console.
14  // It will NOT work with the Bolt WebContainer preview URL.
15  const authUrl = oauth2Client.generateAuthUrl({
16    access_type: 'offline',
17    scope: [
18      'https://www.googleapis.com/auth/youtube.readonly',
19    ],
20  });
21  return NextResponse.redirect(authUrl);
22}
23
24// app/api/youtube/callback/route.ts
25export async function GET_CALLBACK(request: Request) {
26  const { searchParams } = new URL(request.url);
27  const code = searchParams.get('code');
28  if (!code) return NextResponse.json({ error: 'No code provided' }, { status: 400 });
29
30  const { tokens } = await oauth2Client.getToken(code);
31  oauth2Client.setCredentials(tokens);
32
33  // Store tokens in a secure httpOnly cookie or session
34  const response = NextResponse.redirect('/');
35  response.cookies.set('youtube_access_token', tokens.access_token || '', {
36    httpOnly: true,
37    secure: true,
38    maxAge: 3600,
39  });
40  return response;
41}