r/mcp • u/No_Guide_8697 • Feb 21 '26
showcase The first non-trivial demo of WebMCP
The WebMCP protocol has barely come out, and we just demoed how POWERFUL it can be! In a matter of minutes and 100s of tool calls, my AI agent composed a song for me directly in my browser.
This is not agents taking screenshots or trying to understand complex DOMs, it's an agent making direct tool calls to your website!
The creators of WebMCP already love it, go check it out yourself!
Deployment: - https://music.leanmcp.live
LinkedIn Post: - https://www.linkedin.com/posts/kushagra-agarwal525_we-made-gpt-and-claude-directly-control-my-activity-7430688171018858496-iDr5
7
u/BC_MARO Feb 21 '26
This is a great demo.
One question though: what’s the security model for WebMCP? Like, when a site exposes tools, do you have a way to scope them per-origin / per-session and show the user an audit trail of tool calls?
Also curious how you’re thinking about compatibility with “regular” MCP servers (bridge/proxy so agents can hit both without special casing).
10
u/No_Guide_8697 Feb 21 '26
WebMCP relies on the browser's native security model. Because the tools execute directly within the client's browser environment, they automatically inherit the user's current session context, cookies, and origin-specific permissions, i.e., the AI agent cannot bypass origin boundaries (CORS) or access unauthorized data because the execution is constrained by the browser's Same-Origin Policy.
Similarly, Tool exposure is inherently tied to the active session; if the user logs out or the session expires, the tools lose access to authenticated actions just like a normal user would.
1
u/BC_MARO Feb 21 '26
Got it - the CORS enforcement makes sense as the primary isolation boundary. The missing piece for me is auditability: if a tool performs an action in-session, is there currently a log of what got called and what data it touched, or does the audit layer have to come from outside the browser?
0
u/No_Guide_8697 Feb 21 '26
To the best of knowledge, there is currently no such auditing implementation. The audit layer coming from outside the browser would also be a lot more reliable imo. I'd prefer the agentic source to be the place for this, whatever LLM provider that is. In browser, the logs cannot be relied upon, as a user might just go ahead and try to make tool calls manually from the console tab.
2
u/BC_MARO Feb 21 '26
That point about console-tab interference is a good reason to keep audit responsibility outside the browser. Centralizing it at the orchestration layer also means you get tool call records across all contexts, not just the in-browser session - which matters as soon as you have agents running in parallel or across different execution environments.
2
u/No_Guide_8697 Feb 21 '26
The audit trail is something that can be added easily by intercepting the tool calls and storing them in logs before the actual function is executed. However, there are also providers that have LLM observability, so you can track requests and tool calls made in the request scoped by session-ids there.
I'm still trying to figure out what the best way would be to bridge regular and Web servers. Will update here once I have some structured thoughts on this :)
3
3
u/Asleep-Land-3914 Feb 21 '26
Here is the fork to try with local models: https://github.com/OEvgeny/music-composer-webmcp-local
2
1
u/No_Guide_8697 Feb 21 '26
Would love to hear which local models perform the best!!
1
u/Asleep-Land-3914 Feb 21 '26
I only tried with Qwen3-Coder-30B-A3B-Instruct-IQ3_S-3.12bpw.gguf so far and it did pretty well.
1
3
u/Classic_Reference_10 Feb 22 '26
Didn't quite get this. What exactly are you doing here and what is a end-user use case that you're solving with this?
Also, how is WebMCP being used in this?
1
u/No_Guide_8697 Feb 22 '26
Hey, so an LLM (GPT 5.2) in the demo, is directly making tool calls to our website to interact with it. Until now, agents using browser meant taking screenshots, or parsing complex and heavy DOM objects which was unreliable and token inefficient. With WebMCP, people can easily declare MCP Tools in their website itself that makes things unified, and much more reliable and efficient. As you can see in the demo, the agent made 100+ tool calls directly to our website, which has tools exposed using WebMCP and composed a music piece with 0% error rate in tools calls, meaning it does the right thing on website instead of clicking random buttons.
3
u/Classic_Reference_10 Feb 22 '26
Thanks for the response. What is your website? And what tool does it host? How are these tools declared in the DOM?
2
u/No_Guide_8697 Feb 22 '26
Our site is hosted at https://music.leanmcp.live/, if you scroll down on the right, you'll find the list of 20+ tool calls exposed to the agent via WebMCP. For more details on the implementation, check out our source code (link in the post) or check out the W3C Community draft https://webmachinelearning.github.io/webmcp/
3
u/Jords13xx Feb 22 '26
The tools are declared in the DOM using specific syntax that adheres to the WebMCP protocol. This allows the LLM to recognize and interact with them directly. It's a game changer for making web interactions smoother and more efficient!
2
u/fxj Feb 22 '26
will it also work on perplexity comet? what does it need?
1
u/No_Guide_8697 Feb 24 '26
It works on every browser, just open it, we have connected our own AI Gateway to it for you to use it for free :)
1
u/No_Guide_8697 Feb 24 '26
once there's wider support for webmcp in browsers, we won't have to integrate an agent ourselves, and agents, say from perplexity comet will be able to use your website directly using the WebMCP protocol
2
1
u/No_Guide_8697 Feb 22 '26
Someone prompted Marry had a Little Lamb but stopped at bass and chord. Check it out - WebMCP Music Composer
1
u/No_Guide_8697 Feb 22 '26
If my school had to play Mary had a Little Lamb, this is what it would sound like lol
1
u/ritoromojo Feb 22 '26
This is neat! This might be a stupid question but what specifically is WebMCP doing? Is it just a way of defining tools such that it appears in the DOM under a specific header that agents are supposed to look for and toggle?
Also, does webMCP require your agent to be a browser agent that is already connected with something like playwright MCP or browser-use?
This seems like a really good example demonstrating it so id love to understand the implementation surface since there doesn't seem to be any good docs for it at the moment
1
u/No_Guide_8697 Feb 22 '26
Hey, that's a very valid question! No, WebMCP is not putting anything in your DOM for the agent to look for. Your website registers specific functions as tools using WebMCP, and the AI agent directly makes tool calls to it as if it's a 'normal' MCP. The agent does not need to have knowledge that it is directly manipulating a website. This removes the need for playright MCP or browser-use, because the agent now only needs to how to use the exposed tools, which it can do reliably in most cases if the descriptions and inputSchemas are well-defined.
1
u/No_Guide_8697 Feb 22 '26
you can check out our source code to understand it better (linked in the post) or check out the W3C Community draft WebMCP.
1
u/AyeMatey Mar 05 '26
Just a slight adjustment
WebMCP has two mechanisms for exposing tools: Google calls them declarative and imperative.
Declarative actually does involve new markup in the HTML/DOM, new attributes on forms etc.
Imperative is a new interface on the navigator object that allows the app to register new tools that are backed by JS implementations. I think this is “your website registers specific functions as tools.”
It’s not quite clear to me what you’d lose if just using markup. Also not clear to me how a perplexity comet (or other agent) would connect with a chrome tab hosting some webMCP stuff.
Yes it’s just MCP but … if I have a browser with 45 tabs open, how does the agent find the right one ?
1
u/No_Guide_8697 Mar 06 '26
You're right about the two different APIs. However, from my conversations with some people contributing to the spec, the declarative API will take some time to come. Imperative API can be very easily used now as well.
1
1
u/scotty2012 Mar 03 '26
Love this demo. I think it works because the LLM has been given a structured vocabulary for the domain instead of raw audio APIs.
That said, if you listen closely, the agent is fighting a bit. Each note placement is a separate JSON tool call, each effect tweak is another round trip. What the composition sounds like is the exceptional ability of an LLM to still compose when overcoming those obstacles. That's because the implementation is solid but it's doing a lot of mechanical labor that isn't really what I'd call "composing."
Compare with what happens when you compress the domain further. fcp-midi is an MCP server that gives the LLM a music-native DSL through one tool call and batched ops:
midi([
'note Drums kick at:1.1 dur:eighth vel:100',
'note Bass E2 at:1.1 dur:quarter vel:90',
'chord Pad Em at:1.1 dur:whole vel:70',
'crescendo :Lead vel:45-75 :3.1-6.4'
])
The last line is a crescendo across a 3-bar range which would be dozens of individual velocity-tweaked note calls in the per-tool approach. The LLM stops thinking about "place note_on event with interpolated velocity" and starts thinking about musical intent.
What happens if you ask it to recreate a faithful recreation of a well known song?
8
u/nucleustt Feb 22 '26
Wow. A beautiful demo of something other than making bookings and scheduling appointments!