This is a good example of how development will continue but change domains and abstractions.
Building for agents with tools and context is harder than building for humans with 2d frontends. Agents will do the building, but not everyone will be equally good at vibe guiding them
MCP Servers Are Coming to the Web. MCP lets AI agents call tools on backends. WebMCP brings the same idea to the frontend, letting developers expose their website's functionality as structured tools using plain JavaScript (or even HTML), no separate server needed.
Instead of agents clicking through your UI, they call well-defined tools you control. A W3C proposal from Microsoft and Google, and Chrome 146 already ships an early preview behind a flag.
## How will it work?
WebMCP introduces a `navigator.modelContext` API with two approaches:
- Imperative API: Register tools directly in JavaScript with schemas and callbacks:
```js
navigator.modelContext.registerTool({
name: "add-to-cart",
description: "Add a product to the shopping cart",
inputSchema: {
type: "object",
properties: {
productId: { type: "string", description: "The product ID" },
quantity: { type: "number", description: "Number of items" }
},
required: ["productId"]
},
execute({ productId, quantity }) {
addToCart(productId, quantity);
return { content: [{ type: "text", text: "Item added!" }] };
}
});
```
- Declarative API: Let developers define tools directly in HTML using form attributes, no JavaScript required:
```html
<form action="/todos" method="post"
tool-name="add-todo"
tool-description="Add a new todo item to the list">
<input type="text" name="description" required
tool-prop-description="The text of the todo item">
<button type="submit">Add Todo</button>
</form>
```
This declarative approach is still under active discussion, with the goal of making WebMCP accessible to content creators without JS experience.