Create simple Angular example app with WebMCP

AGENTS.md

@@ -24,6 +24,12 @@ Welcome! This document helps you navigate the WebMCP Examples repository efficie
 - **Key file**: `react/src/App.tsx` - React component with `useWebMCP` hooks
 - **API used**: `useWebMCP()` hook
 
+#### Angular + TypeScript
+- **[angular/README.md](./angular/README.md)** - Note manager using `@mcp-b/global` with Angular services
+- **Location**: `/angular`
+- **Key file**: `angular/src/app/services/webmcp.service.ts` - Angular service with tool registration
+- **API used**: `navigator.modelContext.registerTool()` via service
+
 ### Legacy Examples (Deprecated - DO NOT USE)
 - **[relegated/README.md](./relegated/README.md)** - Old examples using deprecated MCP SDK
 - **Warning**: These use the legacy `@modelcontextprotocol/sdk` API
@@ -40,7 +46,7 @@ Welcome! This document helps you navigate the WebMCP Examples repository efficie
 
 ```bash
 # Navigate to the example
-cd vanilla  # or react
+cd vanilla  # or react, angular
 
 # Install dependencies
 pnpm install
@@ -55,6 +61,7 @@ pnpm dev
 2. **Choose the right location**:
    - `/vanilla` for pure TypeScript/JavaScript
    - `/react` for React-based examples
+   - `/angular` for Angular-based examples
 3. **Create self-contained directory** with:
    - `README.md` - Documentation
    - `package.json` - Dependencies
@@ -152,6 +159,12 @@ example-name/
 - Root: `react/src/App.tsx`
 - Config: `react/vite.config.ts`
 
+**Angular Example:**
+- Entry: `angular/src/main.ts`
+- Root: `angular/src/app/app.component.ts`
+- WebMCP: `angular/src/app/services/webmcp.service.ts`
+- Config: `angular/angular.json`
+
 ## WebMCP Package Documentation
 
 - **[@mcp-b/global](https://docs.mcp-b.ai/packages/global)** - Core WebMCP polyfill for vanilla JS

CHANGELOG.md

@@ -8,6 +8,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- **Angular TypeScript example** (`/angular`)
+  - Note-taking application
+  - Uses `@mcp-b/global` package with Angular services
+  - Demonstrates `navigator.modelContext.registerTool()` via service pattern
+  - Angular signals for reactive state management
+  - Automatic cleanup via `DestroyRef`
+  - 6 AI-callable tools for note management
 - CONTRIBUTING.md with development standards and best practices
 - AGENTS.md navigation hub for AI agents
 - CODE_OF_CONDUCT.md with community standards
@@ -122,6 +129,7 @@ See the [vanilla](./vanilla/) and [react](./react/) examples for complete implem
 - Additional example applications
 - Vue.js example using WebMCP
 - Svelte example using WebMCP
+- Nuxt example using WebMCP
 - Advanced patterns (multi-tool coordination, state persistence)
 - Testing guide for WebMCP tools
 - Performance optimization examples

README.md

@@ -36,7 +36,7 @@ git clone https://github.com/WebMCP-org/examples.git
 cd examples
 
 # Choose an example
-cd vanilla  # or react
+cd vanilla  # or react, angular
 
 # Install and run
 pnpm install
@@ -88,6 +88,24 @@ A task management application showcasing React integration with the `useWebMCP()
 
 ---
 
+### Angular Example
+
+**Location:** `/angular`
+
+A note-taking application showcasing Angular integration with services and signals.
+
+**Features:**
+- Uses `navigator.modelContext.registerTool()` via Angular service
+- Angular signals for reactive state management
+- Automatic cleanup via `DestroyRef`
+- 6 AI-callable tools (note CRUD operations + stats)
+
+**Tech:** Angular 19, TypeScript, `@mcp-b/global`
+
+[→ Documentation](./angular/README.md)
+
+---
+
 ### Legacy Examples (Deprecated)
 
 **Location:** `/relegated`
@@ -223,6 +241,7 @@ pnpm preview                # Preview production build
 ### Example Documentation
 - [Vanilla Example](./vanilla/README.md) - Vanilla JavaScript implementation
 - [React Example](./react/README.md) - React with hooks implementation
