Persona.js

Persona : La Bibliothèque UI VanillaJS Ultime pour Agents WebMCP par Runtype

Dans l'ère actuelle de l'intelligence artificielle, l'intégration d'assistants intelligents au sein des interfaces web devient une priorité. Persona, développé par Runtype, s'impose comme la solution de référence pour les développeurs cherchant à créer des expériences front-end agentiques en pure JS (VanillaJS). Cette bibliothèque UI est non seulement légère et extensible, mais elle est surtout native WebMCP, offrant une fluidité inégalée dans l'interaction entre l'utilisateur, l'agent et l'application.

Qu'est-ce que Persona ?

Persona est une bibliothèque logicielle conçue pour faciliter la création d'interfaces utilisateur dédiées aux agents d'IA. Contrairement aux solutions lourdes dépendant de frameworks spécifiques, Persona repose sur VanillaJS, ce qui la rend compatible avec n'importe quel environnement de développement.

L'objectif principal de Persona est de permettre aux agents de ne pas seulement « discuter » avec l'utilisateur, mais de devenir de véritables opérateurs de votre application. Grâce au standard WebMCP, Persona transforme votre interface en un ensemble d'outils que l'agent peut manipuler directement, tout en maintenant un contrôle total pour l'utilisateur.

Caractéristiques Principales de Persona

Une Approche Native WebMCP

Persona donne au navigateur un endroit standardisé pour les outils de page via document.modelContext. L'agent Persona découvre automatiquement ces outils (recherche, paniers d'achat, formulaires de réservation) et demande l'autorisation à l'utilisateur avant de les exécuter. Cela signifie que la logique métier reste dans votre code de page, et le chat devient simplement une nouvelle interface pour l'utiliser.

Isolation Totale avec Shadow DOM

L'un des défis majeurs lors de l'ajout de widgets tiers est le conflit de styles CSS. Persona résout ce problème en utilisant le Shadow DOM et des préfixes CSS. Le widget est ainsi totalement isolé de la page hôte : aucun style ne s'échappe vers l'extérieur, et les styles de votre site n'interfèrent pas avec l'apparence de l'agent.

Transport et Streaming Flexibles

Le système de transport de Persona repose sur le streaming SSE (Server-Sent Events). Il est équipé de parseurs interchangeables, permettant de s'adapter à n'importe quelle structure de requête ou d'événement via customFetch et parseSSEEvent. Bien que le framework Runtype offre un chemin accéléré, il n'est pas une exigence stricte pour faire fonctionner Persona.

Thémage et Personnalisation

Persona propose un arbre de jetons (tokens) à trois couches : palette, sémantique et composant. Avec le support natif du mode sombre et un éditeur de thèmes en direct, vous pouvez faire correspondre l'interface de l'agent à l'identité visuelle de votre marque sans avoir à modifier le code source du widget.

Comment Utiliser Persona

Persona offre plusieurs chemins d'intégration pour s'adapter à votre flux de travail, que vous préfériez utiliser un gestionnaire de paquets ou une simple balise script.

Installation via NPM

Pour les projets modernes, commencez par installer le package via npm :

npm install @runtypelabs/persona

Initialisation Rapide (Widget Flottant)

Voici comment configurer un assistant flottant en quelques lignes de code :

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

initAgentWidget({
  target: "#chat",
  config: {
    apiUrl: "https://votre-api.com/chat",
    // Le lanceur flottant est la configuration par défaut
  },
});

Enregistrement d'un Outil WebMCP

Pour permettre à l'agent de réaliser des actions concrètes, enregistrez un outil sur votre page :

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

Cas d'Utilisation de Persona

Grâce à sa flexibilité, Persona s'adapte à de nombreux scénarios d'utilisation :

1. Support et Documentation : Un widget flottant qui aide les utilisateurs à naviguer dans votre documentation.
2. E-commerce (Storefront) : Un agent capable d'ajouter des produits au panier ou de rechercher des articles via WebMCP.
3. Gestion de Calendrier : Permettez aux utilisateurs de prendre des rendez-vous par simple discussion textuelle.
4. Copilote d'Application : Un panneau ancré (docked) qui assiste l'utilisateur en temps réel sur des tâches complexes.
5. Assistant Plein Écran : Pour une expérience immersive lors de l'onboarding ou de configurations assistées.

Intégrations et Écosystème

Persona est conçu pour fonctionner avec presque n'importe quel backend. Des exemples sont disponibles pour :

• Vercel AI SDK avec les outils de page WebMCP.
• LangGraph.js pour des graphes d'agents complexes.
• OpenAI Agents SDK (@openai/agents).
• Frameworks variés : SvelteKit, Hono, Express, Deno, Bun et Cloudflare Workers.

FAQ (Foire Aux Questions)

Qu'est-ce que Persona et comment cela fonctionne-t-il ? Persona est une bibliothèque UI en VanillaJS créée par Runtype. Elle permet de connecter une interface de chat à un agent d'IA, en utilisant le standard WebMCP pour que l'agent puisse interagir avec les fonctionnalités de votre site web.

Comment fonctionne le streaming ? Persona utilise le streaming SSE (Server-Sent Events) pour afficher les réponses de l'agent en temps réel. Vous pouvez configurer des parseurs personnalisés pour traiter les données provenant de n'importe quel backend.

Que puis-je personnaliser dans Persona ? Absolument tout. Grâce à l'éditeur de thèmes et au système de jetons, vous pouvez modifier les couleurs, les polices, les espacements et même les comportements de mise en page (flottant, ancré ou plein écran).

Persona fonctionne-t-il avec mon framework actuel ? Oui. Étant écrit en VanillaJS pur, Persona fonctionne avec React, Vue, Svelte, Angular, ou même sans aucun framework.

L'agent peut-il effectuer des actions sur mon site ? Oui, c'est la force de l'intégration WebMCP. En enregistrant des outils dans le document.modelContext, l'agent peut appeler vos fonctions JavaScript locales pour effectuer des recherches, remplir des formulaires ou gérer des commandes.