Hello there, nerds! Arsey here.

I've always wanted to build and integrate AI into my projects, but the lack of resources made it quite a hassle. However, as the saying goes, "your imagination is the limit!"

So, I took up the challenge and successfully built an AI-powered chatbot using Flask, HTML, CSS, and JavaScript—and guess what? I did it using only my smartphone! Impressive, right? Well, this was made possible thanks to Google AI Studio, a platform that allows developers to easily build and integrate Google’s state-of-the-art generative model, Gemini.

In this tutorial, I'll guide you step by step on how I built this chatbot so you can do it too. Let’s get coding!

Prerequisites
Before we begin, I assume you have some basic knowledge of:

✅ Python (especially Flask)
✅ JavaScript, HTML, and CSS

If you're comfortable with these, you're good to go! You can also check out the source code for this project on my GitHub.

Part 1: Setting Up the Environment

  1. Install Python
    First, ensure you have Python installed. If you haven't installed it yet, download it here and follow the installation steps.

  2. Install Required Libraries
    Now, let's install the necessary dependencies. Run the following command:

pip install flask markdown google-generativeai
  1. Get Your Google AI Studio API Key Open Google AI Studio in your browser. Sign up or log in.

googleai-studio-platform-screenshot
Navigate to the side panel.
Click on "Get API Key" and follow the steps to create a new API key.

Testing the API Key
Let's verify that our API key works by running this simple script:

import google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_API_KEY")
model = genai.GenerativeModel("gemini-2.0-flash")
response = model.generate_content("Explain how AI works")

print(response.text)

Breaking it Down:
✅ We import the google-generativeai library.
✅ We configure the AI model using genai.configure(api_key="YOUR_GEMINI_API_KEY").
✅ We choose Gemini 2.0 Flash as our model.
✅ We generate a response using model.generate_content("Explain how AI works").
✅ Finally, we print the response to see Gemini's answer.

If everything is set up correctly, you should see an AI-generated explanation of how AI works! 🎉

Making Our Chatbot Interactive

Right now, we have to manually change the prompt and rerun the script every time. That’s boring! Let’s make it interactive by allowing users to input their questions in real time.

import google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_API_KEY")
model = genai.GenerativeModel("gemini-2.0-flash")

user_input = input("Ask Gemini: ")
response = model.generate_content(user_input)

print(response.text)

output-of-code-in-vscode-terminal
What Changed?
🔹 We added input("Ask Gemini: ") to let users type their questions.
🔹 The chatbot generates a response based on user input.

But wait! There's still one problem—the script ends after one question. Let's fix that!

Building a Continuous Chat Loop
We want the chatbot to run infinitely until the user decides to exit. We’ll use a while loop for that:

import google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_API_KEY")
model = genai.GenerativeModel("gemini-2.0-flash")

# Start the chatbot loop
while True:
    user_input = input("You: ")

    # Check if the user wants to exit
    if user_input.lower() == "exit":
        print("Exiting the chatbot. Goodbye!")
        break

    # Get the model's response
    response = model.generate_content(user_input)

    # Print the response
    print("Gemini:", response.text)

Key Improvements:
✅ The chatbot now runs indefinitely until the user types "exit".
✅ We added if user_input.lower() == "exit": break to stop the chatbot gracefully.
✅ Now, it feels like a real conversation! 🚀

Wrapping Up
🎉 And that’s it! We just built an AI-powered chatbot using Google AI Studio and Flask!

In Part 2, we’ll integrate this chatbot into a Flask web application with a clean UI. Stay tuned!

Next Steps:
✔️ Check out the full Flask project on my GitHub.
✔️ Drop your questions, comments, and suggestions! Want to learn more about APIs, AI integration, or something else? Let me know, and I’ll cover it in future blogs.

With that said, I love you nerds. 🤓

C'YA in Part 2! 🚀