Overview
How might we design real-time translation so people can trust and act on AI output?
When this pattern fits
- Perfect for international communication tools, customer support platforms, and collaboration applications where real-time language translation enables seamless multilingual conversations.
When to skip or lighten it
- Legal testimony requiring certified human interpreters.
- Audio so noisy that live MT error rates break trust.
- Languages your model pair does not support reliably.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Translation with no original language visible.
Lag of many seconds with no partial transcript.
Wrong speaker attribution in multi-party rooms.
No mute or privacy notice while mic is live.
How products use it
| Product | Implementation |
|---|---|
| Google Translate | Conversation mode with split-screen bilingual text. |
| Microsoft Translator | Live captions and translation in Teams meetings. |
| Zoom | Translated captions during webinars and calls. |
| Skype | Real-time call translation with on-screen text. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Real-time Translation" AI interface design pattern.
Pattern Definition:Frequently asked questions
What should live translation UI show?
Original and translated text, active speaker, and language pair. Partials update as speech continues.
Voice or text output?
Captions are default. Optional TTS playback for hands-free, with clear latency tradeoffs.
How handle domain jargon?
Custom glossaries or user corrections that persist for the session.
Live translation vs lang-toggle?
Live translation is spoken input in meetings. Lang-toggle switches output language of written AI content.