Persona.js

Persona: Rewolucyjna Biblioteka UI dla Agentów AI w VanillaJS i WebMCP

W dobie dynamicznego rozwoju sztucznej inteligencji, sposób, w jaki użytkownicy wchodzą w interakcję z aplikacjami internetowymi, ulega radykalnej zmianie. Persona to przełomowa biblioteka interfejsu użytkownika (UI) typu VanillaJS, zaprojektowana specjalnie do budowania zaawansowanych doświadczeń agentycznych (agentic experiences). Stworzona przez zespół Runtype Labs, Persona jest rozwiązaniem lekkim, rozszerzalnym i w pełni natywnym dla standardu WebMCP.

Czym jest Persona?

Persona to biblioteka UI dedykowana dla agentów AI, która pozwala na tworzenie interaktywnych paneli czatu i asystentów bezpośrednio w przeglądarce, bez konieczności polegania na ciężkich frameworkach. Jest to rozwiązanie typu VanillaJS, co oznacza, że można je wdrożyć w dowolnym projekcie webowym, niezależnie od stosowanego stosu technologicznego.

Kluczowym elementem wyróżniającym bibliotekę Persona jest jej ścisła integracja z WebMCP (Model Context Protocol dla sieci). Dzięki temu agenci AI mogą nie tylko rozmawiać z użytkownikiem, ale również „widzieć” i obsługiwać narzędzia dostępne bezpośrednio na stronie internetowej – od wyszukiwarek, przez koszyki zakupowe, aż po zaawansowane formularze rezerwacji.

Kluczowe Funkcje Biblioteki Persona

Persona oferuje zestaw unikalnych cech, które czynią ją idealnym wyborem dla programistów chcących wdrożyć agentów AI nowej generacji:

1. Agentic UI – Agenci Sterujący Aplikacją

Persona nie jest tylko prostym oknem czatu. Pozwala ona agentowi AI na bezpośrednie operowanie aplikacją. Poprzez wystawienie akcji strony, takich jak wyszukiwanie, obsługa koszyka czy rezerwacje jako narzędzi WebMCP, asystent może je samodzielnie uruchamiać (zawsze po uzyskaniu zgody użytkownika). Wszystko to odbywa się bez potrzeby skomplikowanej integracji po stronie backendu.

2. Izolacja Stylów (Shadow DOM)

Jednym z największych wyzwań przy dodawaniu widżetów do istniejących stron jest konflikt stylów CSS. Persona rozwiązuje ten problem, korzystając z technologii Shadow DOM oraz prefiksowanych klas CSS. Dzięki temu style widżetu Persona nie „wyciekają” na zewnątrz, a style hosta nie psują wyglądu asystenta. Możesz go bezpiecznie upuścić na dowolną stronę.

3. Transport i Strumieniowanie SSE

Biblioteka Persona obsługuje strumieniowanie danych za pomocą SSE (Server-Sent Events) z dowolnego backendu. Dzięki wymiennym parserom (parseSSEEvent) i obsłudze customFetch, można ją dostosować do dowolnego kształtu zapytania lub zdarzenia. Persona wspiera standardy takie jak Vercel AI SDK, LangGraph.js czy OpenAI Agents SDK.

4. Zaawansowane Tematowanie (Theming)

Persona została zaprojektowana tak, aby pasować do Twojej marki. Oferuje trójwarstwowe drzewo tokenów: paletę kolorów, warstwę semantyczną oraz warstwę komponentów. Zawiera wbudowany tryb ciemny (dark mode) oraz interaktywny edytor motywów (Theme Editor), który pozwala na dostosowanie wyglądu w czasie rzeczywistym bez konieczności forkowania kodu widżetu.

Jak Używać Biblioteki Persona?

Implementacja biblioteki Persona jest niezwykle prosta i może zostać wykonana na dwa główne sposoby: poprzez menedżer pakietów NPM lub prosty tag script.

Instalacja przez NPM

Aby rozpocząć pracę w nowoczesnym środowisku programistycznym, zainstaluj pakiet:

npm install @runtypelabs/persona

Inicjalizacja Widżetu

Wystarczy kilka linii kodu, aby uruchomić asystenta na swojej stronie:

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

initAgentWidget({
  target: "#chat",
  config: {
    apiUrl: "https://your-api.com/chat",
    // Domyślnie używany jest układ pływający (floating launcher)
  },
});

Rejestracja Narzędzi WebMCP

Aby agent mógł wchodzić w interakcję ze stroną, należy zarejestrować narzędzia w kontekście modelu:

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

Przypadki Użycia (Use Cases)

Persona znajduje zastosowanie w wielu scenariuszach biznesowych, oferując różne układy interfejsu (UX):

• Floating (Pływający widżet): Idealny do wsparcia klienta, dokumentacji, sprzedaży lub onboardingu. Launcher w rogu ekranu, który otwiera pływający panel.
• Docked (Zadokowany panel): Doskonale sprawdza się jako copilot działający obok głównej aplikacji, pomagając użytkownikowi w czasie rzeczywistym.
• Fullscreen (Pełnoekranowy asystent): Dedykowany dla rozbudowanych interakcji, gdzie asystent AI zajmuje centralne miejsce w doświadczeniu użytkownika.

Przykłady implementacji: Persona wspiera takie scenariusze jak WebMCP Storefront (obsługa sklepu), kalendarz (rezerwacje), asystent piekarni (Bakery Assistant) czy integracje głosowe.

FAQ – Najczęściej Zadawane Pytania

Czy Persona współpracuje z dowolnym backendem? Tak, Persona może strumieniować dane z dowolnego backendu obsługującego SSE. Istnieją gotowe przykłady dla Vercel AI SDK, OpenAI Agents, LangGraph.js, Hono, Express, SvelteKit i wielu innych.

Co to jest WebMCP? WebMCP to standard, który daje przeglądarce ujednolicone miejsce na narzędzia strony (document.modelContext). Persona wykorzystuje ten standard, aby odkrywać narzędzia na stronie i pozwalać agentowi na ich używanie za zgodą użytkownika.

Czy muszę używać konkretnego frameworka UI? Nie. Persona to biblioteka VanillaJS, co oznacza, że działa bez żadnego frameworka, ale może być zintegrowana z dowolnym z nich (React, Vue, Svelte itp.).

Czy asystent AI może sam wykonywać akcje na mojej stronie? Tak, jeśli zarejestrujesz te akcje jako narzędzia WebMCP. Persona automatycznie zapyta użytkownika o zatwierdzenie danej akcji przed jej wykonaniem przez agenta.

Jak dostosować wygląd widżetu? Możesz skorzystać z systemu tokenów CSS lub użyć interaktywnego narzędzia Theme Editor, aby dopasować kolory i style do Twojej marki.