Launched this week
Persona.js
Add WebMCP-native AI chat to any Frontend
595 followers
Add WebMCP-native AI chat to any Frontend
595 followers
Persona is a lightweight, open-source AI chat UI library that embeds into any website, from modern apps to static HTML. Unlike React-based chat frameworks, Persona is framework-free, backend-agnostic, and WebMCP-native, so your assistant can discover and execute tools exposed by the parent page. Add streaming chat, voice, theming, and interactive copilot experiences without rebuilding your frontend or writing bespoke APIs.
Lancepilot
Persona.js
@odeth_negapatan1 thanks! And yeah, we have tested on WordPress and Shopify. Persona drops in great there because you can use the script tag (CDN) deployment which doesn’t need a build step. All the init and theme configuration can be set in script tag data params.
We spent a lot of time determining the right loading methods for each type of site. Getting the different methods working in the same library while keeping the bundle size tiny, without regressions in functionality, was not easy.
This is great, just at the right time. This could make chat widgets as easy to add to existing websites as including a new Google Font or FontAwesome. And the WebMCP is great so other agents can use the site. Makes it extremely useful. Quick question, can you set up token limits, per visitor/user?
Persona.js
@jn263 thanks! The token limits could technically be set up by listening events Persona fires and preventing messages from being sent in a session past a certain amount.
That of course would need to be enforced in the backend as well if you wanted to really prevent it!
@_becomevocal_ That's one of the things I think can really make or break a product like this. Some sort of guardrail that will keep the conversation on topic and prevent skyrocketing API costs.
Mailwarm
How does tool discovery work safely, like can the page expose only certain actions and require a user confirmation before anything runs?
Persona.js
@thamibenjelloun Yep, you have control over the tools registered on the FE and the "await" SSE event handles the user confirmation UX. That last piece is automatically handled in two scenarios within Persona: when you use Runtype and the AI SDK example. However the spec is reasonable easy to add to any AI framework or platform with approvals.
WebMCP native is a smart move - feels like the right time to build on that protocol instead of rolling custom websocket solutions. Quick question: does this work cleanly with SSR frameworks like Next.js or Nuxt, or is it client-side only for now?
Persona.js
@omri_ben_shoham1 Yep! It's after the first paint so you'd "use client" with SSR. The next.js examples are SSR using this component: https://github.com/runtypelabs/persona/blob/main/examples/ai-sdk-next/app/components/persona-widget.tsx
I had been toying around with the idea of writing an internal tool for our implementation team to quickly spin up, configure and iterate on accounts with a promptable interface. Our platform is highly customizable and composable so this is typically a pretty heavy lift to even get to a demoable state for a customer, much less to a go-live state. Persona arrived at the perfect time and I was able to get it working within a day, and I expect it to start accelerating our implementation work immediately. WebMCP makes this extremely powerful. Haven't had to lean on the polyfill as we use Chrome, so I can't speak to that part, but I imagine there are plenty of people and companies out there with use cases similar to ours that this would work perfectly for even without that.
Persona.js
@erik_christensen really appreciate your real-world validation, it was great to see how cleanly Persona's capabilities mapped to the needs of your team. I think you'll be a great real-world success story very soon as you get to production with it - can't wait to see what you build.
Persona.js
@erik_christensen exactly. I love the emergent benefit you get from thinking about the frontend as a source of tools. Many times the logic you already built there is 1:1 with what you’d want an agent to perform.
WebMCP-native is the part that grabs me. Most "AI chat widgets" just bolt a chatbox onto a page, but having the chat actually talk to your frontend through MCP feels like a much cleaner way to let the AI do real things instead of just answering FAQs.
Persona.js
@yibo_wang3 we agree! A lot of our motivation for Persona was from having used one too many AI assistants who had no idea who I was, asked for me email when I was already logged in, asked me for a piece of information that was already on my page in front of me, etc.
WebMCP integration is the most elegant solution to that problem we've come across, and alignment with the standard has yielded benefits. We're stoked that investment in WebMCP means site owners can add great assistant tech to their site today while also future-proofing for more sophisticated browsing agents of tomorrow.
Macaly
framework free + webmcp native is a smart bet 👏 the standard is gonna matter alot
Persona.js
@petrkovacik Thanks! The team leading the standards effort is really cool as well.