Persona.js
MIT-licensed vanilla-JS library for embedding agentic chat UIs that can drive your page through WebMCP tools.
Pick Persona.js if you want the agent UI layer to be yours: vanilla JS, MIT-licensed, framework-free, and pointed at whatever SSE backend you already run. The parts that justify it over rolling your own chat shell are WebMCP tool registration (document.modelContext.registerTool) for page actions with approval built in, Shadow DOM isolation so the widget can't fight your CSS, and the three-layer token tree for brand theming. If you want a managed chat product with hosting and analytics included, look at Chatwoot or Intercom instead — Persona.js gives you neither, and you own the backend, the token handling, and the SSE contract.
Verified 4d ago · liveness 77/100 · cite: rightaichoice.com/tools/persona-js
- JavaScript developers adding agent chat to an existing site
- Teams that already run an SSE backend
- Products where the agent must operate page UI, not just answer
- Front-end teams needing strict CSS isolation via Shadow DOM
- Teams that want a hosted chat service and no backend of their own
- Projects needing native iOS or Android SDK components
- Non-developers who can't edit JavaScript or wire an SSE endpoint
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Persona.js if you need a hosted chat product with a managed backend and analytics built in, or you can't own an SSE endpoint and the client token flow yourself.
The library is MIT and self-hosted, but you pay for whatever serves config.apiUrl — model tokens, compute, and streaming bandwidth sit entirely on your backend.
Persona.js is MIT-licensed, so the library cost is $0 and the real spend is your own backend serving config.apiUrl. That puts it in a different budget line from managed chat SaaS such as Intercom, where you pay per seat or per resolution and get hosting included. The trade is explicit: cheaper software, more engineering. The Runtype CLI path adds a hosted-service dependency whose commercial terms are outside the sources for this refresh.
In short
Persona.js — MIT-licensed vanilla-JS library for embedding agentic chat UIs that can drive your page through WebMCP tools. Best for JavaScript developers adding agent chat to an existing site, Teams that already run an SSE backend, Products where the agent must operate page UI, not just answer. Free to use.
What people actually say about Persona.js — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
18 mentions across 3 sources (Hacker News, Product Hunt, Lemmy) · researched Jul 2, 2026.
Average across the 3 sources that answered — each source counts once, not each post.
- +Framework-agnostic vanilla JS works with any stack or no framework.
- +WebMCP-native integration enables agents to drive real UI actions cleanly.
- +Three layout modes: floating launcher, docked panel, fullscreen assistant.
- +Shadow DOM isolates styles from host page, preventing CSS conflicts.
- +Live theme editor and three-layer token system for easy customization.
- −Safety around agent-driven UI actions lacks robust tool-call preview.
- −Chain-of-call vulnerabilities between read-only and mutative tools.
- −Token usage can spike when exposing simple frontend states via WebMCP.
- −Granular control over which UI actions become tools is limited.
- −No built-in human-in-the-loop for destructive actions by default.
Viability Score
How well maintained and how widely used is Persona.js? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: October 2026
How we score →Key Features
- Framework-free vanilla JS library
- npm install @runtypelabs/persona or CDN script tag install
- Three layout modes: floating launcher, docked panel, fullscreen assistant
- Docked mode with configurable side and width (dock: { side: "right", width: "420px" })
- Fullscreen mode with launcher disabled and fullHeight
- WebMCP-native agent tool support via document.modelContext.registerTool
- User approval built into tool execution
- No backend integration required for WebMCP page tools
- SSE streaming with pluggable parsers
- Custom fetch and parseSSEEvent hooks
- Shadow DOM style isolation with prefixed CSS
- Three-layer theme token system (palette, semantic, component)
- Dark mode and live theme editor
- Artifact split in fullscreen layout
- Runtype CLI setup: npx @runtypelabs/cli@latest persona init
About Persona.js
Persona.js is an open-source JavaScript library for putting an agentic chat interface into any web page. It is written in pure vanilla JS, so it mounts into React, Vue, Svelte, or a plain HTML page without a framework wrapper, and it talks to your own SSE backend via config.apiUrl. You install it with npm install @runtypelabs/persona or a CDN script tag (install.global.js) and call initAgentWidget({ target, config }). Three layout modes are switched through config rather than code changes: a floating launcher, a docked side panel that resizes, pushes, or overlays a wrapped page region, and a fullscreen assistant that can disable the launcher and run fullHeight with an optional artifact split. The distinguishing feature is WebMCP: you register page actions as tools — document.modelContext.registerTool({ name: "search_products", ... }) — and the agent drives search, carts, bookings, or form filling directly, with user approval built into tool execution and no backend integration required for those page tools. Shadow DOM rendering plus prefixed CSS keeps widget styles and host styles fully separate, and a three-layer token tree (palette, semantic, component) with dark mode and a live theme editor lets you match a brand without forking the widget. Transport is SSE with pluggable parsers; customFetch and parseSSEEvent adapt any request or event shape. Pre-built examples ship for a bare script tag, Vercel AI SDK, OpenAI Agents SDK, LangGraph.js, Hono, Express, and SvelteKit, plus a Runtype CLI path (npx @runtypelabs/cli@latest persona init) that creates an agent and client token and prints a paste-ready installer snippet. Persona.js is built by the team at Runtype. It is client-side only: you supply the backend and hosting. It suits developers and product teams who want an agent UI they control rather than a hosted chat SaaS.
Behind the Verdict
Persona.js occupies a narrow, useful slot: the presentation layer of an agent, not the agent itself. The install surface is small — npm install @runtypelabs/persona or a script tag with install.global.js, then initAgentWidget({ target, config }) with apiUrl pointing at your SSE endpoint. What you get back is more configurable than most embedded chat widgets. Layout is a config concern, not a rewrite: launcher.mountMode: "docked" with dock: { side: "right", width: "420px" } wraps a page region and reveals a resizing panel, while launcher: { enabled: false, fullHeight: true } turns the widget into a full-page assistant with an optional artifact split. That flexibility is the reason to choose it over a fixed-position third-party chat bubble. WebMCP is the part with no real equivalent in hosted chat products. Page actions — search, carts, bookings, forms — are exposed as tools through document.modelContext.registerTool, the agent calls them, and approval is part of the execution path. Because those tools live in the page, no backend integration is needed for them; your backend only has to stream the conversation. Transport is deliberately boring: SSE with pluggable parsers, plus customFetch and parseSSEEvent hooks so an odd request or event shape doesn't force a fork. The stack examples cover the realistic backends — bare script tag over node:http, Vercel AI SDK with WebMCP page tools, OpenAI Agents SDK (@openai/agents), LangGraph.js, Hono on Node/Bun/Deno/Workers, Express with the (req, res) bridge, SvelteKit with a +server.ts route, and a Runtype API proxy. Runtype is positioned as the fast path, not a requirement. Styling holds up: three token layers (palette, semantic, component), dark mode, live theme editor, Shadow DOM with prefixed CSS. The honest limits are architectural. This is a client-side UI library — it does not host your backend, manage your model calls, or store conversations; you own config.apiUrl and everything behind it. If you use the Runtype CLI path you introduce a client token (data-runtype-token="ct_test_...") and the CLI's environment handling into your deploy, which is a dependency worth weighing even though the library itself is MIT. And it is a web widget: there is no native mobile SDK in the sources. Choose it when your team writes JavaScript, your backend already streams SSE, and the agent needs to actually operate the page rather than just talk about it.
Researching Persona.js? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Real-world workflow fit
Concrete scenarios for the personas Persona.js actually fits — and what changes day-one when you adopt it.
Installs @runtypelabs/persona, imports widget.css, and calls initAgentWidget({ target: "#chat", config: { apiUrl: "https://your-api.com/chat" } }) with the default floating launcher against an existing SSE endpoint.
Outcome: A themed support launcher is live on the marketing site without touching the app framework or the agent code.
Targets the app's main column with launcher: { mountMode: "docked", dock: { side: "right", width: "420px" } } and registers page actions such as search_products via document.modelContext.registerTool.
Outcome: Users ask in natural language and the agent performs real page actions, with each tool call requiring approval.
Uses launcher: { enabled: false, fullHeight: true } to run the assistant as the whole app surface with an artifact split, cloning the Hono or Express example as the streaming backend.
Outcome: A dedicated fullscreen assistant ships as its own tool, reusing the same widget, theming, and SSE contract.
Use Cases
- Add a floating support or onboarding launcher to a SaaS site with initAgentWidget and one apiUrl.
- Wrap a page region with a docked copilot panel that resizes or overlays beside your app.
- Run a fullscreen assistant as the app surface, with an optional artifact split and no launcher.
- Register page actions as WebMCP tools so the agent searches, books, or fills forms with user approval.
- Theme the widget to a brand with the three-layer token tree, dark mode, and live editor, without forking.
- Adapt an unusual backend contract with customFetch and parseSSEEvent instead of changing backends.
- Point the same widget at a Vercel AI SDK, OpenAI Agents SDK, or LangGraph.js stream.
- Use the Runtype CLI to mint an agent and client token and get a paste-ready installer snippet.
Limitations
- Persona.js is a client-side UI library.
- It points at your own SSE endpoint through config.apiUrl and does not provide backend hosting, model routing, or conversation storage — you own everything behind that URL.
- It installs as a web asset (npm package @runtypelabs/persona or the install.global.js script), and the sources document no native mobile SDK.
- WebMCP page tools need no backend integration, but the conversation stream still does.
- The Runtype CLI path adds a client token (data-runtype-token) and environment handling to your deployment.
- License is MIT.
as of 2026-10-05
Verification history
We have re-verified Persona.js 10 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
Showing the 6 most recent of 10 verification passes.
Free to cite with attribution — this page re-verifies continuously.
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Plans compared
For each published Persona.js tier: who it actually fits, and what it adds vs. the previous tier. Cross-reference the cost calculator above for projected annual outlay.
Open Source
$0/mo
Ideal for
Developers and teams who already run an SSE backend and want the widget on their own infrastructure with no per-seat cost.
What this tier adds
Starting tier: MIT license, self-hosted, all library features, community support.
Runtype Cloud (CLI setup)
Free tier available, paid plans TBD
Ideal for
Builders who want a fast live demo or a hosted agent token without standing up their own streaming backend first.
What this tier adds
Adds a managed agent and client token via npx @runtypelabs/cli@latest persona init plus a paste-ready installer snippet and test/live environments.
Where the pricing makes sense
The company stage and team size where Persona.js's pricing actually pencils out — and where peers do it cheaper.
Persona.js is MIT-licensed, so the library cost is $0 and the real spend is your own backend serving config.apiUrl. That puts it in a different budget line from managed chat SaaS such as Intercom, where you pay per seat or per resolution and get hosting included. The trade is explicit: cheaper software, more engineering. The Runtype CLI path adds a hosted-service dependency whose commercial terms are outside the sources for this refresh.
Setup time & first value
How long it actually takes to get something useful out of Persona.js — broken out by persona, not the marketing-page minute.
With an SSE backend already streaming: minutes — npm install plus an initAgentWidget call, or paste the install.global.js script snippet. With Runtype: the npx @runtypelabs/cli@latest persona init flow mints a token and returns a paste-ready snippet, so a demo widget is also a short session. From scratch, expect to spend the real time on your backend and on registering WebMCP tools, not on the
Switching to or from Persona.js
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From a hosted chat widget: point initAgentWidget at your own SSE endpoint and reuse the existing conversation service.
- →From a React chat component: replace the component with initAgentWidget and use the docked mount mode to keep the side-panel layout.
- →From Vercel AI SDK UI: keep the backend and mount the previewed AI SDK example against the same stream.
- →From a custom chat shell: register your page actions as WebMCP tools instead of hand-wiring buttons.
- →From a bare script-tag chatbot: swap in install.global.js and set window.siteAgentConfig.target.
- ↗To a managed chat SaaS: move conversation handling and hosting off your backend, losing the WebMCP page-tool execution.
- ↗To a React chat library: rebuild the widget as components and re-implement theming with your own CSS tokens.
- ↗To a full product SDK with native mobile: port the SSE contract to the SDK's transport.
- ↗To a self-built UI: copy the SSE parsing behavior into your own client and drop the Shadow DOM isolation.
Integrations
Resources & Guides
Tutorials & Learning
YouTube returned 6 videos for “Persona.js”, and we withheld 6: 6 could not be judged, because “Persona.js” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Persona.js.
Official links
Tools that pair well with Persona.js
Common stack mates teams adopt alongside Persona.js, with the specific reason each pairing earns its keep.
Chaindesk AI
No-code AI chatbot builder that trains on your Notion, Zendesk, or Google Drive content to automate support and capture leads
Water
Water is a no-code AI app builder for launching persona-driven, knowledge-grounded chat assistants.
Wonderchat
Wonderchat builds AI customer service and sales agents that cite your own docs in every reply and bill flat monthly rates.
Featured Head-to-Head Comparisons
Persona Js vs Spider Cloud
Persona.js and Spider Cloud solve different problems—one provides a front-end chat UI, the other a back-end data extraction API. Choose Persona.js if you need a free, open-source, vanilla-JS chat interface to drop into any website. Choose Spider Cloud if you need a high-performance web scraping API for AI agents, especially with its new Browser AI commands and data connectors. They can be complementary: use Spider Cloud to fetch data for your RAG pipeline and Persona.js to display the chat UI.
Persona Js vs Voyage Ai
Choose Voyage AI if you need enterprise-grade embedding models for domain-specific RAG pipelines, especially for finance or legal data. Choose Persona.js if you want a free, open-source chat UI to quickly embed an AI assistant into any website. They are complementary tools — you could use both together.
Persona Js vs Temporal Ai
Temporal AI and Persona.js solve completely different problems. Choose Temporal if you need to build resilient backend workflows for AI agents or microservices. Choose Persona.js if you need a lightweight, customizable chat UI to drop into your website. They are complementary, not competitive.
Alternatives to Persona.js
View all
Chaindesk AI
No-code AI chatbot builder that trains on your Notion, Zendesk, or Google Drive content to automate support and capture leads
Water
Water is a no-code AI app builder for launching persona-driven, knowledge-grounded chat assistants.
Wonderchat
Wonderchat builds AI customer service and sales agents that cite your own docs in every reply and bill flat monthly rates.
Frequently Asked Questions
Used Persona.js? Help shape our editorial sentiment research.