> ## Documentation Index
> Fetch the complete documentation index at: https://mcp-b-sync-npm-packages-docs-bf03420.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular Integration

> Integrate WebMCP tools with Angular using services and lifecycle hooks.

<Card title="Full Example" icon="github" href="https://github.com/WebMCP-org/examples/tree/main/angular">
  Production-ready Angular example with signals and services
</Card>

## Quick start

```bash theme={null}
git clone https://github.com/WebMCP-org/examples.git
cd examples/angular && pnpm install && pnpm dev
```

## The pattern

Use `ngOnInit`/`ngOnDestroy` for lifecycle management:

```typescript "my.component.ts" theme={null}
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:

```typescript theme={null}
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

<AccordionGroup>
  <Accordion title="'navigator is not defined' with Angular Universal">
    Use `isPlatformBrowser()` platform check before accessing `navigator`.
  </Accordion>

  <Accordion title="Zone.js and async handlers">
    If change detection doesn't trigger after tool execution, wrap in `NgZone.run()`:

    ```typescript theme={null}
    execute: async (args) => {
      return this.ngZone.run(() => {
        this.someValue = newValue;
        return { content: [{ type: 'text', text: 'Done' }] };
      });
    }
    ```
  </Accordion>
</AccordionGroup>

## Development

Use [Chrome DevTools MCP](/packages/chrome-devtools-mcp) for AI-driven development - your AI can write, discover, and test tools in real-time.