How to Build a Free AI Chatbot with Google Gemini API

What if your website could answer visitors like a trained member of your team—not just say hello, but understand what they need, explain your services, point them to the right information, and even help qualify a potential lead?

You can build a starting version of that system yourself using Google’s Gemini API, a lightweight backend such as Cloudflare Workers, and a WordPress website. The interesting part is not the chat bubble itself. It is the combination of your business knowledge, instructions, references and lead-qualification workflow behind it.

What Are We Actually Building?

The architecture is simple:

Visitor
   ↓
Branded Chatbot on Your Website
   ↓
Your Backend
   ↓
Gemini API
   ↓
Website Knowledge + Business Instructions
   ↓
AI Response
   ↓
Optional Lead Qualification

• Your own brand colours
• A floating chat button
• Quick-action buttons
• Your website’s knowledge
• References to relevant pages
• A separate secure backend
• Google Gemini API
• Optional lead capture
• Customer pain-point discovery
• Product or service recommendations

Step 1: Get Your Gemini API Key

Start with Google AI Studio. Sign in with your Google account, open the API Keys area and create an API key. Google provides current setup instructions in its Gemini API documentation.

Important: do not paste the API key into your WordPress page or frontend JavaScript. Put it in your backend as a secret.

Is the Gemini API Actually Free?

Google provides a Free Tier for selected Gemini API models, but free usage is subject to model-specific limits, rate limits and Google’s current policies. That means you can start experimenting without paying for API tokens on eligible Free Tier models, but you should not describe the service as unlimited or permanently free.

Google’s current pricing documentation should be treated as the source of truth because models, limits and pricing can change.

Step 2: Choose Your AI Provider

You don’t have to build the entire system around one AI provider. Gemini is a strong starting point, while Groq and OpenRouter are useful alternatives for experimentation. Claude, OpenAI and other providers can also fit the same architecture.

Provider	Why consider it?
Google Gemini	Strong starting point with eligible Free Tier models
Groq	Fast inference and a developer-friendly API
OpenRouter	Experiment with multiple models through one API layer
Claude	Strong writing and instruction following
OpenAI	Broad ecosystem and strong general-purpose models

Step 3: Let AI Build the Chatbot Interface

You can use ChatGPT, Claude, Gemini, GitHub Copilot or another coding assistant to create the frontend. The important part is to give the coding assistant a detailed specification rather than simply asking for “a chatbot”.

Build a production-ready website chatbot widget for my business website.

The chatbot should:
- use my brand colours
- have a floating circular chat button
- open a compact chat window
- work on desktop and mobile
- include quick-action buttons
- show a typing/loading state
- support conversation history during the current session
- handle API errors gracefully
- never expose the AI API key in frontend JavaScript
- send chat requests to a separate backend API endpoint
- allow the backend provider to be changed later
- include a lead-capture flow
- ask visitors about their goals and problems
- recommend relevant products/services from my knowledge base
- never invent services, prices or policies
- clearly say when it does not know something

Before writing the final code, design the architecture and explain the files required.

Step 4: Don’t Just Tell the AI to “Know My Website”

This is where many chatbot projects go wrong. Asking an AI to “study my entire website” does not automatically create a reliable, permanent knowledge base.

A better workflow is:

Website Pages
   ↓
Extract Important Content
   ↓
Create a Structured Knowledge Base
   ↓
Store the Knowledge
   ↓
Retrieve Relevant Information
   ↓
Generate the Answer

This is the basic idea behind Retrieval-Augmented Generation (RAG). For a small website, you can start with a simple curated knowledge base and move to a full retrieval system later.

Step 5: Build the Knowledge Base

Start with the information your chatbot genuinely needs:

• Page title
• URL
• Summary
• Important facts
• Services
• FAQs
• Pricing information
• Policies
• Contact information
• Relevant references

BUSINESS
Name: Your Business

ABOUT
What the business does.

SERVICES
- Service 1
- Service 2
- Service 3

RULES
- Never invent a service.
- Never invent pricing.
- If information is unavailable, say so.
- Link visitors to the relevant page when appropriate.

Step 6: Give the AI a Clear Business Role

Your system prompt should explain who the assistant is and what it is allowed to do.

You are the AI assistant for [BUSINESS NAME].

Your job is to help website visitors understand our products,
services and content.

You should be:
- friendly
- concise
- practical
- helpful
- professional

Use information from the supplied knowledge base first.

Never invent:
- prices
- products
- services
- guarantees
- policies

If the information is unavailable, say that you don't have
that information.

When appropriate, link the visitor to the relevant website page.

Step 7: Add Quick Actions

A blank chatbot can feel intimidating. Give visitors useful starting points such as:

• What can you help me with?
• Explore services
• I’m looking for training
• I need automation help
• Talk to someone
• Get started

These buttons can start predefined conversations and make the chatbot feel more like an assistant than a blank text box.

Step 8: Turn the Chatbot Into a Small Sales Agent

This is where the project becomes much more useful for a business. Instead of immediately asking for an email address, let the AI discover what the visitor actually needs.

For example, the assistant can ask:

• What are you trying to accomplish?
• What is your biggest problem right now?
• What have you already tried?
• What type of business do you run?
• What kind of solution are you looking for?

Once the visitor has shown genuine interest, the assistant can offer a follow-up and collect contact details. This creates a lightweight AI sales and discovery workflow rather than a simple FAQ bot.

Step 9: Keep the API Key on a Separate Backend

