WebMCP: Turn Your Web App Into an AI-Ready Tool Server — No Backend Required

NicoAvanzDev — Sat, 14 Mar 2026 18:42:22 +0000

AI agents are everywhere — ChatGPT, Claude, Gemini — but there's been a missing piece: how do they actually interact with your web app? Scraping the DOM? Pretending to be a user? It's fragile and hacky.

WebMCP changes that. It's a W3C standard that lets any webpage expose structured JavaScript tools directly to AI agents — no server, no middleware, no magic. Think MCP, but entirely client-side.

What is WebMCP?

WebMCP adds a navigator.modelContext API to the browser. Through it, your page can register "tools" — named functions with descriptions and JSON schemas — that AI agents can discover and invoke. The spec is backed by the W3C Web Machine Learning Community Group and is already available in Chrome 146+ Canary behind a flag.

navigator.modelContext.registerTool({
  name: 'search-products',
  description: 'Search the product catalog',
  inputSchema: {
    query: { type: 'string', description: 'Search term' }
  },
  execute: async (args) => {
    const results = await api.search(args.query);
    return { content: [{ type: 'text', text: JSON.stringify(results) }] };
  }
});

That's it. Your webpage is now an MCP server. Agents can find it, understand what it does, and call your functions with structured input.

The Problem with Doing It Manually

The raw API works, but if you're building anything non-trivial — especially in a framework like Angular — you quickly run into boilerplate:

Registering and unregistering tools at the right lifecycle moments
Handling browser support gracefully (most browsers don't have it yet)
Managing tool state across components and services
Keeping schemas in sync with actual function signatures

You end up writing plumbing instead of features.

A Framework-Native Approach

For Angular apps, the idiomatic solution is a library that wraps WebMCP into Angular's dependency injection and lifecycle system. Install it:

npm install ng-webmcp

Then set it up once at the app level:

// Standalone apps
import { bootstrapApplication } from '@angular/platform-browser';
import { provideWebmcp } from 'ng-webmcp';

bootstrapApplication(AppComponent, {
  providers: [provideWebmcp({ fallbackBehavior: 'warn' })],
});

// NgModule apps
import { WebmcpModule } from 'ng-webmcp';

@NgModule({
  imports: [WebmcpModule.forRoot({ fallbackBehavior: 'warn' })],
})
export class AppModule {}

Now you can register tools using a decorator — right on your service methods:

import { inject } from '@angular/core';
import { WebmcpService, WebmcpTool, registerDecoratedTools } from 'ng-webmcp';

@Injectable({ providedIn: 'root' })
export class ProductService {
  private webmcp = inject(WebmcpService);

  constructor() {
    registerDecoratedTools(this, this.webmcp);
  }

  @WebmcpTool({
    name: 'search-products',
    description: 'Search the product catalog',
    inputSchema: {
      query: { type: 'string', description: 'Search term' },
    },
  })
  async search(args: { query: string }) {
    const results = await this.api.search(args.query);
    return { content: [{ type: 'text', text: JSON.stringify(results) }] };
  }
}

Or use a directive directly in templates — for when you want to wire a tool to a button or form:

<button
  webmcpTool
  toolName="submit-form"
  toolDescription="Submit the checkout form"
  (toolInvoked)="onSubmit($event)"
>
  Checkout
</button>

The library handles browser detection, cleanup, and gives you a reactive signal to check support:

@Component({ ... })
export class MyComponent {
  webmcp = inject(WebmcpService);
  // webmcp.isSupported() → Signal<boolean>
}

But Most Browsers Don't Support It Yet...

True. WebMCP is bleeding-edge. That's why the library ships with a development polyfill:

import { installWebMcpPolyfill } from 'ng-webmcp/testing';
installWebMcpPolyfill(); // Call BEFORE bootstrap

This gives you navigator.modelContext in any browser so you can develop and test today. In production, tools register gracefully when the API is available and fall back silently (or with a warning) when it's not.

Why This Matters

The MCP ecosystem has exploded on the server side. But the web — where most user-facing software actually lives — has been left out. WebMCP bridges that gap: your Angular app becomes a first-class tool provider that agents can discover, understand, and interact with, all through a standard browser API.

You're not building a separate MCP server. You're not maintaining an API wrapper. You're just exposing the functionality you already built, directly from the page.

Links: