I just shipped a small but meaningful improvement to the Agenthood docs site — a floating AI companion I'm calling The Oracle.
The Problem
When you're reading technical documentation — especially about a multi-agent AI system — you often have questions that don't fit neatly into the page structure. "Summarize this for me." "Quiz me on what I just read." "Where do I report a typo?"
Previously, the answer was: open a new tab, find the right channel, write your question. That friction means good feedback gets lost and learning slows down.
The Solution
The Oracle is an animated balloon fixed in the bottom-right corner of every docs, academy, and getting-started page. Click it to open a chat panel with four quick actions:
- Test my knowledge — get quizzed on the page content
- Summarize this page — request a one-paragraph summary
- Leave feedback — share thoughts directly
- Ask me anything — free-form chat input
Each session supports up to 20 messages with a live character counter. The panel can be expanded to a wider view or dismissed via the close button or backdrop overlay.
Technical Highlights
- React 19 + Tailwind CSS 4 — zero new dependencies added to the project
- Pure CSS animations — the floating balloon uses a
@keyframes floatanimation, and the panel slides up with aslide-upkeyframe - 18 Playwright tests — covering desktop (13 tests) and mobile iPhone 13 (5 tests), verifying visibility, quick actions, custom messages, close/expand behavior, session limits, and keyboard resilience
- Full test suite passes — all 106 tests (53 chromium + 53 mobile) continue to pass with zero regressions
Try It
Open any page under agenthood.flabs.tech/docs/ or agenthood.flabs.tech/academy/ and look for the floating nerd in the corner.
The Oracle knows everything about Agenthood. Ask away.