In this tutorial, you will learn how to build a chatbot with Rasa and Angular in Python. Rasa is an open-source artificial intelligence-powered chatbot framework that provides pre-built machine learning models and tools to build modular, collaborative and scalable chatbots. Angular is a modern and efficient front-end web framework to develop single-page applications.
Chatbot with Rasa and Angular – Prerequisites
Before you start building the chatbot, make sure you have the following tools installed on your system:
- Python
- Rasa
- Angular CLI
Step 1: Set up the Rasa Chatbot Framework
To set up the Rasa chatbot framework, follow the below steps:
# Install Rasa pip install rasa # Create a new Rasa project rasa init # Train the Rasa model rasa train # Start the Rasa server rasa run -m models --enable-api --cors "*" # Test the Rasa server curl localhost:5005
Step 2: Create an Angular Front-end Application
To create an Angular front-end application, follow the below steps:
# Install Angular CLI npm install -g @angular/cli # Create a new Angular app ng new chatbot-app # Change directory to the app cd chatbot-app # Start the Angular server ng serve --open
Step 3: Connect the Rasa Server with Angular Front-end
To connect the Rasa server with the Angular front-end, follow the below steps:
# Add the following code to the app.component.html file
<div class="container">
<h1>Rasa Chatbot</h1>
<div class="chat-box">
<div *ngFor="let message of messages">
<div *ngIf="message.sender === 'bot'" class="bot-message">
{{ message.text }}
</div>
<div *ngIf="message.sender === 'user'" class="user-message">
{{ message.text }}
</div>
</div>
</div>
<form>
<input [(ngModel)]="message">
<button (click)="sendMessage()">Send</button>
</form>
</div>
# Add the following code to the app.component.ts file
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
messages: any[] = [];
message: string = '';
constructor(private http: HttpClient) {}
ngOnInit() {}
sendMessage() {
let userMessage = {
text: this.message,
sender: 'user'
};
this.messages.push(userMessage);
this.http.post('http://localhost:5005/webhooks/rest/webhook', { message: this.message })
.subscribe((data: any[]) => {
for (let i = 0; i < data.length; i++) {
let botMessage = {
text: data[i].text,
sender: 'bot'
};
this.messages.push(botMessage);
}
});
this.message = '';
}
}
Congratulations! You have successfully built a chatbot with Rasa and Angular in Python. Rasa provides a powerful natural language processing engine to understand the user’s intent and context, while Angular provides a modern front-end web framework to create a responsive and intuitive user interface. You can further customize the chatbot by training the Rasa model on your own dataset to provide accurate responses and use Angular’s features to add interactivity and visualization to the chatbot.
Want to learn more about Python, checkout the Python Official Documentation for detail.