Persona

Persona

Persona é um widget de chat open-source e customizável, desenvolvido para adicionar inteligência artificial a qualquer site. Oferece streaming SSE, loops de agente, uso de ferramentas e isolamento de estilo, sem depender de frameworks.

O que é Persona?

Persona é uma biblioteca open-source de UI para agentes, escrita em JavaScript puro, que permite aos desenvolvedores criar experiências front-end baseadas em agentes para qualquer site. Funciona com qualquer stack e qualquer backend SSE, oferecendo widgets de chat leves, extensíveis e nativos do WebMCP. Persona suporta streaming via SSE, loops de agentes, uso de ferramentas e isolamento de estilos, sem dependências de frameworks. Você pode inseri-lo em uma página como um lançador flutuante, um copiloto ancorado ou um assistente em tela cheia — tudo configurável alterando as configurações do lançador.

Application scenarios

  • Suporte ao cliente

    Adicione um lançador de chat flutuante para lidar com suporte, documentação, vendas ou integração, sem configurar layout.

  • Interfaces de copiloto

    Ancore um painel lateral ao lado do seu aplicativo que redimensiona, empurra ou sobrepõe o layout para assistência em tempo real.

  • Assistentes em tela cheia

    Preencha um contêiner como superfície de aplicativo com uma divisão opcional de artefatos para interações imersivas com o agente.

  • Loja virtual

    Use ferramentas WebMCP para expor pesquisa de produtos, carrinhos e reservas diretamente através do agente.

  • Agendamento de calendário

    Integre ações de calendário como ferramentas WebMCP para marcar compromissos via chat.

  • Slides de apresentação

    Controle slides por meio de ferramentas WebMCP orientadas pelo agente, com aprovação do usuário integrada.

  • Demonstração de assistente de padaria

    Mostre fluxos de trabalho baseados em agentes para pedidos, inventário ou solicitações personalizadas em uma demonstração temática.

Core Features

  • Três modos de UX

    Escolha entre layouts flutuante, ancorado ou tela cheia alterando a configuração do lançador — sem necessidade de alterações no agente ou aplicativo.

  • Uso de ferramentas nativo do WebMCP

    Exponha ações da página, como pesquisa, carrinhos, reservas e formulários, como ferramentas WebMCP que o agente aciona diretamente, com aprovação do usuário integrada.

  • Isolamento com Shadow DOM

    Os estilos do widget e do host permanecem totalmente separados via renderização Shadow DOM e CSS prefixado — nada vaza para dentro ou para fora.

  • Suporte a streaming SSE

    Funciona com qualquer backend SSE para respostas em streaming em tempo real do seu agente.

  • Loops de agentes e uso de ferramentas

    Suporta loops de agentes que podem operar seu aplicativo através de ferramentas WebMCP expostas, sem integração com backend.

  • JavaScript puro e leve

    Sem dependências de frameworks — JavaScript puro que funciona em qualquer stack.

  • Opções de instalação simples

    Instale via npm (`@runtypelabs/persona`) ou uma tag de script do CDN com configuração mínima.

  • Editor de temas

    Inclui um Editor de Temas para personalizar a aparência do widget.

  • Modo de altura total

    Desative o lançador e use o modo de altura total para ocupar toda a página como superfície de aplicativo.

Público-alvo

Persona é voltado para desenvolvedores front-end, desenvolvedores web e equipes de produto que desejam adicionar interfaces de chat inteligentes e baseadas em agentes aos seus sites sem reescrever sua stack. É ideal para equipes que criam widgets de suporte ao cliente, experiências de copiloto ou assistentes de IA em tela cheia que precisam operar ações da página através de ferramentas WebMCP.

Como usar Persona?

Instale Persona via npm (npm install @runtypelabs/persona) ou inclua a tag de script do CDN no seu HTML. Importe o CSS e a função de inicialização e configure o widget com a URL da API do seu backend SSE. Escolha seu modo de UX (flutuante, ancorado ou tela cheia) definindo a configuração do lançador. Para o modo flutuante, use o lançador padrão; para o modo ancorado, defina mountMode: "docked" com um lado e largura; para tela cheia, desative o lançador e defina fullHeight: true. Aponte o alvo para um elemento DOM (por exemplo, #chat ou #workspace) para montar o widget.

Análise de resultados

Persona oferece uma abordagem refinada e amigável para desenvolvedores na incorporação de widgets de chat baseados em agentes, com foco em flexibilidade e isolamento. Os três modos de UX — flutuante, ancorado e tela cheia — cobrem padrões comuns de implantação sem exigir alterações no backend. O isolamento com Shadow DOM é um recurso de destaque para equipes preocupadas com conflitos de CSS em sites existentes. Embora as demonstrações (WebMCP Storefront, Calendar, Slides) mostrem potencial real, a verdadeira força da biblioteca está em seu design em JavaScript puro, sem frameworks, e no uso de ferramentas nativo do WebMCP. Para desenvolvedores que buscam uma UI de agente leve e extensível que funcione com qualquer backend SSE, Persona é uma escolha sólida e direta.

Frequently Asked Questions

O que é o Persona?
O Persona é um widget de chat de IA de código aberto e personalizável que pode ser adicionado a qualquer site, com suporte a streaming SSE, loops de agente, uso de ferramentas e isolamento de estilo.
O Persona é gratuito?
Sim, o Persona é de código aberto e gratuito para uso.
O Persona suporta respostas em streaming?
Sim, o Persona oferece suporte a streaming SSE para respostas de chat em tempo real.
Posso personalizar o Persona para combinar com o design do meu site?
Sim, o Persona é personalizável e possui isolamento de estilo, permitindo que você ajuste sua aparência sem interferir nos estilos do seu site.
O que são loops de agente no Persona?
Loops de agente permitem que a IA realize raciocínio ou ações em várias etapas, como chamar ferramentas ou APIs, para concluir tarefas.
O Persona exige um framework específico?
Não, o Persona é independente de framework e pode ser integrado a qualquer site.

Persona - AI Tool Detail

Persona é um widget de chat open-source e customizável, desenvolvido para adicionar inteligência artificial a qualquer site. Oferece streaming SSE, loops de agente, uso de ferramentas e isolamento de estilo, sem depender de frameworks.

Category:Chat bot

Visit Link:https://www.persona-chat.dev/

Tags:código aberto、widget de chat、chatbot com IA、integração no site、personalizável