Gemini AI Chatbot UI Showcase

Explore the diverse visual identities of the Gemini AI chatbot, crafted with Tailwind CSS, Pure CSS and Bootstrap 5.

Gemini API AI Chatbot, Your Style

Discover how the Gemini AI chatbot can be styled. Each section highlights a unique implementation, complete with dark and light mode previews.

Tailwind CSS Chatbot

A sleek and highly customizable UI, built efficiently with Tailwind CSS utility classes. It offers rapid development and a modern, consistent design.

View Demo
Tailwind CSS Chatbot Dark Mode Screenshot

Pure CSS Chatbot

A lightweight and highly controlled implementation, crafted with custom CSS. This version prioritizes minimal external dependencies and offers complete styling flexibility.

View Demo
CSS-Only Chatbot Dark Mode Screenshot

Bootstrap 5 Chatbot

A robust and responsive interface, leveraging Bootstrap 5's comprehensive components and utility classes for a familiar and accessible user experience.

View Demo
Bootstrap 5 Chatbot Dark Mode Screenshot


How to Run These Chatbots

To get any of these Gemini chatbot UIs up and running, follow these simple steps:


  1. Clone Repo & Open index.html:
  2. Get an API Key:
  3. Insert API Key:
    • Open the HTML file of the specific chatbot UI you want to run (e.g., csschatbot.html, tailwindchatbot.html, bootstrapchatbot.html) in a text editor.
    • Locate the JavaScript section (usually at the bottom of the <body> or in a linked .js file).
    • Find the const API_KEY = ""; line and paste your newly generated API key between the double quotes.
  4. Save and Open:
    • Save the HTML file.
    • Open the HTML file directly in your web browser.
  5. Start Chatting!
    • The chatbot should now be functional. If the API key is still missing or incorrect, an instructional message will appear in the chat.

For production environments, consider securing your API key using server-side proxies or environment variables to prevent direct exposure in client-side code.