Voice agentNew

Voice assistant card with a cube outline made of particles that shake like sound while the call is live, and a Start talking / End call button.

Installation

Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.

$pnpm dlx shadcn@latest add @nextui/voice-agent

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

Usage

1"use client";
2
3import { useState } from "react";
4import { VoiceAgent } from "@/components/nextui/voice-agent";
5
6export function Example() {
7  const [live, setLive] = useState(false);
8
9  return (
10    <VoiceAgent
11      active={live}
12      onActiveChange={(next) => {
13        setLive(next);
14        // start or stop your voice session here
15      }}
16    />
17  );
18}

API reference

Edit props live in the preview above, or see all 6 props

Prop	Type	Default	Description
title	ReactNode	"Voice assistant"	Heading at the top of the card
active	boolean	–	Controlled call state; leave out to let the card manage it
defaultActive	boolean	false	Starting call state when uncontrolled
onActiveChange	(active: boolean) => void	–	Called when Start talking or End call is pressed
level	number	–	Live voice level from 0 to 1, e.g. from an AnalyserNode; leave out for a simulated voice
className	string	–	Extra class on the card

How it works

The cube is drawn on a canvas in the text color, so it follows light and dark themes
Each particle has its own size, brightness and pace, and flickers softly; now and then one drifts off a line and another moves in to fill the gap. During a call every particle also shakes with the voice while the cube keeps its shape
ParticleCube is exported on its own if you only want the animation
Reduced motion shows a still frame, and the animation pauses while off screen

All components

Chat inputNew

Task checklistNew

ReasoningNew

Installation

$pnpm dlx shadcn@latest add @nextui/voice-agent

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

Usage

1"use client";
2
3import { useState } from "react";
4import { VoiceAgent } from "@/components/nextui/voice-agent";
5
6export function Example() {
7  const [live, setLive] = useState(false);
8
9  return (
10    <VoiceAgent
11      active={live}
12      onActiveChange={(next) => {
13        setLive(next);
14        // start or stop your voice session here
15      }}
16    />
17  );
18}

API reference

Edit props live in the preview above, or see all 6 props

Prop	Type	Default	Description
title	ReactNode	"Voice assistant"	Heading at the top of the card
active	boolean	–	Controlled call state; leave out to let the card manage it
defaultActive	boolean	false	Starting call state when uncontrolled
onActiveChange	(active: boolean) => void	–	Called when Start talking or End call is pressed
level	number	–	Live voice level from 0 to 1, e.g. from an AnalyserNode; leave out for a simulated voice
className	string	–	Extra class on the card

How it works

The cube is drawn on a canvas in the text color, so it follows light and dark themes
Each particle has its own size, brightness and pace, and flickers softly; now and then one drifts off a line and another moves in to fill the gap. During a call every particle also shakes with the voice while the cube keeps its shape
ParticleCube is exported on its own if you only want the animation
Reduced motion shows a still frame, and the animation pauses while off screen

Chat inputNew

Task checklistNew

ReasoningNew

Voice agentNew

Installation

Usage

API reference

How it works

Related

Voice agentNew

Installation

Usage

API reference

How it works

Related