How to Create your own Virtual Assistent

Hello there, Let’s Create a Virtual Assistant of our own, who will talk with you
as per your instructions.

There are many ways do it, but here we will choose the simplest way to do it.
We will use p5.js libraries to build our virtual assistant.

Let’s first download p5 libraries to start, you will get those from Here, and you’ve to download p5 speech libraries from This link.

let’s divide functionality we need to implement our virtual assistant.

1. Assistant should Speak
2. Assistant should Hear and respond
3. Implementation of Brain of Assistant

So, our first goal is to make sure that our assistant could talk to us.

After completion of download above mentioned files, copy the p5.speech.js
to the p5 folder and edit the index.html and sketch.js file.

add the following line <script src=”../addons/p5.speech.js”></script> to index.html file.
let’s first check if everything works perfectly. To check, you need to add the following code to your setup function of sketch.js file

let voice = new p5.Speech();
 voice.speak(‘hello there’);

 Now open your index.html on localhost and you will hear ‘hello there’ voice
 See!! its that easy to make our assistent talk. now we will make our assistent hear our instruction and repond by that.
add below mentioned code inside your setup function.

let speechRec = new p5.SpeechRec(‘en-US’,gotSpeech);
function gotSpeech(){

Now  refresh your browser to get effect and taadaa, whatever you will speak,
will be on your browser screen like google speech to text function.

Remember: webkitSpeechRecognition not supported by the Mozilla Firefox.

Now that we’ve made our Assistant hear our voice let’s teach it how it can
respond according to our voice.

To implement next thing we need a scripting language called Rivescrip which is an Artificial Intelligence scripting language.

add the following line to your index.html file

<script src="[email protected]/dist/rivescript.min.js"></script>

your index.html file
After you’ve done that, create a new file in your folder where index.html and other files are stored. Named the file brain.rive because this is the brain of you assistant. you can follow this tutorial to learn more about Rivescript.

create a basic input field in your index.html to type your message

    <input type=”text” placeholder=”Enter your message” name=”msg” id=”msg”>

and create main.js file where we to put instructions about supply of our instruction to assistent. add below code to your main.js file

Var bot  = new Rivescript();
bot.loadfile(“brain.rive”, brainReady, brainError);

function brainReady(){
     console.log(‘Chatbot ready’);
      let num = floor(random(10))+1;
     var reply = bot.reply(“local-user”, input); 

 $(document).keypress(function(e) {
if(e.which == 13) {
let input = $(“#msg”).val();

let reply = bot.reply(“local-user”,input);


URL: ‘index.php’,
method: ‘POST’,
data: {data:n},

Now that we ‘ve setup our brain’s connection, lets put some predefined respond
to give by the assistant.
to do so, you have to edit brain.rive file which we have created early
now edit that file and paste code onto that

! version = 2.0

+ hello there
– Hello, human!

+ how are you
– I’m great, how are you?
– I’m good, you?
– Good 🙂 you?
– Great! You?
– I’m fine, thanks for asking!

Nice, good job.

 By the above code you should see a text box in front of you, once you type ‘hello there’ your bot should speak  ‘hello human’. if it’s done perfectly then congratulations you’ve successfully created your first Virtual Assistant. You can make it more intelligent by adding more stuff to the brain 😀
Well, It’s not completed yet, there’s is a task left, which I am lifting for you. The task is, you’ve to speak to the bot to get the reply. Hope you can do it easily since in the beginning, i’ve told you how you can convert your speech to text by p5 speech.
Best of luck for that. Bye-bye.

Leave a Reply

Your email address will not be published. Required fields are marked *