Create simple Angular example app with WebMCP

[MiguelsPizza]

Introduces the first Angular example demonstrating WebMCP integration:

• Note-taking app with 6 AI-callable tools (add, delete, list, search, toggle pin, stats)
• Angular 19 with standalone components and signals
• WebMCP service pattern for tool registration with automatic cleanup
• Reactive state management using Angular signals
• Full TypeScript strict mode support

The example follows the same structure as vanilla and react examples, using the modern @mcp-b/global package for tool registration.

Description

Type of Change

• New example
• Bug fix in existing example
• Documentation update
• Refactoring (no functional changes)
• Performance improvement
• Dependency update

Related Issues

Fixes #
Related to #

Changes Made

• Change 1
• Change 2
• Change 3

New Example Details

• Example name:
• Framework: [e.g., vanilla TypeScript, React, Vue]
• WebMCP concepts demonstrated:
• Tools registered:
• Dependencies added:

Testing

Commands Run

cd [example-directory]
pnpm install     # ✓ Installed successfully
pnpm typecheck   # ✓ Passed
pnpm lint        # ✓ Passed
pnpm build       # ✓ Passed
pnpm dev         # ✓ Runs without errors

Manual Testing with MCP-B Extension

• Extension detects the page
• All registered tools appear in extension
• Each tool executes successfully
• UI updates correctly after tool execution
• Error cases handled gracefully
• Tested in Chrome/Edge
• Tested on mobile (if applicable)

Screenshot/Demo

Checklist

• My code follows the style guidelines in CONTRIBUTING.md
• I have used the modern WebMCP API (@mcp-b/global or @mcp-b/react-webmcp)
• I have NOT used deprecated APIs from /relegated
• I have performed a self-review of my own code
• I have added JSDoc comments to all exported functions/components
• I have created/updated README.md for the example
• My changes generate no TypeScript errors
• I have tested with the MCP-B Chrome Extension
• All tools register and execute successfully
• Example runs without console errors

Documentation

• README.md includes clear description of what the example demonstrates
• README.md has installation and usage instructions
• README.md explains WebMCP concepts used
• Code has explanatory comments for WebMCP-specific code
• Dependencies are documented in package.json

Additional Notes

---

For AI Agents: Please verify all items in the checklist before submitting. Run all commands listed in the Testing section.

[MiguelsPizza]

@copilot

[Copilot]

@MiguelsPizza I've opened a new pull request, #11, to work on those changes. Once the pull request is ready, I'll request review from you.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Correct assets entry so Angular builds

The assets array currently contains a single string "{ \"glob\": \"**/*\", \"input\": \"public\" }" instead of an asset object or a real path. Angular treats string entries as literal file paths, so ng build/ng serve will try to copy that path and fail because there is no public directory anywhere in angular (checked with rg "public" angular). Use an asset object (e.g., { "glob": "**/*", "input": "public", "output": "/" }) or point to an existing folder to keep the example buildable.

Useful? React with 👍 / 👎.