Build a Custom AI Chat Bubble for an Operations Dashboard

I was switching between four windows to talk to my AI agent. My dashboard in one tab. Telegram in another. The OpenClaw gateway in a third. It was slow, it broke my flow, and I knew there had to be a better way. So I built a floating chat bubble that lives inside the dashboard itself.

The Three-Layer Architecture

The system has three layers, and it is simpler than you would expect.

Layer 1: Browser Components. Two React components handle the UI. A floating chat bubble (ChatBubble.tsx) that persists across every page with resize and unread badges. And a full chat page (OpsChat.tsx) with split layout, markdown rendering, and file attachments.

Layer 2: WebSocket Proxy. This sits between your browser and the OpenClaw gateway. It streams responses token by token for that real-time typing effect. It auto-reconnects when connections drop and queues messages during reconnect so nothing gets lost.

Layer 3: OpenClaw Gateway. Your AI agent. It receives messages, processes them, and sends responses back through the proxy. The session is shared across all interfaces by default.

Key Features

The chat bubble is persistent across every page. Navigate from ops to brain to lab modules and the bubble stays in the corner. Your conversation never resets.

Markdown rendering means code blocks, headers, and lists all format properly. Not just plain text.

File attachments work via drag-drop and clipboard paste. Cmd+V a screenshot straight into the chat.

Shared sessions mean the same conversation thread exists in your browser, Telegram, and WhatsApp. Send a voice note on mobile, come back to the dashboard, and it is all there.

How I Use It Daily

Two main use cases save me the most time.

First, reviewing nightly builds. Every morning I check what my agents built overnight. When something looks off, I pop open the bubble and ask my agent to investigate. No window switching.

Second, the PM board. Tasks waiting for approval get reviewed inline. I read the deliverable, chat with the agent about it, and approve or send feedback without leaving the PM board view.

Build Your Own

The master prompt is in the video. Screenshot it, paste it into Claude Code, Gemini, or Codex, and it produces a working chat system. I tested it on two separate setups and both worked.

Start with the bubble and proxy. Get basic chat working. Then add markdown rendering, file attachments, and shared sessions over time.