How to Create an AI Chatbot on Your Phone Without Coding (Gemini API Tutorial)

How to Create an AI Chatbot on Your Phone Without Coding (Gemini API Tutorial)

Are you ready to dive into the world of AI? In today’s tutorial, you'll learn how to build your own AI chatbot directly on your smartphone—without writing complex code. Whether you're a beginner or tech enthusiast, this guide will walk you through every step using prompts and Gemini API integration.

This no-code approach leverages tools like AI Studio and Gemini API, allowing you to create a chatbot that can answer questions, generate responses, and simulate intelligent conversation—all from your phone.

 What You'll Learn

• How to use prompts to create an AI chatbot

• How to integrate Gemini API without exposing the key to users

• How to customize chatbot appearance and behavior

• How to troubleshoot API integration issues

• How to prepare your bot for real-world use

Tools You’ll Need

• A smartphone (Android recommended)

• Internet access

• Access to AI Studio

• A valid Gemini API key

• Telegram app to access pre-written prompts

 Step-by-Step Guide to Building Your AI Chatbot

Step 1: Get the Prompt from Telegram

Start by joining our Telegram channel where you’ll find all the resources and pre-written prompts. Once you're in:

• Select and copy the full chatbot prompt.

This prompt serves as the base for your chatbot's functionality.

Step 2: Open AI Studio

1. Head to AI Studio on your browser.

2. Paste the copied prompt into the editor.

3. Make sure to update the Gemini API integration if it's not already included.

4. Click Send and allow AI Studio to process and generate the chatbot code.

Step 3: Preview and Edit Your Chatbot Project

Now let’s preview the project:

1. Visit HopWeb to preview HTML code.

2. Create a new project and give it a name (e.g., D1 Chatbot).

3. Open the index.html file.

4. Delete the placeholder code and paste in your new code from AI Studio.

5. Click Preview to test the interface.

Step 4: Remove Gemini API Input from User Interface

To improve user experience:

• Remove the UI element that asks users to input their Gemini API key.

• Modify the backend so only the admin or server-side configuration stores the Gemini key.

This avoids requiring users to re-enter API keys every time they use the chatbot.

Step 5: Update the API Key in Backend

You’ll need to:

1. Search for the section of code where the API key is expected.

2. Remove duplicate inputs if any.

3. Paste your Gemini API key into the appropriate line (e.g., let API_KEY = "your_key_here";).

Additionally, change the model type from default to something like:

"model": "gemini-pro-vision-1.5"

This ensures you’re using the latest and most powerful Gemini model.

 Troubleshooting Common Issues

 Error: “API key not valid”

• This typically happens when the API input slot appears more than once in the code.

• Delete duplicate entries and leave only one valid key input line.

 Bot not responding

• Check if the API key is valid.

• Ensure no syntax errors exist in the JavaScript section.

 Customizing Your Chatbot

You can customize several features to give your chatbot a unique personality and look.

 1. Change the Title and Branding

To change the chatbot title:

<title>D1 Info</title>

 2. Update the Avatar or Bot Image

Want your chatbot to have a custom avatar like your own image?

• Scroll to the avatar section in the HTML.

• Replace the default image URL with yours.

Example:

<img src="your-image-url.jpg" alt="Chatbot Avatar">

 Full avatar customization tutorial will be shared in an upcoming post.

Where to Download Resources

All prompts, template code, and setup files are available for free via our

  Telegram channel

Final Thoughts

By now, you’ve successfully:

• Built your own AI chatbot

• Integrated the powerful Gemini API

• Customized the chatbot interface

• Troubleshot potential issues

This is just the beginning of what you can do with AI. More advanced tutorials are on the way!