AI Elements Persona vs personagem Rive próprio

O que o componente AI Elements Persona faz?

O AI Elements é a biblioteca de componentes React da Vercel para interfaces de IA, feita para funcionar junto com o AI SDK. O Persona é a peça de avatar dela. A documentação o descreve como um componente que "exibe um visual animado de IA que responde a diferentes estados de conversa" (AI Elements: Persona).

Por baixo dos panos, ele renderiza com Rive em WebGL2, então as mudanças de estado se misturam suavemente em vez de cortar de um clipe para outro. Ele também resolve um detalhe do React que costuma quebrar componentes WebGL feitos à mão: a documentação menciona uma proteção embutida que adia a inicialização do WebGL2 em um frame, para que nenhum contexto seja criado durante a montagem descartável de desenvolvimento do Strict Mode.

Como outros componentes do AI Elements, o Persona é adicionado ao seu projeto como código-fonte, e não instalado como um pacote fechado:

npx ai-elements@latest add persona

"use client";

import { Persona } from "@/components/ai-elements/persona";

export function AssistantVisual({ state }: { state: "idle" | "listening" | "thinking" | "speaking" | "asleep" }) {
  return <Persona state={state} className="size-24" />;
}

Como ele usa APIs do navegador, renderize-o a partir de um client component no App Router do Next.js. Se você omitir variant, obtém o visual padrão Obsidian.

Quais estados e variantes ele suporta?

O Persona suporta cinco estados de conversa e seis variantes visuais, de acordo com a documentação (AI Elements: Persona):

Os cinco estados correspondem ao comportamento dos assistentes e seguem as convenções da maioria dos guias de avatar: ouvir enquanto o usuário fala, pensar enquanto o modelo trabalha, falar enquanto responde, dormir quando a sessão está inativa.

Saber o que não está na lista é igualmente útil. Não há reações únicas como success ou error, nem um estado "loading" separado de thinking. Se o seu produto precisa comemorar uma tarefa concluída ou sinalizar uma falha visualmente, você vai mostrar isso em outro lugar da interface.

O mapeamento a partir do AI SDK é curto. Com useChat, submitted vira thinking, streaming vira speaking e todo o resto vira idle (referência do useChat):

const personaState = status === "submitted" ? "thinking" : status === "streaming" ? "speaking" : "idle";

Posso usar meu próprio personagem no Persona?

Não de forma documentada. A documentação do Persona lista as props acima e as seis variantes embutidas; ela não descreve como passar seu próprio arquivo .riv nem como adicionar uma variante (AI Elements: Persona). Em outubro de 2026, trate o Persona como um conjunto de visuais abstratos prontos.

Como o componente é copiado para o seu código, você pode ler como ele carrega os arquivos Rive e o que define neles. Editá-lo para apontar para outro arquivo é possível em princípio, mas não é documentado: seu arquivo teria que expor exatamente os inputs ou propriedades que o componente controla, e atualizar o componente depois sobrescreveria suas alterações.

O caminho mais limpo é um pequeno componente próprio que aceite a mesma prop state. Sua lógica de chat continua produzindo "idle" | "listening" | "thinking" | "speaking" | "asleep", e você escolhe na hora de renderizar se isso vai para o Persona ou para o seu personagem. O runtime React do próprio Rive cuida do arquivo com poucas linhas, como mostra a próxima seção; veja Rive em React e Next.js para detalhes de configuração.

Como os estados do Persona se relacionam com um personagem de 10 humores?

Um personagem com humores numerados cobre os cinco estados do Persona e ainda deixa espaço para reações. Com o layout de dez humores usado em outros guias, o mapeamento é direto:

"use client";

import { useEffect } from "react";
import { useRive, useViewModelInstanceNumber } from "@rive-app/react-webgl2";

export type PersonaState = "idle" | "listening" | "thinking" | "speaking" | "asleep";

const MOOD: Record<PersonaState, number> = { idle: 0, listening: 6, thinking: 3, speaking: 7, asleep: 8 };

