AI Chatbot with Gemini API

on

 

Building an Interactive AI Chatbot with Gemini API

In today’s digital landscape, chatbots have become essential tools for businesses and developers looking to enhance user engagement. This blog post explores a sleek, responsive chatbot implementation that leverages Google’s Gemini API to create meaningful conversations with users.

Project Overview

This chatbot application combines modern web technologies to create an intuitive chat interface with AI-powered responses. The application features:

  • A clean, responsive design that works on both desktop and mobile devices
  • Real-time text interactions with animated message displays
  • Voice input capability for hands-free operation
  • Integration with Google’s Gemini 1.5 Flash model for intelligent responses

The Technical Stack

The project uses three core web technologies:

  1. HTML — Provides the structural foundation
  2. CSS — Handles styling and animations
  3. JavaScript — Manages user interactions and API communication

Let’s break down each component:

HTML Structure

The HTML creates a simple yet effective layout:

<div class="chat-container">
    <div class="chat-header">
        <h2><i class="fas fa-robot"></i> Chatbot</h2>
        <button class="clear-btn" onclick="clearChat()">
            <i class="fas fa-trash"></i> Clear
        </button>
    </div>
    
    <div class="chat-messages" id="messages">
        <button class="scroll-btn" id="scrollBtn" onclick="scrollToBottom()">
            <i class="fas fa-arrow-down"></i>
        </button>
    </div>
    
    <div class="chat-input">
        <input type="text" id="messageInput" placeholder="Type your message...">
        <button class="voice-btn" id="voiceBtn" onclick="startVoiceRecognition()">
            <i class="fas fa-microphone"></i>
        </button>
        <button class="send-btn" onclick="sendMessage()">
            <i class="fas fa-paper-plane"></i>
        </button>
    </div>
</div>

This structure creates three main sections:

  • A header with the chatbot title and a clear button
  • A message display area with a scroll button
  • An input section with text input, voice input, and send buttons

CSS Styling

The CSS brings the interface to life with:

.chat-container {
    width: 100%;
    max-width: 700px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 90vh;
    max-height: 800px;
}
.message {
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
    font-size: 1rem;
}
.user-message {
    background: linear-gradient(45deg, #007bff, #00b4db);
    color: white;
    margin-left: auto;
    box-shadow: 0 2px 5px rgba(0,123,255,0.3);
}
.bot-message {
    background: white;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Key styling features include:

  • Gradient backgrounds for visual appeal
  • Smooth animations for message appearance
  • Different styling for user and bot messages
  • Responsive design with media queries for different screen sizes
  • Shadow effects for depth and dimension

JavaScript Functionality

The JavaScript code is the heart of the application, handling:

  1. User input processing
  2. API communication
  3. Dynamic message display
  4. Voice recognition integration

Connecting to the Gemini API

// API Configuration
const API_KEY = "Your API Key"; // Replace with your actual API key
const API_URL = `https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?key=${API_KEY}`;

async function callGeminiAPI(message) {
    const requestBody = {
        contents: [{
            parts: [{
                text: message // User message
            }]
        }]
    };
    const response = await fetch(API_URL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody)
    });
    if (!response.ok) {
        throw new Error('API request failed');
    }
    const data = await response.json();
    return data.candidates[0].content.parts[0].text;
}

Voice Recognition

The application includes voice input capabilities using the Web Speech API:

function startVoiceRecognition() {
    if (!('webkitSpeechRecognition' in window)) {
        addMessage('Sorry, your browser doesn't support voice input.');
        return;
    }
const recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.onstart = () => {
        voiceBtn.classList.add('recording');
        addMessage('Listening to your voice...');
    };
    recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        messageInput.value = transcript;
        sendMessage();
    };
    recognition.start();
}

User Experience Considerations

The project incorporates several UX enhancements:

  1. Typing indicators — Visual feedback while waiting for the AI response
  2. Smooth animations — Messages fade in gracefully
  3. Auto-scrolling — Chat automatically scrolls to show new messages
  4. Responsive design — Works seamlessly across device sizes
  5. Visual feedback — Button state changes to indicate active operations

Security Note

One important consideration: the API key is currently embedded directly in the JavaScript code, which isn’t recommended for production applications. In a real-world implementation, this would be better handled through a backend proxy to protect API credentials.

Conclusion

This chatbot project demonstrates how modern web technologies can be combined with AI APIs to create engaging user experiences. The clean design, smooth animations, and voice input capabilities make it both functional and delightful to use

Comments

Post a Comment