Angular Token Saver

ng-token-saver

An MCP server that lets an AI agent understand Angular templates by asking the same compiler that builds the project, instead of guessing from file text. The token saving is measured, not promised.

Angular ships a first-class language server, but no official AI integration exposes it — the Angular CLI MCP (ng mcp) works at the docs-and-build level and does not touch templates. This server is that missing layer, and it answers for the Angular version the project actually runs.

Everything below marked as measured was produced by running code against six real Angular workspaces (17.3.12, 18.2.14, 19.2.25, 20.3.26, 21.2.18, 22.0.8) and two production projects. Every number can be reproduced with the commands in Reproducing the measurements.

Quick start

The language server ships as a regular dependency — nothing to install besides the package:

npm install -g @alex-apps/ng-token-saver

Claude Code:

claude mcp add ng-token-saver -- ng-token-saver

Codex CLI:

codex mcp add ng-token-saver -- ng-token-saver

Any other MCP client:

{ "mcpServers": { "ng-token-saver": { "command": "ng-token-saver" } } }

Or skip the install and let the client fetch it through npx:

{ "mcpServers": { "ng-token-saver": { "command": "npx", "args": ["-y", "@alex-apps/ng-token-saver"] } } }

In Cursor that npx form is one click:

The npm and npx paths are verified by running: the packed tarball (79 kB, dist only) was installed into a clean prefix and all four tool kinds answered through a real MCP client, and the npx form connects in 1.2–2.0 s from a warm npm cache (the very first run on a machine also downloads the dependency tree — the language server alone unpacks to 13.6 MB).

A first question to ask it — the contract of a component whose members are scattered across an extends chain. Asked for fixtures/v17/src/app/derived-card.component.ts (a fixture in this repository), ng_component_info answers, verbatim:

{"found":true,"angularVersion":"17.3.12","className":"DerivedCardComponent","kind":"component","selector":"app-derived-card","standalone":true,"inlineTemplate":true,"styleUrls":[],"imports":[],"hostDirectives":[],"extends":"BasePanel","ancestors":[{"name":"BasePanel","file":"<repo>\\fixtures\\v17\\src\\app\\base-panel.ts"},{"name":"BaseWidget","file":"<repo>\\fixtures\\v17\\src\\app\\base-widget.ts"}],"inputs":[{"name":"accent","type":"boolean"},{"name":"heading","type":"string"},{"name":"disabled","type":"boolean"}],"outputs":[{"name":"blurred","type":"void"}],"publicMembers":[{"name":"focus","kind":"method","signature":"focus(): void","noop":true},{"name":"collapse","kind":"method","signature":"collapse(animated: boolean): void","noop":true}]}

