Add AI Robot To Your Portfolio or Company Website

Deepgram is offering an amazing AI speech recognition service for multiple languages which can take the user's audio and transform it into text. So why don't we use this to get the user's request and send it back to our system and according to specific keywords with the right algorithm, the system will be able to identify the user's request and immediately provide back the information they want in audio. It's like speaking to your TV, Air-conditioner or even your light system but this time, you will be speaking with a robot.

Robot Banner

Meet Grammy! You can actually use this robot the way you want. You can use it to have a conversation with you visitors and present the data they requested as a response or you can just use it to tell jokes and have fun. The robot is as simple as VueJS components that you can copy and paste and it has ZERO dependencies.

In this demo, I only included generic and basic usage of Grammy but possibilities are unlimited. You can customize this robot and it's responses the way you like. You can make him funny, deep or even a sad and miserable robot, after all you're in charge. You can also set key words such as (price ,cost ..etc) and set the response to the prices of your products along with a pop up asking if the user would like to be redirected to prices and packages page.

Wordleit content

Built with:

How to use:

If you would like to have a copy of the bot, all you have to do is to head to the Github repo and fetch two components:
1- resources/js/components/grambot/ Userside.vue

In this component we're using recording toggle and initiating transcription websocket with Deepgram.

2- resources/js/components/grambot/ Botside.vue

In this component we're defining arrays of keys for different situation and customize our responses. Follow the comments in the component for the best use.

3- resources/js/components/main/ Grammybot.vue

You don't have to copy this file but if you want a peak on how to combine and use the above two components have a look at this one.

Future improvements:

There are a lot of things that can be improved but today is the last day in the hachathon :( But here is what I have in mind:

  • Improvements to the code readability.
  • Dynamic moving robot.
  • Response algorithm improvements.
  • Find a way to make it sound less robotic.
  • Small toggle for Grammy widget.
  • Remove recording button and replace with keyword such as (Grammy, do this) and it will trigger the action.

Link to Code on GitHub:

Link to the tool live demo:

In this demo you can:

  • Greet.
  • Ask about how it feels.
  • Ask who it is.
  • Ask about it's creator.
  • Ask about it's name.
  • Ask about it's age.
  • Say compliments.
  • Say that you love or like it.
  • Say some insults.
  • Explain your feelings.
  • Ask for a story or a joke.
  • Refuse and agree.
  • Talk about food.

Additional Resources / Info:

Small demo to show you how it works:

As I mentioned, this demo is for basic usage and my own customized responses. You can set yours and make it all about your business, prices and way of contact.


17 Mar 2022


Fueler top Icons

We are not just another social platform

We aspire to become a platform that inspire you to create and helps you become self reliant with your skills and proof of work.

CTA msg box Fueler