Agentic Application

An AI agent on your website works the way a screen reader does: it reads the page and guesses which button to press. WebMCP is the alternative. Your page hands the agent a list of things it can do (search this catalog, add this to the cart, set this address), described in your words and running your code, in the tab the visitor already has open.

WebMCP in Practice is a short, hands-on guide for web developers. You build one small shop, Kiosk, and every runnable listing was run before it was written about. You start with a working tool from a few HTML attributes on a form you already have. Then you register tools in JavaScript, write descriptions and errors an agent can act on, make tools appear and disappear as the page changes, and test them.

The part that matters most: a tool runs as the logged-in user, with no API key and no sandbox in between. Chapter 6 shows a prompt-injection attack on the book's own shop, step by step. Chapter 7 covers the annotations the platform offers, what they do not enforce, and how your page can ask the shopper before a consequential tool runs.

WebMCP is a W3C Community Group draft with one implementation, behind an origin trial in Chrome (149 through 156) and a matching trial in Edge. This book is for someone who wants to build on it anyway, with their eyes open. Every claim that depends on a version carries the version and the date it was checked. The places where the shipping code disagrees with the spec are listed in an appendix. Where a number matters, the book gives you the command to check it yourself.

What you'll learn

• Turn an ordinary HTML form into a WebMCP tool with a few attributes, and see it in Chrome DevTools.
• Register tools in JavaScript, and write descriptions, schemas, return values and errors an agent can act on.
• Make tools appear and disappear as the page changes, so an agent is only offered what makes sense right now.
• See how a poisoned product review can steer an agent, and how to narrow a tool so it cannot.
• Use the three annotations, and ask the shopper before a consequential tool runs.
• Test tools against the real platform, in jsdom and in a real Chrome, instead of a mock that hides failures.
• Ship it: feature detection, origin-trial tokens, the polyfill, keeping the site working with every tool off, and what production adds.
• Tell what is settled in this API from what is still open.

Who this book is for

A web developer who knows the DOM and can read JavaScript. You do not need to have used the Model Context Protocol or built an agent. You do not need an AI account or an API key, and no chapter calls a model. A skeptical reader is welcome: the book argues its case and shows the costs.

Build interactive apps that live inside Claude's conversations.

Ask an AI assistant whether a meeting room is free and you usually get a sentence. With an MCP App, you get a card instead: the room, the next free half hour, and a Book button that works right there in the chat. MCP Apps for Claude shows you how to build that kind of interface, from the first tool to a listing in Claude's connector directory.

The book follows one real app, Snug, a meeting-room booking connector, from a text-only MCP server to a polished, tested app that runs in claude.ai, in Claude Desktop and in the Claude Android app. Every code example is cut from a real, tested file, and every screenshot was taken in Claude.

What you'll learn

• How MCP Apps work: tools, ui:// resources, and the sandboxed card Claude shows in the conversation
• How to build inline cards, carousels and fullscreen views that follow Claude's design guidelines
• How to take Claude's theme, fonts and colors, in light and dark mode, and design for phones
• How a card talks back to Claude: updateModelContext, sendMessage, app-only tools and links
• How to handle many copies of one card, large results and live data
• How the sandbox and content security policy work, and how to add sign-in with a threat model
• How to test a card without a browser, debug it inside Claude, and prepare it for the directory

Who this book is for

Web developers who know JavaScript or TypeScript and want to build interactive connectors for Claude. You don't need to know MCP already: Chapter 2 teaches the parts you need.

What you get

• 14 chapters, with diagrams, screenshots and exercises
• Runnable solutions to every exercise
• The complete companion code under the MIT License, with a copy of the app at the end of every chapter and a full test suite