Demo: github.cvroasted.com

In recent years, Artificial Intelligence (AI) has rapidly advanced and is now being applied in various fields, from business to research and technology development. One of the emerging AI systems gaining attention is Gemini AI—the latest AI product from Google, which integrates sophisticated machine learning models to perform tasks ranging from natural language processing to real-time information retrieval.

Gemini AI is designed to provide a more human-like and adaptive interaction experience across platforms, one of which is the software development world. An interesting example of Gemini AI's implementation is in a mini project we will discuss here, called Github Roasted—an app that integrates the Github API with Gemini AI to provide humorous "roasts" based on a user's Github profile data.

Tech Stack Overview

For this project, we will use the following technologies:

Next.js 15: A popular React framework for building fast, dynamic web applications. Next.js features like server-side rendering, dynamic routing, and built-in API routes simplify the app development process.
Tailwind CSS: A utility-first CSS framework that allows us to design responsive, modern UI without writing extensive custom CSS.

By combining these technologies, we'll create a powerful, performant web application with an attractive design. Let's get started with building this project.

Tutorial: Build Github Roasted with Gemini AI

Step 1: Set Up Project Template from the Repo

First, we need to clone the project template provided on GitHub. This template comes pre-configured with the basic structure and some initial settings to help you get started faster.

Visit the following repository: https://github.com/yusupsupriyadi/github-roast
Clone the repository to your local machine or fork it if you want to keep a personal:
```
git clone https://github.com/yusupsupriyadi/github-roast.git
```
Navigate to the project directory:
```
cd github-roast
```
Install the required dependencies:
```
npm install
```

Step 2: Prepare Gemini AI API Token

In order to use Gemini AI, you need to set up an API token, which can be accessed through your Google Cloud account. If you haven't yet obtained access to Gemini AI, follow the steps below to get the API token:

Follow this step-by-step tutorial on YouTube to get your Gemini AI API token for free: Tutorial Gemini AI API Token - YouTube
Copy the API token you receive after completing the tutorial.

Step 3: Prepare GitHub Personal Access Token

In addition to Gemini AI, we also need a Personal Access Token from GitHub to access user profile data through the GitHub API.

Go to the GitHub Personal Access Tokens page.
Click Generate new token, select the necessary scopes (e.g., read:user for reading user profile), and generate your token.
Copy the generated token to use it later.

Step 4: Add Tokens to .env File

Now that we have gathered all the necessary data, let's store the API keys securely in the .env file. This will prevent sensitive information from being exposed. Create a .env file in the root directory of your project and add the following:


API_KEY_GEMINI_AI=your_gemini_api_key
GITHUB_API_TOKEN=your_github_api_token

Make sure to replace your_gemini_api_key with the Gemini API key you obtained and your_github_api_token with your GitHub personal access token.

Step 5: Run the Application

With everything set up, it's time to run the application and see it in action:

Run the following command in your terminal:
```
npm run dev
```
The app will run on localhost, usually at http://localhost:3000. Open this URL in your browser to view the app.

The app will display a selected GitHub user's profile, and Gemini AI will provide funny "roasts" based on the information available in their profile. Try entering different GitHub profiles and see how Gemini AI responds with unique comments every time.

Conclusion

By using Gemini AI and the GitHub API, you can create an interactive and fun application to explore how AI can enhance user experiences. Combining modern technologies like Next.js and Tailwind CSS makes it easier and more efficient to develop such applications. Feel free to explore and extend this project with additional features as you learn more about API integrations and using AI in software development.

If you'd like to learn more, check out the full code on GitHub and experiment with this project to improve your understanding of API integration and AI usage in software development.

Happy coding!

Blog

Github Roasted with Gemini AI