# AI Voice Elements

**Published:** January 14, 2026 | **Authors:** Hayden Bleasel

---

Today we're releasing a brand new set of components for AI Elements designed to work with the [Transcription](https://ai-sdk.dev/docs/ai-sdk-core/transcription) and [Speech](https://ai-sdk.dev/docs/ai-sdk-core/speech) functions of the AI SDK, helping you build the next generation of voice agents, transcription services and apps powered by natural language.

# Persona

The `Persona` component displays an animated AI visual that responds to different conversational states. Built with Rive WebGL2, it provides smooth, high-performance animations for various AI interaction states including idle, listening, thinking, speaking, and asleep. The component supports multiple visual variants to match different design aesthetics.

```bash
npx ai-elements@latest add persona
```

[Video: persona-light](//videos.ctfassets.net/e5382hct74si/6NCDl2m2seCbbJp6ZiYcLS/b9df3c152d65fde72b28a0b3bcd8052f/persona-light.mp4)

# Speech Input

The `SpeechInput` component provides an easy-to-use interface for capturing voice input in your application. It uses the Web Speech API for real-time transcription in supported browsers (Chrome, Edge), and falls back to MediaRecorder with an external transcription service for browsers that don't support Web Speech API (Firefox, Safari).

```bash
npx ai-elements@latest add speech-input
```

[Video: speech-input-light](//videos.ctfassets.net/e5382hct74si/3v2NdCVvEZ6sj7S0GyhxWF/b9fdbf6e38d5b2a35bc89ec8869564ce/speech-input-light.mp4)

# Transcription

The `Transcription` component provides a flexible render props interface for displaying audio transcripts with synchronized playback. It automatically highlights the current segment based on playback time and supports click-to-seek functionality for interactive navigation.

```bash
npx ai-elements@latest add transcription
```

[Video: transcription-light](//videos.ctfassets.net/e5382hct74si/6tniEejkgM8h5F1rGw1v0D/274ee3a942a62aa0d2ee8c416c2f4d2b/transcription-light.mp4)

# Audio Player

The `AudioPlayer` component provides a flexible and customizable audio playback interface built on top of media-chrome. It features a composable architecture that allows you to build audio experiences with custom controls, metadata display, and seamless integration with AI-generated audio content.

```bash
npx ai-elements@latest add audio-player
```

![CleanShot 2026-01-16 at 12.20.59@2x](//images.ctfassets.net/e5382hct74si/3DYtqDPnqrPdVe4s0g1UQ/56c59f8e6c87ea9d63a4f34f8008f377/CleanShot_2026-01-16_at_12.20.59_2x.png)

# Microphone Selector

The `MicSelector` component provides a flexible and composable interface for selecting microphone input devices. Built on shadcn/ui's Command and Popover components, it features automatic device detection, permission handling, dynamic device list updates, and intelligent device name parsing.

```bash
npx ai-elements@latest add mic-selector
```

![CleanShot 2026-01-16 at 12.22.59@2x](//images.ctfassets.net/e5382hct74si/4wHUvjMrUL6LAyGucZ3APZ/c5b913528eecbf3a6b97961b6ffb680f/CleanShot_2026-01-16_at_12.22.59_2x.png)

# Voice Selector

The `VoiceSelector` component provides a flexible and composable interface for selecting AI voices. Built on shadcn/ui's Dialog and Command components, it features a searchable voice list with support for metadata display (gender, accent, age), grouping, and customizable layouts. The component includes a context provider for accessing voice selection state from any nested component.

```bash
npx ai-elements@latest add voice-selector
```

![CleanShot 2026-01-16 at 12.24.10@2x](//images.ctfassets.net/e5382hct74si/6EpqdwRm43EVUoAWnV1tyv/8a5d231a21aedd67fe6d6a86b65fa4d8/CleanShot_2026-01-16_at_12.24.10_2x.png)

---

📚 **More updates:** [View all changelog entries](/changelog/sitemap.md) | [Blog](/blog/sitemap.md)