shadcn.io is not affiliated with official shadcn/ui
Voice Assistant AI Block for Ark UI
A voice session panel in four states, Idle, Listening, Thinking and Speaking, with a waveform that moves only when sound would, a typed transcript, Mute, a speed select and a summary of turns, length and words.
Installation
Overview
Show what a spoken conversation looks like, with this AI voice assistant for React with Ark UI. A compact header names Echoloft, a voice companion, and says plainly that there is no microphone and no audio. A hairline frame with a plus mark on each corner holds the session: a large state word (Idle, Listening, Thinking, Speaking) beside a drawn Waveform Text that moves only while it is listening or the assistant speaks aloud, a transcript log that fills word by word, and the controls. The Shine Button Start session runs two typed turns through the four states on a timer and becomes an outline End session in the same place; Mute keeps the reply on screen but still; a Native Select sets the speaking speed from 0.75 to 1.5 times, with "Speaking takes about 12 s" beside it. A summary of turns, length and words is worked out from the transcript when the session ends.
FAQ
What stays in the page, and how do I make it real?
Everything. No microphone is requested, nothing is recorded and no sound plays: what you "say" and what comes back are two typed turns at the top of the file, as the header says. To wire it, request the microphone in Start, stream the transcript into the same lines, and drive the four phases from your speech and model events instead of the timer.
How do the four states work?
A session is one small object: the phase, the turn and how many words of the current line are showing. One effect advances it on a timer: words appear while Listening, a one-second Thinking follows, then the reply appears word by word while Speaking, and the next turn begins. After the second reply the session ends by itself.
What does the speed control change?
How fast the reply appears, and the time printed beside the select, which is worked out from the reply's word count (about 0.4 s a word at normal speed). Mute stops the waveform and adds "muted" to the turn line during the reply; the text still arrives.
Where do the summary figures come from?
From the transcript and a one-second counter, not typed: turns are the lines you "said", words are counted across every visible line, and length is the seconds the session ran. Before a session ends they show dashes, so the band never changes height.
Is it usable with a keyboard and a screen reader?
The state word is a heading whose text changes, the transcript is a focusable log, Mute is a pressed button and the select is labelled. The waveform is decorative and hidden from assistive technology, one polite status line says what changed, and reduced motion stops the waveform and shows each line whole.