Angular Integration

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

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();
  }
}

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();
  }
}