Building A Chatbot Using React, Python, And Django

from rest_framework.decorators import api_view from rest_framework.response import Response import nltk from nltk.stem import WordNetLemmatizer from nltk.corpus import stopwords # initialize the lemmatizer and stopwords lemmatizer = WordNetLemmatizer() stop_words = set(stopwords.words('english')) @api_view(['POST']) def chatbot(request): # get the user's message from the POST request message = request.data['message'] # tokenize the user's message words = nltk.word_tokenize(message.lower()) # remove stop words from the user's message words = [word for word in words if word not in stop_words] # lemmatize the remaining words in the user's message words = [lemmatizer.lemmatize(word) for word in words] # determine the chatbot's response based on the user's message response = 'Hello, how can I help you?' if 'help' in words: response = 'Sure, what do you need help with?' elif 'problem' in words: response = 'What seems to be the problem?' elif 'thanks' in words or 'thank you' in words: response = 'You\'re welcome!' # return the chatbot's response in a JSON format return Response({'message': response})

This code defines a single URL route called chatbot that maps to the chatbot view defined in views.py.

Next, you must include these URL routes in your main urls.py file. In your chatbot_project directory, open the urls.py file and add the following code:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('chatbot_app.urls')),
]

This code includes the chatbot_app.urls module in your project's URL routes. Any URL that starts with /api/ will be handled by the routes defined in chatbot_app.urls.

And that's it! Your Django server is now set up to handle chatbot API requests. In the next step, we'll build a React frontend to interact with this API.

Our Backend is done

In the next step, we'll build a React frontend to interact with this API.

We'll build a React frontend to interact with this API.

Here's how you can build a React frontend to interact with your Django chatbot API:

Step 1

Set up a new React project. First, you'll need to set up a new React project. You can do this by running the following command in your terminal,

npx create-react-app chatbot_frontend

This will create a new React project called "chatbot_frontend" in your current directory.

Step 2

Install required dependencies. You'll need to install a few dependencies to build the React frontend. You can do this by running the following command in your terminal:

cd chatbot_frontend
npm install axios react-bootstrap

The axios package is a powerful library for making HTTP requests from JavaScript. We'll use it to send requests to our Django chatbot API. The react-bootstrap package provides pre-built Bootstrap components that we'll use to style our chatbot interface.

Step 3

Create a new component for the chatbot interface. In your src directory, create a new file called Chatbot.js. This file will contain the React component for the chatbot interface. Here's some sample code to get you started:

import React, { useState } from 'react';
import { Container, Form, Button } from 'react-bootstrap';
import axios from 'axios';

function Chatbot() {
  const [message, setMessage] = useState('');
  const [chat, setChat] = useState([]);

  const sendMessage = async () => {
    // send a POST request to the chatbot API with the user's message
    const response = await axios.post('http://localhost:8000/api/chatbot/', { message });
    
    // update the chat state with the chatbot's response
    setChat([...chat, { message, isUser: true }]);
    setChat([...chat, { message: response.data.message, isUser: false }]);
    
    // clear the message input field
    setMessage('');
  }

  return (
    <Container>
      <h1>Chatbot</h1>
      <div className="chat">
        {chat.map((chatMessage, index) => (
          <div key={index} className={`message ${chatMessage.isUser ? 'user' : 'chatbot'}`}>
            {chatMessage.message}
          </div>
        ))}
      </div>
      <Form onSubmit={(e) => { e.preventDefault(); sendMessage(); }}>
        <Form.Group>
          <Form.Control type="text" placeholder="Type your message here" value={message} onChange={(e) => setMessage(e.target.value)} />
        </Form.Group>
        <Button variant="primary" type="submit">
          Send
        </Button>
      </Form>
    </Container>
  );
}

export default Chatbot;

This code defines a Chatbot component that renders a chat interface. The component includes a form input for the user to type in messages and a button to submit the message to the chatbot API.

The component also includes the state for the current message being typed (message) and an array of previous chat messages (chat). When the user submits a message, the sendMessage function sends a POST request to the chatbot API using axios and updates the chat state with the chatbot's response.

Step 4

Render the chatbot component in your app. In your src directory, open the App.js file and replace the default code with the following:

import Chatbot from './Chatbot';

function App() {
  return (
    <Chatbot />
  );
}

export default App;

This code imports and renders the Chatbot component in the main app component.

Step 5

Start the development server. To start the development server and view your chatbot interface, run the following command in your terminal:

npm start