DEV Community

NicoAvanzDev
NicoAvanzDev

Posted on

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

#angular #webdev #javascript #ai

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) }] };
  }
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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' })],
});
Enter fullscreen mode Exit fullscreen mode 
// NgModule apps
import { WebmcpModule } from 'ng-webmcp';

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

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) }] };
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

The future of AI-web integration isn't another API layer — it's the browser itself.

Top comments (0)