How My AI Chat Widget Works Across the Entire Site

This is the floating chat widget you see in the corner of this site. It connects to the RAG system, handles conversation history, and tries to be helpful without being annoying.

This post walks through how I built how My AI Chat Widget Works, and where it fits in the rest of my work.

My AI chat widget started as a small experiment and eventually became a full assistant that helps users explore my work.

It now runs across the entire site with:

• Context awareness
• Streaming responses
• Subdomain specific behavior
• Fallback UI for small screens
• Tool based routing for future expansion

Goals

I wanted the chat to feel:

• Fast
• Lightweight
• Helpful
• Invisible until needed

Streaming

I implemented server side streaming using:

• OpenAI's streaming responses
• ReadableStream
• TextDecoder

The frontend updates in real time as tokens arrive.

Context

The AI chat can access:

• Project list
• Skills
• About page content
• RAG system

It is able to answer questions about me and the site.

Subdomain behavior

On shop pages:

• The chat moves to bottom left to avoid overlapping with cart
• It does not show the AI lab banner
• It uses a different tone when answering product questions

Why this matters

• Live streaming AI
• Context injection
• Cross site behavior design
• Polished UI interactions

Keep exploring

From here you can:

• Visit the AI Lab to see more AI projects.
• Visit /neel-vora for more background about me and my work.
• Browse more posts on the blog.