Skip to content

Commit 8a69357

Browse files
authored
feat(mcp): add a snapshot agent tool (#414)
One read-only call returns a bounded summary of everything the server knows about a page: components, route, navigations, HTTP calls, errors, console, forms, signals, stores and queries. It reuses each full tool's formatter, so masking stays the same, and skips sections whose inspector is off. Refs #372.
1 parent c0b1c57 commit 8a69357

13 files changed

Lines changed: 911 additions & 53 deletions

File tree

‎apps/docs/src/content/agents/mcp-server.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,7 @@ A tool answers with a JSON object, sent as text. Most tools answer `{ "markdown"
257257
| `analog-routes`, `analog-api-routes`, `analog-server-functions`, `analog-server-calls` and `analog-content` | `{ "markdown": "..." }` |
258258
| `wait-for` | `{ "markdown": "..." }` |
259259
| `build-meta` | The project and version fields |
260+
| `snapshot` | `{ "markdown": "..." }` |
260261

261262
The other source scan tools answer with a JSON array, and `screenshot-component` with an image, so they send text and images only.
262263

‎apps/docs/src/content/agents/tools.md‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Every agent tool the devtools expose, grouped by inspector, with wh
44
---
55

66
<ngmd-hero title="Tools" logo="https://cdn.simpleicons.org/modelcontextprotocol/71717A" gradient>
7-
Ninety-six tools, grouped by inspector. Each one answers a question you would otherwise answer by clicking through the panel.
7+
Ninety-seven tools, grouped by inspector. Each one answers a question you would otherwise answer by clicking through the panel.
88
</ngmd-hero>
99

1010
# Tools
@@ -17,7 +17,7 @@ This page lists every tool the [MCP server](./mcp-server.md) exposes. Each group
1717

1818
Tool ids use a colon, as `pangular:get-routes`. MCP clients see them with an underscore, as `pangular_get-routes`. The tables below drop the `pangular:` prefix. The `read` tools are also registered on the page under the same names, for [browser agents](./browser-agents.md).
1919

20-
Each tool has a short title that clients show in their tool lists, and the `list-` and `inspect-` tools also send their answer as structured content. See [Titles and structured output](./mcp-server.md#titles-and-structured-output).
20+
Each tool has a short title that clients show in their tool lists, and the `list-` and `inspect-` tools and `snapshot` also send their answer as structured content. See [Titles and structured output](./mcp-server.md#titles-and-structured-output).
2121

2222
### Source and live tools
2323

@@ -37,7 +37,7 @@ Each tool reads from one of three places. The stdio server registers only the to
3737

3838
### The page argument
3939

40-
Most page tools take an optional `page` argument to pick a browser tab. It defaults to the most recent one. `dispatch-ngrx-action`, `set-component-property` and `set-signal` refuse to guess when more than one tab could take the action. `form-action` and `fill-form` take the tab from the form id instead (the part after `@`, as in `Checkout.form@ab12`). `highlight` and `inspect-component` search every tab without it, newest first, and `defer-blocks`, `for-blocks` and `hydration` list every tab. `inspect-providers`, `highlight`, `inspect-component`, `defer-blocks`, `for-blocks` and `hydration` also accept `pageId`. The tables below leave `page` out.
40+
Most page tools take an optional `page` argument to pick a browser tab. It defaults to the most recent one. `dispatch-ngrx-action`, `set-component-property` and `set-signal` refuse to guess when more than one tab could take the action. `form-action` and `fill-form` take the tab from the form id instead (the part after `@`, as in `Checkout.form@ab12`). `highlight` and `inspect-component` search every tab without it, newest first, and `defer-blocks`, `for-blocks` and `hydration` list every tab. `inspect-providers`, `highlight`, `inspect-component`, `defer-blocks`, `for-blocks`, `hydration` and `snapshot` also accept `pageId`. The tables below leave `page` out.
4141

4242
If `page` names a tab that doesn't report that data, the tool answers `No page <id> is reporting ...` and lists the tabs that do, newest first. It never falls back to another tab. Without `page`, a class name or tag resolves on the most recent tab that has it, and `highlight` names the other tabs where it also matches.
4343

@@ -51,6 +51,32 @@ Lists the tabs, [Angular Native](../getting-started/angular-native.md) apps, [Na
5151

5252
The URL comes from the HTTP or router report. A page that sends neither (no router, and no [HTTP setup](../getting-started/express.md)) still shows the URL its component tree reports, which also stands in when the other reports are more than 15 seconds older. A tab in the background stops reporting until it is shown again, so its last report is marked `(background)`: an old time there means the data is the last known state, not that the page is gone.
5353

54+
### snapshot
55+
56+
Gives one page's full picture in one bounded markdown answer, for an agent that wants everything at once or a bug report. Reads: page. Each section comes from the tool named under its heading, with the same masking, so call that tool for the rest.
57+
58+
| Section | What it holds | Full answer |
59+
| ------------- | ---------------------------------------------------------- | ---------------------- |
60+
| `page` | Page id, URL, title, platform, Angular version, inspectors | `list-pages` |
61+
| `components` | The component outline | `list-components` |
62+
| `route` | The URL and the active route tree | `inspect-route` |
63+
| `navigations` | Recent navigations, one line each, newest first | `explain-navigation` |
64+
| `http` | HttpClient calls, newest first | `list-http-calls` |
65+
| `errors` | Error groups, most recent first | `list-errors` |
66+
| `console` | Console calls, newest first | `list-console` |
67+
| `forms` | Each form with its status and error count | `inspect-forms` |
68+
| `signals` | The signal graph, without Angular's own nodes and history | `inspect-signals` |
69+
| `stores` | NgRx stores and Redux DevTools stores | `inspect-signal-store` |
70+
| `queries` | TanStack Query queries and mutations | `list-queries` |
71+
72+
| Argument | Required | What it is |
73+
| ---------- | -------- | ---------------------------------------------------------------------- |
74+
| `sections` | No | The sections to include, in the order above. Every section without it. |
75+
| `limit` | No | Most items per section, 1 to 50 (default 10). |
76+
| `maxChars` | No | Longest answer, 2,000 to 50,000 characters (default 20,000). |
77+
78+
Each section is also cut at 4,000 characters. When the answer reaches `maxChars`, it ends with a `Truncated` note that names the sections left out. A section whose inspector is off in `inspectors`, or whose tools are off in `agent.tools`, is listed under `Skipped`, and a section the page reported nothing for is listed as empty. The answer starts with the untrusted-data notice once, for every section.
79+
5480
### open-in-panel
5581

5682
Gives the user a link that opens the panel on one tab with one item selected, and switches the panels that are open to it. Reads: page. Use it to point the user at what you found.

0 commit comments

Comments
 (0)