mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
This enables the use of the `experimentalWebMcpTool` option on signal forms and implicitly declares a WebMCP tool based on the form data model. This is an experiment inspirted by the WebMCP declarative forms API to see if Angular's framework-level knowledge of the form's declarative data model can produce higher quality WebMCP tools than the web standard can on its own with less effort from the developer.
Example:
```typescript
// main.ts
import {bootstrapApplication} from '@angular/platform-browser';
import {provideExperimentalWebMcpForms} from '@angular/forms';
import {MyComp} from './form';
bootstrapApplication(MyComp, {
providers: [
// Activate the feature.
provideExperimentalWebMcpForms(),
],
});
```
```typescript
// form.ts
import {Component, signal} from '@angular/core';
import {form} from '@angular/forms';
@Component({ /* ... */ })
export class MyComp {
private readonly f = form(signal({
firstName: '',
lastName: '',
}), {
// Implicitly creates a WebMCP tool named `createUser` which accepts a `firstName` and `lastName` as parameters.
experimentalWebMcpTool: {
name: 'createUser',
description: 'Creates a user with the given name.',
},
// Invokes the submit action when the agent calls the WebMCP tool.
submission: {
action: () => {
console.log('User clicked submit, or agent called the tool!');
},
},
});
// ...
}
```
40 lines
996 B
JSON
40 lines
996 B
JSON
{
|
|
"name": "@angular/forms",
|
|
"version": "0.0.0-PLACEHOLDER",
|
|
"description": "Angular - directives and services for creating forms",
|
|
"author": "angular",
|
|
"license": "MIT",
|
|
"engines": {
|
|
"node": "^22.22.0 || ^24.13.1 || >=26.0.0"
|
|
},
|
|
"dependencies": {
|
|
"tslib": "^2.3.0",
|
|
"@standard-schema/spec": "^1.0.0",
|
|
"zod": "^4.0.10"
|
|
},
|
|
"devDependencies": {
|
|
"@mcp-b/webmcp-polyfill": "^2.2.0",
|
|
"@mcp-b/webmcp-types": "^2.2.0"
|
|
},
|
|
"peerDependencies": {
|
|
"@angular/core": "0.0.0-PLACEHOLDER",
|
|
"@angular/common": "0.0.0-PLACEHOLDER",
|
|
"@angular/platform-browser": "0.0.0-PLACEHOLDER",
|
|
"rxjs": "^6.5.3 || ^7.4.0"
|
|
},
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "https://github.com/angular/angular.git",
|
|
"directory": "packages/forms"
|
|
},
|
|
"angular": {
|
|
"examples": {
|
|
"format": "sqlite",
|
|
"path": "./resources/code-examples.db"
|
|
}
|
|
},
|
|
"ng-update": {
|
|
"packageGroup": "NG_UPDATE_PACKAGE_GROUP"
|
|
},
|
|
"sideEffects": false
|
|
}
|