Hubert: Eloquence by Example

(1) initial selection screen: debates or pitches.
(2) persona selection for Hu.
(3) debate question selection screen.
(4) the main debate screen.
(5) pitch input screen.
(6) select a vc firm.
(7) the main pitch screen.

Inspiration

Composition and presentation are everything. We've watched startup culture up close, sat through club interviews, seen people pitch their hearts out. The pattern is always the same: the best ideas are only as good as you can convey them. Effective communication is one of the most measurable predictors of success across fields, from academic research to civic engagement.

Sam Altman said it himself — you have about ten critical minutes to sell your arguments and set yourself up for success. In those moments, how you compose and present your thoughts can make or break everything.

We wanted to build something that prepares you for those moments. Not with generic tips or static practice prompts, but with live, responsive debate that forces you to think on your feet and refine your arguments in real time.

What It Does

Hubert runs a live, two-agent debate powered by Claude models and ElevenLabs speech synthesis.

Agents: “Hu” (affirmative) and “Bert” (negative) argue structured topics with distinct personas.
Coaching: The user can inject suggestions to either side mid-debate; the next response integrates that input.
Voice: Each agent speaks aloud via ElevenLabs, with natural-sounding, per-persona voices.
Evaluation: A judge scores each round and explains the reasoning behind score changes (ex. why one side gained or lost credibility, evidence strength, or rhetorical coherence).
Summary: The final verdict is decided with commentary and evidence provided, allowing users to learn from the simulated debate experience. The result is an interactive learning experience: you can experiment with argument styles, observe live feedback, and understand what makes reasoning effective or flawed.

How We Built It

Hubert is implemented as a Next.js (React/TypeScript) single-page application with a lightweight Node backend.

Frontend: React components manage state transitions for each Lincoln-Douglas debate phase (Opening → Rebuttal → Crossfire → Closing).
Backend: Next API routes proxy requests to Anthropic (Claude streaming) and ElevenLabs (TTS).
Streaming: Debate text is streamed incrementally via Server-Sent Events (SSE), tokenized live, and fed into an audio queue for sequential playback.
Prompting: Each agent receives structured context — current phase, last opponent turn, user suggestions, persona modifiers, and debate rules.
Persona System: Sliders modify stylistic parameters (aggression, formality, evidence) that directly affect model prompting and tone.
Coach Integration: User suggestions are stored per side and consumed by the next speaking turn, with feedback on whether each was incorporated.

Challenges We Ran Into

-The biggest technical challenge was browser autoplay policy. The production domain blocked audio.play() because playback was triggered asynchronously — after server-sent events and TTS fetch — outside a fresh user gesture. We got NotAllowedError repeatedly. The fix was a one-time audio "primer" on Start that resumes an AudioContext and plays a silent one-frame buffer within the click handler. On NotAllowedError, we show an "Enable audio" banner that runs the primer and resumes the queue when clicked. -Other issues we ran into included

Maintaining synchronization between token streams, TTS generation, and the FSM, which required queueing and careful state gating to avoid overlap.
Managing the rate limits of streaming API calls. We managed this by requiring retry logic and token budget trimming.
UX iteration, especially in planning the flow of the debate specifications setup (having multi-page, clean design) and how to avoid an overwhelming, cluttered look in the debate simulation screen.

Accomplishments We're Proud Of

Fully functional live debate engine with real-time speech synthesis.
Persona types visibly and audibly change argumentation style.
User coaching is seamlessly integrated and acknowledged mid-debate, with judging mechanic to gauge outcomes
Most importantly, the debates give us new insights. Even when we think we know a topic, watching Hu and Bert go at it surfaces angles we hadn't considered!

What We Learned

We're beginners who built a full application from scratch. We learned every stage of product development: brainstorming, building a minimum viable product, iterating on design and functionality.

How to design and orchestrate structured LLM dialogues in real time.
How to integrate Anthropic streaming with ElevenLabs TTS under browser playback constraints.
How to enforce conversational format through prompt engineering and finite-state logic.
How minor UX details (timers, pacing, typography) significantly affect perceived fluidity.

What's Next for Hubert

Right now, Hubert does debates and pitches. But the core mechanic — agents engaging in structured dialogue while you coach them — extends far beyond that. Sales conversations, difficult negotiations, any interaction that requires preparation and strategic thinking. Hubert can be expanded to other applications from practicing start-up idea pitching to technical interview preparation. Additionally, Hubert can benefit in allowing coaching for multi-turn persuasive action and memory banking of past debates for future reflection and growth. Having an expanded judging system (ex. with more dimensional rubric grading of responses) can clarify optimal composition/presentation approaches.