logo

Aki UI

アキ ウイ

AI Voice

エーアイボイス

A push-to-talk control: a mic button, an elapsed timer and a bar meter. With live set it asks for the microphone through getUserMedia↗↗ and drives the bars from an AnalyserNode↗↗, one bar per slice of the frequency spectrum. If permission is refused, no input device exists, or the browser has no AudioContext, it does not throw — it falls back to a synthetic trace so the recorder keeps working. The tracks and the audio context are torn down when recording stops, which is what actually releases the microphone indicator. Off by default, since a component should not ask for the mic just to be rendered. Adapted from Kokonut UI↗↗ under the MIT licence.

00:00

Click to speak

Installation

Copy and paste the following code into a new component file:1

"use client"

/**
* Adapted for Aki UI from Kokonut UI's AI Voice.
* Original author: @dorianbaffier — https://kokonutui.com
* Copyright (c) 2025 kokonutUI, MIT License.
* https://github.com/kokonut-labs/kokonutui
*
* Reworked here onto the local palette, with the bar meter optionally driven
* by a real Web Audio AnalyserNode instead of a fixed random pattern.

How to use it2

"use client"

import { AiVoice } from "@/components/ui/ai-voice"

export default function Page() {
return (
<AiVoice live onStop={(seconds) => console.log(`recorded ${seconds}s`)} />
)
}

Props

AiVoice

NameDefaultDescription
bars48

number

Number of bars in the meter

livefalse

boolean

Drive the meter from the real microphone instead of a synthetic trace

onStop—

(seconds: number) => void

Called when recording stops, with the length of the take

darkfalse

boolean

Render the dark palette