{"slug": "is-this-how-we-ll-build-websites-soon-webmcp-live-demo", "title": "Is This How We'll Build Websites Soon? (webMCP Live Demo 🚀)", "summary": "A developer built an AI CEO Simulator in React and TypeScript to demonstrate webMCP, an experimental Google Chrome feature that lets websites expose structured action data for AI agents. The project, available on GitHub and as a live demo, shows how webMCP allows agents to interact with sites through registered tools like \"hire_employee\" or \"pivotToAgents\" instead of scraping and guessing page elements. The technology currently works only in Chrome Canary or Beta with experimental flags enabled, but functions as a normal website for human users.", "body_md": "A few years ago, we started adapting our websites for mobile devices. Then we adapted them for accessibility. And now we may be about to adapt them once again. This time... for AI agents.\n\nTo see what this could look like in practice, I built a completely serious and absolutely enterprise-ready AI CEO Simulator.\n\nWe'll come back to our visionary leader in a moment.\n\n*BTW, thank you all for the amazing discussion under my previous article. We somehow managed to generate approximately one billion comments 🩷 Many of them were probably smarter than the article itself. The sensible thing to do would be to write a follow-up post summarizing everything.*\n\n*But honestly, I needed a break from that topic before I exploded.*\n\n*Sometimes I just have to write something technical, otherwise I'll suffocate. Fortunately, nobody pays me for these articles, so I can do whatever I want 😁 We'll come back to AI in software development another time.*\n\nFor now, let's talk about webMCP.\n\nGoogle is currently experimenting with webMCP support in Chrome, an approach designed to make it easier for AI agents to interact with websites.\n\nThe problem it tries to solve is actually quite simple.\n\nToday, when an agent wants to use a website, it has to inspect the page, figure out which elements are important, click around, analyze the results, and repeat this process over and over again. It works, but it's slow, expensive, and not always reliable.\n\nwebMCP allows websites to expose structured information about available actions, so agents can understand what they can do without endlessly scraping the page and guessing.\n\nBut enough theory.\n\nLet's build something completely serious and enterprise-ready.\n\n[@cart0ne](https://dev.to/cart0ne) mentioned under my previous article that AI had effectively become the CEO of his startup.\n\nSo, as a responsible person, I built an AI CEO Simulator in React + TypeScript.\n\nGitHub: [https://github.com/sylwia-lask/ai-ceo-webMCP](https://github.com/sylwia-lask/ai-ceo-webMCP)\n\nLive demo: [https://sylwia-lask.github.io/ai-ceo-webMCP/](https://sylwia-lask.github.io/ai-ceo-webMCP/)\n\nBefore you immediately rush to implement webMCP in your production application, a small disclaimer.\n\nFor now, this is still experimental technology. It currently works only in Chrome Canary, Chrome Beta, or Chrome with the appropriate experimental flag enabled.\n\nTo enable it:\n\n```\n1. Open `chrome://flags`\n2. Search for \"MCP\"\n3. Enable the experimental MCP-related features\n4. Restart Chrome\n```\n\nIf you'd rather not play with experimental browser flags, that's fine. You can simply look at the screenshots below.\n\nOr click around the application yourself, because everything still works perfectly as a normal website.\n\nThat's actually one of the things I like most about this approach. WebMCP is just an enhancement for agents, much like accessibility features are enhancements for users relying on screen readers. Nothing breaks, nothing changes for regular users.\n\nThe application simply becomes easier to understand for a different kind of visitor.\n\nThere are currently two main ways of exposing information through webMCP.\n\nThe first approach is adding metadata directly to HTML elements:\n\n```\n<form\n  mcp-name=\"createSupportTicket\"\n  mcp-description=\"Create a new customer support ticket\">\n```\n\nThis allows agents to understand the purpose of UI elements without relying entirely on visual interpretation.\n\nThe second approach is exposing MCP tools directly from your application code.\n\nThat's the approach I used in my demo:\n\n```\nregisterTool({\n  name: 'hire_employee',\n  description: 'Hire a new employee'\n});\n\nregisterTool({\n  name: 'fire_employee',\n  description: 'Fire an employee'\n});\n```\n\nIn my application, these tools correspond directly to actions available through buttons on the page.\n\nFor example, I expose tools such as:\n\n```\nhireDevelopers()\nfireDevelopers()\nadoptAI()\nrewriteInRust()\npivotToAgents()\nfixProductionBugs()\n```\n\nIn other words: completely normal startup management.\n\nSo what happens when we connect an actual AI agent?\n\nInstead of building my own agent, I used the WebMCP – Model Context Protocol Inspector extension. You can connect a Gemini API key and immediately start experimenting. There's even a free token allowance. Small, but still enough to make some questionable strategic decisions 😅\n\nAs with most LLM-powered systems, everything starts with a prompt.\n\nLet's see how our CEO performs when given the following instruction:\n\nAct like a CEO who just read three articles about AI on LinkedIn.\n\nAs you can see, the agent selected the appropriate tools and immediately got to work.\n\nThe company's employees may have started updating their LinkedIn profiles in panic, but at least the hype level reached previously unimaginable heights.\n\nNow let's try something a little more challenging:\n\nI want to rebuild my employees' trust while simultaneously developing the product.\n\nThis time our agentic CEO made several surprisingly clever moves and managed to guide the company back toward sustainable growth.\n\nHonestly, I had way too much fun building this.\n\nNo, I don't think this is a glimpse into a future where self-healing AI agents manage the global economy while piloting commercial aircraft.\n\nBut I do think webMCP solves a real problem.\n\nIf AI agents are going to spend more and more time interacting with our applications, giving them a structured way to understand those applications makes a lot more sense than forcing them to endlessly scrape HTML and guess what every button does.\n\nWill webMCP become a normal part of web development?\n\nWill adapting websites for agents become as common as responsive design or accessibility?\n\nOr will this trend disappear before it ever reaches the mainstream?\n\nI'm genuinely curious what you think.\n\nIf you enjoy my articles, feel free to follow me on [LinkedIn](https://www.linkedin.com/in/sylwia-laskowska-5a8467131/) as well.", "url": "https://wpnews.pro/news/is-this-how-we-ll-build-websites-soon-webmcp-live-demo", "canonical_source": "https://dev.to/sylwia-lask/is-this-how-well-build-websites-soon-webmcp-live-demo--2e33", "published_at": "2026-06-03 07:11:55+00:00", "updated_at": "2026-06-03 07:41:27.282716+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "ai-products", "artificial-intelligence", "ai-infrastructure"], "entities": ["Google", "Chrome", "webMCP"], "alternates": {"html": "https://wpnews.pro/news/is-this-how-we-ll-build-websites-soon-webmcp-live-demo", "markdown": "https://wpnews.pro/news/is-this-how-we-ll-build-websites-soon-webmcp-live-demo.md", "text": "https://wpnews.pro/news/is-this-how-we-ll-build-websites-soon-webmcp-live-demo.txt", "jsonld": "https://wpnews.pro/news/is-this-how-we-ll-build-websites-soon-webmcp-live-demo.jsonld"}}