AI Speculative / Optimistic Token UI
Problem statement
Speculative decoding (and Cursor-like optimistic completions) make AI UIs feel instant: show a predicted continuation immediately, then reconcile it against the real token stream. The hard part is not drawing dimmed text — it's keeping committed and speculative buffers separate so reconciliation never flickers or corrupts the final answer.
Build an assistant bubble that shows a speculative suffix (visually distinct) while the real stream catches up. On each real chunk, keep the matching prefix, clear the ghost on divergence, and clear speculation on Stop or stream completion.
Senior framing: two buffers, one render. Never merge speculative text into committed state until the real stream confirms it.
Requirements & constraints
- Maintain separate committed and speculative string buffers for assistant messages
- Speculative suffix is visually distinct from committed tokens
- Reconcile on each real chunk using a shared-prefix rule; clear speculation on hard mismatch
- Demo a predictor that diverges from the real stream (not a perfect copy)
- Clear speculation on Stop (only the in-flight message) and on stream complete
- Send/Stop toggle while streaming; empty input blocked
- User can type a new message after the stream ends
How to approach AI Speculative / Optimistic Token UI
The strategy an interviewer expects you to reach for.
How I'd Think About This Problem Optimistic UI for tokens is a buffer problem. If you put speculation into the same string as confirmed text, every correction becomes a destructive edit and the bubble flickers. Keep two fields: { committed: 'Speculative decoding shows', speculative: ' a predicted continuation…' } Render them as adjacent spans with different styles. Mentally: committed is truth; speculative is a ghost that is allowed to be wrong.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.