+- [Angular Example](./angular/README.md) - Angular with services implementation
 - [Legacy Examples](./relegated/README.md) - Deprecated implementations
 
 ## Tech Stack

angular/README.md

@@ -0,0 +1,129 @@
+# Angular WebMCP Example
+
+A modern note-taking application demonstrating the **WebMCP API** with Angular 19 services and signals.
+
+## What's New
+
+This example uses the **WebMCP API** with Angular best practices:
+
+- Uses `navigator.modelContext.registerTool()` via an Angular service
+- Angular signals for reactive state management
+- Automatic cleanup via `DestroyRef`
+- Type-safe with TypeScript strict mode
+
+## Quick Start
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+```
+
+Then open your browser and install the [MCP-B extension](https://github.com/WebMCP-org/WebMCP) to interact with the tools.
+
+## Available Tools
+
+This example exposes 6 AI-callable tools:
+
+1. **add_note** - Create new notes with title, content, and color
+2. **delete_note** - Remove notes by ID
+3. **list_notes** - View all notes with optional color filter
+4. **search_notes** - Find notes by title or content
+5. **toggle_pin** - Pin or unpin notes
+6. **get_note_stats** - Get note statistics
+
+## How It Works
+
+WebMCP tools are registered through an Angular service:
+
+```typescript
+import { Injectable, inject, DestroyRef } from '@angular/core';
+import '@mcp-b/global';
+
+@Injectable({ providedIn: 'root' })
+export class WebMCPService {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly registeredTools: Array<{ unregister: () => void }> = [];
+
+  initialize(): void {
+    const tool = navigator.modelContext.registerTool({
+      name: 'add_note',
+      description: 'Create a new note',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          title: { type: 'string', description: 'Note title' },
+          content: { type: 'string', description: 'Note content' },
+        },
+        required: ['title', 'content'],
+      },
+      execute: async (args) => {
+        // Your logic here
+        return {
+          content: [{ type: 'text', text: 'Note created!' }],
+        };
+      },
+    });
+
+    this.registeredTools.push(tool);
+
+    // Cleanup on destroy
+    this.destroyRef.onDestroy(() => {
+      this.registeredTools.forEach((t) => t.unregister());
+    });
+  }
+}
+```
+
+Then initialize in your component:
+
+```typescript
+@Component({ ... })
+export class AppComponent implements OnInit {
+  private readonly webmcpService = inject(WebMCPService);
+
+  ngOnInit(): void {
+    this.webmcpService.initialize();
+  }
+}
+```
+
+## Key Features
+
+- **Angular Signals**: Reactive state with `signal()` and `computed()`
+- **Service-based Architecture**: Clean separation of concerns
+- **Automatic Cleanup**: Tools unregister via `DestroyRef`
+- **Type Safety**: Full TypeScript strict mode
+
+## Project Structure
+
+```
+angular/
+├── README.md           # This file
+├── package.json        # Dependencies
+├── angular.json        # Angular CLI configuration
+├── tsconfig.json       # TypeScript configuration
+└── src/
+    ├── index.html      # HTML entry point
+    ├── main.ts         # Bootstrap
+    ├── styles.css      # Global styles
+    └── app/
+        ├── app.component.ts      # Main component
+        ├── types/
+        │   └── index.ts          # Type definitions
+        └── services/
+            ├── note.service.ts   # Note state management
+            └── webmcp.service.ts # WebMCP tool registration
+```
+
+## Learn More
+
+- [WebMCP Documentation](https://docs.mcp-b.ai)
+- [Angular Integration Guide](https://docs.mcp-b.ai/frameworks/angular)
+- [Model Context Protocol](https://modelcontextprotocol.io/)
+
+## License
+
+MIT

angular/angular.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-webmcp-example": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/angular-webmcp-example",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "css",
+            "assets": ["{ \"glob\": \"**/*\", \"input\": \"public\" }"],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-webmcp-example:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-webmcp-example:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

angular/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "angular-webmcp-example",
+  "version": "1.0.0",
+  "description": "Angular example using the modern WebMCP API with services and lifecycle hooks",
+  "type": "module",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@mcp-b/global": "latest",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "typescript": "~5.6.0"
+  }
+}