DEV Community

Cover image for Control Your Mule Infra Via Bot

Posted on

Control Your Mule Infra Via Bot

Component Diagram :


Sequence Diagram:


We used:

  1. Java jdk 1.8
  2. Spring boot suite 4.8.1
  3. Angular 10+ node.js
  4. Visual Studio code IDE. Vs 1.51

IGenie – Chatty Bot:

Chatbots, or conversational interfaces present a new way for individuals to interact with computer systems. A chatbot allows a user to simply ask questions in the same manner that they would address a human.

The Use case of IGenie-chatty bot:

We have developed a personal assistant which will make the life easier for the user just by listening to the command. Since it is a personal chatbot it can hold the credential and it also maintain the session. The user can ask for any information*(Ex: Server, API, application status, deployment status)* if authenticated otherwise need to authenticate first by providing their credentials. Apart from this some of the automation work can also be implemented in future such as scaling of the server(explained in the future extension section).
A RAML crawler is used for generation of patterns and it is built on top of Mule-RAML API. The generated pattern is used to generate a base AIML template.
Currently, this chatbot is build on top of the Program AB(AIML based chatbot) which is internally calling cloud hub API. The JSON data which is coming from the cloud hub API is parsed into the map in such a way that the hierarchy is break down i.e. all the keys are brought to the root level which will optimizes the search. The whole functionality is wrapped up in the response handler API.

This hash map is used to fill Mother AIML file template and later it is loaded to the Bot at run time and the bot will give the best response from the available option. Which will be later shown to the end user at the chatbot UI.

The below figure represents the front-end project explorer of IGenie-ChattyBot


Steps for front end set up:

Step 1:
Download the Zip file and extract.

Step 2:
Go to the extracted file location and open cmd terminal.

Step 3:
Run the command npm install in that terminal. This installs all the packages used in the project.

Step 4:

  • Once all the packages are installed through npm install.
  • Run the command ng serve, which builds and runs the app. Here, the app runs on port 4200 by default .
  • If you want to use a different port (eg : 4202)
  • Run the command ng serve--port 4202 instead of ng serve.


Step 5:
Open Visual Studio Code.
To open an existing app folder

Go to File --> Open Folder --> open the extracted app folder



You can also customize your chatbot UI by creating additional component.

The default Bot UI contains:

  1. Chatbox component
  2. App component
  3. Chatbox Service module

To create a new Component :

use command :

ng generate component componentname
ng g c componentname


To add new packages

use command:

npm install packagename@version

Check for the version compatibility in order not to cause version mismatch.

To create new service module

use command:

ng g service servicename


app.module.ts :

It contains all the components, modules and services created and used in the UI app


All the packages are already created and installed

using npm install command



Steps for Backend Setup:

Step 1:
Download the project Zip file. click here


Step 2:
Extract the zip file to the spring boot suite(STS) workspace.


Step 3:
Open the extracted file, Go to

File->open project from the file system


Step 4:
Search for the directory where you have extracted your project and then click finish. It will add your project to the workspace.


Step 5:
Clean your project

Project->Right click->Debug as->maven clean->finish


Step 6:
Update your project.(it will add all your dependency)

Project ->right click->maven-> update project->force update


Step 7:
write port number and the cloudHub API in the file as shown below and save the file.


For integrating front end with back end:

Backend modification:

Go to file:


add @CrossOrigin(origins = http://localhost:4202).(We are using port 4202. You can use any port number change the port accordingly.)


Front-end modification:

Open Chatbox.service.ts, Got to


Change the rest api url according to the port you are using as shown below.


How to run your chatbot:

Step 1:
Once your set up is ready.
Start your backend service as spring boot app. Go to

project->right click->run as->spring boot app.



Step 2:
Put the URL http://localhost:4202 in the browser to see the running chatbot UI


AnyPoint Studio platform:

We have tested our application for the following cloudhub Api:


For reference to other cloud hub API

Testing your chatbot:

Enter your query in the chatbot. For cloud hub related query, login to cloud hub.


Once Authentication successful. You will get the response.


Now, chatbot can also response to the cloud hub related query


Future Extension of the IGenie-ChattyBot:

  1. Interaction over Voice.
  2. Command following chatbot

Interaction over Voice:

We are trying to provide the voice capability to our chatbot such that the user can interact over voice.

Command following chatbot:

We are also working on providing the capability to our IGenie-ChattyBot to handle the minor error on our cloud where user intervention is not required.

The above statement can be justified by the below scenario:
Based on the error alert IGenie-ChattyBot will provide the best solutions to be tried, which can resolve the error or capable of handling by itself if required permission and formatted file given.

Download IGenie-ChattyBot UI

Download IGenie-ChattyBot backend

Top comments (7)

roystonlobo profile image
Royston Lobo

Thank you for your submission @vikashinvenio . I wasn't able to find you in the list of registrants. Can you please confirm that you have registered here

Please also either comment with your email address or send me an email at royston (dot) lobo (at) mulesoft (dot).com

vikashinvenio profile image

Hello @Royston Lobo,
I have registered for the hackathon with email id( can you please confirm about the registration?

roystonlobo profile image
Royston Lobo

Hi @vikashinvenio , I can now see your registration as expected. Thank you and all the best!

vishalinvenio profile image
Vishal Konaparthi

Good job!

vikashinvenio profile image

Thank you

mrram profile image

Excellent Vikash..! Great idea

vikashinvenio profile image

Thank you