feat(@angular/cli): add initial MCP server implementation

packages/angular/cli/BUILD.bazel

@@ -49,6 +49,7 @@ ts_project(
         ":node_modules/@angular-devkit/schematics",
         ":node_modules/@inquirer/prompts",
         ":node_modules/@listr2/prompt-adapter-inquirer",
+        ":node_modules/@modelcontextprotocol/sdk",
         ":node_modules/@yarnpkg/lockfile",
         ":node_modules/ini",
         ":node_modules/jsonc-parser",

packages/angular/cli/package.json

@@ -27,6 +27,7 @@
     "@angular-devkit/schematics": "workspace:0.0.0-PLACEHOLDER",
     "@inquirer/prompts": "7.5.3",
     "@listr2/prompt-adapter-inquirer": "2.0.22",
+    "@modelcontextprotocol/sdk": "1.13.1",
     "@schematics/angular": "workspace:0.0.0-PLACEHOLDER",
     "@yarnpkg/lockfile": "1.1.0",
     "ini": "5.0.0",

packages/angular/cli/src/commands/command-config.ts

@@ -21,6 +21,7 @@ export type CommandNames =
   | 'generate'
   | 'lint'
   | 'make-this-awesome'
+  | 'mcp'
   | 'new'
   | 'run'
   | 'serve'
@@ -77,6 +78,9 @@ export const RootCommands: Record<
   'make-this-awesome': {
     factory: () => import('./make-this-awesome/cli'),
   },
+  'mcp': {
+    factory: () => import('./mcp/cli'),
+  },
   'new': {
     factory: () => import('./new/cli'),
     aliases: ['n'],

packages/angular/cli/src/commands/mcp/cli.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { Argv } from 'yargs';
+import { CommandModule, CommandModuleImplementation } from '../../command-builder/command-module';
+import { isTTY } from '../../utilities/tty';
+import { createMcpServer } from './mcp-server';
+
+const INTERACTIVE_MESSAGE = `
+To start using the Angular CLI MCP Server, add this configuration to your host:
+
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["@angular/cli", "mcp"]
+    }
+  }
+}
+
+Exact configuration may differ depending on the host.
+`;
+
+export default class McpCommandModule extends CommandModule implements CommandModuleImplementation {
+  command = 'mcp';
+  describe = false as const;
+  longDescriptionPath = undefined;
+
+  builder(localYargs: Argv): Argv {
+    return localYargs;
+  }
+
+  async run(): Promise<void> {
+    if (isTTY()) {
+      this.context.logger.info(INTERACTIVE_MESSAGE);
+
+      return;
+    }
+
+    const server = await createMcpServer({ workspace: this.context.workspace });
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+  }
+}

packages/angular/cli/src/commands/mcp/instructions/best-practices.md

@@ -0,0 +1,44 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Don't use explicit `standalone: true` (it is implied by default)
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Use `NgOptimizedImage` for all static images.
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- DO NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

packages/angular/cli/src/commands/mcp/mcp-server.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import type { AngularWorkspace } from '../../utilities/config';
+import { VERSION } from '../../utilities/version';
+
+export async function createMcpServer(context: {
+  workspace?: AngularWorkspace;
+}): Promise<McpServer> {
+  const server = new McpServer({
+    name: 'angular-cli-server',
+    version: VERSION.full,
+    capabilities: {
+      resources: {},
+      tools: {},
+    },
+  });
+
+  server.registerResource(
+    'instructions',
+    'instructions://best-practices',
+    {
+      title: 'Angular System Instructions',
+      description:
+        'A set of instructions to help LLMs generate correct code that follows Angular best practices.',
+      mimeType: 'text/markdown',
+    },
+    async () => {
+      const text = await readFile(
+        path.join(__dirname, 'instructions', 'best-practices.md'),
+        'utf-8',
+      );
+
+      return { contents: [{ uri: 'instructions://best-practices', text }] };
+    },
+  );
+
+  server.registerTool(
+    'list_projects',
+    {
+      title: 'List projects',
+      description:
+        'List projects within an Angular workspace.' +
+        ' This information is read from the `angular.json` file at the root path of the Angular workspace',
+    },
+    () => {
+      if (!context.workspace) {
+        return {
+          content: [
+            {
+              type: 'text',
+              text: 'Not within an Angular project.',
+            },
+          ],
+        };
+      }
+
+      return {
+        content: [
+          {
+            type: 'text',
+            text:
+              'Projects in the Angular workspace: ' +
+              [...context.workspace.projects.keys()].join(','),
+          },
+        ],
+      };
+    },
+  );
+
+  return server;
+}