KI Entwicklertools
Persona
Eine Open-Source Agent-UI-Bibliothek in VanillaJS zur Erstellung von agentischen Frontend-Erlebnissen mit WebMCP, SSE-Streaming und anpassbarem Theming.
Persona
Was ist Persona?
Persona ist eine quelloffene, leichtgewichtige JavaScript-Bibliothek zur Erstellung von agentischen Benutzeroberflächen (Chat-UI) für KI-Agenten. Sie unterstützt schwebende, angedockte oder vollbild Layouts, integriert sich mit jedem SSE-Backend und nutzt WebMCP, damit Agenten Seitenwerkzeuge verwenden können. Sie ist framework-unabhängig und bietet Shadow-DOM-Isolation, Theming und steckbare Parser.
Persona vs Ähnliche Tools
| Preismodell | Kostenlos | Kostenlos | Individuelle Preise | Kostenlos, Kostenpflichtig |
| Gratis-Credits | ||||
| Wichtige Funktionen |
|
|
|
|
| Vorteile |
|
|
|
|
| Nachteile |
|
|
|
|
| Geeignet für |
|
|
|
|
So nutzt du Persona?
- 1Installieren via npm: npm install @runtypelabs/persona
- 2CSS importieren: import '@runtypelabs/persona/widget.css'
- 3initAgentWidget importieren: import { initAgentWidget } from '@runtypelabs/persona'
- 4Widget mit einem Ziel-Element und Konfiguration (API-URL) initialisieren:
- 5initAgentWidget({ target: '#chat', config: { apiUrl: 'https://your-api.com/chat' } })
- 6Launcher-Typ anpassen (floating, docked, fullscreen) über die Konfigurationsoption.
Persona Wichtige Funktionen
- WebMCP-nativ: Agenten können über document.modelContext registrierte Seitenwerkzeuge nutzen
- Shadow-DOM-Rendering für Stilisolation
- SSE-Streaming mit steckbaren Parsern und customFetch
- Dreischichtiges Token-Theming (Palette, semantisch, Komponente) mit Dark Mode und Live-Editor
- Schwebende, angedockte oder Vollbild-UX-Modi
- Steckbare Transport- und Parser-Adapter
Persona Anwendungsfälle
- Chat-Widget für den Kundensupport
- KI-Co-Pilot für bestehende Webanwendungen
- Einführungsassistent für neue Benutzer
- Dokumentations-Frage-und-Antwort-Agent
- E-Commerce-Assistent für Produktsuche und Buchungen
Persona Preise und Gratis-Credits
Persona arbeitet mit dem Modell Kostenlos.
Persona Vorteile und Nachteile
Vorteile
- Leichtgewichtig und framework-unabhängig (reines VanillaJS)
- WebMCP-Standard ermöglicht Agenten die Nutzung vorhandener Seitenwerkzeuge
- Shadow-DOM isoliert Stile von der Host-Anwendung
- Steckbare Transporte und Parser funktionieren mit jedem SSE-Backend
- Umfassendes Theming-System für Markenanpassung
Nachteile
- Dokumentation und Beispiele wachsen noch
- Erfordert einen Backend-SSE-Endpunkt für die volle Funktionalität
Wofür eignet sich Persona am besten?
- Entwickler, die benutzerdefinierte KI-Agenten-UI erstellen
- Teams, die Agenten-Chat in bestehende Web-Apps integrieren möchten
- Projekte, die ein leichtgewichtiges, erweiterbares Chat-Widget benötigen