From efd97f59d91344e53201aaf5f8799df060827bab Mon Sep 17 00:00:00 2001 From: Kam Date: Wed, 7 Oct 2026 22:37:16 +0300 Subject: [PATCH] docs(forms): show WebMCP tool state with the demo stand-in The Angular Travel demo already adds a navigator.modelContext stand-in in development when the browser has none, and its Signal Forms example registers a sign_up tool. Document how to see that tool, and its agent calls, in the Forms tab. State the limit that comes from having no early hook: a form that registers before the overlay loads shows only when the browser offers a tool list, and its calls are not recorded. Closes #166 --- .../src/content/contributing/demo-apps.md | 14 ++++++++----- apps/docs/src/content/inspectors/forms.md | 20 ++++++++++++++++++- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/apps/docs/src/content/contributing/demo-apps.md b/apps/docs/src/content/contributing/demo-apps.md index 2fa2c995..77c0177e 100644 --- a/apps/docs/src/content/contributing/demo-apps.md +++ b/apps/docs/src/content/contributing/demo-apps.md @@ -62,11 +62,15 @@ Keep `redirectTo` cycles (`NG04016`) in the unit tests: Angular stops them befor The demo shows the full setup in three files: -| File | What it adds | -| ----------------------- | -------------------------------------------------------------------------------------------------------------------------- | -| `src/server.ts` | The hub, with `initPangularHub()` mounted as Express middleware | -| `src/main.ts` | The overlay and `registerNgrxSignals`, loaded in development only | -| `src/app/app.config.ts` | `withPangular()` and `providePangularHttp()` for the SSR & HTTP tab, and `withIncrementalHydration()` for the defer blocks | +| File | What it adds | +| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `src/server.ts` | The hub, with `initPangularHub()` mounted as Express middleware | +| `src/main.ts` | The overlay and `registerNgrxSignals`, loaded in development only, and the WebMCP stand-in from `src/app/examples/webmcp-demo.ts` | +| `src/app/app.config.ts` | `withPangular()` and `providePangularHttp()` for the SSR & HTTP tab, `withIncrementalHydration()` for the defer blocks, and `provideExperimentalWebMcpForms()` | + +### WebMCP stand-in + +In development, `src/main.ts` adds a `navigator.modelContext` stand-in before bootstrap when the browser has none on `document` or `navigator`. It is demo code and not part of the package. The Signal Forms example registers a `sign_up` tool with it, and **Fill as an agent** calls that tool. See [Try WebMCP in the demo](../inspectors/forms.md#try-webmcp-in-the-demo). ### Run in development diff --git a/apps/docs/src/content/inspectors/forms.md b/apps/docs/src/content/inspectors/forms.md index d6ebab53..f1139c6d 100644 --- a/apps/docs/src/content/inspectors/forms.md +++ b/apps/docs/src/content/inspectors/forms.md @@ -208,7 +208,25 @@ The actions don't write secret fields unless you unmask them. See [Access and re ### WebMCP is best effort -`experimentalWebMcpTool` is experimental in Angular. The overlay wraps `modelContext.registerTool` when it loads, so it records registrations and calls from then on. For a tool registered earlier, it reads the browser's tool list when the browser offers one (`getTools()` or `listTools()`), and the block says **registered before the inspector attached**. Calls to those tools are not recorded. The overlay links a tool to its form by its input schema, or by the form an agent call submits. A tool it cannot link shows in the `inspect-forms` output under **WebMCP**. +`experimentalWebMcpTool` is experimental in Angular. The overlay wraps `modelContext.registerTool` when it loads, so it records registrations and calls from then on. The overlay has no hook that runs before your app. For a tool registered earlier, it reads the browser's tool list when the browser offers one (`getTools()` or `listTools()`), and the block says **registered before the inspector attached**. Calls to those tools are not recorded. If the browser offers no tool list, a form that registered before the overlay loaded shows no **WebMCP tool** block. To see every registration and call, register the form after the overlay loads, for example on a route you open later. The overlay links a tool to its form by its input schema, or by the form an agent call submits. A tool it cannot link shows in the `inspect-forms` output under **WebMCP**. + +### Try WebMCP in the demo + +Without a browser that provides `modelContext`, Angular registers no tool. The [Angular Travel demo](../contributing/demo-apps.md#angular-travel) adds a stand-in `navigator.modelContext` in development when the browser has none. Its Signal Forms example on `/examples/forms` registers a `sign_up` tool: + + + + Start on /, so the overlay loads before the form registers its tool. + + + Go to DevTools Lab, then Forms. The WebMCP tool block of SignalFormExample.signup shows sign_up as registered. + + + Click Fill as an agent. The call shows under Recent calls, and its changes show in the timeline with the agent origin. + + + +If you load `/examples/forms` directly, the form registers before the overlay loads. The block then says **registered before the inspector attached**, and the call is not recorded. In a browser with its own `modelContext`, the demo uses it, and **Fill as an agent** asks you to call `sign_up` from your agent. ### Snapshot limits