# Voice Mode

> Talking to an agent instead of typing: same agent, same tools, same approvals, same thread.

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/VoiceMode/)

Talking to an agent instead of typing: same agent, same tools, same approvals, same thread.

Props: `name`, `tint`, `state` ("listening" | "thinking" | "speaking" | "idle"), `stateLabel`, `transcript`, `muted`, `onMute`, `onEnd`.

- Approvals asked by voice still show the ApprovalCard; money needs the passkey on screen.

## Example

```tsx
import * as React from "react";
import { Segmented, VoiceMode } from "@twentyfirstmedia/pro";
import type { VoiceModeProps } from "@twentyfirstmedia/pro";

function App() {
  const s = React.useState<VoiceModeProps["state"]>("listening");
  return (
    <div
      className="tf-col"
      style={{
        gap: 16,
      }}
    >
      <Segmented
        value={s[0]}
        onChange={(v) => s[1](v as VoiceModeProps["state"])}
        options={[
          { value: "listening", label: "Listening" },
          { value: "thinking", label: "Thinking" },
          { value: "speaking", label: "Speaking" },
          { value: "idle", label: "Idle" },
        ]}
      />
      <VoiceMode
        name="Atlas"
        tint="sky"
        state={s[0]}
        transcript={s[0] === "speaking" ? "“I drafted the reply. Should I send it?”" : null}
        onMute={() => {}}
        onEnd={() => {}}
      />
    </div>
  );
}
export default App;
```

## Props

### Segmented

| Prop | Type | Notes |
| --- | --- | --- |
| `options` | `(string \| Option)[]` | Required |
| `value?` | `string` |  |
| `defaultValue?` | `string` |  |
| `onChange?` | `(v: string) => void` |  |
| `size?` | `"sm"` |  |
| `block?` | `boolean` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### VoiceMode

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `tint?` | `Tint` |  |
| `state` | `"listening" \| "thinking" \| "speaking" \| "idle"` | Required |
| `stateLabel?` | `string` |  |
| `transcript?` | `ReactNode` |  |
| `muted?` | `boolean` |  |
| `onMute?` | `() => void` |  |
| `onEnd?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |