AI Chatbot Using Gemini

Introduction:

Generative AI is revolutionizing how we interact with technology, and Google Gemini Pro is one of the leading models for creating human-like text responses. In this tutorial, we'll guide you through creating a generative AI chatbot using Google Gemini Pro and Next.js—a modern React framework known for its fast, efficient, and scalable web applications.

By the end of this guide, you’ll have a fully functional generative AI chatbot running in a Next.js environment, ready for deployment.

Step 1: Setting Up Your Next.js Project
To get started, you’ll first need to set up your Next.js environment. If you don’t have it installed yet, you can easily do so by running the following commands:

1.2 Create a New Next.js App
Once Node.js is installed, create a new Next.js app by running:

Code Snippet

# Step 1: Create a new Next.js project
npx create-next-app my-ai-chatbot

# Step 2: Navigate into your project directory
cd my-ai-chatbot

# Step 3: Install dependencies for API requests (Axios)
npm install axios

# Step 4: Install dotenv to manage environment variables
npm install dotenv

# Step 5: Create a `.env` file to store your Google Gemini API key
echo "NEXT_PUBLIC_GEMINI_API_KEY=your-api-key-here" > .env

# Step 6: Start the development server
npm run dev

# Now, go to http://localhost:3000 to view your chatbot in action!

Step 2: Build the Chatbot UI in Next.js
Now it’s time to build the chatbot interface. We'll create a simple input box for users to type their questions and a section to display the generated responses.

2.1 Edit pages/index.js
Open the pages/index.js file, and replace its content with the following code to create the basic UI for the chatbot:

Code Snippet

import { useState } from 'react'
import axios from 'axios'

export default function Home() {
  const [userInput, setUserInput] = useState('')
  const [response, setResponse] = useState('')
  const [loading, setLoading] = useState(false)

  const handleInputChange = (e) => {
    setUserInput(e.target.value)
  }

  const handleSubmit = async (e) => {
    e.preventDefault()

    if (!userInput) return

    setLoading(true)
    setResponse('')
    
    try {
      const res = await axios.post('/api/chatbot', { prompt: userInput })
      setResponse(res.data.reply)
    } catch (error) {
      setResponse("Sorry, something went wrong.")
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={{ padding: '20px' }}>
      <h1>Generative AI Chatbot</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={userInput}
          onChange={handleInputChange}
          placeholder="Ask me anything..."
          rows="4"
          cols="50"
          style={{ width: '100%' }}
        />
        <button type="submit" disabled={loading}>
          {loading ? 'Thinking...' : 'Ask'}
        </button>
      </form>
      {response && <div><h2>Response:</h2><p>{response}</p></div>}
    </div>
  )
}

This code defines a simple form with a text input area where users can type their questions. Upon submission, the input is sent to a Next.js API route that interacts with Google Gemini Pro

Step 3: Create an API Route to Handle the Request
Next, create an API route in Next.js to interact with Google Gemini Pro and get the chatbot’s response.

3.1 Create the chatbot.js API Route
In the ages/apidirectory, create a new file named chatbot.js:

Code Snippet

mkdir pages/api
touch pages/api/chatbot.js

Now, open chatbot.js and add the following code:

Code Snippet

import axios from 'axios'

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { prompt } = req.body

    if (!prompt) {
      return res.status(400).json({ error: 'Prompt is required' })
    }

    try {
      const response = await axios.post(
        'https://api.gemini.com/generate-text', // Example endpoint, adjust as needed
        {
          prompt,
          apiKey: process.env.NEXT_PUBLIC_GEMINI_API_KEY,
        }
      )
      
      const reply = response.data.text // Assuming the response has a 'text' field
      return res.status(200).json({ reply })
    } catch (error) {
      console.error(error)
      return res.status(500).json({ error: 'Failed to generate response' })
    }
  } else {
    res.status(405).json({ error: 'Method Not Allowed' })
  }
}

This API route listens for a POST request containing the user’s prompt and sends it to the Google Gemini Pro API. The response is then returned to the frontend for display.

Step 4: Test Your Chatbot
Now that everything is set up, it's time to test your chatbot. Start the development server by running:

Code Snippet

npm run dev

Go to http://localhost:3000 in your browser, and you should see your chatbot UI. Enter a prompt, and the chatbot should generate a response based on the input.

Step 5: Deploy Your App
Once you’ve finished testing, you can deploy your Next.js app. A popular choice for Next.js deployment is Vercel:

Push your code to GitHub.
Go to Vercel and log in.
Click "New Project" and connect your GitHub repository.
Vercel will automatically deploy your app and provide a URL for your chatbot.

Conclusion
Congratulations! You’ve now built a generative AI chatbot using Google Gemini Pro in a Next.js environment. This tutorial covered everything from setting up your Next.js app to interacting with Google Gemini Pro’s API and deploying your chatbot online.

Feel free to expand your chatbot with additional features, such as handling more complex conversations or adding more advanced error handling. The possibilities are limitless!