Inspiration
There are many companies offering managed chatbot services for you. Many of them are quite expensive and it often takes a long time and effort to not only see the working chatbot itself but also to see it directly embedded on your own website or any other website.
Description
This web app instantly creates Google Gemini powered AI Agents for your website and displays both the website as well as the embedded agent as if it was already implemented on the website itself.
How does it work?
The provided URL is used to perform an automated web scrape of the first 10 links on the website (limited for this Demo). The website data is then chunked and stored in a vector database where it can be queried by Google Vertex AI.
What is the Tech Stack?
Displaying other websites within this website:
- Custom HTML, CSS & Javascript
- Customized X-Frame-Bypass
- CORS-Proxy self-hosted on Heroku and two public backup proxies (https://github.com/Rob--W/cors-anywhere/)
- If the proxy fails to load the website correctly, it is loaded via Google Webcache and the Webcache header is removed
- Clear Page button if the website still fails to load correctly
Retrieval Augmented Generation & Chatbot components:
- Flowise AI self-hosted (https://github.com/luc4t/Flowise)
- Customized FlowiseChatEmbed for embedding the Chatbot (https://github.com/luc4t/FlowiseChatEmbed-copy3)
- Customized Cheerio web scraper which scrapes the first 10 links of the provided URL (inside Flowise)
- Markdown Text Splitter for chunking the website data (inside Flowise)
- Redis Stack Server as vector database self-hosted (https://github.com/redis-stack/redis-stack)
Google Vertex AI components
- The latest Google Gecko textembeddings
- Langchain Conversational Retrieval QA Chain with Buffer Memory
- Google Gemini Pro as LLM (GCP Project ID: instant-chatbots-new)
Challenges I ran into
Diplaying of other websites
Many websites are unable to be displayed within other websited due to Cross-origin resource sharing (CORS) policyies. This was quite difficult to implement to offer the user a preview of the AI Agent directly on his or any other website.
Speed
For a web app like this, it's important to have a result very quickly as that separates it from other solutions on the market. Initially I used Apify Website Content Crawler via API to scrape the websites but that takes at least 30 seconds for providing initial results. I also tested Datastax Astra DB and Zilliz Cloud as vector storage but this also was a little to slow for vector retrieval. I therefore switched to running Cheerio, Flowise and Redis Stack Server (which fully runs in RAM) on a 4 CPU, 24GB Ram VPS.
Accomplishments that I'm proud of
Displaying of other websites and achieving my personal speed requirements was a lot of effort. Also securely setting up all these services on a self-managed VPS turned out to be quite challenging.
What I've learned
I learned a lot about all aspects of full stack web and LLM development (Web Scraping, RAG, Vector DBs, Text Embeddings, Vertex AI) as well as the deployment challenges.
What's next for Instant AI Agents
Implement user authentication and login functionality. Let users perform a full web scrape of the desired web page after testing the AI Agent on their website.
Built With
- ai
- css
- flowise
- gemini
- html
- javascript
- langchain
- redis
- typescript
- vertex
Log in or sign up for Devpost to join the conversation.