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

An initial experimental implementation of a Model Context Protocol (MCP) server is now
available as a command within the Angular CLI. The server is a `stdio`
based server intended to run locally by a host via the `ng mcp` command.
Currently, the server provides one resource and one tool. The resource is
for the best practices system instructions found https://angular.dev/ai/develop-with-ai.
The tool allows for listing the Angular projects within the Angular workspace.
These are preliminary and subject to change. Additional functionality may
be added in the future to provide additional capabilities for IDE host integrations.

Author: clydin

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;
+}