THIS is how to expose your apps to AI WebMCP

THIS is how to expose your apps to AI: WebMCP 🔗 **Source:** [THIS is how to expose your apps to AI: WebMCP](https://www.youtube.com/watch?v=sOPhVSeimtI) > [!note]+ Document Notes > tags: [webmcp, ai-tools, web-development] > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=sOPhVSeimtI > date created: 2025-01-05 10:30 > > # 🏷️ Title: THIS is how to expose your apps to AI: WebMCP >  ## 🧰 Action Inbox - [H1] Test WebMCP early preview — sign up for early access #webmcp - [H2] Implement tool registration in existing app — add form properties or JavaScript registration #development - [H3] Explore Chrome extension for WebMCP — install and test with Gemini Flash 2.5 #testing ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [WebMCP Specification](https://github.com/modelcontextprotocol/spec) - [Chrome Extension for WebMCP](https://chrome.google.com/webstore) ## 📝 Summary - WebMCP is a new specification that allows websites to expose their functionality to AI agents through declarative tool registration - Unlike traditional MCP servers, WebMCP works directly through websites using either JavaScript registration or HTML form properties - Key benefits include faster AI interaction, better token efficiency, and easier implementation for developers - Demonstrated through a grocery list app that can be controlled via natural language commands - Early access available with Chrome extension integration ## 📖 Main Content WebMCP (Web Model Context Protocol) represents a new approach to AI-web application integration. Instead of requiring separate MCP servers or complex browser automation, WebMCP allows websites to directly publish their available tools and functionality. This enables AI agents to interact with web applications in a structured, efficient manner while maintaining the full user interface experience. The specification supports two implementation methods: programmatic registration via JavaScript using `window.navigator.modelcontext.registerTool()`, and declarative registration through HTML form elements with special properties like `tool-name` and `tool-description`. This dual approach accommodates different development preferences and existing application architectures. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/sOPhVSeimtI?t=0) — [H1] WebMCP Introduction - Key idea: WebMCP surfaces website functionality to AI through the website itself, not separate servers - Evidence: "WebMCP is surfacing tools and ways to interact with your website via your website itself" #### ⏱️ [02:15](https://youtu.be/sOPhVSeimtI?t=135) — [H2] Grocery App Demo Context - Key idea: Demo uses a kanban-style grocery app with stores and items as the test application - Evidence: "I built a little app called a grocery app... you have each of your grocery stores that you might want to go to" #### ⏱️ [03:30](https://youtu.be/sOPhVSeimtI?t=210) — [H2] Current AI Integration Options - Key idea: Existing options include embedded AI, MCP servers, or MCP UI components - Evidence: "You can just build AI right into your application... you can create a MCP server... MCP UI or now what's called MCP apps" #### ⏱️ [05:00](https://youtu.be/sOPhVSeimtI?t=300) — [H2] Browser Automation Problems - Key idea: Current browser automation with Playwright is slow and inefficient - Evidence: "It's extremely slow to actually use because it has to like parse all of it, figure out which buttons it should press" #### ⏱️ [06:15](https://youtu.be/sOPhVSeimtI?t=375) — [H1] Tool Registration Concept - Key idea: WebMCP explicitly publishes available tools with input/output schemas - Evidence: "The solution is for your website to explicitly publish. These are the things that I can do" #### ⏱️ [08:30](https://youtu.be/sOPhVSeimtI?t=510) — [H2] Live Demo with Chrome Extension - Key idea: Chrome extension demonstrates real-time AI interaction with the grocery app - Evidence: "Please add bananas to Costco shopping list... it added bananas to Costco and then it went ahead and moved it to the Whole Foods" #### ⏱️ [10:45](https://youtu.be/sOPhVSeimtI?t=645) — [H2] Complex Command Processing - Key idea: AI can interpret complex requests like "add all items for chicken noodle soup" - Evidence: "It went ahead and just added chicken broth, chicken breast, egg noodles, carrots, celery, and onion" #### ⏱️ [12:00](https://youtu.be/sOPhVSeimtI?t=720) — [H1] Implementation Methods - Key idea: Two ways to register tools - JavaScript API or HTML form properties - Evidence: "window.navigator.modelcontext.registerTool... the other way is with form elements" #### ⏱️ [13:30](https://youtu.be/sOPhVSeimtI?t=810) — [H2] HTML Form Properties - Key idea: Declarative tool registration using special form attributes - Evidence: "tool name, tool description, tool param title, and tool param description" #### ⏱️ [15:00](https://youtu.be/sOPhVSeimtI?t=900) — [H2] Mixed UI Benefits - Key idea: Combines traditional UI experience with natural language interaction - Evidence: "Sometimes people want to actually visit the website and use that UI... But then I can also interact with it with my natural language" #### ⏱️ [17:15](https://youtu.be/sOPhVSeimtI?t=1035) — [H2] Speed Comparison - Key idea: WebMCP is significantly faster than browser automation approaches - Evidence: "Five seconds and it added a new store and added lip balm to it... That's pretty fast" #### ⏱️ [18:30](https://youtu.be/sOPhVSeimtI?t=1110) — [H2] Token Efficiency - Key idea: More efficient token usage compared to sending entire DOM or screenshots - Evidence: "Simply just sending the tool calls along with the possible options... rather than having to send the entire DOM tree" #### ⏱️ [20:00](https://youtu.be/sOPhVSeimtI?t=1200) — [H2] Framework Integration Potential - Key idea: Frameworks could easily implement WebMCP using existing application schemas - Evidence: "You already have your schemas, you already have your validation... Simply just taking one more step and publishing those things" #### ⏱️ [22:00](https://youtu.be/sOPhVSeimtI?t=1320) — [H3] Cross-Application Questions - Key idea: Uncertainty about multi-app integration capabilities - Evidence: "Will cross application stuff be possible?... you want to say like go look at my calendar and see when that dinner is" #### ⏱️ [24:30](https://youtu.be/sOPhVSeimtI?t=1470) — [H2] Web Adaptation to AI - Key idea: WebMCP provides a bridge for existing websites to become AI-compatible - Evidence: "This is a great way for the web to adapt to AI... similar to responsive design where I just need to change a little bit of things" ## 📚 References - [WebMCP Early Preview Signup](https://github.com/modelcontextprotocol/spec) - [Syntax Podcast](https://syntax.fm/) - [Sentry Error Tracking](https://sentry.io/syntax) ## 🗣️ Paraphrase - WebMCP allows websites to directly expose their functionality to AI agents without requiring separate servers or complex automation - The specification supports both programmatic tool registration through JavaScript and declarative registration through HTML form attributes - This approach is faster and more efficient than existing browser automation solutions while maintaining the full website user experience ## 📰 Newsletter 🚀 **WebMCP: The Future of AI-Web Integration** The web development landscape just got more exciting with WebMCP, a new specification that bridges the gap between AI agents and web applications. Instead of building separate API servers or relying on slow browser automation, you can now expose your app's functionality directly through your website. **Key Benefits:** - ⚡ Lightning-fast AI interactions (5 seconds vs. minutes) - 💰 Token-efficient communication - 🛠️ Simple implementation using existing schemas - 🎯 Natural language commands for complex operations **Getting Started:** Add tool properties to your forms or use the JavaScript registration API. Your existing validation and schemas can be repurposed, making this as simple as adding responsive design to your site. **Resources:** [WebMCP Spec](https://github.com/modelcontextprotocol/spec), [Chrome Extension](https://chrome.google.com/webstore), [Syntax Podcast](https://syntax.fm/) Early access is available now - perfect time to experiment and prepare your applications for the AI-driven future! ## ✅ Action Items #### DevRel - Developer advocacy: Create WebMCP integration tutorials, conference talks on AI-web integration - Education: Workshop curriculum on tool registration patterns, best practices documentation - Developer experience: Debugging tools for WebMCP implementation, starter templates - Developer marketing: Case studies of WebMCP implementations, integration success stories - Community management: WebMCP developer forums, feedback collection on specification #### OSPO - Policy & Governance: Review WebMCP specification licensing, contribution guidelines - License Compliance: Audit WebMCP dependencies, compatibility with existing licenses - Security Management: Assess AI agent access patterns, tool registration security - Software Inventory: Track WebMCP adoption across organization projects - Developer Support: Training on secure tool exposure, implementation consulting #### Community - Maintainers: WebMCP integration roadmaps, specification feedback processes - Contributors: First-issue programs for WebMCP tooling, documentation improvements - Sponsors: Fund WebMCP specification development, tooling infrastructure - Ecosystem: Cross-framework WebMCP standards, interoperability testing #### WordPress - Core: Evaluate WebMCP integration possibilities, REST API tool exposure - Plugins: WebMCP-compatible plugin development patterns, registration helpers - Themes: Theme-level tool registration, AI-compatible form patterns - Documentation: WebMCP implementation guides, security considerations - Community: WordCamp presentations on AI integration, local meetup demos ## 🧪 Hypotheses - WebMCP adoption will be faster than API integration due to lower implementation barriers - Declarative HTML form registration will be preferred over JavaScript registration for simple tools - Cross-application WebMCP orchestration will require additional coordination protocols - Framework-level WebMCP integration will accelerate mainstream adoption ### 📊 Methodology - Comparative analysis: WebMCP vs MCP server implementation time and complexity - User testing: Natural language command success rates vs traditional UI interactions - Performance benchmarks: Token usage and response time comparisons across integration methods ### ❓ Questions - How will WebMCP handle authentication and authorization across different domains? - What security measures prevent malicious AI agents from exploiting exposed tools? - Can WebMCP work effectively with single-page applications and dynamic content? ### 🔮 Future Research - Cross-domain tool orchestration protocols and security models - Framework-specific WebMCP implementation patterns and best practices - AI agent trust and verification systems for WebMCP interactions ### 💡 Implications - Practice: Developers need to consider AI accessibility when designing web applications - Policy: New security frameworks required for AI-web application interactions - Security: Tool exposure creates new attack vectors requiring careful access controls - Education: Web development curricula should include AI integration patterns - Funding: Investment in WebMCP tooling and specification development infrastructure ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade (Flesch-Kincaid) #### 👀 Visual learners - Present: Live demo screenshots, tool registration code examples, application interface - Improve: Architecture diagrams showing WebMCP flow, comparison charts with other methods #### 🔊 Aural learners - Present: Podcast format with detailed explanations and live narration - Improve: Audio-only summary of key concepts, implementation walkthroughs #### 🗣️ Verbal learners - Present: Clear definitions of WebMCP vs MCP servers, analogies to responsive design - Improve: Glossary of technical terms, step-by-step implementation narratives #### 🧩 Kinesthetic learners - Present: Live coding demo, interactive tool registration examples - Improve: Hands-on tutorial checklist, sandbox environment for testing #### 🧠 Logical learners - Present: Before/after performance comparisons, structured implementation options - Improve: Decision tree for choosing registration methods, cost-benefit analysis #### 🧑‍🤝‍🧑 Social learners - Present: Podcast discussion format, community early access program - Improve: Developer forum links, peer review guidelines for implementations #### 🧘‍♀️ Solitary learners - Present: Detailed technical explanations, independent demo walkthrough - Improve: Self-paced implementation guide, reflection questions on use cases #### 🌿 Naturalistic learners - Present: Ecosystem analogies (web adapting to AI like responsive design) - Improve: Evolution of web standards context, environmental impact of efficiency gains ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive video content - Improve: Alt text for demo screenshots, transcript with code descriptions #### Keyboard navigation - Present: Standard video controls, pausable content - Improve: Timestamped navigation, skip-to-section functionality #### Contrast and readability - Present: High contrast video player, readable transcript - Improve: Larger code text in examples, color-blind friendly syntax highlighting #### Text resizing and reflow - Present: Responsive transcript layout, scalable video player - Improve: Reflowable code examples, mobile-optimized viewing #### Media and captions - Present: Full transcript provided, audio narration - Improve: Synchronized captions, downloadable transcript with timestamps #### Forms and interactions - Present: Simple video controls, accessible description links - Improve: Interactive code examples with proper labels ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal web development concepts, English-language content - Improve: Multi-language implementation examples, global use case scenarios #### Inclusive language - Present: Technical jargon explained, conversational tone - Improve: Plain language summary, avoid assumptions about prior knowledge #### Neurodiversity support - Present: Chunked content with timestamps, consistent structure - Improve: Content warnings for rapid demos, processing time allowances #### Representation - Present: Technical focus without identity emphasis - Improve: Diverse developer perspectives, varied application examples #### Psychological safety - Present: Encouraging tone about early access, learning-focused - Improve: Explicit permission to ask questions, no-judgment experimentation ### ✅ Logical Validity #### Strong reasoning - Deductive strength: WebMCP solves browser automation problems through direct tool exposure - Inductive strength: Framework adoption patterns suggest similar adoption trajectory - Causal reasoning: Token efficiency improvements directly result from structured data - Analogical strength: Responsive design comparison effectively illustrates adaptation concept #### Fallacies - Hasty generalization: "Every website had an API" overstates historical API adoption - Appeal to novelty: Assumes newer approach is inherently better without full comparison #### Tone of voice - Overall tone: Enthusiastic but technically grounded, educational with practical focus ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on alternative approaches or critics - Reverse victim/offender: No victim/offender dynamics - Emotional cues and rhetoric: Genuine excitement about technology, balanced with practical considerations --- ## Full Transcript [00:06] Welcome to Syntax. Today we're talking [00:08] about WebMCP. This thing is brand new. [00:10] It's a new specification and we're going [00:12] to explain what it is. We're going to [00:14] show a demo and I got a couple hot takes [00:16] about it. But essentially, WebMCP is [00:19] surfacing tools and ways to interact [00:21] with your website via your website [00:24] itself. So this is different than uh MCP [00:27] servers and this is different than MCP [00:29] UI and MCP apps. It's related. It works [00:33] in the same way, but this is a new way [00:34] to surface functionality simply just [00:37] through your website without having to [00:38] have additional servers. So let's get on [00:40] into it. My name is Wes. With me as [00:42] always is Scott. How you doing, Scott? [00:44] Hey. Uh I'm doing good. How are you [00:45] doing, man? Uh yeah, I'm I'm interested [00:48] to learn about this cuz I hear webmc my [00:50] first thing goes to ChromeDev tools MCP [00:53] or agent browser or those types of [00:55] things. I'm curious to know [00:56] >> about that at all. [00:58] >> Yeah. So that that that in itself to me [01:01] is a revelation here. So I'm excited to [01:03] learn what this thing is and how people [01:05] can take advantage of it. [01:07] >> Yes. All right. So all of this in [01:08] context is going to be I built a little [01:10] app called a grocery app, right? And [01:11] it's just a very simple kind of like a [01:14] conbon where you have each of your [01:15] grocery stores that you might want to go [01:17] to. And then under each of those grocery [01:19] stores, you can add, remove, and check [01:21] off food items that you want to do. [01:23] Right? So, it's pretty standard. You're [01:24] going to have, if you're building out an [01:26] app like this, you're going to have [01:27] something like add a store, add an item, [01:30] reorder items, [01:32] rename, delete item, like check off, you [01:34] know, like all the standard kind of [01:36] to-do list application stuff. Now, if [01:40] you have an application and you want to [01:43] now surface your application's [01:46] functionality to some sort of AI, you [01:48] have you kind of a couple options, [01:49] right? Like one option is you can just [01:51] build AI right into your application and [01:53] your users can do that and you sort of [01:54] like foot the bill for that. Another way [01:56] is you can create a MCP server which [01:58] surfaces all of the tools and then the [02:01] AI chat will simply just talk back and [02:03] forth via the MCP server adding, [02:05] removing and whatever. And then we also [02:07] learned, we had Keny Daws on the other [02:09] day where we have MCP UI or now what's [02:11] called MCP apps where you'll be able to [02:13] actually return and generate like maybe [02:15] you want to embed components and and [02:17] like stylized structure right into a [02:19] chat. This is different than that [02:21] because the web MCP essentially says, [02:24] okay, I have a website, I have an app, [02:26] and it it does these things. And if [02:29] someone were to to visit my my website [02:32] or if if an AI were to programmatically [02:35] open up a browser and it wants to use [02:37] your website right now, you kind of have [02:39] a couple options which is like you can [02:41] set up playright and playright will [02:43] either like dump the HTML or take the [02:45] accessibility tree um or take [02:48] screenshots of the UI and then it will [02:50] just go ahead and like use the website [02:52] as if you were a human. It would click [02:53] on buttons and and whatnot. And in my [02:56] experience, that's decent, but it's [02:58] extremely slow to actually use because [03:01] it has to like [03:02] >> parse all of it, figure out which [03:03] buttons it should press, etc., etc. So, [03:06] the solution to that is to for your [03:09] website to explicitly publish. These are [03:12] the things that I can do, right? So, I [03:14] have a grocery list here and I have [03:17] several different tools, right? you have [03:18] you have add item, get items, delete, [03:21] delete item, delete store, create store, [03:23] get items by store, move item, all of [03:26] these things. And that's not any [03:29] different than like an MCP server that [03:31] you would normally just publish these [03:33] things. And and the way that that works [03:34] is that you would you would publish [03:36] these tools and then you also define [03:38] what the input and output schemas are. [03:41] Meaning that like you say, hey AI, [03:43] here's a tool called add item. Here is a [03:46] description of of what it does. Um, and [03:48] then here is the input and output [03:50] schemas. This is like if you wish to [03:51] call my tool, you must provide me which [03:55] item you want to add in which store you [03:57] would like to add it to. And then I will [03:59] then return to you the following [04:02] information. Right? It's it's a nice [04:03] structured way um to talk back and forth [04:06] with with an AI. Right. [04:10] >> Interesting. So, uh, I I I've been [04:13] wondering about this in regards to some [04:15] projects that I've been working on. I [04:16] was thinking about working on an API for [04:19] my AI to consume for my habit tracker, [04:22] which honestly, this feels so similar to [04:25] your your to-do list, your grocery list [04:27] here. [04:27] >> So, this seems like that would be a [04:29] better fit for that task than creating [04:33] just what an API and an API key and then [04:36] telling the A AI how to use the API or [04:39] would you do both? you would create the [04:41] a API and then you'd create the MCP to [04:44] communicate with that API. [04:45] >> It depends on how you you want people to [04:49] interface with it. But if I'm looking at [04:51] the web right now, there are millions of [04:53] applications out there and in order for [04:56] an AI to interact with it right now, you [04:59] either have to like publish your own MCP [05:01] server and essentially like re-implement [05:03] a lot of your your logic as an MCP [05:06] server. What this does is it allows you [05:08] to imperatively or declaratively [05:12] just publish as part of your website [05:14] either in the HTML or in the JavaScript [05:16] and say these are the tools that you can [05:17] then use when you visit it. So watch [05:19] this example. So Chrome has published a [05:22] little Chrome extension just as one [05:24] example of of what it might look like to [05:26] interact with it. And I can simply just [05:28] go to it and say, um, I load the page up [05:30] and it says, "All right, I found all of [05:31] the tools." And then I can I hooked it [05:33] up to Gemini Flash 2.5 Flash and I I [05:37] just say, "Please add bananas to Costco [05:39] shopping list." Uh, once that done, show [05:41] me everything on my grocery list. Oh, [05:43] and can you remove then move bananas [05:46] from Costco to Whole Foods. And then I [05:48] just go ahead and send it to the AI and [05:51] it will parse what I need to do. Look at [05:53] the tools it has available to itself. [05:55] And you'll see that it added bananas to [05:57] Costco and then it went ahead and moved [06:00] it to the Whole Foods. And I can do [06:01] something like um I might go ahead and [06:03] say something like, "Please add all [06:04] items for chicken noodle soup to Whole [06:07] Foods, right?" So, it's going to go [06:08] ahead and parse that. It's going to [06:10] figure out, okay, what what do I need [06:11] for chicken noodle soup? And boom, it [06:13] went ahead and just added chicken broth, [06:15] chicken breast, egg noodles, carrots, [06:17] celery, and onion. And I can say like, [06:19] um, mark off anything with chicken. I [06:22] already have it. There we go. I spel I [06:24] spelled chicken wrong. Go ahead and send [06:26] that off. [06:27] >> And it should There we go. It marked off [06:29] chicken breath. Chicken broth. [06:31] >> Yeah. [06:32] >> Can I just say, man, one of the benefits [06:34] of AI is that like I can spell things [06:36] wrong and it's just like whatever. [06:39] Doesn't care. [06:40] >> It knows what you mean. Yeah, that's [06:42] that's actually really fantastic. [06:44] >> Yeah. So that is just like kind of like [06:46] a dead simple example of how this works. [06:49] And the way that [06:51] the browser is able to know what the [06:54] tools are is there there's kind of two [06:57] ways to do it. And and this is the the [06:59] documentation for um WebMCP. Essentially [07:03] what you do is you as part of publishing [07:05] your website, you simply just publish [07:08] what the tools are. And you can do that [07:10] in in two different ways. you can [07:12] imperatively declare them with [07:15] JavaScript. It's so it's it's just [07:17] window.navavigator.mmodelcontext.register [07:19] tool and you can go ahead and register [07:23] the tool with a description, the input [07:25] and the and as well as the the output [07:27] data that you get, right? However, the [07:30] other way that you can execute or sort [07:33] of declare what your tools are is with [07:35] form elements, which I thought this is [07:37] this is absolutely genius because [07:40] >> if your website already has like forms [07:44] or if you just want to simply [07:46] declaratively publish what something can [07:48] do, there's just a couple different [07:51] properties that you can add. So, tool [07:52] name, tool description, tool param [07:55] title, and tool param description. and [07:58] then it will just simply just parse out [08:00] the HTML elements and figure out okay [08:02] these are the things and in this case [08:04] you don't even need to publish the [08:07] schema because it can infer the schema [08:09] from your form right [08:12] >> uh which is which is I think is is [08:15] awesome that you can you can do it in [08:17] both ways [08:18] >> wow that's cool uh [08:21] >> I love that this this meeting of worlds [08:24] here that's neat and if you want to see [08:26] all of the errors in your application, [08:28] you'll want to check out Sentry at [08:30] centry.io/sintax. [08:33] You don't want a production application [08:35] out there that well, you have no [08:37] visibility into in case something is [08:39] blowing up and you might not even know [08:41] it. So head on over to centry.io/sax. [08:44] Again, we've been using this tool for a [08:46] long time and it totally rules. All [08:48] right, so let's talk about a couple [08:51] benefits, couple questions, and then a [08:52] couple takes I have here. So, the first [08:54] one is this sort of mixed UI approach I [08:59] really enjoy because like we had like [09:02] Keny Dods on and he says, "Yeah, like [09:04] everything's going to be like a UI [09:06] widget that's either embedded into your [09:08] chat or he talked about a several [09:09] different ways to do it." And I don't [09:12] know that every single thing is going to [09:16] want to just be a UI widget. Um [09:19] especially like you you look at like um [09:21] booking a flight or whatever. [09:23] >> I don't think that these people that [09:25] sell flights are simply want want to be [09:27] distilled down into like just like a [09:31] utility like you're paying a water or [09:33] electrical bill, you know, like book [09:34] book a flight. They want to provide you [09:36] with a good experience. They want to [09:37] upsell you. They want to say, "Oh, and [09:39] and not that those things can't be done [09:41] inside of a a chat interface, but [09:42] sometimes people want to actually visit [09:45] the website and and use that UI." And if [09:48] I'm able to now just use the website as [09:51] as I always have been, right? like [09:53] everything out there right now is simply [09:54] just an app in a website. But then I can [09:57] also interact with it with my natural [10:00] language, which is way better because if [10:02] I'm I'm adding chicken noodle soup here, [10:05] >> I'm not adding five or six different [10:07] items and dragging them into the thing. [10:09] It's way faster for me just to type, [10:11] hey, could you add X, Y, and Z? Or if [10:13] I'm in my um accounting software, I [10:16] might just paste six or seven [10:18] transactions from a credit card and say, [10:20] hey, can you add these and categorize [10:21] them all? Um, that natural language is [10:24] the best. [10:25] >> You could get further with that. If you [10:26] have historical grocery list, you could [10:29] say, uh, add all of the vegetables from [10:32] last week to this week, you know, and [10:34] that's something that would be harder to [10:36] do with an actual UI because you're [10:38] getting into the natural language of it. [10:40] If it wasn't a natural language, you'd [10:43] have to be building in a whole tagging [10:45] system for all of the different types of [10:47] things. you'd be getting into like so [10:49] many things to be able to even just get [10:50] that piece of functionality. Uh, I think [10:53] that's really neat. [10:54] >> The other thing is that like this is a [10:56] great this is way faster than like I've [10:59] used several of these like AI [11:02] interacting your browsers. Um, and they [11:04] work great when you simply just like let [11:06] them rip and then you can walk away and [11:08] do something else. But like if you're [11:10] just sitting there waiting for it to do [11:11] it because you need it, it's so slow and [11:14] there's no chance that like it was so [11:17] painful using the chat GPT browser, [11:20] whatever that was called. What is it [11:22] called? I don't even know what it was [11:23] called. It was it was it was brutally [11:25] slow. And I've used many of them in the [11:27] past and it it's just it's just way too [11:30] slow right now. So being able to [11:32] explicitly do it rather than it try to [11:35] infer it from your HTML is way better. [11:37] Like watch how fast this is. Add a new [11:39] store, a drugstore. Add lip balm. Send. [11:41] One, two, three, four, five. Five [11:45] seconds and it added a new store and [11:47] added lip balm to it. Right now, that's [11:49] pretty fast. [11:50] >> That's pretty cool. [11:50] >> Um, the other thing is that it's like [11:52] it's much more token efficient, right? [11:53] If you're if you're paying by the token [11:55] for these types of things, it's simply [11:57] just sending the tool calls along with [11:59] the possible options to the AI rather [12:02] than having to send the entire like DOM [12:04] tree or like a whole screenshot and then [12:06] have to um go through that screenshot [12:08] and figure out where the buttons are to [12:10] click. [12:10] >> Yeah. [12:11] >> Um and then finally, like this seems [12:12] just this seems ripe for rife ripe, [12:16] whatever that is for frameworks to [12:19] implement this, right? Like you already [12:20] have all of this data as part of your [12:22] application, right? you already have [12:23] your schemas, you already have your [12:25] validation, you already have your your [12:27] UI later for for mocking up what your [12:29] forms are going to be or or whatever. [12:32] Simply just taking one more step and [12:33] publishing those things that you can do [12:37] via um in in your HTML website is so [12:40] easy. And then this doesn't require [12:42] somebody else to now spin up a second [12:44] MCP server. You're not hosting anything [12:46] more than than just your website. [12:49] >> Yeah. No. Wow. What a what a neat API. [12:51] Yeah. No, I I just uh um I love finding [12:54] out about stuff like this and then [12:55] immediately understanding the utility as [12:57] opposed to being like, "Oh, I have no [12:59] idea when I would use this or how." [13:01] Yeah. [13:02] >> Couple questions I have and and this is [13:04] this is like just released yesterday. [13:06] I'm part of the early access, so [13:07] obviously this is very early and they're [13:09] trying to figure out what the spec will [13:10] be. Um but some questions I have is like [13:12] will cross apps be possible? Because one [13:15] thing Kent said when we talked about [13:17] MCPUI is he's like, "Yeah, like people [13:19] don't want to just like go to one [13:20] website and do their thing." Like you [13:22] want you want to say like, "Ah, grocery [13:24] lists. Um, go look at my calendar and [13:27] see when that dinner is and then if if I [13:30] have any dinners planned this week, add [13:31] it to my you you want things to interact [13:33] with each other." So, will cross [13:36] application stuff be possible? And and I [13:38] I assume so because this like little [13:41] sidebar here in Chrome, this is not like [13:44] the end UI for this. This is just for [13:46] you to be able to test it out and debug [13:48] it. Like what I assume will happen is [13:50] that you will be using some sort of chat [13:53] application or whatever. And very much [13:56] like the MCPI, it will simply just visit [13:58] the website, discover the tools, see [14:00] that you're logged in, and then it can [14:02] visit several websites at a time and [14:04] sort of move data between the two of [14:06] them. Yeah. Wow. Cool. Um, yeah, [14:09] headless. It probably will be headless. [14:11] I assume it will be headless at some [14:13] point. And then last thing I have here [14:14] is just like my my take. Um, and I think [14:17] that this is a great way for the web to [14:19] adapt to AI, right? Because I don't know [14:22] that you're going to get every single [14:24] person under the sun to publish an MCP [14:26] server and have it make an app with Chat [14:28] GPT and make it work. We might. We saw [14:31] it. It happened with iPhone apps, right? [14:33] Every everybody has an iPhone app now. [14:35] So, but I think that this is a very good [14:38] bridge to that space where somebody can [14:40] simply just go add a couple properties [14:42] to forms on their HTML or or publish [14:45] whatever tools they want to be available [14:47] in their JavaScript bundles and then [14:49] your website is just it's it's ready [14:51] already, right? It's similar to like [14:52] responsive design where like, oh, I just [14:55] need to change a little bit of things [14:57] and now my my website is ready for [15:00] mobile. And then the other thing is like [15:04] APIs. Like I don't know that every [15:07] website's going to want to like surface [15:09] these types of things. We saw it happen [15:11] with APIs. Like very early on every [15:13] website ever had an API and anyone could [15:16] go and use that API for free. Everybody [15:18] was building. There was like a hundred [15:20] different Twitter clients. You know, we [15:21] were making mashups. Everything was was [15:24] totally fine. And then very slowly but [15:26] surely, all of these apps were like, [15:29] "You know what? [15:30] >> API access sucks. We want people to come [15:32] to our site." Reddit API totally gone. [15:35] Um, the Twitter API went away and it was [15:38] like $40,000 a month or something. Now [15:40] they they just released the ability to [15:41] pay as you go and it's like 200 uh [15:44] requests for a dollar. It's still [15:46] extremely expensive. Instagram [15:48] impossible to to interact with it via an [15:52] API, right? They all of these big [15:53] companies don't want you just being [15:55] like, "Oh, sure. Would you like to use [15:57] us as a utility? Just interact with us [15:59] this way." They want you on their [16:01] platform, using it in their way so they [16:03] can sell you stuff and and make the most [16:05] money. So, [16:06] >> I don't know if if this is going to be [16:08] the the total end game for all of this [16:11] stuff. But I certainly think for people [16:13] who do want AI to interact with their [16:15] their applications, this is a great way [16:17] forward. [16:18] >> Yeah, I I think this is neat. I'm stoked [16:20] to dive in more. And uh thank you as [16:22] always, Wes. This is a great little [16:24] explainer. Yeah, [16:25] >> that's it. You can sign if you want to [16:27] test it yourself, um you can sign up for [16:29] the web MCP early preview. I'll leave [16:32] links in the description below. But [16:33] that's it. [16:34] >> Peace. [16:34] >> Peace.  ## 📺 Video ![](https://www.youtube.com/watch?v=sOPhVSeimtI) --- # 📝 Full Notes (Deep-Read Analysis) # 🏷️ Title: THIS is how to expose your apps to AI: WebMCP ## 🧰 Action Inbox - [H1] Test WebMCP early preview — sign up for early access #webmcp - [H2] Implement tool registration in existing app — add form properties or JavaScript registration #development - [H3] Explore Chrome extension for WebMCP — install and test with Gemini Flash 2.5 #testing ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [WebMCP Specification](https://github.com/modelcontextprotocol/spec) - [Chrome Extension for WebMCP](https://chrome.google.com/webstore) ## 📝 Summary - WebMCP is a new specification that allows websites to expose their functionality to AI agents through declarative tool registration - Unlike traditional MCP servers, WebMCP works directly through websites using either JavaScript registration or HTML form properties - Key benefits include faster AI interaction, better token efficiency, and easier implementation for developers - Demonstrated through a grocery list app that can be controlled via natural language commands - Early access available with Chrome extension integration ## 📖 Main Content WebMCP (Web Model Context Protocol) represents a new approach to AI-web application integration. Instead of requiring separate MCP servers or complex browser automation, WebMCP allows websites to directly publish their available tools and functionality. This enables AI agents to interact with web applications in a structured, efficient manner while maintaining the full user interface experience. The specification supports two implementation methods: programmatic registration via JavaScript using `window.navigator.modelcontext.registerTool()`, and declarative registration through HTML form elements with special properties like `tool-name` and `tool-description`. This dual approach accommodates different development preferences and existing application architectures. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/sOPhVSeimtI?t=0) — [H1] WebMCP Introduction - Key idea: WebMCP surfaces website functionality to AI through the website itself, not separate servers - Evidence: "WebMCP is surfacing tools and ways to interact with your website via your website itself" #### ⏱️ [02:15](https://youtu.be/sOPhVSeimtI?t=135) — [H2] Grocery App Demo Context - Key idea: Demo uses a kanban-style grocery app with stores and items as the test application - Evidence: "I built a little app called a grocery app... you have each of your grocery stores that you might want to go to" #### ⏱️ [03:30](https://youtu.be/sOPhVSeimtI?t=210) — [H2] Current AI Integration Options - Key idea: Existing options include embedded AI, MCP servers, or MCP UI components - Evidence: "You can just build AI right into your application... you can create a MCP server... MCP UI or now what's called MCP apps" #### ⏱️ [05:00](https://youtu.be/sOPhVSeimtI?t=300) — [H2] Browser Automation Problems - Key idea: Current browser automation with Playwright is slow and inefficient - Evidence: "It's extremely slow to actually use because it has to like parse all of it, figure out which buttons it should press" #### ⏱️ [06:15](https://youtu.be/sOPhVSeimtI?t=375) — [H1] Tool Registration Concept - Key idea: WebMCP explicitly publishes available tools with input/output schemas - Evidence: "The solution is for your website to explicitly publish. These are the things that I can do" #### ⏱️ [08:30](https://youtu.be/sOPhVSeimtI?t=510) — [H2] Live Demo with Chrome Extension - Key idea: Chrome extension demonstrates real-time AI interaction with the grocery app - Evidence: "Please add bananas to Costco shopping list... it added bananas to Costco and then it went ahead and moved it to the Whole Foods" #### ⏱️ [10:45](https://youtu.be/sOPhVSeimtI?t=645) — [H2] Complex Command Processing - Key idea: AI can interpret complex requests like "add all items for chicken noodle soup" - Evidence: "It went ahead and just added chicken broth, chicken breast, egg noodles, carrots, celery, and onion" #### ⏱️ [12:00](https://youtu.be/sOPhVSeimtI?t=720) — [H1] Implementation Methods - Key idea: Two ways to register tools - JavaScript API or HTML form properties - Evidence: "window.navigator.modelcontext.registerTool... the other way is with form elements" #### ⏱️ [13:30](https://youtu.be/sOPhVSeimtI?t=810) — [H2] HTML Form Properties - Key idea: Declarative tool registration using special form attributes - Evidence: "tool name, tool description, tool param title, and tool param description" #### ⏱️ [15:00](https://youtu.be/sOPhVSeimtI?t=900) — [H2] Mixed UI Benefits - Key idea: Combines traditional UI experience with natural language interaction - Evidence: "Sometimes people want to actually visit the website and use that UI... But then I can also interact with it with my natural language" #### ⏱️ [17:15](https://youtu.be/sOPhVSeimtI?t=1035) — [H2] Speed Comparison - Key idea: WebMCP is significantly faster than browser automation approaches - Evidence: "Five seconds and it added a new store and added lip balm to it... That's pretty fast" #### ⏱️ [18:30](https://youtu.be/sOPhVSeimtI?t=1110) — [H2] Token Efficiency - Key idea: More efficient token usage compared to sending entire DOM or screenshots - Evidence: "Simply just sending the tool calls along with the possible options... rather than having to send the entire DOM tree" #### ⏱️ [20:00](https://youtu.be/sOPhVSeimtI?t=1200) — [H2] Framework Integration Potential - Key idea: Frameworks could easily implement WebMCP using existing application schemas - Evidence: "You already have your schemas, you already have your validation... Simply just taking one more step and publishing those things" #### ⏱️ [22:00](https://youtu.be/sOPhVSeimtI?t=1320) — [H3] Cross-Application Questions - Key idea: Uncertainty about multi-app integration capabilities - Evidence: "Will cross application stuff be possible?... you want to say like go look at my calendar and see when that dinner is" #### ⏱️ [24:30](https://youtu.be/sOPhVSeimtI?t=1470) — [H2] Web Adaptation to AI - Key idea: WebMCP provides a bridge for existing websites to become AI-compatible - Evidence: "This is a great way for the web to adapt to AI... similar to responsive design where I just need to change a little bit of things" ## 📚 References - [WebMCP Early Preview Signup](https://github.com/modelcontextprotocol/spec) - [Syntax Podcast](https://syntax.fm/) - [Sentry Error Tracking](https://sentry.io/syntax) ## 🗣️ Paraphrase - WebMCP allows websites to directly expose their functionality to AI agents without requiring separate servers or complex automation - The specification supports both programmatic tool registration through JavaScript and declarative registration through HTML form attributes - This approach is faster and more efficient than existing browser automation solutions while maintaining the full website user experience ## 📰 Newsletter 🚀 **WebMCP: The Future of AI-Web Integration** The web development landscape just got more exciting with WebMCP, a new specification that bridges the gap between AI agents and web applications. Instead of building separate API servers or relying on slow browser automation, you can now expose your app's functionality directly through your website. **Key Benefits:** - ⚡ Lightning-fast AI interactions (5 seconds vs. minutes) - 💰 Token-efficient communication - 🛠️ Simple implementation using existing schemas - 🎯 Natural language commands for complex operations **Getting Started:** Add tool properties to your forms or use the JavaScript registration API. Your existing validation and schemas can be repurposed, making this as simple as adding responsive design to your site. **Resources:** [WebMCP Spec](https://github.com/modelcontextprotocol/spec), [Chrome Extension](https://chrome.google.com/webstore), [Syntax Podcast](https://syntax.fm/) Early access is available now - perfect time to experiment and prepare your applications for the AI-driven future! ## ✅ Action Items #### DevRel - Developer advocacy: Create WebMCP integration tutorials, conference talks on AI-web integration - Education: Workshop curriculum on tool registration patterns, best practices documentation - Developer experience: Debugging tools for WebMCP implementation, starter templates - Developer marketing: Case studies of WebMCP implementations, integration success stories - Community management: WebMCP developer forums, feedback collection on specification #### OSPO - Policy & Governance: Review WebMCP specification licensing, contribution guidelines - License Compliance: Audit WebMCP dependencies, compatibility with existing licenses - Security Management: Assess AI agent access patterns, tool registration security - Software Inventory: Track WebMCP adoption across organization projects - Developer Support: Training on secure tool exposure, implementation consulting #### Community - Maintainers: WebMCP integration roadmaps, specification feedback processes - Contributors: First-issue programs for WebMCP tooling, documentation improvements - Sponsors: Fund WebMCP specification development, tooling infrastructure - Ecosystem: Cross-framework WebMCP standards, interoperability testing #### WordPress - Core: Evaluate WebMCP integration possibilities, REST API tool exposure - Plugins: WebMCP-compatible plugin development patterns, registration helpers - Themes: Theme-level tool registration, AI-compatible form patterns - Documentation: WebMCP implementation guides, security considerations - Community: WordCamp presentations on AI integration, local meetup demos ## 🧪 Hypotheses - WebMCP adoption will be faster than API integration due to lower implementation barriers - Declarative HTML form registration will be preferred over JavaScript registration for simple tools - Cross-application WebMCP orchestration will require additional coordination protocols - Framework-level WebMCP integration will accelerate mainstream adoption ### 📊 Methodology - Comparative analysis: WebMCP vs MCP server implementation time and complexity - User testing: Natural language command success rates vs traditional UI interactions - Performance benchmarks: Token usage and response time comparisons across integration methods ### ❓ Questions - How will WebMCP handle authentication and authorization across different domains? - What security measures prevent malicious AI agents from exploiting exposed tools? - Can WebMCP work effectively with single-page applications and dynamic content? ### 🔮 Future Research - Cross-domain tool orchestration protocols and security models - Framework-specific WebMCP implementation patterns and best practices - AI agent trust and verification systems for WebMCP interactions ### 💡 Implications - Practice: Developers need to consider AI accessibility when designing web applications - Policy: New security frameworks required for AI-web application interactions - Security: Tool exposure creates new attack vectors requiring careful access controls - Education: Web development curricula should include AI integration patterns - Funding: Investment in WebMCP tooling and specification development infrastructure ### 🧠 Learning Styles Assessment Reading level estimate: 8th Grade (Flesch-Kincaid) #### 👀 Visual learners - Present: Live demo screenshots, tool registration code examples, application interface - Improve: Architecture diagrams showing WebMCP flow, comparison charts with other methods #### 🔊 Aural learners - Present: Podcast format with detailed explanations and live narration - Improve: Audio-only summary of key concepts, implementation walkthroughs #### 🗣️ Verbal learners - Present: Clear definitions of WebMCP vs MCP servers, analogies to responsive design - Improve: Glossary of technical terms, step-by-step implementation narratives #### 🧩 Kinesthetic learners - Present: Live coding demo, interactive tool registration examples - Improve: Hands-on tutorial checklist, sandbox environment for testing #### 🧠 Logical learners - Present: Before/after performance comparisons, structured implementation options - Improve: Decision tree for choosing registration methods, cost-benefit analysis #### 🧑‍🤝‍🧑 Social learners - Present: Podcast discussion format, community early access program - Improve: Developer forum links, peer review guidelines for implementations #### 🧘‍♀️ Solitary learners - Present: Detailed technical explanations, independent demo walkthrough - Improve: Self-paced implementation guide, reflection questions on use cases #### 🌿 Naturalistic learners - Present: Ecosystem analogies (web adapting to AI like responsive design) - Improve: Evolution of web standards context, environmental impact of efficiency gains ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive video content - Improve: Alt text for demo screenshots, transcript with code descriptions #### Keyboard navigation - Present: Standard video controls, pausable content - Improve: Timestamped navigation, skip-to-section functionality #### Contrast and readability - Present: High contrast video player, readable transcript - Improve: Larger code text in examples, color-blind friendly syntax highlighting #### Text resizing and reflow - Present: Responsive transcript layout, scalable video player - Improve: Reflowable code examples, mobile-optimized viewing #### Media and captions - Present: Full transcript provided, audio narration - Improve: Synchronized captions, downloadable transcript with timestamps #### Forms and interactions - Present: Simple video controls, accessible description links - Improve: Interactive code examples with proper labels ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal web development concepts, English-language content - Improve: Multi-language implementation examples, global use case scenarios #### Inclusive language - Present: Technical jargon explained, conversational tone - Improve: Plain language summary, avoid assumptions about prior knowledge #### Neurodiversity support - Present: Chunked content with timestamps, consistent structure - Improve: Content warnings for rapid demos, processing time allowances #### Representation - Present: Technical focus without identity emphasis - Improve: Diverse developer perspectives, varied application examples #### Psychological safety - Present: Encouraging tone about early access, learning-focused - Improve: Explicit permission to ask questions, no-judgment experimentation ### ✅ Logical Validity #### Strong reasoning - Deductive strength: WebMCP solves browser automation problems through direct tool exposure - Inductive strength: Framework adoption patterns suggest similar adoption trajectory - Causal reasoning: Token efficiency improvements directly result from structured data - Analogical strength: Responsive design comparison effectively illustrates adaptation concept #### Fallacies - Hasty generalization: "Every website had an API" overstates historical API adoption - Appeal to novelty: Assumes newer approach is inherently better without full comparison #### Tone of voice - Overall tone: Enthusiastic but technically grounded, educational with practical focus ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on alternative approaches or critics - Reverse victim/offender: No victim/offender dynamics - Emotional cues and rhetoric: Genuine excitement about technology, balanced with practical considerations --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=sOPhVSeimtI)* **[00:06]** Welcome to Syntax. Today we're talking about Web MCP. This thing is brand new. It's a new specification and we're going to explain what it is. We're going to show a demo and I got a couple hot takes about it, but essentially Web MCP is surfacing tools and ways to interact with your website via your website itself. So this is different than MCP servers and this is different than MCP UI and MCP apps. It's related. It works in the same way, but this is a new way to surface functionality simply just **[00:37]** through your website without having to have additional servers. So let's get on into it. My name is Wes. With me as always is Scott. How you doing Scott? Hey I'm doing good. How are you doing man? Yeah, I'm interested to learn about this cuz I hear Web MCP my first thing goes to Chrome DevTools MCP or agent browser or those types of things. I'm curious to know >> at all. Yeah, so that that that in itself to me is a revelation here. So I'm excited to learn what this thing is and how people can take advantage of it. Yes. All right, so all of this in **[01:08]** context is going to be I built a little app called a grocery app, right? And it's just a very simple kind of like a conban where you have each of your grocery stores that you might want to go to and then under each of those grocery stores you can add, remove and check off food items that you want to do, right? So that's pretty standard. You're going to have if you're building out an app like this, you're going to have something like add a store, add an item, reorder items, uh rename, delete item, like check off, you know, like all the standard kind of to-do list application stuff. Now, if **[01:40]** you have an application and you want to now surface your application's functionality to some sort of AI, you have you kind of a couple options, right? Like one option is you can just build AI right into your application and your users can do that and you sort of like foot the the for that. Another way is you can create a MCP server, which surfaces all of the tools, and then the AI chat will simply just talk back and forth via the MCP server, adding, removing, and whatever. And then we also learned we had Kensey Dodds on the other day where we have MCPUI, or now it's **[02:11]** called MCP apps, where you'll be able to actually return and generate, like maybe you want to embed components in in like stylized structure right into a chat. This is different than that because the web MCP essentially says, "Okay, I have a website, I have an app, and it it does these things." And if someone were to to visit my my website, or if if an AI were to programmatically open up a browser, and it wants to use your website, right now you kind of have a couple options, which is like you can set up Playwright, **[02:42]** and Playwright will either like dump the HTML or take the accessibility tree, um or take screenshots of the UI, and then it will just go ahead and like use the website you were a human. It'll click on buttons and and whatnot. And in my experience, that's decent, but it's extremely slow to actually use because it has to like parse all of it, figure out which buttons it should press, etc. etc. So, the solution to that is to for your website to explicitly publish, "These are the things that I can do." **[03:14]** Right? So, I have a grocery list here, and I have several different tools, right? You have you have add item, get items, delete delete item, delete store, create store, get items by store, move item, all of these things. And that's not any different than like an MCP server that you would normally just publish these things. And then the way that that works is that you would you would publish these tools, and then you also define what the input and output schemas are. Meaning that like you say, "Hey, AI, here is a tool called add **[03:45]** item. Here is a description of of what it does. Um and then here is the input and output schemas." This is like if you wish to call my tool, you must provide me which item you want to add and which store you would like to add it to, and then I will then return to you the following information, right? It's It's a nice structured way to talk back and forth with with an AI, right? Interesting. >> [snorts] >> So, I I I've been wondering about this in regards to some projects that I've been **[04:15]** working on. I was thinking about working on an API for my AI to consume for my habit tracker, which honestly this feels so similar to your your to do list, your grocery list here. So, this seems like that would be a better fit for that task than creating just what an API and API key and then telling the AI how to use the API or would you do both? You would create the API and then you'd create the MCP to communicate with that API? It **[04:46]** depends on how you you want people to interface with it. But if I'm looking at the web right now, there are millions of applications out there and in order for an AI to interact with it right now, you either have to like publish your own MCP server and essentially like re-implement a lot of your your logic as an MCP server. What this does is it allows you to imperatively or declaratively just publish as part of your website either in the HTML or in the JavaScript **[05:16]** and say, "These are the tools that you can then use when you visit it." So, watch this example. So, Chrome has published a little Chrome extension just as one example of of what it might look like to interact with it and I can simply just go to it and say, "I load the page up." And it says, "All right, I found all of the tools." And then I can I hooked it up to Gemini Flash 2.5 Flash and I I just say, "Please add bananas to Costco shopping list." Once that's done, show me everything on my grocery list. Oh, and can you remove then move bananas from **[05:46]** Costco to Whole Foods?" And then I just go ahead and send it to the AI and it will parse what I need to do, look at the tools it has available to itself, and you'll see that it added bananas to Costco, and then it went ahead and moved it to the Whole Foods. I can do something like um I might go ahead and say something like, "Please add all items for chicken noodle soup to Whole Foods." Right? So, it's going to go ahead and parse that. It's going to figure out, "Okay, what what do I need for [snorts] chicken noodle soup?" And boom, it went ahead and just added chicken broth, chicken breast, egg **[06:16]** noodles, carrots, celery, and onion. And I can say like um mark off anything with chicken. I already have it. There we go. I spelled I spelled chicken wrong. Go ahead and send that off. And it should There we go. It marked off chicken breast and chicken broth. >> Can I Can I just say Ben, one of the benefits of AI is that like >> [laughter] >> I can spell things wrong and it's just like, "Sure, whatever. Doesn't care." It knows what you mean. Yeah. Yeah. That's actually really fantastic. Yeah. [snorts] So, that is just like kind of like a dead **[06:46]** simple example of how this works. And the way that the browser is able to know what the tools are is there there's kind of two ways to do it. And this is the the documentation for um Web MCP. Essentially, what you do is you as part of publishing your website, you simply just publish what the tools are. And you can do that in in two different ways. You can imperatively declare them with the JavaScript. It's So, it's the it's **[07:16]** just window.navigator.modelcontext.registertool, and you can go ahead and register [snorts] the tool with a description, the input, and the and then as well as the the output data that you get, right? However, the other way that you can execute or sort of declare what your tools are is with form elements, which I thought this is This is absolutely genius because if your website already has like forms or if you just want to simply declaratively publish what something can **[07:48]** do, there's just a couple different properties that you can add. So, tool name, tool description, tool param title, and tool param description. And then it will just simply just parse out the HTML elements and figure out, "Okay, these are the things." And in this case, you don't even need to publish the schema because it can infer the schema from your form, right? Yeah. >> Uh which is which is I think is is awesome that you can you can do it in both ways. Wow, that's cool. **[08:20]** Yeah. Yeah, I love that this this meeting of worlds here. That's neat. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io/syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So, head on over to sentry.io/syntax. Again, we've been using this tool for a long time and it totally rules. [music] All right. So, let's talk about couple benefits, **[08:51]** couple questions, and then a couple takes I have here. So, the first one is this sort of mixed UI approach. I really enjoy because like we had like Kent C. Dodds on and he says, "Yeah, like everything's going to be like a UI widget that's either embedded into your chat." Or he talked about it several different ways to do it. And I don't know that every single thing is going to want to just be a UI widget. Um it especially like you you look at like um booking a flight or **[09:22]** whatever. I don't think that these people that sell flights are simply want want to be distilled down into like just like a utility like a your paying a water or electrical bill, you know, like book book a flight. They want to provide you with a good experience. They want to upsell you. They want to say, "Oh." And And not that those things can't be done inside of a a chat interface, but sometimes people want to actually visit the website and and use that UI. And if I'm able to now just use the website as as I always have been, right? Like **[09:53]** everything out there right now is simply just an app in a website, but then I can also interact with it with my natural language, which is way better. Because if I'm I'm adding chicken noodle soup here, I'm not adding five or six different items and dragging them into the thing. It's way faster for me just to type, "Hey, could you add X, Y, and Z?" Or if I'm in my um accounting software, I might just paste six or seven transactions from a credit card and say, "Hey, can you add these and categorize them all?" Yeah. >> Um that natural language is the best. You **[10:25]** could get further with that. If you have historical grocery lists, you could say, uh "Add all of the vegetables from last week to this week." You know, and that's something that would be harder to do with an actual UI because you're getting into the natural language of it. If it wasn't uh natural language, you'd have to be building in a whole tagging system for all of the different types of things. You'd be getting into like so many things to be able to even just get that piece of functionality. Uh I think that's really neat. The other thing is that like this is a great This **[10:57]** is way faster than Like I've used several of these like AI interacting your browsers, um and they work great when you simply just like let them rip and then you can walk away and do something else. But like if you're just sitting there waiting for it to do it because you need it, it's so slow. And there's no chance that like it was so painful using the chat GPT browser, whatever that was called. What is it called? I don't even know what it was called. It was It was It was brutally [clears throat] slow. And I've used many of them in the past and **[11:29]** it is just it's just way too slow right now. So being able to explicitly do it rather than it try to infer it from your HTML is way better. Like watch how fast this is. Add a new store, a drugstore, add lip balm, send. 1 2 3 4 5 5 seconds and it added a new store and added lip balm to it, right? Wow, that's pretty fast. That's pretty cool. >> Um the other thing is that it's like it's much more token efficient, right? If you're if you're paying by the token for these types of things, it's simply just sending the tool calls along with the possible options to the AI rather **[12:02]** than having to send the entire like DOM tree or like a whole screenshot and then have to um go through that screenshot and figure out where the buttons are to click. Yeah. >> Um and then finally like this seems just this seems ripe for rife ripe, whatever that is, for frameworks to implement this, right? Like you already have all of this data as part of your application, right? You already have your schemas, you already have your validation, you already have your your UI later for for mocking up what your forms are going to be or or whatever. Simply just taking one more **[12:33]** step and publishing those things that you can do via um in in your HTML website is so easy and then this doesn't require somebody else to now spin up a second MCP server. You're not hosting anything more than than just your website. Yeah. [snorts] Now. >> Wow, what a what a neat API. Yeah, no, I I just uh um I love finding out about stuff like this and then immediately understanding the utility as opposed to being like, "Oh, I have no idea when I would use this or how." Yeah. Couple questions I have and and this is this is like just **[13:05]** released yesterday. I'm part of the early access, so obviously this is very early and they're trying to figure out what the spec will be. Um but some questions I have is like will cross apps be possible? Cuz one thing Kent said when we talked about MCP UI is he's like, "Yeah, like people don't want to just like go to one website and do their thing." Like you want you want to say like, "Ah, grocery lists, um go look at my calendar and see when that dinner is and then if if I have any dinners planned this week, add it to my group. You know, you want things to interact with each other. So, will cross application stuff be **[13:37]** possible? And and I I assume so because this like little sidebar here in Chrome, this is not like the end UI for this. This is just for you to be able to test it out and debug it. Like what I assume will happen is that you will be using some sort of chat application or whatever and very much like the MCP UI, it will simply just visit the website, discover the tools, see that you're logged in and then it can visit several websites at a time and sort of move data between the two of them. Yeah. Wow, cool. Damn. **[14:08]** >> yeah. Headless, it probably will be headless. I assume it will be headless at some point. And then last thing I have here is just like my my take. Um, I I think that this is a great way for the web to adapt to AI, right? Because I don't know that you're going to get every single person under the sun to publish an MCP server and have it make an app with ChatGPT and make it work. We might. We saw it it happened with iPhone apps, right? Every Everybody has an iPhone app now. So, but I think that this is a very good bridge to that space **[14:39]** where somebody can simply just go at a couple properties to forms on their HTML or or publish whatever tools they want to be available in their JavaScript bundles and then your website is just it's it's ready already, right? It's similar to like responsive design where like, "Oh, I just need to change a little bit of things and now my my [clears throat] website is ready for mobile." And then the other thing is like APIs, like I don't know that every website's going to want to like surface these types of things. We **[15:10]** saw it happen with APIs. Like very early on, every website ever had an API and anyone could go and use that API for free. Everybody was building. There was like a hundred different Twitter clients, you know, we were making mash-ups. Everything was was totally fine. And then very slowly but surely all of these apps were like, you know what? API access sucks. We want people to come to [clears throat] our site. Reddit API totally gone. Um the Twitter API went away and it was like $40,000 a month or something. Now they they just released **[15:41]** the ability to pay as you go and it's like 200 uh requests for a dollar. Still very extremely expensive. Instagram, impossible to to interact with it via an API, right? They all of these big companies don't want you just being like, oh sure, would you like to use us as a utility? Just interact with us this way. They want you on their platform using it in their way so they can sell you stuff and and make the most money. So I don't know if if this is going to be the the total end game for all of this stuff, but I certainly think for people **[16:13]** who do want AI to interact with their their applications, this is a great way forward. Yeah, I I think this is neat. I'm stoked to dive in more and uh Thank you as always, Wes. This is a great little explainer. Yeah. That's it. You can sign If you want to test it yourself, um you can sign up for the WebMCP early preview. I'll leave links in the description below. But that's it. Peace. >> Peace.