Kaleido

🎨 Inspiration

I’ve always been fascinated by how different experts can land on wildly different takes for the same question. Traditional Q&A hides nuance behind a single “best” answer—what if we could watch a debate unfold live? After playing with Perplexity’s Sonar API, I realized it could juggle multiple personas in parallel. That lightbulb moment became Kaleido: a living, breathing forum of expert viewpoints in real time.

⚙️ What It Does

• 🔍 Ask Anything — Type a question or pick from floating idea-chips.
• 🤖 Four Expert Personas — Academic, Industry Leader, Skeptic & Futurist stream side-by-side.
• ⏳ Real-Time Streaming — See each token appear live, no more waiting for “the answer.”
• ✅ Consensus & ❌ Conflict — Green underlines for agreement, red flags for divergence.
• 📚 Inline Citations — Every claim links back to its source (modal coming soon).
• 💬 Persona-Scoped Chat — Click any card to drill down in that expert’s own mini-chat.
• 🖼️ Export Infographic — One-click PNG/PDF of the full panel—share on Slack, presentations, etc.
• 🛠️ Custom Personas — Upload or define your own JSON personas to unlock niche perspectives!

🏗️ How I Built It

Frontend

• React + Vite for blazing-fast dev & HMR
• Tailwind CSS + Framer Motion for fluid, playful UI

Streaming Engine

• Node + Express proxy handling 4 SSE streams
• Persona-specific system prompts keep contexts isolated

State Management

• Zustand stores each persona’s chat slice for zero-conflict state

Consensus Logic

• v1: keyword-overlap heatmap in the proxy
• v2: TensorFlow.js embeddings on deck

Export

• html2canvas + jsPDF bundle the panel into crisp, vector-friendly snapshots

🧗 Challenges I Ran Into

• Stream Sync — Juggling four SSE channels without UI stutter took careful back-pressure tuning and React memoization.
• Citation Workflow — Mapping inline numbers into a pop-up modal needed several design iterations for clarity.
• Caching & Rate-Limits — Rapid-fire queries exposed gaps in my cache; working on LRU layers now.
• Custom Persona Flexibility — Building a generic JSON schema that still “felt easy” was surprisingly tricky.
• Mobile Responsiveness — Haven’t fully stress-tested on small screens yet—next up on the to-do list!

🎉 Accomplishments I’m Proud Of

• <200 ms/token average latency across all four streams on desktop.
• 48-hour build delivered a polished, production-ready prototype.
• Custom-Persona Power User already built a “Philosopher” persona and loved it.
• Export Quality retains crisp SVG text and clickable citation links in the infographic.

🧠 What I Learned

• Real-time AI streaming demands both back-end orchestration and front-end finesse.
• Zustand shines for isolated, slice-based state in complex UIs.
• Framer Motion makes ambitious animations feel effortless.
• Consensus detection is easy with keywords—but embeddings will revolutionize it.
• Designing a user-friendly custom-persona flow deepened my prompt-engineering skills.

🚀 What’s Next for Kaleido

• 🌐 TensorFlow.js Consensus — Upgrade heatmap with sentence-embedding similarity.
• 🔄 Radial Visualization — New circular layout for a fresh perspective.
• 🗄️ LRU Cache — Smooth out API bursts and rate-limit hiccups.
• 🛍️ Persona Marketplace — Share, browse & fork custom persona templates.
• 🤝 Team Integrations — Slack & Notion bots to push multi-angle insights where teams already work.
• 📱 Mobile Polish — Responsive overhaul & performance testing for every device.

Built With

• express.js
• framer-motion
• html2canvas
• jspdf
• node.js
• perplexity-sonar-api
• react
• react-testing-library
• supabase
• tailwind-css
• tensorflow.js
• typescript
• vite
• vitest
• zustand