DEV Community

Cover image for Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development
Turing's Oracle profile image Antonio Cardenas
Antonio Cardenas for Turing's Oracle

Posted on

Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development

#angular #mcp #agentskills #ai

Angular v22 MCP + Skills Integration: Agentic Development Setup

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.

Part 1: Environment Setup

Prerequisites

Ensure 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. 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"
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

For JetBrains IDEs (Settings → Tools → MCP):

  1. Add new server: name angular-cli
  2. Command: npx -y @angular/cli mcp
  3. Add second server: name chrome-devtools
  4. Command: npx chrome-devtools-mcp@latest

Test the connection:

npx @angular/cli mcp --health-check
Enter fullscreen mode Exit fullscreen mode

You should see a list of available tools. Common ones:

  • ng_lint — runs the linter on your project
  • get_examples — fetches 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/fails (critical for agents)
  • 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.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Verify installation:

# In your agent (Gemini CLI, etc.)
/skills list
Enter fullscreen mode Exit fullscreen mode

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:

npx chrome-devtools-mcp@latest --install
Enter fullscreen mode Exit fullscreen mode

Test it:

npx chrome-devtools-mcp@latest --health-check
Enter fullscreen mode Exit fullscreen mode

Part 2: Writing Agent-Safe Components

With MCP + Skills configured, your agent has access to build verification and browser visibility. Now write code that agents can safely modify.

Pattern 1: Exhaustive @switch with Type Safety

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}`);
  }
}
Enter fullscreen mode Exit fullscreen mode 
<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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.

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.

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);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Why this matters: Agents can't generate invalid form values. TypeScript catches it.

Pattern 3: @boundary for Risky Integrations

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>
Enter fullscreen mode Exit fullscreen mode

Why this matters: When an agent writes complex AI integration code, a single bug won't crash the user's app.

Pattern 4: Inline Template Functions for Transient Logic

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> -->
Enter fullscreen mode Exit fullscreen mode

This keeps the component API surface minimal and lets agents see the full handler intent inline.

Part 3: Agent Workflows

Workflow 1: Scaffold a Component (with MCP Verification)

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:

  1. Call get_best_practices to fetch Signal Forms patterns.
  2. Scaffold the component with ng generate component.
  3. Implement inline validators using the skill guidance.
  4. Call dev_server.wait_for_build to verify compilation.
  5. If the build fails, read the error and fix it.

You can monitor this entirely in your agent's chat; no surprise errors.

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

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:

  1. Create a FleetChatService that accepts a natural-language query.
  2. Send the current units() signal state to the Gemini API.
  3. Parse Gemini's response and filter the fleet.
  4. Update the chat UI with results.
  5. Call dev_server.start to spin up the dev server.
  6. Call Chrome DevTools to navigate to the component.
  7. Snap a screenshot showing the chat results.
  8. Read the screenshot and confirm the feature works.

No hallucinations—the agent has eyes on the running application.

Workflow 3: Implement Predictive Diagnostics with @boundary

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:

  1. Create a DiagnosticsComponent that calls the AI service.
  2. Wrap it with @boundary in the modal template.
  3. Implement a fallback UI in the @catch block.
  4. Add retry logic.
  5. Start the dev server.
  6. Navigate to a vehicle detail modal.
  7. Click the diagnostic button.
  8. Verify the result (or error) in the browser.
  9. If the test fails, analyze the error and iterate.

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.

Part 4: Skills Configuration Best Practices

One Server Per Domain

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"] }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Activate only the profile you need for the task at hand.

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
Enter fullscreen mode Exit fullscreen mode

Reference them:

npx @anthropic-ai/skills add ./skills/angular-v22-dev-guidelines.md
Enter fullscreen mode Exit fullscreen mode

Review and 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?
Enter fullscreen mode Exit fullscreen mode

If over 30% of your context window is on tool definitions, simplify. Agents need room to think.

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`
Enter fullscreen mode Exit fullscreen mode

The agent will follow the skill's instructions.

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
  • Check that you've started the dev server with dev_server.start before asking the agent to navigate

"Build verification timed out"

  • The dev_server.wait_for_build tool 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 v22's MCP + Skills stack:

  • Agents write type-safe code that compiles or fails, never silently.
  • Exhaustive type checking prevents new states from slipping past.
  • @boundary contains failures instead of crashing the app.
  • Inline templates keep components clean.
  • Signal Forms enforce validation.
  • 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:

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

Resources:

Top comments (0)