Rubber Duck
Team consisting of Relevance AI R&D and Application Development Engineers focused on system architecture, ML deployment, and prompt optimization.
YouTube Video
Project Description
Rubber Duck is a voice-driven AI System Architect. Engineers describe their system out loud; an ElevenLabs conversational agent turns that into a live React Flow architecture diagram, then visually stress-tests it. When the user says “50,000 concurrent users” or “Black Friday traffic,” overloaded components flash red, queues/caches are added, and the architecture refactors in real time. The whole flow runs end-to-end in a T3 web app on Vercel: open URL -> speak to the agent -> watch the canvas update.
Working Prototype
• Production T3 app deployed on Vercel with live ElevenLabs widget.
• Voice → tools → Zustand/React Flow graph → animated stress states, fully demoable from a browser.
Technical Complexity & Integration
• Multi-modal: voice + browser canvas + tool calls.
• Granular tools (get_graph, add_node, update_node, add_edge, fit_view) mapped to a Zustand store; Dagre auto-layout keeps diagrams readable.
Innovation & Creativity
• Treats the agent as an active architect, not chat: it rejects bad patterns and proposes refactors under load.
• Spoken traffic scenarios directly drive visual failures and fixes on the canvas.
Real-World Impact
• Helps teams surface bottlenecks, explain scale issues, and onboard juniors using interactive diagrams instead of static drawings.
• Can later plug into real infra metrics or repos for production design reviews.
Theme Alignment (Conversational Agents)
• Conversation is the primary UI; all changes happen through agent-triggered tools.
• Combines partner technologies: ElevenLabs Conversational AI + web/browser tool integration.
Technologies & Setup
• Stack: T3 (Next.js, TypeScript, Tailwind), Vercel.
• Graph & State: @xyflow/react (React Flow), @dagrejs/dagre, zustand.
• AI / Voice: ElevenLabs Conversational AI (web widget + client tools).
• Data (optional): Neon serverless Postgres for auth/sessions.
Repro steps:
- Clone repo, pnpm install.
- Configure env vars: Vercel/Next secrets, ElevenLabs Agent/API, Neon URL (optional).
- pnpm dev locally or deploy to Vercel.
- Import provided ElevenLabs system prompt + tool schemas.
- Open app
Prior Work
Before today, we had nothing but fragments of an idea. In 3 hours we:
- designed
- programmed
- architected
- bought a domain
- deployed
our whole project