Persona ist ein quelloffenes, thematisierbares KI-Chat-Widget, das auf jeder Website eingebunden werden kann und SSE-Streaming, Agenten-Schleifen, Tool-Nutzung sowie Stilisolierung bietet.

Ist Persona kostenlos nutzbar?

Ja, Persona ist quelloffen und kostenlos nutzbar.

Unterstützt Persona Streaming-Antworten?

Ja, Persona unterstützt SSE-Streaming für Echtzeit-Chat-Antworten.

Kann Persona an das Design meiner Website angepasst werden?

Ja, Persona ist thematisierbar und bietet Stilisolierung, sodass Sie das Erscheinungsbild anpassen können, ohne die Stile Ihrer Website zu beeinträchtigen.

Was sind Agenten-Schleifen in Persona?

Agenten-Schleifen ermöglichen es der KI, mehrstufige Überlegungen oder Aktionen durchzuführen, wie das Aufrufen von Tools oder APIs, um Aufgaben zu erledigen.

Benötigt Persona ein bestimmtes Framework?

Nein, Persona ist framework-unabhängig und kann in jede Website integriert werden.

Persona - KI-Chat bot-Tools - Kostenlose Testversion, Preise, Leistungsbewertung, offizielle Website und Online-Erlebnis

Was ist Persona?

Persona ist eine quelloffene, auf Vanilla JS basierende Agent-UI-Bibliothek, mit der Entwickler agentische Frontend-Erlebnisse für jede Website erstellen können. Sie funktioniert mit jedem Stack und jedem SSE-Backend und bietet leichtgewichtige, erweiterbare und WebMCP-native Chat-Widgets. Persona unterstützt SSE-Streaming, Agenten-Schleifen, Tool-Nutzung und Stilisolierung ohne Framework-Abhängigkeiten. Sie können es als schwebenden Launcher, als angedockten Copilot oder als Vollbild-Assistenten in eine Seite einfügen – alles konfigurierbar durch Änderung der Launcher-Einstellungen.

Application scenarios

Kundensupport
Fügen Sie einen schwebenden Chat-Launcher hinzu, um Support, Dokumentation, Verkauf oder Onboarding ohne Layout-Konfiguration zu bewältigen.
Copilot-Oberflächen
Docken Sie ein Seitenpanel neben Ihrer App an, das Ihr Layout für Echtzeit-Unterstützung in der Größe anpasst, verschiebt oder überlagert.
Vollbild-Assistenten
Füllen Sie einen Container als App-Oberfläche mit optionaler Artefakt-Teilung für immersive Agenten-Interaktionen.
E-Commerce-Shopfront
Nutzen Sie WebMCP-Tools, um Produktsuche, Warenkörbe und Buchungen direkt über den Agenten verfügbar zu machen.
Terminplanung
Integrieren Sie Kalenderaktionen als WebMCP-Tools für die Buchung von Terminen über den Chat.
Präsentationsfolien
Steuern Sie Folien über agentengesteuerte WebMCP-Tools mit integrierter Benutzerfreigabe.
Bäckerei-Assistenten-Demo
Präsentieren Sie agentische Workflows für Bestellungen, Inventar oder kundenspezifische Anfragen in einer thematischen Demo.

Core Features

Drei UX-Modi
Wählen Sie zwischen schwebenden, angedockten oder Vollbild-Layouts durch Änderung der Launcher-Konfiguration – keine Änderungen an Ihrem Agenten oder Ihrer App erforderlich.
WebMCP-native Tool-Nutzung
Machen Sie Seitenaktionen wie Suche, Warenkörbe, Buchungen und Formulare als WebMCP-Tools verfügbar, die der Agent direkt steuert, mit integrierter Benutzerfreigabe.
Shadow-DOM-Isolierung
Widget- und Host-Stile bleiben durch Shadow-DOM-Rendering und präfixiertes CSS vollständig getrennt – nichts dringt ein oder aus.
SSE-Streaming-Unterstützung
Funktioniert mit jedem SSE-Backend für Echtzeit-Streaming-Antworten Ihres Agenten.
Agenten-Schleifen und Tool-Nutzung
Unterstützt agentische Schleifen, die Ihre App durch exponierte WebMCP-Tools ohne Backend-Integration betreiben können.
Leichtgewichtiges Vanilla JS
Keine Framework-Abhängigkeiten – reines JavaScript, das auf jedem Stack läuft.
Einfache Installationsoptionen
Installation über npm (`@runtypelabs/persona`) oder ein Script-Tag von einem CDN mit minimaler Konfiguration.
Themen-Editor
Enthält einen Theme-Editor zur Anpassung des Erscheinungsbilds des Widgets.
Vollbild-Modus
Schalten Sie den Launcher aus und verwenden Sie den Vollbild-Modus, um die gesamte Seite als App-Oberfläche zu nutzen.

Zielgruppe

Persona wurde für Frontend-Entwickler, Webentwickler und Produktteams entwickelt, die ihren Websites intelligente, agentische Chat-Oberflächen hinzufügen möchten, ohne ihren Stack neu schreiben zu müssen. Es ist ideal für Teams, die Kundensupport-Widgets, Copilot-Erlebnisse oder Vollbild-KI-Assistenten erstellen, die Seitenaktionen über WebMCP-Tools ausführen müssen.

Wie verwendet man Persona?

Installieren Sie Persona über npm (npm install @runtypelabs/persona) oder fügen Sie das CDN-Script-Tag in Ihr HTML ein. Importieren Sie das CSS und die Init-Funktion, konfigurieren Sie dann das Widget mit Ihrer SSE-Backend-API-URL. Wählen Sie Ihren UX-Modus (schwebend, angedockt oder Vollbild) durch Festlegen der Launcher-Konfiguration. Für schwebend verwenden Sie den Standard-Launcher; für angedockt setzen Sie mountMode: "docked" mit einer Seite und Breite; für Vollbild deaktivieren Sie den Launcher und setzen fullHeight: true. Weisen Sie das Ziel einem DOM-Element zu (z. B. #chat oder #workspace), um das Widget zu montieren.

Bewertung der Wirkung

Persona bietet einen ausgefeilten, entwicklerfreundlichen Ansatz zur Einbettung agentischer Chat-Widgets mit Fokus auf Flexibilität und Isolierung. Die drei UX-Modi – schwebend, angedockt und Vollbild – decken gängige Bereitstellungsmuster ab, ohne Backend-Änderungen zu erfordern. Die Shadow-DOM-Isolierung ist eine herausragende Funktion für Teams, die sich um CSS-Konflikte in bestehenden Websites sorgen. Während die Demos (WebMCP Storefront, Kalender, Folien) reales Potenzial zeigen, liegt die wahre Stärke der Bibliothek in ihrem frameworklosen Vanilla-JS-Design und der WebMCP-nativen Tool-Nutzung. Für Entwickler, die ein leichtgewichtiges, erweiterbares Agent-UI suchen, das mit jedem SSE-Backend funktioniert, ist Persona eine solide, unkomplizierte Wahl.

Persona