Inteligência Artificial

Criando Agentes de Voz Multiplataforma Avançados com Expo, React Native e IA Conversacional da ElevenLabs

Mizael Xavier

27 Mai 2025 • 5 min read

A criação de interfaces conversacionais por voz tem se tornado um diferencial crucial em aplicações modernas. A capacidade de interagir com dispositivos e serviços usando a fala natural oferece uma experiência de usuário intuitiva e eficiente. Neste artigo, exploraremos como desenvolver agentes de voz multiplataforma robustos, capazes de acessar funcionalidades nativas de dispositivos, utilizando o poder combinado do Expo, React Native e a avançada IA Conversacional da ElevenLabs.

O Poder dos Agentes de Voz Multiplataforma com IA Conversacional

Agentes de voz, também conhecidos como assistentes virtuais, permitem que os usuários realizem tarefas e acessem informações através de comandos de voz. Quando desenvolvidos com uma abordagem multiplataforma, como a oferecida pelo Expo e React Native, esses agentes podem operar de forma consistente em ambientes web, iOS e Android, economizando tempo de desenvolvimento e garantindo uma experiência de usuário unificada. A integração com uma IA Conversacional sofisticada, como a da ElevenLabs, eleva esses agentes a um novo nível, permitindo diálogos mais naturais, contextuais e com acesso a ferramentas e funcionalidades específicas do dispositivo.

Demonstração Prática: Agentes de Voz em Ação com Expo e ElevenLabs

Conforme demonstrado em projetos práticos, a combinação dessas tecnologias permite criar agentes de voz impressionantemente funcionais. Em uma demonstração típica, um agente é executado inicialmente em uma plataforma web:

Interação na Web: O usuário ativa o agente por voz e pergunta sobre o nível da bateria do dispositivo. O agente, utilizando a IA da ElevenLabs e as capacidades do Expo, acessa essa informação (que, em navegadores, geralmente reporta 100% se conectado à energia ou o nível real) e responde vocalmente.
Transição para iOS (Móvel): O mesmo agente é então executado em um dispositivo iOS. Após conceder permissão de acesso ao microfone, o agente informa que está rodando no iOS.
Acesso a Funcionalidades Nativas no iOS:
- O usuário pergunta novamente sobre o nível da bateria, e o agente responde corretamente com a porcentagem atual do iPhone.
- Solicitações para diminuir o brilho da tela ao mínimo são prontamente atendidas.
- Um comando para "piscar" a tela (alternar o brilho rapidamente) também é executado.
- Finalmente, o brilho da tela é restaurado ao máximo, tudo através de comandos de voz.

Essa demonstração evidencia a capacidade do agente de não apenas compreender e responder, mas também de interagir com as APIs nativas do dispositivo, independentemente da plataforma, graças à arquitetura flexível proporcionada pelo Expo e pela inteligência da ElevenLabs.

Arquitetura e Desenvolvimento: Como Construir seu Agente de Voz com Expo e ElevenLabs

A construção de tal agente envolve uma série de etapas e configurações específicas, desde a inicialização do projeto até a implementação da lógica de conversação e acesso às ferramentas do cliente.

Configuração Inicial do Projeto com Expo e React Native

O ponto de partida é um projeto Expo em branco, preferencialmente utilizando TypeScript para maior robustez e manutenibilidade. Isso pode ser feito com o comando: npx create-expo-app@latest --template blank-typescript.

Modificações cruciais são necessárias no arquivo app.json. Para iOS, é vital adicionar a chave NSMicrophoneUsageDescription no infoPlist, fornecendo uma mensagem clara ao usuário sobre o motivo do uso do microfone. Um bundleIdentifier único também deve ser definido. Para o funcionamento correto do microfone em WebViews, especialmente em desenvolvimento, a aplicação precisa ser servida via HTTPS, o que é facilitado pelo uso do túnel do Expo.

Dependências Essenciais para Agentes de Voz Multiplataforma

Diversas dependências são chave para o sucesso do projeto:

@11labs/react: O SDK React da ElevenLabs para a IA Conversacional, que forma o núcleo da capacidade de diálogo do agente.
expo-dev-client: Essencial para o suporte a túneis (expo start --tunnel), garantindo que o acesso ao microfone via WebView funcione corretamente ao ser servido por HTTPS.
react-native-webview: Utilizado pelos Componentes DOM do Expo para renderizar conteúdo web dentro da aplicação nativa.
react-dom react-native-web @expo/metro-runtime: Pacotes que habilitam o suporte do React Native para a web.
Ferramentas de Cliente Expo: Pacotes como expo-battery para acessar o nível da bateria e expo-brightness para controlar o brilho da tela.

A Mágica dos Componentes DOM do Expo para IA Conversacional

Uma das inovações mais significativas do Expo (a partir do SDK 52) são os Componentes DOM. Eles permitem que desenvolvedores utilizem código escrito para a plataforma web, incluindo SDKs como o da ElevenLabs (que é primariamente web-based), dentro de uma aplicação React Native. Isso é alcançado renderizando o componente DOM em uma WebView invisível e estabelecendo uma ponte de comunicação.

Ao criar um componente com a diretiva "use dom"; no topo do arquivo (ex: ConvAI.tsx), o Expo o tratará de forma especial. Esse componente pode então utilizar APIs web padrão, como navigator.mediaDevices.getUserMedia({ audio: true }) para solicitar acesso ao microfone. O Expo gerencia a ponte para que essas chamadas funcionem no contexto nativo.

Implementando a Lógica do Agente de Voz com ElevenLabs

Dentro do Componente DOM (ConvAI.tsx), a lógica principal do agente é implementada:

Permissão do Microfone: Uma função assíncrona (ex: requestMicrophonePermission) usa navigator.mediaDevices.getUserMedia para solicitar acesso.
Hook useConversation: Este hook do SDK da ElevenLabs é utilizado para gerenciar o estado da conversação (conexão, desconexão, mensagens, erros).
Função startConversation:
- Verifica se a permissão do microfone foi concedida.
- Inicia a sessão de conversação com conversation.startSession(). Este método recebe parâmetros importantes:
  - agentId: O ID do seu agente configurado na plataforma ElevenLabs.
  - dynamicVariables: Um objeto para injetar variáveis no prompt do sistema e na primeira mensagem. No exemplo, { platform: Platform.OS } é usado para informar ao agente em qual sistema operacional (web, ios, android) ele está rodando.
  - clientTools: Um objeto mapeando nomes de ferramentas (conforme definido na ElevenLabs) para as funções que as executam. Estas funções (ex: get_battery_level, change_brightness, flash_screen) são passadas como props do componente nativo para o componente DOM, pois elas precisam interagir com as APIs nativas do Expo (expo-battery, expo-brightness).
Comunicação de Mensagens: Um callback onMessage (passado como prop para o componente DOM) é usado para atualizar a interface do usuário na aplicação React Native principal (App.tsx) com as novas mensagens da conversa.

No arquivo principal da aplicação React Native (App.tsx), o Componente DOM é importado e utilizado. As funções que interagem com as APIs nativas do Expo (como tools.get_battery_level) são definidas aqui e passadas como props para o ConvAIDOMComponent.

Configurando o Agente na Plataforma ElevenLabs

A inteligência e o comportamento específico do agente são definidos na interface da ElevenLabs Conversational AI:

Primeira Mensagem: Pode ser configurada para usar variáveis dinâmicas. Exemplo: "Olá! Uau, que legal que estou rodando no {{platform}}. Como posso ajudar?". A variável {{platform}} será substituída pelo valor passado em dynamicVariables.
Prompt do Sistema: Guia o comportamento da LLM, definindo sua persona e o contexto da conversa. É crucial informar à LLM sobre as ferramentas que ela pode usar. Exemplo: "Você é um assistente prestativo rodando em {{platform}}. Você tem acesso a certas ferramentas que permitem verificar o nível da bateria do dispositivo e alterar o brilho da tela. Use essas ferramentas se o usuário perguntar sobre elas. Caso contrário, apenas responda à pergunta."
Definição de Ferramentas (Tools):
- Cada ferramenta (ex: get_battery_level, change_brightness, flash_screen) é definida com um nome, descrição e, se necessário, parâmetros.
- Para change_brightness, um parâmetro brightness do tipo numérico é definido, com uma descrição para a LLM sobre como extrair esse valor (ex: um número entre 0 e 1).
- É importante marcar a opção "Aguardar resposta" (Wait for response) para ferramentas que interagem com o dispositivo, para que o agente espere a conclusão da ação. Um timeout de resposta (ex: 3 segundos) também pode ser configurado.
Seleção da LLM: É possível escolher qual modelo de linguagem grande (LLM) utilizar. Modelos como o Gemini 2.0 Flash do Google são citados como eficazes para acionar ferramentas de cliente.

Implicações e Futuro dos Agentes de Voz com Expo e ElevenLabs

A capacidade de integrar SDKs web complexos, como o da ElevenLabs Conversational AI, em aplicações React Native através dos Componentes DOM do Expo, abre um leque de possibilidades. Desenvolvedores podem agora criar experiências de voz ricas e interativas que funcionam de forma consistente em múltiplas plataformas, acessando funcionalidades nativas dos dispositivos. Isso simplifica o desenvolvimento, reduz custos e permite a criação de aplicações mais acessíveis e engajadoras.

O futuro aponta para agentes de voz ainda mais inteligentes, contextuais e integrados, transformando a maneira como interagimos com a tecnologia no nosso dia a dia.

Conclusão

Desenvolver agentes de voz multiplataforma com acesso a funcionalidades nativas é uma tarefa complexa, mas que se torna significativamente mais acessível com ferramentas como Expo, React Native e a IA Conversacional da ElevenLabs. A arquitetura baseada em Componentes DOM do Expo é uma peça chave, permitindo a união do melhor dos mundos web e nativo. Ao seguir as diretrizes de configuração e implementação detalhadas, é possível construir assistentes virtuais poderosos e intuitivos, prontos para atender às demandas dos usuários modernos em qualquer dispositivo.