Add AI Robot 🤖 To Your Portfolio or Company Website
Tags: hackwithdg, webdev, vue, tutorial
Published: 2022-04-11 10:42:45

### Overview of My Submission

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vctx94qrc0b5j37ysuy1.png) 

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.

This is my fourth project and fifth submission in this Hachathon. I have combined all projects in [Wordleit](https://wordleit.herokuapp.com/) Homepage so that you have access to them at all times.

![Wordleit content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjg09l4cccc0vg9fpvwc.gif)
 
| Table of Content                                 |
| ------------------------------------------------ |
| [Built with](#chapter-1) |
| [How to use](#chapter-2)                |
| [Submission Category](#chapter-3)                 |
| [Link to Code on GitHub](#chapter-4)                     |
| [Link to the tool live demo](#chapter-5)                     |
| [Additional Resources and Tutorial](#chapter-6)                     |

#### Built with:<a name="chapter-1"></a>
- [Laravel 9](https://laravel.com/)
- [VueJS 3](https://github.com/vuejs/vue)
- [Tailwind 3](https://github.com/tailwindlabs/tailwindcss)
- [Deepgram](https://deepgram.com/)
- Deployed on [Heroku](https://dashboard.heroku.com/)

### How to use:<a name="chapter-2"></a>

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 <u>here is what I have in mind</u>:

- 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.

### Submission Category:<a name="chapter-3"></a>

- Wacky Wildcards.

### Link to Code on GitHub::<a name="chapter-4"></a>

{% github https://github.com/MooseSaeed/wordleup %}

### Link to the tool live demo:<a name="chapter-5"></a>

https://wordleit.herokuapp.com/

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:<a name="chapter-6"></a>

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.

{% youtube WcshbX-WA_k %}

This is my last project in the last day of this amazing Hachathon! I learnt so much and I really enjoyed my time working with Deepgram and their super helpful team ❤️ I'm going to miss this, it may sound a bit sentimental but after all I spent the whole month building interesting stuff with Deepgram and interacting with great people here in Dev Community 🥰

Thank you for checking this out and feel free to check out my other submissions for this Hachathon: 🔥

| Projects  |  
| ------------ | 
|   [BeReadable - Online Multilingual Audio Transcription and Recorder](https://dev.to/moose_said/bereadable-online-multilingual-audio-transcription-and-recorder-a8a)    |  
|   [Write Articles With AI Speech Recognition and Live Preview!](https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k)    |  
|   [Use Vocal Commands to Apply Markdown to Your Article!](https://dev.to/moose_said/use-vocal-commands-to-apply-markdown-to-your-article-99)    |  
|   [Watch Youtube, Vimeo and Local Videos With Immediate Audio Transcription](https://dev.to/moose_said/online-video-streamer-and-audio-transcription-2ein)    |  
|   [Add AI Bot On Your Website and Have a Conversation With Your Visitors](https://dev.to/moose_said/add-ai-bot-on-your-website-and-have-a-conversation-with-your-visitors-1mi8/edit)    |