Gemini RAG Chatbot Widget

Below is a demonstration of the client-side embedding widget. Look at the bottom-right corner of the screen to interact with the floating chat popup.

1 Start Backend Server

Ensure your FastAPI server is running with python server.py and that you have exported your GEMINI_API_KEY.

2 Paste Script Tag

Include the single line script element on your site. The shadow-root protects styles from getting scrambled by parent page sheets.

<!-- Paste this at the bottom of your HTML body -->
<script src="widget.js"></script>

<!-- Or customize explicitly to point to a specific live page & api -->
<chatbot-widget 
  site-url="https://en.wikipedia.org/wiki/Main_Page" 
  api-url="http://localhost:8000"
  bot-name="Wikipedia Guide">
</chatbot-widget>

How to test this live: By default, this demo is configured to query the Wikipedia Main Page. Start the backend, open the widget, and type "Who spun off from Activision in 2024?" or "What is the featured picture today?" to test RAG retrieval on the fly.