Show HN: Persona.js – a vanilla-JS agent UI library with native WebMCP (MIT)

THE VANILLAJS Agent UI Library

Persona helps you create agentic front-end experiences for the web, in pure JS. Lightweight, extensible, and WebMCP-native.

$npm install @runtypelabs/persona

Runs on any stack

+ any SSE backend

Demos that make you [and your browser] happy

WebMCP Storefront

WebMCP Calendar

WebMCP Slides

Bakery Assistant

Fullscreen Layout

Docked Panel

Theme Editor

Click a card to open it full size

Agentic

Operates Your App

Expose page actions, search, carts, bookings, forms, as WebMCP tools and the agent drives them directly, with user approval built in. No backend integration required.

Isolation

Won't Break Your Styles

Shadow DOM rendering and prefixed CSS keep widget and host styles fully separate. Drop it into any page: nothing leaks in, nothing leaks out.

Transport

Streams From Any Backend

SSE streaming with pluggable parsers. Adapt any request or event shape with customFetch and parseSSEEvent: Runtype is the fast path, not a requirement.

Theming

Style It Like It Belongs

A three-layer token tree, palette, semantic, component, with dark mode and a live theme editor. Match your brand without forking the widget.

Quick Start

Choose Your Integration Path

Start from a pre-built example for your stack, or ship a hosted widget with Runtype.

Start from a pre-built example. Each one mounts the real widget against a working backend you can clone, read, and adapt.

Bare script tag No framework: a script-tag install over a node:http backend.

Source

AI SDK + WebMCP WebMCP page tools on a Vercel AI SDK backend.

Source Live demo

OpenAI Agents OpenAI Agents SDK (@openai/agents) backend.

Source

LangGraph.js A LangGraph.js graph streamed to the widget.

Source

AI SDK + Responses Minimal AI SDK and OpenAI Responses adapters.

Source

eve Vercel eve agent backend (beta).

Source

Hono One app.fetch handler on Node, Bun, Deno, Workers.

Source

Express The callback-style (req, res) bridge.

Source

SvelteKit A one-line Web-standard +server.ts route.

Source

Runtype proxy Runtype API proxy on Hono (Node, Vercel, Workers).

Source

Or wire your own SSE backend by hand

01

Install Persona

Add the widget package to your app.

02

Mount the widget

Import the stylesheet, initialize Persona, and point it at your SSE endpoint. Adapt any request or event shape with customFetch and parseSSEEvent.

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

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

Built an adapter for your stack? Contribute it back.

Persona is built by the team at Runtype. The Runtype CLI spins up a Persona agent and client token in seconds.

01

Run the CLI setup

Create an agent, mint a client token, and get a paste-ready installer snippet.

Sign in when prompted: the CLI reveals your token and lets you copy the snippet.

02

Paste the installer snippet

Use the default script installer when you want the fastest path to a live widget.

The widget mounts on body by default. Need a specific container? Pass --target-selector "#chat" and the CLI will include a mount div and data-config in the snippet.

Need server-side flow control? Use @runtypelabs/persona-proxy.

// Your page registers a tool… document.modelContext.registerTool({ name: "search_products", description: "Search the catalog.", inputSchema: { type: "object", properties: { query: { type: "string" }, }, required: ["query"], }, async execute({ query }) { return searchCatalog(query); }, });

// Persona discovers it through WebMCP // and asks before calling it.

WebMCP Standard

Let Agents Use The Tools Already On Your Page

WebMCP gives the browser a standard place for page tools: document.modelContext. Persona discovers those tools, asks the user before calling them, and streams the result back into the conversation. Search, carts, bookings, and forms stay in your page code. The chat UI just becomes another way to use them.

Open Storefront Demo Open Calendar Demo

Demos & Patterns

See What Persona Can Do

Agentic, layout, voice, and business scenarios: every demo is a working page you can open and inspect.

WebMCP Storefront↗ WebMCP Calendar↗ WebMCP Slides↗ Bakery Assistant↗ Fullscreen Assistant↗ Docked Panel↗ Tool Approval↗ Voice Integration↗ Artifact Sidebar↗ Dynamic Components↗ Stream Animations↗ Theme Editor↗

Browse All Examples Standalone Script Samples