Persona es un widget de chat de IA de código abierto y personalizable que se puede agregar a cualquier sitio web. Incluye transmisión SSE, bucles de agente, uso de herramientas y aislamiento de estilos.

¿Persona es gratuito?

Sí, Persona es de código abierto y se puede usar sin costo.

¿Persona admite respuestas en tiempo real?

Sí, Persona utiliza transmisión SSE para ofrecer respuestas de chat en tiempo real.

¿Puedo personalizar Persona para que coincida con el diseño de mi sitio web?

Sí, Persona es personalizable y cuenta con aislamiento de estilos, lo que permite modificar su apariencia sin afectar los estilos de tu sitio.

¿Qué son los bucles de agente en Persona?

Los bucles de agente permiten que la IA realice razonamientos o acciones de varios pasos, como llamar a herramientas o APIs, para completar tareas.

¿Persona requiere un framework específico?

No, Persona es independiente del framework y se puede integrar en cualquier sitio web.

Persona - Herramientas de IA para Chatbot - Prueba gratuita, precios, reseñas, acceso al sitio oficial y experiencia en línea

¿Qué es Persona?

Persona es una biblioteca de UI para agentes de código abierto, escrita en vanilla JS, que permite a los desarrolladores crear experiencias front-end agénticas en cualquier sitio web. Funciona con cualquier stack y cualquier backend SSE, ofreciendo widgets de chat ligeros, extensibles y nativos de WebMCP. Persona soporta streaming SSE, bucles de agente, uso de herramientas y aislamiento de estilos, sin dependencias de frameworks. Puedes insertarlo en una página como lanzador flotante, copiloto acoplado o asistente a pantalla completa, todo configurable cambiando la configuración del lanzador.

Application scenarios

Atención al cliente
Añade un lanzador de chat flotante para gestionar soporte, documentación, ventas o incorporación sin configurar el diseño.
Interfaces de copiloto
Acopla un panel lateral junto a tu aplicación que redimensiona, empuja o superpone tu diseño para asistencia en tiempo real.
Asistentes a pantalla completa
Llena un contenedor como superficie de aplicación con una división opcional de artefactos para interacciones agénticas inmersivas.
Tienda en línea
Usa herramientas WebMCP para exponer búsqueda de productos, carritos y reservas directamente a través del agente.
Programación de calendario
Integra acciones de calendario como herramientas WebMCP para reservar citas mediante chat.
Diapositivas de presentación
Controla diapositivas a través de herramientas WebMCP impulsadas por el agente con aprobación del usuario incorporada.
Demo de asistente de panadería
Muestra flujos de trabajo agénticos para pedidos, inventario o solicitudes personalizadas en una demo temática.

Core Features

Tres modos de UX
Elige entre diseños flotante, acoplado o a pantalla completa cambiando la configuración del lanzador, sin necesidad de modificar tu agente o aplicación.
Uso de herramientas nativo de WebMCP
Expone acciones de página como búsqueda, carritos, reservas y formularios como herramientas WebMCP que el agente maneja directamente, con aprobación del usuario incorporada.
Aislamiento con Shadow DOM
Los estilos del widget y del anfitrión se mantienen completamente separados mediante renderizado en Shadow DOM y CSS prefijado: nada se filtra hacia adentro o hacia afuera.
Soporte de streaming SSE
Funciona con cualquier backend SSE para respuestas en tiempo real desde tu agente.
Bucles de agente y uso de herramientas
Soporta bucles agénticos que pueden operar tu aplicación a través de herramientas WebMCP expuestas, sin integración de backend.
Vanilla JS ligero
Sin dependencias de frameworks: JavaScript puro que funciona en cualquier stack.
Opciones de instalación simples
Instala vía npm (`@runtypelabs/persona`) o una etiqueta script desde CDN con configuración mínima.
Editor de temas
Incluye un Editor de Temas para personalizar la apariencia del widget.
Modo de altura completa
Desactiva el lanzador y usa el modo de altura completa para que el widget ocupe toda la página como superficie de aplicación.

Usuarios objetivo

Persona está diseñado para desarrolladores front-end, desarrolladores web y equipos de producto que quieran añadir interfaces de chat inteligentes y agénticas a sus sitios web sin reescribir su stack. Es ideal para equipos que construyen widgets de atención al cliente, experiencias de copiloto o asistentes de IA a pantalla completa que necesitan operar acciones de página a través de herramientas WebMCP.

¿Cómo usar Persona?

Instala Persona vía npm (npm install @runtypelabs/persona) o incluye la etiqueta script del CDN en tu HTML. Importa el CSS y la función de inicialización, luego configura el widget con la URL de tu API backend SSE. Elige tu modo de UX (flotante, acoplado o a pantalla completa) configurando el lanzador. Para el modo flotante, usa el lanzador predeterminado; para el acoplado, establece mountMode: "docked" con un lado y un ancho; para pantalla completa, desactiva el lanzador y establece fullHeight: true. Apunta el destino a un elemento del DOM (por ejemplo, #chat o #workspace) para montar el widget.

Revisión de resultados

Persona ofrece un enfoque pulido y amigable para desarrolladores para incrustar widgets de chat agénticos, centrándose en la flexibilidad y el aislamiento. Los tres modos de UX (flotante, acoplado y a pantalla completa) cubren patrones de implementación comunes sin requerir cambios en el backend. El aislamiento con Shadow DOM es una característica destacada para equipos preocupados por conflictos de CSS en sitios existentes. Aunque las demos (WebMCP Storefront, Calendar, Slides) muestran potencial real, la verdadera fortaleza de la biblioteca radica en su diseño vanilla JS sin framework y el uso nativo de herramientas WebMCP. Para desarrolladores que buscan una UI de agente ligera y extensible que funcione con cualquier backend SSE, Persona es una opción sólida y sin complicaciones.

Persona