Persona.js

Persona: De Ultieme VanillaJS Agent UI Library voor WebMCP

In de wereld van moderne webontwikkeling is de integratie van AI-agenten in de gebruikersinterface een cruciale stap geworden. Persona is een gespecialiseerde VanillaJS Agent UI Library die is ontworpen om ontwikkelaars te helpen bij het creëren van agentic front-end ervaringen op het web. Gebouwd op pure JavaScript, is Persona lichtgewicht, extreem uitbreidbaar en volledig WebMCP-native. Of u nu een eenvoudige chatwidget of een complexe assistent op volledig scherm wilt bouwen, Persona biedt de tools die u nodig heeft zonder de overhead van zware frameworks.

Wat is Persona?

Persona is een front-end bibliotheek waarmee u agent-ervaringen rechtstreeks in de browser kunt bouwen. Het onderscheidt zich door de focus op de VanillaJS Agent UI Library filosofie: het is onafhankelijk van frameworks en werkt op elke stack. Persona fungeert als de brug tussen uw AI-backend en de eindgebruiker, waarbij gebruik wordt gemaakt van de WebMCP-standaard om interactie met de pagina mogelijk te maken.

Het kernidee achter Persona is om de AI-agent niet alleen te laten praten, maar hem ook acties in uw applicatie te laten uitvoeren. Met Persona wordt de chat-UI meer dan alleen een tekstvak; het wordt een extra manier om uw applicatie te bedienen, ondersteund door de kracht van generatieve AI.

Belangrijkste Kenmerken van Persona

Persona is rijk aan functies die specifiek zijn ontworpen voor moderne AI-interacties:

1. Agentic: Bestuur uw App

Persona stelt agenten in staat om uw applicatie direct aan te sturen. Door pagina-acties, zoekfuncties, winkelwagentjes, boekingen en formulieren bloot te stellen als WebMCP tools, kan de agent deze rechtstreeks aansturen. Belangrijk hierbij is dat gebruikersgoedkeuring is ingebouwd, zodat de controle altijd bij de gebruiker blijft. Er is geen complexe backend-integratie vereist voor deze interacties.

2. Isolatie: Veilig voor uw Styles

Een veelvoorkomend probleem bij het toevoegen van widgets aan bestaande sites is dat stijlen kunnen gaan 'lekken'. Persona lost dit op door gebruik te maken van Shadow DOM rendering en geprefixte CSS. Dit houdt de widget en de stijlen van de host volledig gescheiden. Niets lekt naar binnen, en niets lekt naar buiten.

3. Transport: Streams van elke Backend

Persona ondersteunt SSE (Server-Sent Events) streaming met plugbare parsers. Of u nu werkt met de Vercel AI SDK, OpenAI Agents of een eigen oplossing, u kunt elke verzoek- of gebeurtenisvorm aanpassen met customFetch en parseSSEEvent. Hoewel Runtype het snelle pad biedt, is het geen vereiste.

4. Theming: Passend bij uw Merk

Met een boomstructuur van tokens in drie lagen (palet, semantisch en component) biedt Persona ongekende aanpassingsmogelijkheden. Inclusief een donkere modus en een live theme editor, kunt u de widget volledig laten aansluiten bij uw merkidentiteit zonder de code te forken.

Hoe gebruikt u Persona? (Quick Start)

Persona is ontworpen om binnen enkele regels code operationeel te zijn. U kunt kiezen voor installatie via NPM of via een script-tag.

Stap 1: Installatie

Gebruik NPM om de bibliotheek aan uw project toe te voegen:

npm install @runtypelabs/persona

Stap 2: Initialisatie

U kunt een floating, docked of fullscreen UX configureren. Hieronder ziet u een voorbeeld van een standaard floating launcher in de hoek van uw scherm:

import "@runtypelabs/persona/widget.css";
import { initAgentWidget } from "@runtypelabs/persona";

initAgentWidget({
  target: "#chat",
  config: {
    apiUrl: "https://your-api.com/chat",
    // floating launcher is de standaardinstelling
  },
});

Geavanceerde WebMCP Integratie

Het hart van Persona is de WebMCP-standaard. Dit geeft de browser een standaardlocatie voor paginatools via document.modelContext. Persona ontdekt deze tools automatisch, vraagt de gebruiker om toestemming en streamt het resultaat terug in het gesprek.

Voorbeeld van tool-registratie:

document.modelContext.registerTool({
  name: "search_products",
  description: "Doorzoek de catalogus.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" },
    },
    required: ["query"],
  },
  async execute({ query }) {
    return searchCatalog(query);
  },
});

Use Cases en Layouts

Persona is veelzijdig inzetbaar voor diverse scenario's:

• Floating Launcher: Ideaal voor klantondersteuning, documentatie, verkoop of onboarding. Het zweeft in de hoek en opent een paneel.
• Docked Panel: Een copilot die naast uw applicatie is geplaatst, perfect voor intensieve samenwerking tussen gebruiker en agent.
• Fullscreen Assistant: Een volledige interface voor diepe interacties en complexe taken.
• Business Scenario's: Persona wordt al gebruikt voor WebMCP Storefronts, Kalenders, Slide-generatie, en Bakkerij-assistenten.
• Interactieve Componenten: Ondersteuning voor voice-integratie, artifact sidebars, dynamische componenten en stream-animaties.

Compatibiliteit met Backends

Persona werkt met vrijwel elke SSE-backend. Er zijn kant-en-klare voorbeelden beschikbaar voor:

• AI SDK + WebMCP (Vercel)
• OpenAI Agents SDK
• LangGraph.js
• SvelteKit, Hono, Express
• Runtype Proxy

Veelgestelde Vragen (FAQ)

V: Werkt Persona met elk framework? A: Ja, aangezien het een VanillaJS Agent UI Library is, kunt u het in elk project gebruiken, ongeacht of u React, Vue, Svelte of helemaal geen framework gebruikt.

V: Wat is WebMCP? A: WebMCP is een standaard die de communicatie tussen webpagina's en AI-agenten normaliseert. Het stelt Persona in staat om tools op de pagina te ontdekken en te gebruiken.

V: Heeft Persona invloed op de snelheid van mijn website? A: Persona is ontworpen als een lichtgewicht bibliotheek om de impact op de prestaties minimaal te houden, terwijl het toch krachtige streaming-mogelijkheden biedt.

V: Kan ik de UI volledig aanpassen? A: Absoluut. Dankzij de drie-laagse token-tree voor theming en de live theme editor kunt u elk aspect van de vormgeving aanpassen aan uw eigen huisstijl.

Persona is een project van Runtype (2026) en is beschikbaar onder de MIT-licentie. Het stelt u in staat om de toekomst van agentic web interfaces vandaag nog te bouwen.