AudioRecorder
Voice recorder with realtime waveform, duration, cancel, and submit controls.
Examples
Line waveform version
The recorder hosts any AudioVisualizer usage version. App-wide, repoint the one import in your owned audio-recorder.tsx (bars → line); per instance, compose explicit children and stand a part bound to the line version on useAudioRecorderContext, as here.
Composition
The preferred shape for composing the installed agent from its exported parts.
Parts
Exported compound parts from the installed source.
AudioRecorder├── AudioRecorderTrigger├── AudioRecorderVisualizer├── AudioRecorderStatus├── AudioRecorderDuration├── AudioRecorderCancel└── AudioRecorderSubmitThis agent installs from the audio-recorder registry. Install the bundle with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/audio-recorder.jsonUsage
import type { AudioRecording } from "@/components/refined-ui/audio-recorder";import { AudioRecorder } from "@/components/refined-ui/audio-recorder";type MastraAttachment = { name: string; contentType: string; data: Blob;};export function Example({ addAttachment }: { addAttachment: (attachment: MastraAttachment) => void }) { function handleRecordingComplete(recording: AudioRecording) { addAttachment({ name: `voice-note.${recording.mimeType.includes("mp4") ? "m4a" : "webm"}`, contentType: recording.mimeType, data: recording.blob, }); } return <AudioRecorder onRecordingComplete={handleRecordingComplete} />;}Installed dependencies
Installed with this agent because the visible component depends on them; they are support files, not separate product surfaces.
src/registry/hooks/use-audio-recorder.tsHooksrc/registry/sources/refined/audio-visualizer.tsxSupportRaw code
Primary installed agent source
Primitives
This agent composes these library primitives, installed under components/refined-ui/ui/*.