export function CharacterPersona({ state, className }: { state: PersonaState; className?: string }) {
  const { rive, RiveComponent } = useRive({
    src: "/character.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  const { setValue: setMood } = useViewModelInstanceNumber("mood", rive?.viewModelInstance);

  useEffect(() => {
    setMood(MOOD[state]);
  }, [state, setMood]);

  return (
    <div aria-hidden="true" className={className}>
      <RiveComponent />
    </div>
  );
}

Os hooks vêm da API de Data Binding do Rive para React (Data Binding do Rive para React). Como as props são as mesmas, alternar entre <Persona state={s} /> e <CharacterPersona state={s} /> é uma mudança de uma linha. Depois, você pode adicionar as reações que faltam no Persona com useViewModelInstanceTrigger("success", ...).

Como lidar com carregamento e erros no Persona ou em um personagem personalizado?

As duas opções baixam um runtime do Rive e um arquivo .riv antes de qualquer coisa aparecer, então planeje os primeiros instantes e as falhas. O Persona expõe callbacks de ciclo de vida para isso, incluindo onLoad, onReady e onLoadError (AI Elements: Persona). Um componente personalizado obtém as mesmas informações do useRive: a instância rive continua null até o arquivo carregar.

• Reserve o espaço. Dê ao wrapper um tamanho fixo para que o layout do chat não pule quando o canvas aparecer.
• Mostre uma imagem estática primeiro. Uma imagem estática da pose idle atrás do canvas evita uma caixa vazia em conexões lentas.
• Tenha um fallback discreto. Se o carregamento falhar, mantenha a imagem estática e siga em frente. O assistente precisa funcionar sem o avatar.
• Mantenha o status em texto. Seja o visual um orbe ou um mascote, um rótulo como "Pensando" informa a todos o que está acontecendo, inclusive a quem usa leitor de tela.

Para pausar fora da tela, movimento reduzido e remontagens do canvas, as regras são idênticas para os dois; veja animação de avatar de IA acessível e rápida.

Quando um mascote da marca é melhor que um orbe abstrato?

Nenhum é melhor em geral. Eles transmitem coisas diferentes.

Escolha o Persona quando estiver prototipando, quando o assistente for um utilitário dentro de uma ferramenta maior ou quando você quiser a sensação neutra e ambiente de um orbe. Escolha um personagem quando o assistente for o produto, quando você já tiver um mascote ou logo que as pessoas reconhecem ou quando precisar de reações além dos cinco estados, como comemorar uma reserva concluída.

A diferença de custo diminuiu. O Charmotion transforma um personagem ou logo existente em um conjunto de 17 animações em poucos minutos, com os dez humores acima e seis triggers em um único .riv (planos pagos, a partir de US$ 20/mês), além de exportações em MP4, GIF e WebM/MOV transparentes para lugares onde um canvas não chega. Seja qual for a sua escolha, mantenha a lógica de estados separada do visual, como no wrapper acima, para que a decisão continue reversível.

Perguntas frequentes

Quais estados o componente Persona do AI Elements suporta?

O Persona suporta cinco estados: idle, listening, thinking, speaking e asleep. Ele renderiza com Rive em WebGL2 e vem em seis variantes: Obsidian (a padrão), Mana, Opal, Halo, Glint e Command. As props documentadas são state, variant, className e callbacks de ciclo de vida como onLoad e onLoadError.

Posso carregar um arquivo .riv personalizado no Persona?

A documentação do Persona não descreve como carregar seu próprio .riv nem como adicionar variantes. Como o código-fonte do componente é copiado para o seu projeto, editá-lo é tecnicamente possível, mas não documentado. Um pequeno componente Rive que aceite a mesma prop state é a forma mais fácil de manter para usar um personagem da sua marca.

O Persona funciona com o React Strict Mode?

Sim. A documentação descreve uma proteção integrada que adia a inicialização do WebGL2 em um frame, para que nenhum contexto seja criado durante a montagem descartável de desenvolvimento do Strict Mode. Se você criar seu próprio avatar Rive, mantenha useRive e RiveComponent em um único componente estável para evitar problemas de remontagem.

Respostas rápidas deste guia

• Quais estados o componente Persona do AI Elements suporta?

Fontes

• Persona component, Vercel AI Elements
• useChat reference, AI SDK by Vercel
• React runtime: Data binding, Rive
• React runtime: Best practices, Rive