PocketBot

• 

  Downloading and activating the chrome extension

• 

  PocketBot in action on the NBA Stats page

Inspiration

Vikram was working on a startup that builds chatbot-like services for different companies called SynTag. He and Jugraj wanted to explore what it would be like to flip this paradigm and instead build chatbots for customers. This led to the idea of PocketBot, a chatbot for you to use on any and every website you visit. This removes your reliance on crappy chatbots from other websites and gives you the best experience no matter where you go.

What it does

PocketBot is a Chrome extension that can be enabled on any webpage and can extract important information to help you with any questions you may have. Whether you want to find an email or phone number for a retail website or ask about NBA statistics on www.nba.com, this chatbot will find and return the information that is right for you in seconds.

How we built it

We used an HTML/CSS/Javascript project outline to make the Chrome extension development as easy as possible. Web scraping services were abstracted to a next.js API hosted on Vercel with extra long-duration limits. The scraping API itself was courtesy of scrapingbee.com. Jugraj built a custom depth-5 content surfer to extract unique text from the top of the DOM. Intelligent responses were given by integrating with OpenAI's assistants API, which allowed for vector search into the scraped data.

Challenges we ran into

• The browser for our web scraper could only be used locally, since the chach file exceeded the limitations of Vercel. This prompted us to switch to an external provider's API.
• Popular frontend development frameworks like next.js and React were hard to integrate with the chrome extension framework. Thus, we were forced to operate in the limitations of HTML/CSS/JS.
• The Assistants API for ChatGPT is relatively new, so polling for chat completions was hard to implement given the restriction on FE frameworks
• We were limited in the intelligence we could integrate with a chrome extension because of the strict Content Security Policies enabled.

Accomplishments that we're proud of

First, we are proud that our chatbot works on pretty much any website you visit. Second, we take good advantage of caching mechanisms on the client and server side, to ensure that loading your PocketBot takes just a split second if you've already seen the site before, OR EVEN if someone else has visited the site with this extension. Third, we are proud of our UI development skills, given that we didn't use any frameworks and were minimal with just HTML/CSS/Javascript.

What we learned

• Jugraj learned javascript
• Vikram learned HTML/CSS/JS again
• We both learned how to make a chrome extension
• There is always a way around your obstacles. Just need to be patient and think calmly.

What's next for PocketBot

• Add a call-bot which calls the company on behalf of the customer using a Voice API
• Add an email scraping service and an email generator
• Add billing so we can monetize
• Implement more security protocols

Built With

• axios
• chrome
• html
• next.js
• openai
• scrapingbee
• vercel