Building Agent-Safe Angular Components: Defeating LLM Hallucinations with MCP

// user-profile.component.ts
import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
 
export interface User {
  id: string;
  name: string;
  role: 'admin' | 'user' | 'guest';
}
 
@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="profile-card" [class.admin]="isAdmin()">
      <h3>{{ displayName() }}</h3>
      <p>Role: {{ user().role }}</p>
      <button (click)="onDeactivate()">Deactivate User</button>
    </div>
  `,
  styles: [`.profile-card { padding: 1rem; border: 1px solid #ccc; } .admin { border-color: red; }`],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserProfileComponent {
  // Strictly typed signal inputs - no legacy @Input() decorators
  user = input.required<User>();
 
  // Read-only computed signal
  isAdmin = computed(() => this.user().role === 'admin');
  displayName = computed(() => this.user().name.toUpperCase());
 
  // Strongly typed output emitter
  deactivate = output<string>();
 
  onDeactivate(): void {
    this.deactivate.emit(this.user().id);
  }
}
 
// Machine-readable contract used by MCP tooling to verify agent edits
export const UserProfileContract = {
  selector: 'app-user-profile',
  inputs: { user: 'User (required)' },
  outputs: { deactivate: 'string' },
  architecture: 'signals-only',
  changeDetection: 'OnPush'
} as const;

// scripts/validate-component.ts
import { Project, SyntaxKind, ClassDeclaration } from 'ts-morph';
 
export interface ValidationResult {
  valid: boolean;
  errors: string[];
}
 
export function validateAngularComponent(sourceCode: string): ValidationResult {
  const project = new Project({ useInMemoryFileSystem: true });
  const sourceFile = project.createSourceFile('temp.component.ts', sourceCode);
  const errors: string[] = [];
 
  const classes = sourceFile.getClasses();
  if (classes.length === 0) {
    return { valid: false, errors: ['No class found in source code.'] };
  }
 
  const componentClass = classes[0];
 
  // 1. Enforce Standalone and OnPush Change Detection
  const decorator = componentClass.getDecorator('Component');
  if (!decorator) {
    errors.push('Missing @Component decorator.');
  } else {
    const arg = decorator.getArguments()[0];
    if (arg && arg.isKind(SyntaxKind.ObjectLiteralExpression)) {
      // Validate Change Detection
      const changeDetectionProp = arg.getProperty('changeDetection');
      if (!changeDetectionProp || !changeDetectionProp.getText().includes('ChangeDetectionStrategy.OnPush')) {
        errors.push('Component must explicitly use "changeDetection: ChangeDetectionStrategy.OnPush".');
      }
 
      // Validate Standalone flag
      const standaloneProp = arg.getProperty('standalone');
      if (!standaloneProp || !standaloneProp.getText().includes('true')) {
        errors.push('Component must explicitly set "standalone: true".');
      }
    } else {
      errors.push('@Component decorator must contain a configuration object.');
    }
  }
 
  // 2. Ban Legacy Decorators (@Input, @Output)
  componentClass.getProperties().forEach(prop => {
    if (prop.getDecorator('Input')) {
      errors.push(`Legacy @Input() found on property "${prop.getName()}". Use signal-based input() or input.required() instead.`);
    }
    if (prop.getDecorator('Output')) {
      errors.push(`Legacy @Output() found on property "${prop.getName()}". Use output() instead.`);
    }
  });
 
  // 3. Prevent Manual RxJS Subscriptions in Components
  const methods = componentClass.getMethods();
  methods.forEach(method => {
    if (method.getText().includes('.subscribe(')) {
      errors.push(
        `Manual subscription found in method "${method.getName()}". ` +
        `Components must use Signals or the async pipe in templates to handle async data streams.`
      );
    }
  });
 
  return {
    valid: errors.length === 0,
    errors,
  };
}

// mcp-server/index.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";
import { validateAngularComponent } from "../scripts/validate-component.js";
 
const server = new Server(
  {
    name: "angular-agent-safeguard",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);
 
server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "validate_component",
        description: "Validates that a proposed Angular component follows strict modern standards (Signals-only, OnPush, Standalone).",
        inputSchema: {
          type: "object",
          properties: {
            sourceCode: {
              type: "string",
              description: "The complete TypeScript source code of the proposed Angular component."
            }
          },
          required: ["sourceCode"]
        }
      }
    ]
  };
});
 
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "validate_component") {
    const sourceCode = request.params.arguments?.sourceCode as string;
    if (!sourceCode) {
      return {
        content: [{ type: "text", text: "Error: Missing sourceCode argument." }],
        isError: true
      };
    }
 
    const result = validateAngularComponent(sourceCode);
    if (result.valid) {
      return {
        content: [{ type: "text", text: "Success: Component matches all modern architectural standards." }]
      };
    } else {
      return {
        content: [{ 
          type: "text", 
          text: `Validation Failed:\n${result.errors.map(e => `- ${e}`).join("\n")}` 
        }],
        isError: true
      };
    }
  }
 
  throw new Error("Tool not found");
});
 
async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Angular Safeguard MCP Server running on stdio");
}
 
main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

# Angular Development Protocol
 
You are operating on a modern Angular codebase. You must build **agent-safe angular components** exclusively.
 
## Architectural Constraints
1. **No NgModules**: All components must be `standalone: true`.
2. **OnPush Only**: All components must use `changeDetection: ChangeDetectionStrategy.OnPush`.
3. **Signals-Driven**: 
   - Use `input()` and `input.required()` for inputs. Never use `@Input()`.
   - Use `computed()` for derived state.
   - Use `output()` for custom events. Never use `@Output()`.
4. **No Manual Subscriptions**: Never call `.subscribe()` inside components. Resolve observables in templates using the `async` pipe, or transition them into Signals using `toSignal()`.
 
## Mandatory Validation Tool
Before presenting any modified or newly created Angular component to the user, you MUST execute the `validate_component` tool with your proposed source code.
If the tool returns errors, correct your code and run the validation again. Do not show the user unvalidated code.