Angular CLI MCP and AI-Generated Angular Code

The real problem is stale Angular#

The risk with AI-generated Angular is not that an assistant writes code. The risk is that it writes Angular from the wrong year: AppModule everywhere, old structural directives by habit, RxJS conversions with no boundary, or experimental APIs treated as stable.

Minko Gechev (Angular team lead) named the gap directly in his LLM-first Web Framework post: 'Often the LLM will generate code that uses deprecated or missing APIs from previous versions.' The Angular CLI MCP server exists to close that gap by giving compatible tools a path to the Angular CLI, official documentation, and workspace context. This is the dev-time side of Angular's AI surface: it helps the assistant write better code at your desk, where the runtime counterpart, WebMCP, exposes typed tools from your shipped app to a browser agent. That improves the starting point. It does not remove review.

What to allow#

The setup to start with#

Start with MCP for documentation and workspace help and ng generate ai-config for repository rules. The server has been default-available since v21, but the official MCP page, built at v22, still calls it experimental and still separates the six standard tools (search_documentation, find_examples, ai_tutor, get_best_practices, list_projects, onpush_zoneless_migration) from seven more behind --experimental-tool: build, e2e, modernize, test, plus a devserver group of three (devserver.start, devserver.stop, devserver.wait_for_build). Since this all runs at dev time, the practical risk is low, but keep policy conservative on anything that can change code.

For code generation, the prompt should state what modern Angular means in this repo. Otherwise the assistant will fill the gaps with whatever pattern it has seen most often.

ng mcp
ng generate ai-config --tool agents

What `ng generate ai-config` writes#

The command writes a rules file your assistant reads before it touches the code. The --tool flag is an array, defaults to ["none"], and picks which file lands where. The shipped enum in the schematic is exactly these eight values, and each one maps to a path a specific assistant already looks for.

If the target file already exists, the schematic skips it and warns instead of overwriting, so running this on a repo that already has rules is safe. The agents value writes an AGENTS.md; once it exists, the next step is making that file say something useful, which is its own piece.

Prompt quality is part of the architecture#

A vague prompt pushes the assistant toward the most common Angular shape on the internet. A useful prompt names the local architecture, the Angular version, the state boundary, the testing expectation, and the APIs that are out of scope.

I would reject AI output that ignores those constraints even if the component compiles. The review target is not whether the model produced code; it is whether the diff respects the team model.

# Bad prompt
Create an Angular search component.

# Useful prompt
Create a standalone Angular 21 search component.
Use a Signal for the input text, RxJS for debounce and cancellation, and toSignal only at the component boundary.
Use built-in control flow in the template.
Do not use experimental APIs.
Add a small service-level test or explain why no test changed.

The review checklist#

A generated Angular diff should be reviewed like any other production diff, plus a few AI-specific checks: over-conversion to Signals, misplaced providers, accidental global state, fake accessibility, missing tests, and APIs whose status was not checked.

The win is not 'the agent wrote the feature'. The win is a smaller first draft that still respects the team's Angular model.

# Angular AI rules

Use standalone components for new UI.
Prefer `inject` when it matches local style.
Use built-in control flow in touched templates.
Use Signals for local and derived state.
Keep RxJS for streams, cancellation, and async composition.
Do not use experimental APIs without an explicit decision.
Do not place secrets in Angular frontend code.
Every generated diff needs human review.