Angular 22 MCP + Skills Integration: Agentic Development Setup

Most agent-assisted development workflows have the same flaw: the agent writes code, says it works, and you find out it doesn’t when you open the browser. The Angular 22 MCP + Skills stack fixes this by giving agents the ability to verify their own work — build check, browser screenshot, iterate.

This guide walks you through the full setup: configuring your environment, installing the right skills, and writing components that agents can safely modify without introducing silent failures.

Part 1: Environment Setup

Prerequisites

Make sure you have:

Node.js v20+ (node --version)
Angular CLI v22+ (npm install -g @angular/cli@latest)
A coding agent environment (Gemini CLI, Cursor, Claude Code, GitHub Copilot, JetBrains AI, or Windsurf)

Step 1: Configure Angular MCP Server

The Angular CLI ships with the MCP server built-in — no extra packages needed. Configure it in your agent’s settings:

For Gemini CLI / Cursor / Claude Code (.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):

Add new server: name angular-cli, command: npx -y @angular/cli mcp
Add second server: name chrome-devtools, command: npx chrome-devtools-mcp@latest

Test it:

npx @angular/cli mcp --health-check

You should see a list of available tools. The ones that matter most for agentic workflows:

ng_lint — runs the linter on your project
get_examples — fetches authoritative best-practice code examples
get_best_practices — retrieves the Angular Best Practices Guide
search_documentation — queries angular.dev
dev_server.wait_for_build — blocks until build succeeds or fails (this is the critical one)
dev_server.start — starts the dev server
dev_server.stop — stops the dev server

Step 2: Install Angular Skills

Skills are installed separately from MCP tools. They augment the agent’s knowledge without adding token overhead to every request. Think of MCP tools as what the agent can do — and skills as what the agent knows. You need both.

Install the official Angular skills:

# Using npx skills package
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:

/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:

/skills list

You should see angular-developer and angular-new-app listed.

Step 3: Configure Chrome DevTools for Agents

This gives agents visibility into your running application — the thing that closes the hallucination loop.

npx chrome-devtools-mcp@latest --install

Test it:

npx chrome-devtools-mcp@latest --health-check

Once configured, agents can take screenshots, interact with elements, and verify that what they wrote actually renders correctly. No more “I’ll assume that worked.”

Part 2: Writing Agent-Safe Components

With MCP + Skills configured, your agent has build verification and browser visibility. Now write code that agents can safely modify without introducing silent failures.

Pattern 1: Exhaustive @switch with Type Safety

Always use exhaustive @switch blocks. This prevents agents from introducing unhandled cases that fail silently in production.

// ✓ 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}`);
  }
}

<!-- 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 fails 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 immediately — agents can’t ship broken code.

Pattern 2: Signal Forms with Inline Validators

Signal Forms provide type-safe, signal-driven form handling. Agents are far less likely to introduce validation errors because TypeScript catches them before the build completes.

export class ServiceTicketComponent {
  form = new FormGroup({
    description: new FormControl('', Validators.required),
    priority: new FormControl<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'>('MEDIUM'),
    assignedTo: new FormControl(''),
  });

  priority$ = this.form.get('priority')!.valueAsSignal;

  priorityClass = computed(() => {
    const level = this.priority$();
    return level === 'CRITICAL' ? 'text-red-600' : level === 'HIGH' ? 'text-orange-600' : 'text-gray-600';
  });

