@igniteui/angular-schematics 20.1.1471 → 20.1.1500-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igniteui/angular-schematics",
-  "version": "20.1.1471",
+  "version": "20.1.1500-alpha.0",
   "description": "Ignite UI for Angular Schematics for ng new and ng generate",
   "repository": {
     "type": "git",
@@ -22,8 +22,9 @@
   "dependencies": {
     "@angular-devkit/core": "^19.0.0",
     "@angular-devkit/schematics": "^19.0.0",
-    "@igniteui/angular-templates": "~20.1.1471",
-    "@igniteui/cli-core": "~14.7.1",
+    "@igniteui/angular-templates": "~20.1.1500-alpha.0",
+    "@igniteui/cli-core": "~15.0.0-alpha.0",
+    "@modelcontextprotocol/sdk": "^1.21.0",
     "@schematics/angular": "~19.0.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1"

package/src/collection.json

@@ -37,6 +37,12 @@
       "description": "Upgrades to the licensed Ignite UI for Angular packages",
       "factory": "./upgrade-packages/index",
       "schema": "./upgrade-packages/schema.json"
+    },
+    "mcp": {
+      "description": "Start the Ignite UI for Angular MCP (Model Context Protocol) server",
+      "factory": "./mcp-schematic/index#mcp",
+      "schema": "./mcp-schematic/schema.json",
+      "hidden": true
     }
   }
 }

package/src/mcp/cli.d.ts

@@ -0,0 +1,3 @@
+export declare function runMcpServer(options: {
+    readOnly?: boolean;
+}): Promise<void>;

package/src/mcp/cli.js

@@ -0,0 +1,53 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runMcpServer = runMcpServer;
+const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
+const mcp_server_1 = require("./mcp-server");
+const INTERACTIVE_MESSAGE = `
+To start using the Ignite UI for Angular Schematics MCP Server, add this configuration to your host:
+
+{
+  "mcpServers": {
+    "igniteui-angular-schematics": {
+      "command": "npx",
+      "args": ["-y", "@igniteui/angular-schematics-mcp"]
+    }
+  }
+}
+
+Exact configuration may differ depending on the host.
+
+For more information, visit: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-angular-schematics
+`;
+function isTTY() {
+    return Boolean(process.stdout.isTTY);
+}
+function runMcpServer(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (isTTY()) {
+            console.log(INTERACTIVE_MESSAGE);
+            return;
+        }
+        const server = yield (0, mcp_server_1.createMcpServer)({
+            readOnly: options.readOnly,
+        });
+        const transport = new stdio_js_1.StdioServerTransport();
+        yield server.connect(transport);
+    });
+}
+// If this file is run directly
+if (require.main === module) {
+    runMcpServer({ readOnly: false }).catch((error) => {
+        console.error("Error running MCP server:", error);
+        process.exit(1);
+    });
+}

package/src/mcp/index.d.ts

@@ -0,0 +1,2 @@
+export { createMcpServer } from "./mcp-server";
+export { runMcpServer } from "./cli";

package/src/mcp/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runMcpServer = exports.createMcpServer = void 0;
+var mcp_server_1 = require("./mcp-server");
+Object.defineProperty(exports, "createMcpServer", { enumerable: true, get: function () { return mcp_server_1.createMcpServer; } });
+var cli_1 = require("./cli");
+Object.defineProperty(exports, "runMcpServer", { enumerable: true, get: function () { return cli_1.runMcpServer; } });

package/src/mcp/mcp-server.d.ts

@@ -0,0 +1,6 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+interface McpOptions {
+    readOnly?: boolean;
+}
+export declare function createMcpServer(options: McpOptions): Promise<McpServer>;
+export {};

package/src/mcp/mcp-server.js