811 characters with this checkout's absolute paths in place of <repo>, 305 ms on the session's first call (it loads the project's own TypeScript), single-digit milliseconds after. The asked file declares one input and an extends clause; heading, disabled, the output and both methods live in BasePanel and BaseWidget and are resolved statically, with their files named in ancestors for the next edit. "noop": true on focus() is the subclass shadowing it with an empty body — the kind of fact that otherwise costs a whole file read per ancestor.

Configs for Cursor, VS Code, Windsurf, Codex CLI and JetBrains, the Node floor, and running from source are in Requirements and setup.

The two problems it solves

1. No template awareness. grep over an .html file cannot tell you where {{ user().fullName }} is declared, and no amount of reading gives you TS2339 Property 'emailAddress' does not exist on type 'UserVm'. That is compiler output, not text.

2. Version drift. The AI context files on angular.dev (llms.txt) describe only the newest major and carry no version markers; the versioned archive sites serve none at all. On v17–v21 they hand the agent instructions that produce APIs which do not exist. Measured examples are in Version facts.

Tools

Six tools, 1040 characters of descriptions in total. Answers are dense JSON with no markdown.

Four of the six never start the language server, so they answer in milliseconds and keep working on workspaces where the server refuses to load.

Since 0.2.0 every position is 1-based, as Read shows it: ng_template_definition takes the line that way and the symbol by name (character is an alternative for a name that repeats on the line). 0.1.x took a 0-based line and character, the LSP convention — the same numbers now point one line lower.

Measured: contract instead of the whole file

ng_component_info returns the public contract of a component rather than its source. Measured across two production codebases through a real MCP client:

* measured with the pre-0.1.2 wire format; the current format is leaner, so this saving is a floor.

The largest component in the monorepo shrinks from 177 863 to 10 770 characters while listing 117 contract members. Contracts include members inherited from base classes — the extends chain is resolved through relative imports, tsconfig path aliases and barrels. Before that resolver, 91 of 1298 monorepo contracts were flagged as partial; now 1 is.

Three caveats that travel with these numbers:

• Tokens are counted through a proxy — OpenAI's o200k_base, since Claude's tokenizer is not public; cl100k_base agrees within one point on this data. Characters are exact.
• The baseline is reading the whole file, which is what an agent does by default.
• JSON tokenizes slightly worse than TypeScript, so token savings sit a point or two below character savings. The table carries both.

On small components there is no saving at all: a 17-line component produces a 578-character contract against a 315-character source. The contract grows with the number of members, the source with method bodies — and on production code the second wins almost always.

Measured: rename and diagnose

Renaming an input across usages. The grep path an agent actually takes — read the component file to learn the selector, then grep the selector and the binding spellings repo-wide — against ng_component_info plus ng_find_usages with its input filter, which returns only the tags that bind the name, each entry pointing at the binding itself. On the production monorepo, 6243 files scanned:

* the tool returns at most 500 entries per answer, and the answer says so.

The saving is decided by how many of the usages actually bind the input: mask is bound on 5 of 568 tags, and grep still prints every selector line plus 67 binding-shaped lines from across the repo — 62 of them somebody else's mask — while the bridge answers with exactly those five sites.

Diagnosing a template that will not compile. A whole-project compiler listing costs 395 tokens and 1321 ms; one ng_template_diagnostics call answers with the asked file's diagnostics in 81 tokens, 1 ms warm. The gap only widens with project size: the listing grows with the project, the answer does not. After an edit, fresh diagnostics arrive as a 340–400 ms push — against a rebuild.

Version facts

ng_version_rules contains no rule taken from documentation: the data comes from importing the packages actually installed in each fixture and from running the compiler.

The zoneless provider is renamed between v19 and v20.

Advice to "enable zoneless" without a version breaks on three majors out of six.

Existing is not the same as ready. The @experimental and @developerPreview tags live only in declaration JSDoc and are invisible at runtime:

So "rewrite @Input() as input()" on a v17 or v18 project means moving to a non-public API, and resource() was experimental all the way through v21. A batch of signal APIs appears exactly at v19: linkedSignal, resource, rxResource, httpResource, afterRenderEffect, provideAppInitializer.

Two documentation claims that measurement contradicted: standalone becomes the default at v19, not v20; and *ngIf is not removed in 22.0.8 — it reports hint TS6385 (TypeScript's deprecation hint) and keeps working, with NgIf still exported from @angular/common.

Compiler gates, read in the 22.0.8 bundle and confirmed by running it — keyed on the project's Angular version, which the server detects from @angular/core next to the tsconfig (--angularCoreVersion is passed too, as a fallback):

Also measured: Signal Forms (@angular/forms/signals) exist only from v21 and are stable on 22.0.8; AbstractControl.events from v18; TestBed.tick from v20.

Outside the measured v17–v22 range ng_version_rules returns nothing and says so — extrapolating "it was in v22, so it is in v23" is exactly the failure it exists to prevent.

Honesty as a feature

An incomplete answer says so, in words, inside the answer:

• A contract merges base-class members and host-directive exposures, resolved statically through relative imports, tsconfig aliases and barrels. Where the walk cannot continue — a base class from a package, a mixin call — the answer carries incomplete, naming the class and the file to ask about next.
• ng_version_rules reports notMeasured topics, and a caveat when your minor differs from the measured one.
• ng_find_usages labels declarations as declaration, admits when class-name matches were found without resolving imports, and names selector twins — a second declaration of the same selector elsewhere in the workspace — instead of silently mixing their usages.
• ng_template_diagnostics separates three states that all look like an empty list: the template is clean; the server is silently down (caught by a canary probe); or template checking is off for this project — then the answer carries checksDisabled naming the tsconfig responsible. In the measured monorepo strictTemplates is off in two of seven applications, so the distinction is not theoretical.

What this is not

• Not better than a careful grep at finding usages. grep -rn "<app-widget" finds the same 62 usages. What ng_find_usages adds: the selector and class name are derived from the file for you, usage kinds are labelled, all four attribute-binding spellings are covered, and path scopes the scan — 33 selectors in the measured monorepo are declared in two applications at once, and an unscoped search would mix them.
• Not a replacement for the Angular CLI MCP — a different layer. ng mcp covers docs, best practices and build orchestration; none of its nine tools touches templates or the language server. The two complement each other.
• Not a type checker of its own. The LSP-backed tools deliver the project's own compiler output, undistorted.

Known gaps are recorded, not hidden: a base class from a package or behind a mixin call stops the ancestor walk (1 of 1298 components in the measured monorepo), Nx projects with inferred targets come without tsConfig, and pipe twins are not detected.

Requirements and setup

• Node ≥ 18.20.8 — the measured floor: the published package answered on clean Node 18.20.8, 20.20.2 and 22.x. This is about the MCP server process only — your project keeps building on its own Node. To give just the server a newer runtime, point the client config at that binary: "command": "C:\\node22\\node.exe".

From source (instead of npm):

• The project's own dependencies: npm install, then npm run build.
• The shipped language-server branch lives in tools/servers/ls22 and needs npm ci there once.
• In every client config, replace the ng-token-saver command with node <path>/dist/index.js; for Claude Code: claude mcp add ng-token-saver -- node <path>/dist/index.js.

node_modules folders are not committed, including the twelve inside the stand. To restore the full measurement environment:

npm install && npm run build
cd tools/servers/ls22 && npm ci        # the branch actually shipped
cd fixtures/v22 && npm ci              # repeat per fixture you want to run

Clients

The server is a plain stdio MCP server with no client-specific features, so any MCP client can launch it; installation and Claude Code registration are in Quick start. Usage guidance for the agent travels in the MCP instructions field — see Using with agents.

Cursor — the one-click button in Quick start, or the same mcpServers JSON as in Quick start, in ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project).

Windsurf — the same JSON, in ~/.codeium/windsurf/mcp_config.json.

VS Code (Copilot agent mode) — .vscode/mcp.json; the key is servers and the entry takes a type:

{ "servers": { "ng-token-saver": { "type": "stdio", "command": "ng-token-saver" } } }

Codex CLI — codex mcp add ng-token-saver -- ng-token-saver, or ~/.codex/config.toml:

[mcp_servers.ng-token-saver]
command = "ng-token-saver"

JetBrains AI Assistant / Junie — Settings → Tools → AI Assistant → Model Context Protocol accepts the same JSON as Quick start's; for Junie, additionally enable "Pass custom MCP servers".

Configuration, all variables optional:

• NG_TOKEN_SAVER_IDLE_MS — a language-server session unused this long shuts its ngserver down; the next call pays the cold start again. Default 900000 (15 minutes); 0 keeps sessions alive until the server exits. A session with a call in flight is never shut down.
• NG_TOKEN_SAVER_PREWARM=1 — ng_workspace_map with a path inside an app starts loading that app into the language server in the background, so the first diagnostics or definition call finds it ready: 21 s → 1.4 s on the production monorepo. The cost is ~1 GB of memory until the idle shutdown, whether or not an LSP tool follows; a folder holding several projects (a workspace root, an Nx apps/) is not warmed, since which app to load is unknown.
• NG_TOKEN_SAVER_SERVERS_DIR — where the language-server branch lives, if not in tools/servers next to the build.

Using with agents

The server sends its usage guidance in the MCP instructions field (924 characters), which Claude Code keeps in the agent's context even when tool descriptions are deferred until a tool search (checked on Claude Code 2.1.282: the whole text arrives while the tools show only their names). For a client that ignores instructions, the same text goes into CLAUDE.md or AGENTS.md:

Angular tools that answer from the compiler and the source instead of whole files. Prefer them to reading and grepping: ng_component_info for what a component or directive accepts (inputs, outputs, members, inherited ones included) instead of reading its .ts; ng_find_usages for where a component, directive, pipe or service is used, and with input for where one input is bound, instead of grep; ng_template_diagnostics after editing a template instead of ng build; ng_template_definition for what a template symbol is; ng_version_rules before suggesting an Angular API; ng_workspace_map once for projects, versions and strictTemplates. The first diagnostics or definition call in a workspace loads the project into the Angular language server and takes up to a minute on a large workspace; later calls take milliseconds, so a slow first answer is not a hang. Lines and characters are 1-based everywhere, as Read shows them.

Reproducing the measurements

npm test                                  build plus 182 unit tests (node:test, no dependencies)
npm run smoke                             end-to-end check with a real MCP client over stdio
npm run bench:settle                      whether a pause after didOpen is needed (it is not)
npm run bench:standalone                  where standalone becomes the default (v17..v22)
npm run bench:api                         which Angular APIs exist in which majors, and their stability
npm run bench:contract <project root>     contract size against reading whole files (--tokens adds token counts)
npm run bench:rename <component> <input>  the grep path against the bridge for an input rename
npm run bench:diagnose                    a compiler listing against one diagnostics call
npm run bench:matrix                      resolution probes across a fixture
npm run bench:negative                    what the server returns when things break
npm run bench:didchange                   diagnostics timing after an edit

The stand is fixtures/v17..v22 — six real Angular workspaces, each with its own node_modules and its own pinned TypeScript, plus fixtures/negative/* for failure cases.

Status

All six tools verified on the six fixtures and on two production codebases — 1298 and 407 components, zero parse errors — plus one Angular 16 project to check that out-of-range refusals are structured rather than silent. 182 unit tests, all green.

Measured latency: the two LSP-backed tools pay 8–28 s of cold start on the first call and answer in 2–9 ms after it; the four static tools answer in 250–600 ms on the first call and in milliseconds once the project's TypeScript is cached. A session idle for 15 minutes shuts its language server down, and the next call pays the cold start again — see NG_TOKEN_SAVER_IDLE_MS above.

License

GPL-3.0-or-later — see LICENSE. Copyright (C) 2026 Alex Ryabov. Use and modify freely; derivative works must stay open under the same license.