  submitTicket() {
    if (this.form.valid) {
      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>

Pattern 3: @boundary for Risky Integrations

When integrating third-party code or experimental AI features, wrap with @boundary. When an agent writes complex integration code, a single bug won’t crash your entire app.

<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>

Pattern 4: Inline Template Functions for Transient Logic

Keep the component API surface minimal. Let agents write inline handlers that stay close to their usage — instead of exposing every transient action as a class method.

<!-- ✓ Inline handler — clear intent, minimal API surface -->
<button 
  (click)="vehicles.update(v => v.filter(item => item.id !== vehicleId))"
  class="btn-danger"
>
  Remove from fleet
</button>

Part 3: Agent Workflows

These are the three core workflows where the MCP + Skills setup actually pays off.

Workflow 1: Scaffold a Component (with MCP Verification)

Tell your agent: “Create a ServiceTicketForm component using the Angular skills. Use Signal Forms, include an @boundary for the AI priority analyzer, and run the build to verify.”

The agent will:

Call get_best_practices to fetch Signal Forms patterns
Scaffold with ng generate component
Implement inline validators using skill guidance
Call dev_server.wait_for_build to verify compilation
Read and fix any build errors before responding

You monitor this entirely in your agent’s chat. No surprise errors, no “I think it should work.”

Workflow 2: Add AI-Powered Fleet Chat (with Browser Verification)

From the logistics-manager-app codelab: “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:

Creates a FleetChatService that accepts a natural-language query
Sends the current units() signal state to Gemini API
Parses Gemini’s response and filters the fleet
Updates the chat UI with results
Calls dev_server.start, Chrome DevTools navigates to the component
Takes a screenshot, reads it, and confirms the feature works

That’s the hallucination loop closed — the agent has eyes on the running application.

Workflow 3: Implement Predictive Diagnostics with @boundary

“Add a ‘Run AI Diagnostic’ button to FleetDetailModal. The button should call a Gemini API with unit telemetry (speed, battery, status). Wrap the diagnostics component with @boundary so if the AI call fails, it doesn’t crash the modal.”

The agent:

Creates a DiagnosticsComponent that calls the AI service
Wraps it with @boundary in the modal template
Implements a fallback UI in the @catch block with retry logic
Starts the dev server, navigates to a vehicle detail modal
Clicks the diagnostic button, verifies the result in the browser
If the test fails, reads the error and iterates

Fully deterministic. The build catches compilation errors. Chrome DevTools catches runtime issues. The agent ships working code or keeps trying.

Part 4: Skills Configuration Best Practices

One Server Per Domain

Don’t load the Angular MCP server alongside your deployment server and communication tools. Create separate IDE profiles:

{
  "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. That’s a lot of tokens saved upfront.

Version Your Skills

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

A skill for Angular 19 patterns will actively hurt you on Angular 22. Update skills when you update Angular versions.

Measure Context Budget

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, not just room to enumerate capabilities.

Write MCP Guardrails in Skills

Instead of relying on the agent to “be careful,” write it into the skill:

# Angular Update Guardrail 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 follows the skill’s instructions. Guardrails in code, not in trust.

Part 5: Troubleshooting

“MCP server not found”

Verify npx @angular/cli mcp --health-check returns a list of tools
Restart your agent IDE
Check that Angular CLI v22+ is installed: ng version

“Skills not recognized”

Run npx @anthropic-ai/skills list to confirm they’re installed
Restart your agent
Verify the skill URL is correct

“Chrome DevTools not taking screenshots”

Ensure Chrome is installed and in PATH
Run npx chrome-devtools-mcp@latest --health-check
Make sure you’ve started the dev server with dev_server.start before asking the agent to navigate

“Build verification timed out”

dev_server.wait_for_build has a default timeout (usually 30 seconds)
If your builds are slower, ask the agent to increase the timeout in the MCP call
Check that the dev server is running: ng serve

Summary

With Angular 22’s MCP + Skills stack:

Agents write type-safe code that compiles or fails, never silently.
Exhaustive type checking prevents new states from slipping through.
@boundary contains failures instead of crashing the app.
Inline templates keep components lean and readable.
Signal Forms enforce validation at the type level.
Chrome DevTools integration gives agents visibility into running code.
Skills teach modern patterns aligned to your version and conventions.

The hallucination loop is closed. Code generation becomes verifiable. Agentic development shifts from risky to reliable.

Next Steps:

Set up Angular MCP in your IDE/agent (5 minutes)
Install Angular Skills (2 minutes)
Configure Chrome DevTools (2 minutes)
Write a test component using the patterns above
Ask your agent to scaffold a feature and verify it with MCP tools

Resources:

Angular Skills Repository: https://github.com/angular/skills
Chrome DevTools for Agents: https://developer.chrome.com/docs/devtools/agents
Logistics Manager Codelab: https://github.com/angular/examples/blob/main/logistics-manager-app/codelab.md

If you want to understand the difference between Skills and MCP Tools before diving in, check out MCP Skills vs MCP Tools: The Right Way to Configure Your Server.

Angular 22 MCP + Skills: Build Agent-Safe Components