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...
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...
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...
Conclusion
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.