{"id":48059421,"url":"https://github.com/nicoavanzdev/ng-webmcp","last_synced_at":"2026-04-24T12:06:54.672Z","repository":{"id":343199004,"uuid":"1175127463","full_name":"NicoAvanzDev/ng-webmcp","owner":"NicoAvanzDev","description":"Angular library for the WebMCP (Web Model Context Protocol) browser API. Expose your Angular application as an AI-agent-ready tool provider using idiomatic Angular patterns.","archived":false,"fork":false,"pushed_at":"2026-04-24T11:02:05.000Z","size":147,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-24T11:34:28.171Z","etag":null,"topics":["ai","angular","llm","webmcp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NicoAvanzDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-07T09:11:02.000Z","updated_at":"2026-04-24T11:01:06.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/NicoAvanzDev/ng-webmcp","commit_stats":null,"previous_names":["nicoavanzdev/ng-webmcp"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/NicoAvanzDev/ng-webmcp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicoAvanzDev%2Fng-webmcp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicoAvanzDev%2Fng-webmcp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicoAvanzDev%2Fng-webmcp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicoAvanzDev%2Fng-webmcp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NicoAvanzDev","download_url":"https://codeload.github.com/NicoAvanzDev/ng-webmcp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicoAvanzDev%2Fng-webmcp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32222530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","angular","llm","webmcp"],"created_at":"2026-04-04T14:31:03.349Z","updated_at":"2026-04-24T12:06:54.667Z","avatar_url":"https://github.com/NicoAvanzDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-webmcp\n\n[![CI](https://github.com/NicoAvanzDev/ng-webmcp/actions/workflows/ci.yml/badge.svg)](https://github.com/NicoAvanzDev/ng-webmcp/actions/workflows/ci.yml)\n\nAngular library for the [WebMCP (Web Model Context Protocol)](https://webmachinelearning.github.io/webmcp/) browser API. Expose your Angular application as an AI-agent-ready tool provider using idiomatic Angular patterns.\n\n## What is WebMCP?\n\nWebMCP is a W3C Community Group standard that allows web pages to expose structured JavaScript tools to AI agents and assistive technologies via `navigator.modelContext`. Think of it as turning a webpage into an MCP server — entirely client-side.\n\n## Installation\n\n```bash\nnpm install ng-webmcp\n```\n\n## Quick Start\n\n### Standalone Application\n\n```typescript\n// main.ts\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideWebmcp } from 'ng-webmcp';\n\nbootstrapApplication(AppComponent, {\n  providers: [provideWebmcp({ fallbackBehavior: 'warn' })],\n});\n```\n\n### NgModule Application\n\n```typescript\nimport { WebmcpModule } from 'ng-webmcp';\n\n@NgModule({\n  imports: [WebmcpModule.forRoot({ fallbackBehavior: 'warn' })],\n})\nexport class AppModule {}\n```\n\n### Register a Tool via Service\n\nExtend `WebmcpToolRegistrar` for automatic registration — no constructor boilerplate required:\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { WebmcpTool, WebmcpToolRegistrar } from 'ng-webmcp';\n\n@Injectable({ providedIn: 'root' })\nexport class ProductService extends WebmcpToolRegistrar {\n  @WebmcpTool({\n    name: 'search-products',\n    description: 'Search the product catalog',\n    annotations: { readOnlyHint: true, untrustedContentHint: true },\n    inputSchema: {\n      query: { type: 'string', description: 'Search term' },\n    },\n  })\n  async search(args: { query: string }) {\n    const results = await this.api.search(args.query);\n    return { content: [{ type: 'text', text: JSON.stringify(results) }] };\n  }\n}\n```\n\nIf your class already extends another base class, call `registerDecoratedTools()` manually instead:\n\n```typescript\nimport { inject } from '@angular/core';\nimport { WebmcpService, WebmcpTool, registerDecoratedTools } from 'ng-webmcp';\n\n@Injectable({ providedIn: 'root' })\nexport class ProductService extends SomeOtherBase {\n  constructor() {\n    super();\n    registerDecoratedTools(this, inject(WebmcpService));\n  }\n\n  @WebmcpTool({ name: 'search-products', description: 'Search the product catalog', inputSchema: { ... } })\n  async search(args: { query: string }) { ... }\n}\n```\n\n### Register a Tool via Directive\n\n```html\n\u003cbutton\n  webmcpTool\n  toolName=\"submit-form\"\n  toolDescription=\"Submit the checkout form\"\n  (toolInvoked)=\"onSubmit($event)\"\n\u003e\n  Checkout\n\u003c/button\u003e\n```\n\n### Check Support\n\n```typescript\n@Component({ ... })\nexport class MyComponent {\n  webmcp = inject(WebmcpService);\n  // webmcp.isSupported() is a Signal\u003cboolean\u003e\n}\n```\n\n## API Reference\n\n| Export                   | Type           | Description                                             |\n| ------------------------ | -------------- | ------------------------------------------------------- |\n| `WebmcpService`          | Service        | Core service for registering/unregistering tools        |\n| `WebmcpTool`             | Decorator      | Method decorator to mark a method as a WebMCP tool      |\n| `WebmcpToolRegistrar`    | Abstract class | Base class for automatic decorator-based registration   |\n| `registerDecoratedTools` | Function       | Registers all decorated methods of an instance (manual) |\n| `WebmcpToolDirective`    | Directive      | Attribute directive for component-level tools           |\n| `WebmcpModule`           | NgModule       | Module with `forRoot()` for NgModule-based apps         |\n| `provideWebmcp`          | Function       | Provider function for standalone apps                   |\n| `WEBMCP_CONFIG`          | InjectionToken | Configuration token                                     |\n| `WebMcpToolAnnotations`  | Type           | Typed WebMCP tool annotation hints                      |\n\n### WebMcpConfig\n\n| Option             | Type                            | Default  | Description                                           |\n| ------------------ | ------------------------------- | -------- | ----------------------------------------------------- |\n| `autoInit`         | `boolean`                       | `true`   | Auto-initialize on service creation                   |\n| `logLevel`         | `'debug' \\| 'warn' \\| 'none'`   | `'warn'` | Console logging level                                 |\n| `fallbackBehavior` | `'silent' \\| 'warn' \\| 'throw'` | `'warn'` | Behavior when `navigator.modelContext` is unavailable |\n\n### WebMcpToolSchema annotations\n\n`annotations` supports the WebMCP tool hints:\n\n- `readOnlyHint?: boolean`\n- `destructiveHint?: boolean`\n- `idempotentHint?: boolean`\n- `openWorldHint?: boolean`\n- `untrustedContentHint?: boolean`\n\nStarting with Chrome **149.0.7810.0**, set `untrustedContentHint: true` when a tool output includes content from external or unverified sources.\n\n## Development Polyfill\n\nSince `navigator.modelContext` is only available in Chrome 146+ Canary with a flag, use the testing polyfill for development:\n\n```typescript\nimport { installWebMcpPolyfill } from 'ng-webmcp/testing';\ninstallWebMcpPolyfill();\n```\n\nImport this **before** bootstrapping Angular.\n\n## Browser Support\n\n| Browser              | Support                             |\n| -------------------- | ----------------------------------- |\n| Chrome 146+ (Canary) | ✅ Behind `chrome://flags/#web-mcp` |\n| Other browsers       | ❌ Use polyfill for development     |\n\n## Links\n\n- [W3C WebMCP Spec](https://webmachinelearning.github.io/webmcp/)\n- [GitHub Repo](https://github.com/webmachinelearning/webmcp)\n- [Chrome Early Preview](https://developer.chrome.com/blog/webmcp-epp)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicoavanzdev%2Fng-webmcp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicoavanzdev%2Fng-webmcp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicoavanzdev%2Fng-webmcp/lists"}