WebMCP - Making the Web AI-Agent Ready

Talk by Markus Ingvarsson @ AI-India 2026

Transcript

1. W E B M C P - M A K I N G T H E W E B A I - A G E N T R E A D Y A I - I N D I A 2 0 2 6 @markusingvarssn
3. A G E N T S O N T H E W E B AI agents on your web apps today • No menu • No waiter
4. O P T I O N A : S C R A P E T H E D O M
5. O P T I O N A : S C R A P E T H E D O M This works today — and it’s getting better fast. But it has inherent ceilings:
6. O P T I O N A : S C R A P E T H E D O M This works today — and it’s getting better fast. But it has inherent ceilings: • The agent has to infer intent from layout • Many UI interactions for what could be one API call
7. O P T I O N A : S C R A P E T H E D O M https://aws.amazon.com/blogs/aws/announcing-a-visual-update-to-the-aws-management-console-preview/
8. O P T I O N B : B U I L D A S E PA R AT E M C P S E R V E R Re-implement your entire app as a backend server • Works well... but massive effort • New infrastructure to maintain • Small/medium apps will likely never build this
9. W E N E E D A T H I R D PAT H Both approaches work — but there is still no menu. What if the website could just hand the agent the menu directly?
10. HELLO! WEBMCP: MAKING THE WEB AI-AGENT READY I’m Markus @markusingvarssn
11. HELLO! WEBMCP: MAKING THE WEB AI-AGENT READY I’m Markus @markusingvarssn
12. HELLO! WEBMCP: MAKING THE WEB AI-AGENT READY I’m Markus @markusingvarssn
13. W E B M C P M A K I N G T H E W E B A I - A G E N T R E A D Y After this talk, you will know about:
14. W E B M C P M A K I N G T H E W E B A I - A G E N T R E A D Y After this talk, you will know about: • What MCP is and the problem it solves
15. W E B M C P M A K I N G T H E W E B A I - A G E N T R E A D Y After this talk, you will know about: • What MCP is and the problem it solves • What WebMCP brings to the browser
16. W E B M C P M A K I N G T H E W E B A I - A G E N T R E A D Y After this talk, you will know about: • What MCP is and the problem it solves • What WebMCP brings to the browser • Live demos: WebMCP in action
17. M O D E L C O N T E X T P R O T O C O L https://www.anthropic.com/news/model-context-protocol
18. • APIs standardized how systems talk to each other A P P L I C AT I O N P R O G R A M M I N G I N T E R FA C E
19. • APIs standardized how systems talk to each other • LSP standardized IDEs ↔ language tooling L A N G U A G E S E R V E R P R O T O C O L LSP Visual Studio Code Neovim WebStorm Zed TypeScript Language Server Pyright gopls clangd
20. • APIs standardized how systems talk to each other • LSP standardized IDEs ↔ language tooling • MCP standardizes AI ↔ external systems M O D E L C O N T E X T P R O T O C O L
21. T H E N × M P R O B L E M Strawberry Browser Claude ChatGPT Gemini Figma Supabase Stripe Linear
22. M C P S A M E P L AY B O O K , N E W C L I E N T MCP Strawberry Browser Claude ChatGPT Gemini Figma Supabase Stripe Linear
23. M C P T O O L S
24. M C P T O O L S • Actions the model decides to invoke
25. M C P T O O L S • Actions the model decides to invoke • The model sees what tools are available and chooses when to use them
26. M C P T O O L S • Actions the model decides to invoke • The model sees what tools are available and chooses when to use them • Read data, write data, call APIs
27. H O W M A N Y R ’ S I N T H E W O R D S T R A W B E R R Y ? https://community.openai.com/t/incorrect-count-of-r-characters- in-the-word-strawberry/829618/15
28. L I V E D E M O C O U N T T H E R ’ S How many R’s in "strawberry"? The famous task LLMs failed at. Build a tiny MCP tool that counts characters — connect it, and watch AI get it right.
30. W H AT I S W E B M C P ? A W3C spec that lets websites publish their functionality as structured tools for AI agents.
31. W H AT I S W E B M C P ? A W3C spec that lets websites publish their functionality as structured tools for AI agents. • Published August 2025
32. W H AT I S W E B M C P ? A W3C spec that lets websites publish their functionality as structured tools for AI agents. • Published August 2025 • Co-authored by Google and Microsoft engineers
33. W H AT I S W E B M C P ? A W3C spec that lets websites publish their functionality as structured tools for AI agents. • Published August 2025 • Co-authored by Google and Microsoft engineers • W3C Community Group proposal (not yet a standard)
34. W H AT I S W E B M C P ? A W3C spec that lets websites publish their functionality as structured tools for AI agents. • Published August 2025 • Co-authored by Google and Microsoft engineers • W3C Community Group proposal (not yet a standard) • Early browser support behind feature flags
35. T W O I M P L E M E N TAT I O N A P P R O A C H E S
36. T W O I M P L E M E N TAT I O N A P P R O A C H E S • Declarative — HTML form attributes
37. T W O I M P L E M E N TAT I O N A P P R O A C H E S • Declarative — HTML form attributes • Imperative — JavaScript API
38. T H E N A V I G AT O R O B J E C T The navigator object is the browser's gateway to device & platform APIs. New capabilities are added here over time: API What it does navigator.geolocation GPS/location access navigator.mediaDevices Camera, microphone access navigator.serviceWorker Service worker registration navigator.share() Native share dialog (mobile) navigator.gpu WebGPU access navigator.modelContext WebMCP (new)
39. I M P E R AT I V E A P P R O A C H
40. L I V E D E M O G R O C E R Y A P P A meal prep app: browse recipes, select ingredients, build a shopping list. The UI works fine for humans — but it’s deliberately fiddly. Lots of dropdowns, quantities, stores. This is the pain point.
42. W H AT J U S T H A P P E N E D Your website IS the MCP server. • Agent discovered tools exposed by the web app • Called structured APIs, not scraped DOM • Agent adds to cart → UI updates instantly • No new infrastructure — just a few lines of JS
43. O P E N Q U E S T I O N S • Trust model: who decides what an AI is allowed to do? • Prompt injection: malicious sites could expose poisoned tools • API graveyard risk: will platforms embrace or shut it out? • Discoverability: how does a user know a site supports WebMCP?
44. S U M M A R Y WebMCP lets your website become AI-agent ready: • Fast — tool calls, not DOM scraping • No new infra — your website IS the server • Incremental — start with one tool, grow from there
45. F U R T H E R R E A D I N G • WebMCP Spec - https://github.com/webmachinelearning/webmcp • WebMCP Vs MCP – https://developer.chrome.com/blog/webmcp-mcp-usage • Presentation Slides - https://speakerdeck.com/markusingvarsson/webmcp- making-the-web-ai-agent-ready
46. T H A N K Y O U Go make your apps AI-agent ready! @markusingvarssn