AI 語音元素 - Vercel

Hacker News·3 個月前

Vercel 發布了名為「AI 語音元素」的新產品，旨在協助開發者建構 AI 應用程式。此 TypeScript 工具組透過提供統一的模型端點並支援即時環境中的 AI 工作流程，以簡化 AI 的整合。

Build applications with AI

The AI Toolkit for TypeScript

One endpoint, all your models

An agent that knows your stack

AI workflows in live environments

Helping teams ship 6× faster

Fast, scalable, and reliable

Servers, in serverless form

Trace every step

Scalable bot protection

Invisible CAPTCHA

DDoS Protection, Firewall

Granular, custom protection

Trusted by the best teams

The latest posts and changes

See what shipped

Read the latest news

Join us at an event

Vercel documentation

Linear courses to level up

Find help quickly

Join the conversation

The native Next.js platform

The progressive web framework

The web’s efficient UI framework

Speed with Enterprise scale

Deploy at the speed of AI

Power storefronts that convert

Launch campaigns fast

Scale apps with one codebase

Ship features, not infrastructure

Extend and automate workflows

Jumpstart app development

Get help from solution partners

Automate away repetition

Deploy for every idea

Blog / Changelog

AI Voice Elements

2 min read

Today we're releasing a brand new set of components for AI Elements designed to work with the Transcription and Speech functions of the AI SDK, helping you build the next generation of voice agents, transcription services and apps powered by natural language.

Link to headingPersona

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.

Link to headingSpeech 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).

Link to headingTranscription

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.

Link to headingAudio 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.

Link to headingMicrophone 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.

Link to headingVoice 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.

Ready to deploy? Start building with a free account. Speak to an expert for your Pro or Enterprise needs.

Explore Vercel Enterprise with an interactive product tour, trial, or a personalized demo.

Products

Resources

Company

Social

Loading status…