{"slug": "agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai", "title": "Agent-Safe Angular Components: Copy-Paste MCP + Skills Setup for Verified AI Development", "summary": "With Angular v22, the MCP server and Angular Skills stack enables deterministic, verifiable agent-assisted development. The setup requires configuring MCP servers for Angular CLI and Chrome DevTools, installing Angular skills packages, and implementing exhaustive `@switch` blocks with `assertNever` guards to prevent agents from shipping broken code. Signal Forms further reduce agent errors by providing type-safe, signal-driven form handling that fails compilation on unhandled cases.", "body_md": "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.\n\nEnsure you have:\n\n`node --version`\n\n)`npm install -g @angular/cli@latest`\n\n)The Angular CLI ships with the MCP server built-in. Configure it in your agent's settings:\n\n**For Gemini CLI / Cursor / Claude Code** (using `.gemini/settings.json`\n\nor equivalent):\n\n```\n{\n  \"mcpServers\": {\n    \"angular-cli\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"-y\",\n        \"@angular/cli\",\n        \"mcp\"\n      ]\n    },\n    \"chrome-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"chrome-devtools-mcp@latest\"\n      ]\n    }\n  }\n}\n```\n\n**For JetBrains IDEs** (Settings → Tools → MCP):\n\n`angular-cli`\n\n`npx -y @angular/cli mcp`\n\n`chrome-devtools`\n\n`npx chrome-devtools-mcp@latest`\n\nTest the connection:\n\n```\nnpx @angular/cli mcp --health-check\n```\n\nYou should see a list of available tools. Common ones:\n\n`ng_lint`\n\n— runs the linter on your project`get_examples`\n\n— fetches best-practice code examples`get_best_practices`\n\n— retrieves the Angular Best Practices Guide`search_documentation`\n\n— queries angular.dev`dev_server.wait_for_build`\n\n— blocks until build succeeds/fails (critical for agents)`dev_server.start`\n\n— starts the dev server`dev_server.stop`\n\n— stops the dev serverSkills are installed separately from MCP tools. They augment the agent's knowledge without adding token overhead to every request.\n\nInstall the official Angular skills:\n\n```\n# Using npx skills package\nnpx @anthropic-ai/skills add \\\n  https://github.com/angular/skills/blob/main/angular-developer/SKILL.md \\\n  --name angular-developer\n\nnpx @anthropic-ai/skills add \\\n  https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md \\\n  --name angular-new-app\n```\n\nOr, if your agent supports URL-based skills, reference directly:\n\n```\n/skills install https://github.com/angular/skills/blob/main/angular-developer/SKILL.md\n/skills install https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md\n```\n\nVerify installation:\n\n```\n# In your agent (Gemini CLI, etc.)\n/skills list\n```\n\nYou should see `angular-developer`\n\nand `angular-new-app`\n\nlisted.\n\nThis gives agents visibility into your running application:\n\n```\nnpx chrome-devtools-mcp@latest --install\n```\n\nTest it:\n\n```\nnpx chrome-devtools-mcp@latest --health-check\n```\n\nWith MCP + Skills configured, your agent has access to build verification and browser visibility. Now write code that agents can safely modify.\n\nAlways use exhaustive [@switch](https://dev.to/switch) blocks. This prevents agents from introducing unhandled cases.\n\n```\n// ✓ Good: Type-safe, exhaustive union\nexport type VehicleStatus = 'idle' | 'transit' | 'maintenance' | 'critical';\n\nexport class FleetDetailComponent {\n  status = signal<VehicleStatus>('idle');\n\n  private assertNever(value: never): never {\n    throw new Error(`Unhandled status: ${value}`);\n  }\n}\nphp\n<!-- Template with exhaustive check -->\n<div class=\"status-card\">\n  @switch (status()) {\n    @case ('idle') {\n      <span class=\"badge badge-green\">Available</span>\n    }\n    @case ('transit') {\n      <span class=\"badge badge-blue\">In transit</span>\n    }\n    @case ('maintenance') {\n      <span class=\"badge badge-yellow\">Maintenance</span>\n    }\n    @case ('critical') {\n      <span class=\"badge badge-red\">Critical</span>\n    }\n    @default {\n      <!-- If an agent adds a new status to the union without updating the template, this line will fail to compile -->\n      {{ assertNever(status() as never) }}\n    }\n  }\n</div>\n```\n\n**Why this matters**: If a backend team adds `'error'`\n\nto the union without notifying frontend, the TypeScript build fails—agents can't ship broken code.\n\nSignal Forms provide type-safe, signal-driven form handling. Agents are far less likely to introduce validation errors.\n\n```\nexport class ServiceTicketComponent {\n  // Signal-based form\n  form = new FormGroup({\n    description: new FormControl('', Validators.required),\n    priority: new FormControl<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'>('MEDIUM'),\n    assignedTo: new FormControl(''),\n  });\n\n  // Signal-based access\n  priority$ = this.form.get('priority')!.valueAsSignal;\n\n  // Compute UI state based on priority\n  priorityClass = computed(() => {\n    const level = this.priority$();\n    return level === 'CRITICAL' ? 'text-red-600' : level === 'HIGH' ? 'text-orange-600' : 'text-gray-600';\n  });\n\n  // Agent can safely call this; form validation is enforced\n  submitTicket() {\n    if (this.form.valid) {\n      // Safe to use form.value — it's typed and validated\n      this.fleetService.createTicket(this.form.value);\n    }\n  }\n}\n```\n\nTemplate:\n\n```\n<form [formGroup]=\"form\" (submit)=\"submitTicket()\">\n  <textarea\n    formControlName=\"description\"\n    [class]=\"priorityClass()\"\n    placeholder=\"Describe the issue...\"\n  ></textarea>\n\n  <select formControlName=\"priority\">\n    <option value=\"LOW\">Low</option>\n    <option value=\"MEDIUM\">Medium</option>\n    <option value=\"HIGH\">High</option>\n    <option value=\"CRITICAL\">Critical</option>\n  </select>\n\n  <button type=\"submit\" [disabled]=\"form.invalid()\">Submit</button>\n</form>\n```\n\n**Why this matters**: Agents can't generate invalid form values. TypeScript catches it.\n\nWhen integrating third-party code or experimental features, wrap with `@boundary`\n\n.\n\n``` php\n<div class=\"dashboard\">\n  <!-- Core fleet list always renders -->\n  <fleet-list [units]=\"units()\" />\n\n  <!-- AI diagnostics can fail without crashing the whole page -->\n  @boundary {\n    <ai-predictive-diagnostics [selectedUnit]=\"selectedUnit()\" />\n  } @catch (error) {\n    <div class=\"error-fallback\">\n      <h3>Diagnostics unavailable</h3>\n      <p>{{ error.message }}</p>\n      <button (click)=\"retryDiagnostics()\">Retry</button>\n    </div>\n  }\n</div>\n```\n\n**Why this matters**: When an agent writes complex AI integration code, a single bug won't crash the user's app.\n\nKeep component API clean; let agents write inline handlers.\n\n``` php\n<!-- ✓ Inline handler — close to its usage -->\n<button \n  (click)=\"vehicles.update(v => v.filter(item => item.id !== vehicleId))\"\n  class=\"btn-danger\"\n>\n  Remove from fleet\n</button>\n\n<!-- ✗ Avoid exposing every handler as a method -->\n<!-- <button (click)=\"removeVehicle(vehicleId)\">Remove</button> -->\n```\n\nThis keeps the component API surface minimal and lets agents see the full handler intent inline.\n\nTell 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.\"*\n\nThe agent will:\n\n`get_best_practices`\n\nto fetch Signal Forms patterns.`ng generate component`\n\n.`dev_server.wait_for_build`\n\nto verify compilation.You can monitor this entirely in your agent's chat; no surprise errors.\n\nFrom 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.\"*\n\nThe agent will:\n\n`FleetChatService`\n\nthat accepts a natural-language query.`units()`\n\nsignal state to the Gemini API.`dev_server.start`\n\nto spin up the dev server.No hallucinations—the agent has eyes on the running application.\n\nFrom 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.\"*\n\nThe agent will:\n\n`DiagnosticsComponent`\n\nthat calls the AI service.`@boundary`\n\nin 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.\n\nDon't load the Angular MCP server alongside your deployment server and communication server. Create separate IDE configurations:\n\n```\n{\n  \"profiles\": {\n    \"angular-dev\": {\n      \"mcpServers\": {\n        \"angular-cli\": { \"command\": \"npx\", \"args\": [\"-y\", \"@angular/cli\", \"mcp\"] },\n        \"chrome-devtools\": { \"command\": \"npx\", \"args\": [\"chrome-devtools-mcp@latest\"] }\n      }\n    },\n    \"deployment\": {\n      \"mcpServers\": {\n        \"deploy-cli\": { \"command\": \"npx\", \"args\": [\"my-deploy-cli\", \"mcp\"] }\n      }\n    }\n  }\n}\n```\n\nActivate only the profile you need for the task at hand.\n\nPut skills in your repo and version them like code:\n\n```\n/my-project\n  /skills\n    /angular-v22-dev-guidelines.md\n    /our-design-system.md\n    /api-integration-patterns.md\n  /src\n  angular.json\n```\n\nReference them:\n\n```\nnpx @anthropic-ai/skills add ./skills/angular-v22-dev-guidelines.md\n```\n\nReview and update skills when you update Angular versions.\n\nBefore running an agent on a real task, ask it to estimate token usage:\n\n```\nWhat's the total token count of all my installed MCP tools and skills?\n```\n\nIf over 30% of your context window is on tool definitions, simplify. Agents need room to think.\n\nInstead of relying on the agent to \"be careful,\" write it into the skill:\n\n```\n# Angular Update Guardrail Skill\n\nBefore running `ng update`, ALWAYS:\n1. Create a git branch: `git checkout -b ng-update-v22`\n2. Run tests: `npm test`\n3. Commit current state: `git commit -m \"checkpoint before ng update\"`\n4. Then and only then run: `ng update @angular/core @angular/cli`\n```\n\nThe agent will follow the skill's instructions.\n\n**\"MCP server not found\"**\n\n`npx @angular/cli mcp --health-check`\n\nreturns a list of tools`ng version`\n\n**\"Skills not recognized\"**\n\n`npx @anthropic-ai/skills list`\n\nto confirm they're installed**\"Chrome DevTools not taking screenshots\"**\n\n`npx chrome-devtools-mcp@latest --health-check`\n\n`dev_server.start`\n\nbefore asking the agent to navigate**\"Build verification timed out\"**\n\n`dev_server.wait_for_build`\n\ntool has a default timeout (usually 30 seconds)`ng serve`\n\nWith Angular v22's MCP + Skills stack:\n\nThe hallucination loop is closed. Code generation becomes verifiable. Agentic development shifts from risky to reliable.\n\n**Next Steps**:\n\n**Resources**:", "url": "https://wpnews.pro/news/agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai", "canonical_source": "https://dev.to/turingsoracle/agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai-development-32ai", "published_at": "2026-06-04 04:32:42+00:00", "updated_at": "2026-06-04 05:12:13.795430+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "ai-infrastructure"], "entities": ["Angular", "Gemini CLI", "Cursor", "Claude Code", "JetBrains", "MCP", "Chrome DevTools"], "alternates": {"html": "https://wpnews.pro/news/agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai", "markdown": "https://wpnews.pro/news/agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai.md", "text": "https://wpnews.pro/news/agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai.txt", "jsonld": "https://wpnews.pro/news/agent-safe-angular-components-copy-paste-mcp-skills-setup-for-verified-ai.jsonld"}}