• Video to Blog

  • AffiliatesPricingBlog

    How to Create a YouTube Video Idea Generator with AI using NextJS

    Andrew Petrovics
    May 10, 2024

    In this tutorial, we are going to walk through how to create a full fledge NextJS app that can generate YouTube Video ideas using AI.

    We will be using NextJS for a frontend and backend along with Typescript.

    For our AI, we will show how you can use OpenAI (GPT) or Claude AI

    While the app we will build will focus just on generating YouTube video ideas, the same app can be used to generate anything with AI.

    The full source code is available here.

    Let's get started...

    Step 1 - Create NextJS project

    First thing we need to do is create a NextJS app.

    If you don't already have NodeJS installed, you can install it here.

    Once you have NodeJS installed, create a directory somewhere on your local machine and navigate in that directory and then initialize a NextJS app using the following commands.

    Name your project something like `youtube-idea-generator` and then just accept all the defaults like this...

    Screenshot of terminal after NextJS app is created

    If you run into any issues, NextJS has great documentation and they walk through creating an app here.

    Step 2 - Install Dependencies

    Next, we need to install our dependencies which include the following...

    ...along with a few other dependencies that will help get information from YouTube.

    You can install all of the dependencies using the following commands...

    Step 3 - Build the Frontend

    Now we can build our user interface which will initially consist of a textbox and a button.

    Paste the following code in /app/Page.tsx

    You can now run your app using npm run dev.

    Once you run your app you can navigate to http://localhost:3000 in your browser and you should see something like this...

    Screenshot of initial UI for NextJS app

    Step 4 - Build the Backend

    Next step is to build the backend where we take in a YouTube channel URL and use that to extract information about the channel and feed that information to our AI to generate suggestions for our next video.

    Create a file in the /app directory called /api/route.ts and then paste the following code in the file...

    Be sure to paste in your API keys for either OpenAI or Claude.

    There's a lot going on with that code so I will explain as best as I can, but basically this code creates an endpoint that does the following...

    • Parses the NextJS request to get a channel URL param
    • Uses the channel URL param to get a channel ID
    • Uses the channel ID to get the channel information and get recent videos
    • Uses the channel information and videos to create an AI prompt
    • Sends the prompt to AI using OpenAI or Claude
    • Waits for the AI response and parses into JSON
    • Returns the result

    Step 5 - Wire up the Backend and Render the result

    Now that our endpoint is created we can call the endpoint on the frontend and display the results.

    Paste the following code into /app/Page.tsx which just expands upon the previous code we had...

    The previous code simply calls the API endpoint we just added and then renders the result.

    Once you have updated the code you can try pasting in a channel URL in the box and clicking the button and seeing the results which should look something like this...

    Screenshot of complete UI


    There you go! You just successfully created a full app that uses AI to generate YouTube suggestions using just a channel URL.

    You can easily modify this app to use AI for anything really.

    If you want to see a more built out demo of this, you can check it out part of our free tools for YouTube creators.

    Also, the full source code for the example project is GitHub.