With Angular v22, the MCP (Model Context Protocol) server + Angular Skills stack transforms agent-assisted development from a risky proposition into a deterministic, verifiable workflow. This guide walks you through configuring your environment, setting up the right skills, and building agent-safe components.
Ensure you have:
node --version
)npm install -g @angular/cli@latest
)The Angular CLI ships with the MCP server built-in. Configure it in your agent's settings:
For Gemini CLI / Cursor / Claude Code (using .gemini/settings.json
or equivalent):
{
"mcpServers": {
"angular-cli": {
"command": "npx",
"args": [
"-y",
"@angular/cli",
"mcp"
]
},
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
}
}
}
For JetBrains IDEs (Settings → Tools → MCP):
angular-cli
npx -y @angular/cli mcp
chrome-devtools
npx chrome-devtools-mcp@latest
Test the connection:
npx @angular/cli mcp --health-check
You should see a list of available tools. Common ones:
ng_lint
— runs the linter on your projectget_examples
— fetches best-practice code examplesget_best_practices
— retrieves the Angular Best Practices Guidesearch_documentation
— queries angular.devdev_server.wait_for_build
— blocks until build succeeds/fails (critical for agents)dev_server.start
— starts the dev serverdev_server.stop
— stops the dev serverSkills are installed separately from MCP tools. They augment the agent's knowledge without adding token overhead to every request.
Install the official Angular skills:
npx @anthropic-ai/skills add \
https://github.com/angular/skills/blob/main/angular-developer/SKILL.md \
--name angular-developer
npx @anthropic-ai/skills add \
https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md \
--name angular-new-app
Or, if your agent supports URL-based skills, reference directly:
/skills install https://github.com/angular/skills/blob/main/angular-developer/SKILL.md
/skills install https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md
Verify installation:
/skills list
You should see angular-developer
and angular-new-app
listed.
This gives agents visibility into your running application:
npx chrome-devtools-mcp@latest --install
Test it:
npx chrome-devtools-mcp@latest --health-check
With MCP + Skills configured, your agent has access to build verification and browser visibility. Now write code that agents can safely modify.
Always use exhaustive @switch blocks. This prevents agents from introducing unhandled cases.
// ✓ Good: Type-safe, exhaustive union
export type VehicleStatus = 'idle' | 'transit' | 'maintenance' | 'critical';
export class FleetDetailComponent {
status = signal<VehicleStatus>('idle');
private assertNever(value: never): never {
throw new Error(`Unhandled status: ${value}`);
}
}
php
<!-- Template with exhaustive check -->
<div class="status-card">
@switch (status()) {
@case ('idle') {
<span class="badge badge-green">Available</span>
}
@case ('transit') {
<span class="badge badge-blue">In transit</span>
}
@case ('maintenance') {
<span class="badge badge-yellow">Maintenance</span>
}
@case ('critical') {
<span class="badge badge-red">Critical</span>
}
@default {
<!-- If an agent adds a new status to the union without updating the template, this line will fail to compile -->
{{ assertNever(status() as never) }}
}
}
</div>
Why this matters: If a backend team adds 'error'
to the union without notifying frontend, the TypeScript build fails—agents can't ship broken code.
Signal Forms provide type-safe, signal-driven form handling. Agents are far less likely to introduce validation errors.
export class ServiceTicketComponent {
// Signal-based form
form = new FormGroup({
description: new FormControl('', Validators.required),
priority: new FormControl<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'>('MEDIUM'),
assignedTo: new FormControl(''),
});
// Signal-based access
priority$ = this.form.get('priority')!.valueAsSignal;
// Compute UI state based on priority
priorityClass = computed(() => {
const level = this.priority$();
return level === 'CRITICAL' ? 'text-red-600' : level === 'HIGH' ? 'text-orange-600' : 'text-gray-600';
});
// Agent can safely call this; form validation is enforced
submitTicket() {
if (this.form.valid) {
// Safe to use form.value — it's typed and validated
this.fleetService.createTicket(this.form.value);
}
}
}
Template:
<form [formGroup]="form" (submit)="submitTicket()">
<textarea
formControlName="description"
[class]="priorityClass()"
placeholder="Describe the issue..."
></textarea>
<select formControlName="priority">
<option value="LOW">Low</option>
<option value="MEDIUM">Medium</option>
<option value="HIGH">High</option>
<option value="CRITICAL">Critical</option>
</select>
<button type="submit" [disabled]="form.invalid()">Submit</button>
</form>
Why this matters: Agents can't generate invalid form values. TypeScript catches it.
When integrating third-party code or experimental features, wrap with @boundary
.
<div class="dashboard">
<!-- Core fleet list always renders -->
<fleet-list [units]="units()" />
<!-- AI diagnostics can fail without crashing the whole page -->
@boundary {
<ai-predictive-diagnostics [selectedUnit]="selectedUnit()" />
} @catch (error) {
<div class="error-fallback">
<h3>Diagnostics unavailable</h3>
<p>{{ error.message }}</p>
<button (click)="retryDiagnostics()">Retry</button>
</div>
}
</div>
Why this matters: When an agent writes complex AI integration code, a single bug won't crash the user's app.
Keep component API clean; let agents write inline handlers.
<!-- ✓ Inline handler — close to its usage -->
<button
(click)="vehicles.update(v => v.filter(item => item.id !== vehicleId))"
class="btn-danger"
>
Remove from fleet
</button>
<!-- ✗ Avoid exposing every handler as a method -->
<!-- <button (click)="removeVehicle(vehicleId)">Remove</button> -->
This keeps the component API surface minimal and lets agents see the full handler intent inline.
Tell your agent: "Create a ServiceTicketForm component using Angular skills. Use signal forms, include an @boundary for the AI priority analyzer, and run the build to verify."
The agent will:
get_best_practices
to fetch Signal Forms patterns.ng generate component
.dev_server.wait_for_build
to verify compilation.You can monitor this entirely in your agent's chat; no surprise errors.
From the logistics-manager-app codelab, tell your agent: "Implement a fleet chat query feature. Use the Gemini API to analyze fleet data and return filtered results. Start the dev server with Chrome DevTools, navigate to the chat component, and take a screenshot to verify the feature works."
The agent will:
FleetChatService
that accepts a natural-language query.units()
signal state to the Gemini API.dev_server.start
to spin up the dev server.No hallucinations—the agent has eyes on the running application.
From the codelab, tell your agent: "Add a 'Run AI Diagnostic' button to the FleetDetailModal. The button should call a Gemini API with the unit's telemetry (speed, battery, status). Wrap the diagnostics component with @boundary so if the AI call fails, it doesn't crash the modal. Test it by triggering a vehicle detail view and clicking the button."
The agent will:
DiagnosticsComponent
that calls the AI service.@boundary
in the modal template.This entire workflow is deterministic. The agent can't ship broken code—the build will catch it first, and Chrome DevTools will catch runtime issues.
Don't load the Angular MCP server alongside your deployment server and communication server. Create separate IDE configurations:
{
"profiles": {
"angular-dev": {
"mcpServers": {
"angular-cli": { "command": "npx", "args": ["-y", "@angular/cli", "mcp"] },
"chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] }
}
},
"deployment": {
"mcpServers": {
"deploy-cli": { "command": "npx", "args": ["my-deploy-cli", "mcp"] }
}
}
}
}
Activate only the profile you need for the task at hand.
Put skills in your repo and version them like code:
/my-project
/skills
/angular-v22-dev-guidelines.md
/our-design-system.md
/api-integration-patterns.md
/src
angular.json
Reference them:
npx @anthropic-ai/skills add ./skills/angular-v22-dev-guidelines.md
Review and update skills when you update Angular versions.
Before running an agent on a real task, ask it to estimate token usage:
What's the total token count of all my installed MCP tools and skills?
If over 30% of your context window is on tool definitions, simplify. Agents need room to think.
Instead of relying on the agent to "be careful," write it into the skill:
Before running `ng update`, ALWAYS:
1. Create a git branch: `git checkout -b ng-update-v22`
2. Run tests: `npm test`
3. Commit current state: `git commit -m "checkpoint before ng update"`
4. Then and only then run: `ng update @angular/core @angular/cli`
The agent will follow the skill's instructions.
"MCP server not found"
npx @angular/cli mcp --health-check
returns a list of toolsng version
"Skills not recognized"
npx @anthropic-ai/skills list
to confirm they're installed**"Chrome DevTools not taking screenshots"**
npx chrome-devtools-mcp@latest --health-check
dev_server.start
before asking the agent to navigate**"Build verification timed out"**
dev_server.wait_for_build
tool has a default timeout (usually 30 seconds)ng serve
With Angular v22's MCP + Skills stack:
The hallucination loop is closed. Code generation becomes verifiable. Agentic development shifts from risky to reliable.
Next Steps:
Resources: