Integrating RASA Chatbot with Django Web Framework

There are many tutorials out there on how to develop a chatbot using the Rasa framework. Most of them end it at where you communicate with the chatbot on the command line. As we are now not in the 1960s, to deliver a chatbot that resonates well and is user friendly to the user, we need a front end not a boring dark command line UI for non-tech guys.

In this article, I will try to make it very easy for you to understand how to build a Rasa chatbot and integrate it easily with the django web framework. The article is divided into three parts for easy comprehesion.

• Developing a simple Rasa chatbot
• Building a simple UI for the chatbot
• Integrating your Rasa chatbot with Django

Those who wants to directly wants to run project you can clone my github repo link

Apart from having little knowledge on Rasa, this article assumes you have installed RASA in your computer, if you have not, check out the instructions here.

Enough of the talking, lets make our hands dirty.

PART 1: Developing a simple Rasa chatbot

To initiate a rasa chatbot, run the command below in your terminal or CLI.

rasa init

This command creates a simple chatbot for a start with some sample data. For more details you can have a look at their documentation .

To access this chatbot as an API in your website ,run the command below in your terminal or CLI.

rasa run -m models — enable-api — cors “*” –-debug

The different parameters are:
• -m: the path to the folder containing your Rasa model,
• — enable-api: enables the API
• — cors: allows the cross site request
• — debug: helps you solve errors if the chatbot does not work properly

For more details follow this link

Once you ran the command above with no errors, you command line should be as below if you are using Windows OS. To access the Rasa chatbot type the URL http://localhost:5005 in our browser

rasa run -m models — enable-api — cors “*” –-debug

Part 2: Building a simple UI for the chatbot

For the User Interface part we will use this repo

Clone this repo using the command

git clone https://github.com/JiteshGaikwad/Rasa_CustomUI-v_2.0.git

Navigate to the static/js/script.js file . In line 40, you can see rasa url http://localhost:5005/webhooks/rest/webhook which is the same URL what we had seen in rasa the part.

Open the index.html of this repo open that file and you can able in your browser to interact with the chatbot in browser. Type hi to greet chatbot…

Chatbot ui

PART 3: Integrating your Rasa chatbot with Django

Now that we have our Rasa chatbot and its user interface, we can now integrate it with the django web framework

start your django project by running the command below:

django-admin startproject rasadjango .

This command will create a “rasadjango” folder that contains the following files

• manage.py: A command-line utility that lets you interact with this Django project in various ways.
• rasadjango/__init__.py: An empty file that tells Python that this directory should be considered as a Python package.
• rasadjango/settings.py: Settings/configuration for this Django project.
• rasadjango/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site.
• rasadjango/asgi.py: An entry-point for ASGI-compatible web servers to serve your project.
• rasadjango /wsgi.py: An entry-point for WSGI-compatible web servers to serve your project.

Now let’s create an application rasaweb, with the command below

django-admin startapp rasaweb

Whenever we create any app we have to add its name to the settings.py .

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘rasaweb’
]

To add a path that will connect to the rasaweb app, navigate urls.py of the rasadjango folder and edit it as follows

from django.contrib import admin
from django.urls import path
from django.conf.urls import include, url
urlpatterns = [
path('admin/', admin.site.urls),
url('^$', include('rasaweb.urls')),
]

Create a urls.py file in the rasaweb app for route the url to the index.html with help of views file.

from django.conf.urls import url
from . import views
urlpatterns = [
url(‘’, views.index, name=’index’)
]

In the rasaweb/views.py file add following line to complete routing. Define your index function as pointed out in the rasaweb/urls.py

from django.shortcuts import render
# Create your views here.
def index(request):
return render(request,'index.html')

Now go to that directory where you cloned your repo in Part 2 and copy the static folder in the rasaweb folder.

create a templates folder the rasaweb folder and copy the index.html file from Part 2 of this article the in templates folder.

Your rasaweb folder should have a structure like this.

Folder structure

Now for loading the static file we add following line at the top of the index.html file

{% load static %}

Then replace following lines as illustrated

Original

<link rel= “stylesheet” type= “text/css” href= “static/css/style.css”>
<link rel= “stylesheet” type= “text/css” href= “static/css/materialize.min.css”>

Replaced

<link rel= “stylesheet” type= “text/css” href= “{% static ‘css/style.css’ %}”>
<link rel= “stylesheet” type= “text/css” href= “{% static ‘css/materialize.min.css’ %}”>

Original

<div class=”profile_div” id=”profile_div”>
<img class=”imgProfile” src=”static/img/botAvatar.png”/>
</div>

Replaced

<div class="profile_div" id="profile_div">
<img class="imgProfile" src="{% static 'img/botAvatar.png' %}"/>
</div>

Original

<script type=”text/javascript” src=”static/js/materialize.min.js”></script>
<script type=”text/javascript” src=”static/js/script.js”></script>

Replaced

<script type="text/javascript" src="{% static 'js/materialize.min.js'  %}"></script>
<script type="text/javascript" src="{% static 'js/script.js' %}"></script>

Lastly,add following line into settings.py file

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

If you have done all things perfectly run the command below from your base directory where you had created project

python manage.py collectstatic

This will take all the static files into the main directory.

Finally,

python manage.py runserver

This command will run django server which gives you url http://127.0.0.1:8000/ to interact with the chatbot . Paste this url in browser and interact with the chatbot.

To recap what we learnt, we learnt how to start a simple Rasa chatbot. We also learnt how to start a django project and lastly how to integrate the two. This article gives you a platform to help you in future when you are building a complex Rasa chatbot and need to deploy it with django.

I hope this post will help you on your journey. Keep learning.

If you like this post, HIT Buy me a coffee! Thanks for reading. 😊

Your every small contribution will encourage me to create more content like this.