Bolt.new AI and YouTube API integration: Step-by-Step Guide 2025

 

Step One: Obtain a YouTube API Key from Google Cloud Console

 

• Go to the Google Cloud Console and create a new project if you haven’t already.
• Enable the YouTube Data API v3 for your project.
• Create an API key under the Credentials section.
• Keep your API key safe. You will add it to your project configuration (using Bolt.new secrets or a configuration file).

 

Step Two: Create a File to Handle YouTube API Requests

 

• Create a new file named youtube.ts in your Bolt.new project. This file will contain the functions to interact with the YouTube API.
• Add the following code snippet to youtube.ts. It uses the built-in fetch to make API requests so that no additional dependency installation is needed:

// youtube.ts

const YOUTUBEAPIKEY: string = process.env.YOUTUBEAPIKEY || 'YOURAPIKEY_HERE';

interface YouTubeVideo {
  id: string;
  title: string;
  description: string;
  thumbnail: string;
}

export async function searchYouTubeVideos(query: string): Promise {
  const endpoint = https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q=${encodeURIComponent(query)}&key=${YOUTUBE_API_KEY}&maxResults=5;

  try {
    const response = await fetch(endpoint);
    if (!response.ok) {
      throw new Error('YouTube API request failed with status ' + response.status);
    }
    const data = await response.json();
    const videos: YouTubeVideo[] = data.items.map((item: any) => ({
      id: item.id.videoId,
      title: item.snippet.title,
      description: item.snippet.description,
      thumbnail: item.snippet.thumbnails.default.url,
    }));
    return videos;
  } catch (error) {
    console.error('Error fetching YouTube videos:', error);
    return [];
  }
}

 

Step Three: Configure Your API Key Within Bolt.new

 

• Since Bolt.new AI does not have a terminal, you need to add your API key in the configuration section provided by the platform.
• If Bolt.new provides a secrets or configuration management feature, add a key named YOUTUBEAPIKEY with your API key as its value.
• If not, replace 'YOURAPIKEY_HERE' in the code snippet with your actual API key, though using secrets is preferred for security.

 

Step Four: Integrate YouTube API Calls in Your Main Application File

 

• Open your main TypeScript file (e.g., index.ts or main.ts) in your Bolt.new project.
• Import the function from youtube.ts and use it wherever you need to search for YouTube videos. Add the following code where appropriate in your main file:

// index.ts (or main.ts)

import { searchYouTubeVideos } from './youtube';

// Example function to display search results
async function displayYouTubeSearchResults() {
  const query = 'Bolt.new AI tutorial';
  const videos = await searchYouTubeVideos(query);
  
  // For demonstration, log the video details; integrate with your UI as needed
  console.log('Search Results:', videos);
}

// Call the function (you can trigger this based on user actions in your app)
displayYouTubeSearchResults();

 

Step Five: Deploy and Test Your Changes

 

• Save all changes in your Bolt.new project.
• Use the platform’s built-in preview or deployment option to run your project.
• Open the console/logs to verify that the YouTube API call is working. You should see the list of videos printed out from the displayYouTubeSearchResults function.
• If errors occur, check that your API key is correctly configured and that you have enabled the YouTube Data API for your project.

 

Final Notes

 

• This setup is designed to integrate YouTube API calls within a Bolt.new AI project using TypeScript without needing terminal commands.
• Adjust the code to integrate the API results into your project’s UI components as needed.
• Make sure to handle sensitive data securely by storing API keys in configuration or secret management provided by Bolt.new.