A ElevenLabs abriu de graça 17 componentes pra agente de voz
O ElevenLabs UI tem o orbe animado que mostra se o agente está ouvindo ou falando, forma de onda, player, chat de atendimento e formulário preenchido por voz. Código aberto, em cima do shadcn/ui, instalado com um comando.
Todo mundo está colocando IA dentro do produto, e quase sempre a cara é a mesma: uma caixinha de chat e um botão de enviar. Quando a IA fala, não tem nada na tela que mostre se ela está ouvindo, pensando ou respondendo.
O ElevenLabs UI é a ElevenLabs, a empresa de voz com IA, abrindo os componentes de interface pra isso. É uma biblioteca de componentes de agente e de áudio com código aberto, feita em cima do shadcn/ui, pra você personalizar e usar no seu projeto.
O que tem lá
São 17 componentes. Os que mais chamam atenção:
- Orb: o orbe 3D animado, que muda conforme o estado do agente e reage ao volume do áudio
- Waveform e Live Waveform: a forma de onda do áudio, gravando ou tocando
- Audio Player e Scrub Bar: player com barra de progresso, pra música, podcast ou voz
- Conversation, Message e Conversation Bar: o chat do agente, com a barra de voz embaixo
- Voice Button, Mic Selector e Voice Picker: botão de microfone, escolha de microfone e escolha de voz
- Speech Input e Transcript Viewer: fala virando texto e a transcrição acompanhando o áudio
- Shimmering Text, Matrix, Bar Visualizer e Response: texto com brilho, tela de pontos, barras de áudio e a resposta formatada
O orbe
É o componente que dá nome ao post. Um orbe 3D, feito com Three.js, que tem quatro estados: parado, pensando, ouvindo e falando. Cada um muda a animação. Dá pra trocar as duas cores do degradê e ligar o movimento no volume de quem fala e no volume da resposta.
Na prática, é o que faz um assistente de voz parecer vivo. A pessoa fala e o orbe mostra que está ouvindo. A IA pensa e ele muda. A IA responde e ele acompanha a voz.
Como instalar
Cada componente sai com um comando só, pelo CLI da ElevenLabs ou pelo CLI do shadcn, e o código vem pra dentro do seu projeto, numa pasta sua. A página de instalação pede um projeto Next.js com Node 18 ou mais novo, e diz que, se o shadcn/ui ainda não estiver configurado, o próprio comando configura.
Se você não programa, o caminho é o mesmo de sempre: manda a sua IA ler a página do componente e instalar no seu projeto. Ela roda o comando, cria o arquivo e liga no lugar certo.
Os exemplos prontos
Além dos componentes soltos, tem uma página de exemplos com telas montadas: três versões de conversa por voz, transcritor, transcritor em tempo real, formulário que você preenche falando, dois players de música, um alto-falante e até um jogo de Pong. Cada um tem o comando de instalar do lado.
O que é grátis e o que precisa de conta
O código dos componentes é aberto e grátis, liberado até pra projeto de cliente. O que depende da ElevenLabs é a voz de verdade. A barra de conversa, por exemplo, pede o ID de um agente criado na plataforma deles, e a entrada por fala usa o serviço de transcrição da ElevenLabs.
A plataforma tem plano grátis, com 10 mil créditos por mês, e planos pagos a partir de US$ 6 por mês, segundo a página de preços deles. Já o orbe, pela própria documentação, funciona só com o visual: você controla o estado e o volume do seu lado, com o agente que quiser.
O que eu faria
- Instalar o Orb e colocar na tela onde a sua IA responde.
- Pedir pra sua IA ligar os estados: ouvindo quando a pessoa fala, pensando enquanto processa, falando quando responde.
- Trocar as duas cores do orbe pelas cores da sua marca.
- Se o produto for de voz, olhar os exemplos de conversa por voz antes de montar do zero.
O site é ui.elevenlabs.io, e o código de tudo está no GitHub da ElevenLabs.