Show HN: Persona.js – a vanilla-JS agent UI library with native WebMCP (MIT)
www.persona-chat.devHey everyone. My cofounder and I are formally open sourcing (MIT) persona.js. It's a VanillaJS library that helps anyone build agentic experiences on the web, without a framework dependency, and full WebMCP support
So, why'd we do this?
1) We're super fans of the web and the browser can do a ton today
2) We've seen AI builds be way overly complex because the FE requires a large project within an existing app OR the site wasn't using a framework to begin with
If you've been a part of huge apps with multiple frameworks inside them, or work inside CMS / website builders / ecomm platforms... you know what we're talking about. A "simple" AI feature disrupts your life for months
If you have a singular React codebase and can't possibly imagine building an interface without JSX, nothing to see here! You already have a lot of great options that are really cool too. Check out Assistant UI / CopilotKit / AI Elements which are all MIT
----
Some specifics:
Persona has a ~15 kB brotli to first paint (the full widget lazy-loads on first click) while being able to render most of the primary agent experiences you see on the web: from 'Fin' (pill launcher) to 'Claude' (fullscreen assistant) to 'Shopify Sidekick' (docked)
You can run it in Shadow DOM isolated mode so existing styles play nice
Everything has hooks and events, so you can add unique flavor (and easily share back!) in a few lines
We have a ton of demos on the library site, along with all the knobs to play with how each aspect renders. Tool and reasoning, custom loading animations, voice, approval UX, etc
We've also added a ton of examples across agent and frontend stacks
Check out the code @ https://github.com/runtypelabs/persona
Feedback and contributions welcome!
Happy to see WebMCP adoption and a standards first framework.
The argument for react has always been dev velocity and ecosystem. But with AI the best web experiences will be as close to the “metal” as possible
Thanks, means a lot coming from you!
I agree re: getting closer to the metal - it seems like HTML is having a big resurgence as agents are very productive at producing HTML artifacts which are often 'good enough' for many content use cases, and fortunately Persona works great as an embed in a static site. We spin up demos like that all the time.
I haven’t seen much on WebMCP adoption yet, but I’ve been keen to use it for improving the AX of a web app at work. I’m curious how you all are seeing it be used.
It's definitely early - it shipped in the very latest version of chrome just this week, and the spec may still evolve (as a fair warning to early adopters).
You can turn it on for your site via the chrome origin trial, or just install the polyfill.
Our use case with Persona is all about extending existing apps to have "AI assistance" that actually works well, and Persona being the AI assistant you can ship yourself in your site to enhance your app. There's a parallel camp who are interested in adding WebMCP tools to their sites so they can be used effectively by future browser-level agents (e.g. Gemini in Chrome), but that's not a thing today.
Some AI agents can already do best-effort operation of existing websites via naive 'headless browser' approaches, or doing their best to interpret the existing nature of a page by reading the DOM or accessibility tree and trying to submit the forms, but that's flaky and token-inefficient. WebMCP is all about registering those things as explicit, designed tools built for agents. I'd draw a parallel between asking agents to just call existing REST APIs for an app vs intentionally designing MCP APIs for them; the design philosophy is different.
For those interested in good MCP/WebMCP tool design principles, this article from Arcade.dev is great: https://www.arcade.dev/blog/mcp-tool-patterns/
when will WASM integration become widely accepted? we need realtime canvas draw like oldschool desktop ui/ux.
Nathan here from Runtype - I worked closely with @becomevocal on this library. Here to answer questions!
My personal favorite demo is this JSPaint + WebMCP one https://www.persona-chat.dev/webmcp-paint.html
But more practical examples include: https://www.persona-chat.dev/webmcp-slides.html https://www.persona-chat.dev/webmcp-calendar.html
WebMCP's finally at a point where it makes sense to build against it (shipped in latest chrome + good polyfills available), and I've found it a pretty elegant way to extend existing FE apps by just hooking into your existing FE functions instead of having to build an AI assistant as a parallel thing that is ignorant of the user's session, what they're looking at, etc. This makes hybrid AI/app experiences feel much better.