@@ -0,0 +1,327 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMcpServer = createMcpServer;
+const mcp_js_1 = require("@modelcontextprotocol/sdk/server/mcp.js");
+const SchematicsTemplateManager_1 = require("../SchematicsTemplateManager");
+function createMcpServer(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const packageJson = require("../../package.json");
+        const server = new mcp_js_1.McpServer({
+            name: "igniteui-ng-schematics-server",
+            version: packageJson.version,
+        }, {
+            capabilities: {
+                tools: {},
+                resources: {},
+                prompts: {},
+            },
+            instructions: `
+<General Purpose>
+This server provides a safe, programmatic interface to the Ignite UI for Angular Schematics for an AI assistant.
+Your primary goal is to use these tools to create and modify Angular projects with Ignite UI components.
+You MUST prefer the tools provided by this server over using shell commands for equivalent actions.
+</General Purpose>
+
+<Core Workflows & Tool Guide>
+* **1. Create a New Angular Project:** Use the \`ng_new_igniteui\` tool to create a new Angular project with Ignite UI for Angular.
+
+* **2. Add Components:** Use the \`ng_add_component\` tool to add Ignite UI for Angular components to an existing project.
+
+* **3. List Available Components:** Use the \`ng_list_components\` tool to see available Ignite UI for Angular components.
+
+* **4. Upgrade Packages:** Use the \`ng_upgrade_packages\` tool to upgrade to the licensed Ignite UI for Angular packages.
+</Core Workflows & Tool Guide>
+
+<Key Concepts>
+* **Component:** Pre-built Ignite UI for Angular components that can be added to a project
+* **Module:** The Angular module where the component will be registered
+* **Route:** Automatically generated navigation route for new components
+</Key Concepts>
+`,
+        });
+        // Register tools
+        server.tool("ng_new_igniteui", "Create a new Angular project with Ignite UI for Angular", {
+            name: {
+                type: "string",
+                description: "Project name (required)",
+            },
+            template: {
+                type: "string",
+                description: "Project template (e.g., side-nav, side-nav-auth)",
+            },
+            theme: {
+                type: "string",
+                description: "Theme name for the project",
+            },
+            skipGit: {
+                type: "boolean",
+                description: "Skip initializing a Git repository",
+            },
+        }, (args) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `To create a new Ignite UI for Angular project, use: ng new ${args.name} --collection=@igniteui/angular-schematics`,
+                        },
+                    ],
+                };
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Error creating project: ${error.message}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }));
+        server.tool("ng_add_component", "Add an Ignite UI for Angular component to the current project", {
+            template: {
+                type: "string",
+                description: 'Component template ID (e.g., "grid", "combo", "chart")',
+            },
+            name: {
+                type: "string",
+                description: "Component name",
+            },
+            module: {
+                type: "string",
+                description: "Module to add the component to",
+            },
+            skipRoute: {
+                type: "boolean",
+                description: "Skip adding a route for this component",
+            },
+        }, (args) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const templateManager = new SchematicsTemplateManager_1.SchematicsTemplateManager();
+                const projLib = templateManager.getProjectLibrary("angular", "igx-ts");
+                if (!projLib.hasTemplate(args.template)) {
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: `Component template "${args.template}" not found. Use ng_list_components to see available templates.`,
+                            },
+                        ],
+                        isError: true,
+                    };
+                }
+                const commandParts = [`ng generate @igniteui/angular-schematics:component`];
+                commandParts.push(`--template=${args.template}`);
+                if (args.name) {
+                    commandParts.push(`--name=${args.name}`);
+                }
+                if (args.module) {
+                    commandParts.push(`--module=${args.module}`);
+                }
+                if (args.skipRoute) {
+                    commandParts.push(`--skip-route`);
+                }
+                const command = commandParts.join(' ');
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `To add the component, run: ${command}`,
+                        },
+                    ],
+                };
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Error adding component: ${error.message}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }));
+        server.tool("ng_list_components", "List available Ignite UI for Angular components", {}, () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const templateManager = new SchematicsTemplateManager_1.SchematicsTemplateManager();
+                const projLib = templateManager.getProjectLibrary("angular", "igx-ts");
+                const components = projLib.components.map((c) => ({
+                    id: c.id,
+                    name: c.name,
+                    description: c.description,
+                    group: c.group,
+                }));
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: JSON.stringify({ components }, null, 2),
+                        },
+                    ],
+                };
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Error listing components: ${error.message}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }));
+        server.tool("ng_upgrade_packages", "Upgrade to the licensed Ignite UI for Angular packages", {}, () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "To upgrade packages, run: ng generate @igniteui/angular-schematics:upgrade-packages",
+                        },
+                    ],
+                };
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Error upgrading packages: ${error.message}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }));
+        // Enhanced tool with table formatting for component listing
+        server.tool("ng_list_components_with_commands", "List all available Ignite UI for Angular components with their corresponding CLI and schematic commands in table format", {
+            format: {
+                type: "string",
+                description: "Output format: 'table' (default) or 'json'",
+            },
+        }, (args) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const format = args.format || "table";
+                const templateManager = new SchematicsTemplateManager_1.SchematicsTemplateManager();
+                const projLib = templateManager.getProjectLibrary("angular", "igx-ts");
+                const components = [];
+                for (const component of projLib.components) {
+                    // Get first template for the component to extract ID
+                    const firstTemplate = component.templates[0];
+                    if (firstTemplate) {
+                        const componentId = firstTemplate.id;
+                        const cliCommand = `ig add ${componentId} new${component.name.replace(/\s/g, "")}`;
+                        const schematicCommand = `ng g @igniteui/angular-schematics:component ${componentId} new${component.name.replace(/\s/g, "")}`;
+                        components.push({
+                            id: componentId,
+                            name: component.name,
+                            description: component.description || "",
+                            cliCommand,
+                            schematicCommand,
+                        });
+                    }
+                }
+                if (format === "table") {
+                    // Create formatted table
+                    let table = `
+Available Ignite UI for Angular Components:
+
+| Component       | Description                    | CLI Command                    | Schematic Command                                                |
+|-----------------|--------------------------------|--------------------------------|------------------------------------------------------------------|
+`;
+                    for (const comp of components) {
+                        const id = comp.id.padEnd(15);
+                        const desc = (comp.description.substring(0, 30)).padEnd(30);
+                        const cli = comp.cliCommand.padEnd(30);
+                        const schematic = comp.schematicCommand.padEnd(64);
+                        table += `| ${id} | ${desc} | ${cli} | ${schematic} |\n`;
+                    }
+                    table += `
+\nTo add a component, use either command from the table above.
+
+Example for adding a grid component:
+  ng g @igniteui/angular-schematics:component grid myGrid
+  
+Or using Ignite UI CLI:
+  ig add grid myGrid
+
+After adding a component, start your application with:
+  ng serve
+`;
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: table,
+                            },
+                        ],
+                    };
+                }
+                else {
+                    // Return JSON format
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: JSON.stringify({ framework: "angular", components }, null, 2),
+                            },
+                        ],
+                    };
+                }
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Error listing components: ${error.message}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }));
+        // Tool to get Angular workspace information
+        server.tool("ng_get_workspace_info", "Get Angular workspace configuration and project information", {}, () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                // This would read angular.json in a real implementation
+                // For now, provide guidance
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "To get workspace info, read the angular.json file in your project root. This tool provides Angular workspace configuration including projects, build configurations, and paths.",
+                        },
+                    ],
+                };
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Error getting workspace info: ${error.message}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }));
+        return server;
+    });
+}

package/src/mcp-schematic/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from "@angular-devkit/schematics";
+export declare function mcp(_options: any): Rule;

package/src/mcp-schematic/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mcp = mcp;
+const cli_1 = require("../mcp/cli");
+function mcp(_options) {
+    return (_tree, _context) => __awaiter(this, void 0, void 0, function* () {
+        // This schematic is primarily meant to be invoked via CLI
+        // The actual MCP server logic is in the cli.ts file
+        yield (0, cli_1.runMcpServer)({ readOnly: _options.readOnly || false });
+        return _tree;
+    });
+}

package/src/mcp-schematic/schema.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "IgniteUIAngularMcpSchematic",
+  "title": "Ignite UI for Angular MCP Server Schema",
+  "type": "object",
+  "properties": {
+    "readOnly": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only register read-only tools."
+    }
+  }
+}