For a WordPress website, a clean starting architecture is:

WordPress
   ↓
Chatbot JavaScript
   ↓
Cloudflare Worker
   ↓
Gemini API

The Gemini key lives in the Worker as a secret. The browser only talks to your backend endpoint. This prevents the API credential from being exposed in the page source.

Why Not Put Everything in GitHub?

GitHub is excellent for source control, backups and collaboration, but it is not the AI backend simply because your code is stored there. You can use GitHub to manage the Worker code while Cloudflare runs the backend.

GitHub
  │
  │ source code
  ↓
Cloudflare Worker
  │
  │ secure API call
  ↓
Gemini

WordPress
  │
  │ chatbot UI
  ↓
Cloudflare Worker

Step 10: Add the Chatbot to WordPress

WordPress only needs the frontend widget. Your JavaScript creates the chat window, message bubbles, quick actions, loading state and input box, then sends requests to your backend.

<div id="ai-chatbot"></div>
<script src="https://your-site.com/chatbot.js"></script>

The important security rule remains: the browser should call your Worker, not Gemini directly with a secret API key.

Step 11: Match Your Brand

Your chatbot should look like part of the website, not a random third-party box. Define your primary, secondary, dark and light colours, then apply them consistently to the chat button, header, send button, quick actions and links.

:root {
  --brand-primary: #0B64F4;
  --brand-secondary: #1F94C9;
  --brand-dark: #17324D;
  --brand-light: #F7FBFF;
}

Step 12: Add a Smart Pop-Up

Instead of forcing visitors to open the chatbot themselves, you can show a small invitation after a short delay.

For example:

Need help finding something? 👋
Ask our AI assistant.

Even better, make the invitation contextual. On a marketing article it might ask whether the visitor wants help applying the idea to their business. On a training page it can ask whether they need help choosing a learning path.

Step 13: Tell the AI Which Page the Visitor Is Reading

Your frontend can send the current page title and URL along with the visitor’s question.

{
  "message": "Can you explain this?",
  "page": {
    "title": "AI Automation for Freelancers",
    "url": "https://example.com/ai-automation/"
  }
}

Now the assistant has context. If the visitor asks “How would this help me?”, the AI has a much better idea of what “this” means.

Step 14: Add References to Your Answers

For a business website, references are extremely useful. Store a relevant URL with each important knowledge item so the assistant can point visitors back to the original page.

{
  "title": "AI Automation Training",
  "url": "https://example.com/ai-automation-training/",
  "summary": "Practical training focused on AI workflows and automation."
}

This makes the chatbot feel grounded in your website rather than pretending to know everything.

Step 15: Move Toward a Real RAG Knowledge System

Once the basic chatbot works, you can stop sending the entire knowledge base with every request. Instead, search the knowledge base first, retrieve the most relevant information, and send only that context to Gemini.

User Question
     ↓
Search Knowledge Base
     ↓
Relevant Pages / Chunks
     ↓
Gemini
     ↓
Answer + References

This approach can make the system faster, cheaper and easier to maintain as the website grows.

Gemini vs Groq vs OpenRouter

If you are experimenting, it is worth trying several providers rather than assuming one is always best.

Provider	Best starting use
Gemini	General website assistant and Google ecosystem
Groq	Fast responses and experimentation
OpenRouter	Testing multiple models through one API layer

The exact free models, quotas and rate limits change over time, so check the provider’s current documentation before relying on a specific limit.

What Is Actually Free?

Component	Starting option
Chatbot UI	₹0 if you build it yourself
Gemini API	Free Tier available for eligible models
Cloudflare Worker	Free plan available
Knowledge base	Can start with simple files/data
GitHub	Optional
High-volume AI usage	May require paid capacity

Free does not mean unlimited. Provider pricing, model availability, quotas and policies can change. Check the current provider documentation before publishing fixed quota claims or launching a high-volume chatbot.

What I Would Build First

WordPress
    ↓
Branded Chat Widget
    ↓
Cloudflare Worker
    ↓
Gemini API
    ↓
Small Curated Knowledge Base

Version 1: Chat button, branded UI, Gemini, a small knowledge base, quick actions, current-page context and links to relevant pages.

Version 2: Website-wide knowledge base, references, lead capture, email notification and conversation analytics.

Version 3: RAG, multiple AI providers, customer segmentation, CRM integration, human handoff and advanced sales qualification.

The Bigger Opportunity

The interesting product isn’t “I built a Gemini chatbot.” The more useful idea is: I built an AI assistant that understands a business, knows its website, answers questions, discovers customer problems and helps visitors find the right solution.

The same architecture can be reused for freelancers, agencies, training businesses, SaaS products, ecommerce stores, consultants and educational websites.

Final Takeaway

You don’t need an expensive chatbot platform just to put AI chat on a website. With an eligible Free Tier AI API, a lightweight backend such as Cloudflare Workers and a custom frontend, you can build a useful starting system.

The basic stack is:

Google AI Studio → Gemini API → Cloudflare Worker → WordPress

Then add branding → knowledge base → page context → references → lead qualification → customer discovery.

Start simple. Make the AI useful before making it complicated. The goal isn’t to build a chatbot that merely talks. Build one that knows what your business does and helps the visitor take the next useful step.

Sources

• Google Gemini API pricing
• Google Gemini API key documentation
• Cloudflare Workers limits
• OpenRouter pricing

Information about API pricing, models and free-tier limits can change. Check the provider’s current documentation before relying on specific quotas.