Build an AI Chatbot Faster Than Your Morning Coffee Run With This Guide | HackerNoon

AI-powered chatbots can enhance user experience and automate responses effectively. In this tutorial, you’ll learn how to quickly build a chatbot using React, Vite, and Cohere’s API, with a backend integration using Express. With its simplicity and speed, Vite makes it easy to set up modern JavaScript applications.

This architecture prevents exposing sensitive API keys by routing requests through a server.

What You’ll Learn

• Setting up a basic React project with Vite.
• Using Cohere’s AI platform for natural language generation.
• Creating an Express server to interact with Cohere’s API.
• Building a responsive chatbot interface in React.

Prerequisites

• Basic knowledge of React, JavaScript, and Node.js.
• Node.js installed on your system.
• A Cohere account (sign up here to get an API key)

Step 1: Set Up Your React Project

1. Create a new React project using Vite:

npm create vite@latest ai-chatbot -- --template react
cd ai-chatbot
npm install

2. Start the development server:

npm run dev

3. Open the project in your favorite code editor.

Step 2: Create the Express Server

1. Initialize a new Node.js project in the same directory:

   mkdir server && cd server
   npm init -y
   

2. Install the required packages:

   npm install express cors dotenv node-fetch
   

3. Update package.json file to use the type module to enable use of native imports:

   {
     "name": "server",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "type": "module",
     "scripts": {
       "test": "echo "Error: no test specified" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "dependencies": {
       "cors": "^2.8.5",
       "dotenv": "^16.4.7",
       "express": "^4.21.2",
       "node-fetch": "^3.3.2"
     }
   }
   

4. Create a file named server.js in the server directory and add the following code:

   import 'dotenv/config'
   import express from 'express';
   import cors from 'cors';
   import fetch from 'node-fetch';
   
   const app = express();
   const PORT = 5000;
   
   app.use(cors());
   app.use(express.json());
   
   app.post('/generate', async (req, res) => {
     const { prompt } = req.body;
   
     if (!prompt) {
       return res.status(400).json({ error: 'Prompt is required' });
     }
   
     try {
       const response = await fetch('https://api.cohere.ai/v1/generate', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${process.env.COHERE_API_KEY}`,
         },
         body: JSON.stringify({
           model: 'command-xlarge-nightly',
           prompt: `User: ${prompt}nBot:`,
           max_tokens: 100,
         }),
       });
   
       const data = await response.json();
       res.json(data.generations[0].text.trim());
     } catch (error) {
       console.error('Error calling Cohere API:', error);
       res.status(500).json({ error: 'Failed to generate response' });
     }
   });
   
   app.listen(PORT, () => {
     console.log(`Server running on http://localhost:${PORT}`);
   });
   
   
   

5. Create a .env file in the server directory:

   COHERE_API_KEY=your_cohere_api_key_here
   

6. Start the server:

   node server.js
   

   Important: Never share your .env file or commit it to version control. Add .env to your .gitignore file.

Step 3: Build the Chatbot Interface

Update the App.jsx file with the following code:

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [messages, setMessages] = useState([]);
  const [userInput, setUserInput] = useState('');
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!userInput.trim()) return;

    const newMessages = [...messages, { sender: 'user', text: userInput }];
    setMessages(newMessages);
    setUserInput('');
    setLoading(true);

    try {
      const response = await fetch('http://localhost:5000/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt: userInput }),
      });

      const botReply = await response.text();
      setMessages([...newMessages, { sender: 'bot', text: botReply }]);
    } catch (error) {
      console.error('Error fetching bot reply:', error);
      setMessages([
        ...newMessages,
        { sender: 'bot', text: 'Sorry, something went wrong.' },
      ]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="chat-container">
      <div className="chatbox">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.sender}`}>
            {msg.text}
          </div>
        ))}
        {loading && <div className="message bot">Typing...</div>}
      </div>
      <div className="input-container">
        <input
          type="text"
          value={userInput}
          onChange={(e) => setUserInput(e.target.value)}
          placeholder="Type your message..."
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
};

export default App;

Step 4: Add Styling

Create a file named App.css for styling the chatbot interface:

code.chat-container {
  font-family: Arial, sans-serif;
  max-width: 500px;
  margin: 20px auto;
}

.chatbox {
  border: 1px solid #ccc;
  padding: 10px;
  height: 400px;
  overflow-y: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

.message {
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

.message.user {
  background-color: #d1e7dd;
  text-align: right;
}

.message.bot {
  background-color: #f8d7da;
  text-align: left;
}

.input-container {
  display: flex;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

Step 5: Test Your Chatbot

1. Run the React app and the server simultaneously. You can use concurrently or open two terminals:

2. Open the React app in your browser.
3. Type a message and send it. The request will go to your Express server, which will securely call Cohere’s API and return the result.

Repository

You can find the complete source code for this project on GitHub: AI Chatbot with React and Cohere. Feel free to clone it, explore the code, and customize it to your needs!

Conclusion

You’ve built a functional AI-powered chatbot using React, Vite, Cohere and Express. This project can be enhanced with features like:

• Speech-to-text and text-to-speech integration.
• Persistent conversations stored in a database.
• A more polished design using a CSS framework like Tailwind.
• Deploy the server using services like Heroku, AWS, or Vercel.

Start experimenting and happy coding!