Skip to main content

Full Example

Production-ready Angular example with signals and services

​
Quick start

git clone https://github.com/WebMCP-org/examples.git
cd examples/angular && pnpm install && pnpm dev

​
The pattern

Use ngOnInit/ngOnDestroy for lifecycle management: 
import { Component, OnInit, OnDestroy } from '@angular/core';
import '@mcp-b/global';

@Component({
  selector: 'app-my',
  template: `<p>Count: {{ count }}</p>`
})
export class MyComponent implements OnInit, OnDestroy {
  count = 0;
  private reg: { unregister: () => void } | null = null;

  ngOnInit() {
    if (!('modelContext' in navigator)) return;

    this.reg = navigator.modelContext.registerTool({
      name: 'increment',
      description: 'Increment the counter',
      inputSchema: {
        type: 'object',
        properties: { amount: { type: 'number' } }
      },
      execute: async ({ amount = 1 }) => {
        this.count += amount as number;
        return { content: [{ type: 'text', text: `Count: ${this.count}` }] };
      }
    });
  }

  ngOnDestroy() {
    this.reg?.unregister();
  }
}

​
Angular Universal (SSR)

Use isPlatformBrowser for SSR safety: 
import { Component, OnInit, OnDestroy, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import '@mcp-b/global';

@Component({ /* ... */ })
export class MyComponent implements OnInit, OnDestroy {
  private reg: { unregister: () => void } | null = null;
  private isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) platformId: object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit() {
    if (!this.isBrowser || !('modelContext' in navigator)) return;
    this.reg = navigator.modelContext.registerTool({ /* ... */ });
  }

  ngOnDestroy() {
    this.reg?.unregister();
  }
}

​
Common issues

If change detection doesn’t trigger after tool execution, wrap in NgZone.run():
execute: async (args) => {
  return this.ngZone.run(() => {
    this.someValue = newValue;
    return { content: [{ type: 'text', text: 'Done' }] };
  });
}

​
Development

Use Chrome DevTools MCP for AI-driven development - your AI can write, discover, and test tools in real-time.