igniteui-cli 15.0.0-rc.0 → 15.0.0-rc.2

package/bin/execute.js

@@ -13,11 +13,18 @@ resolve("igniteui-cli", { basedir: process.cwd() }, function (err, res) {
 		const localVersion = require(path.join(process.cwd(), "node_modules/igniteui-cli/package.json"))["version"];
 		const globalVersion = require(path.join(__dirname, "../package.json"))["version"];
 		if (globalVersion !== localVersion) {
-			console.log("Different igniteui-cli global and local version");
+			console.log("Different igniteui-cli global and local version");			
+		}		
+		if (args[0] === "ai-config") {
+			cli = require("../lib/cli");
+		} else {
+			cli = require(res);
 		}
-		cli = require(res);
 	} else {
 		cli = require("../lib/cli");
 	}
-	cli.run(args);
+	cli.run(args).catch(function (err) {
+		console.error("Error: " + (err.message || err));
+		process.exit(1);
+	});
 });

package/lib/PromptSession.d.ts

@@ -9,6 +9,7 @@ export declare class PromptSession extends BasePromptSession {
     start(): Promise<void>;
     protected completeAndRun(port?: number): Promise<void>;
     protected upgradePackages(): Promise<void>;
+    protected configureAI(): Promise<void>;
     /**
      * Get user name and set template's extra configurations if any
      * @param projectLibrary to add component to

package/lib/PromptSession.js

@@ -39,6 +39,7 @@ exports.PromptSession = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
 const path = __importStar(require("path"));
 const add_1 = __importDefault(require("./commands/add"));
+const ai_config_1 = require("./commands/ai-config");
 const start_1 = __importDefault(require("./commands/start"));
 const upgrade_1 = __importDefault(require("./commands/upgrade"));
 class PromptSession extends cli_core_1.BasePromptSession {
@@ -133,6 +134,12 @@ class PromptSession extends cli_core_1.BasePromptSession {
             yield upgrade_1.default.upgrade({ skipInstall: true, _: ["upgrade"], $0: "upgrade" });
         });
     }
+    configureAI() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // skip adding skills since those are baked into the project template atm:
+            (0, ai_config_1.configure)(false);
+        });
+    }
     /**
      * Get user name and set template's extra configurations if any
      * @param projectLibrary to add component to

package/lib/cli.js

@@ -29,6 +29,8 @@ function run() {
     return __awaiter(this, arguments, void 0, function* (args = null) {
         cli_core_1.App.initialize();
         const templateManager = new TemplateManager_1.TemplateManager();
+        // TODO: Refactor all code to use TemplateManager from the App container:
+        cli_core_1.App.container.set(cli_core_1.TEMPLATE_MANAGER, templateManager);
         commands_1.newCommand.addChoices(templateManager.getFrameworkIds());
         commands_1.newCommand.templateManager = templateManager;
         commands_1.add.templateManager = templateManager;
@@ -52,6 +54,7 @@ function run() {
             .command(commands_1.list)
             .command(commands_1.upgrade)
             .command(commands_1.mcp)
+            .command(commands_1.aiConfig)
             .version(false) // disable built-in `yargs.version` to override it with our custom option
             .options({
             version: {
@@ -78,6 +81,15 @@ function run() {
         }, false // setting this to `true` is supposed to exec the middleware after parsing and before arg validation
         // but in reality it also does not trigger the command's handler (╯°□°）╯︵ ┻━┻
         )
+            .fail((msg, err, yargs) => {
+            var _a;
+            const message = (_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : msg;
+            if (message) {
+                cli_core_1.Util.error(message, "red");
+                yargs.showHelp();
+                process.exitCode = 1;
+            }
+        })
             .help().alias("help", "h")
             .parseAsync(args, // the args to parse to argv
         {}, // docs say context to pass in to handlers, but nuh-uh, it's just garbage
@@ -109,10 +121,17 @@ function run() {
             /* istanbul ignore next */
             cli_core_1.App.testMode = !!argv.testMode;
             if (!helpRequest && !commands_1.ALL_COMMANDS.has(command === null || command === void 0 ? void 0 : command.toString())) {
-                cli_core_1.Util.log("Starting Step by step mode.", "green");
-                cli_core_1.Util.log("For available commands, stop this execution and use --help.", "green");
-                const prompts = new PromptSession_1.PromptSession(templateManager);
-                prompts.start();
+                if (command) {
+                    process.exitCode = 1;
+                    cli_core_1.Util.error(`Unknown command: "${command}"`, "red");
+                    cli_core_1.Util.log(yield yargsModule.getHelp());
+                }
+                else {
+                    cli_core_1.Util.log("Starting Step by step mode.", "green");
+                    cli_core_1.Util.log("For available commands, stop this execution and use --help.", "green");
+                    const prompts = new PromptSession_1.PromptSession(templateManager);
+                    prompts.start();
+                }
             }
         }));
     });

package/lib/commands/ai-config.d.ts

@@ -0,0 +1,7 @@
+import { IFileSystem } from "@igniteui/cli-core";
+import { CommandModule } from "yargs";
+export declare function configureMCP(fileSystem?: IFileSystem): void;
+export declare function configureSkills(): void;
+export declare function configure(skills?: boolean): void;
+declare const command: CommandModule;
+export default command;

package/lib/commands/ai-config.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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.configureMCP = configureMCP;
+exports.configureSkills = configureSkills;
+exports.configure = configure;
+const cli_core_1 = require("@igniteui/cli-core");
+const path = __importStar(require("path"));
+const IGNITEUI_SERVER_KEY = "igniteui-cli";
+const IGNITEUI_THEMING_SERVER_KEY = "igniteui-theming";
+const igniteuiServer = {
+    command: "npx",
+    args: ["-y", "igniteui-cli@next", "mcp"]
+};
+const igniteuiThemingServer = {
+    command: "npx",
+    args: ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+};
+function getConfigPath() {
+    return path.join(process.cwd(), ".vscode", "mcp.json");
+}
+function readJson(filePath, fallback, fileSystem) {
+    try {
+        return JSON.parse(fileSystem.readFile(filePath));
+    }
+    catch (_a) {
+        return fallback;
+    }
+}
+function writeJson(filePath, data, fileSystem) {
+    fileSystem.writeFile(filePath, JSON.stringify(data, null, 2) + "\n");
+}
+function configureMCP(fileSystem = new cli_core_1.FsFileSystem()) {
+    const configPath = getConfigPath();
+    const config = readJson(configPath, { servers: {} }, fileSystem);
+    config.servers = config.servers || {};
+    let modified = false;
+    if (!config.servers[IGNITEUI_SERVER_KEY]) {
+        config.servers[IGNITEUI_SERVER_KEY] = igniteuiServer;
+        modified = true;
+    }
+    if (!config.servers[IGNITEUI_THEMING_SERVER_KEY]) {
+        config.servers[IGNITEUI_THEMING_SERVER_KEY] = igniteuiThemingServer;
+        modified = true;
+    }
+    if (!modified) {
+        cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${configPath}`);
+        return;
+    }
+    writeJson(configPath, config, fileSystem);
+    cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${configPath}`);
+}
+function configureSkills() {
+    const result = (0, cli_core_1.copyAISkillsToProject)();
+    if (result.found === 0) {
+        cli_core_1.Util.warn("No AI skill files found. Make sure packages are installed (npm install) " +
+            "and your Ignite UI packages are up-to-date.", "yellow");
+    }
+    else if (result.failed > 0) {
+        cli_core_1.Util.warn(`Failed to write ${result.failed} skill file(s) out of ${result.found}.`, "yellow");
+    }
+    else if (result.skipped === result.found) {
+        cli_core_1.Util.log("Everything is already up-to-date.");
+    }
+    else {
+        const written = result.found - result.skipped;
+        cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` ${written} AI skill file(s) created or updated.`);
+    }
+}
+function configure(skills = true) {
+    configureMCP();
+    if (skills) {
+        configureSkills();
+    }
+}
+const command = {
+    command: "ai-config",
+    describe: "Configure Ignite UI AI tooling (MCP servers and AI coding skills)",
+    builder: (yargs) => yargs.usage(""),
+    handler(_argv) {
+        return __awaiter(this, void 0, void 0, function* () {
+            cli_core_1.GoogleAnalytics.post({
+                t: "screenview",
+                cd: "MCP"
+            });
+            cli_core_1.GoogleAnalytics.post({
+                t: "event",
+                ec: "$ig ai-config",
+                ea: "client: vscode"
+            });
+            configure();
+        });
+    }
+};
+exports.default = command;

package/lib/commands/index.d.ts

@@ -1,4 +1,5 @@
 export { default as add } from "./add";
+export { default as aiConfig } from "./ai-config";
 export { default as build } from "./build";
 export { default as config } from "./config";
 export { default as doc } from "./doc";

package/lib/commands/index.js

@@ -17,9 +17,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.upgrade = exports.test = exports.start = exports.newCommand = exports.mcp = exports.list = exports.generate = exports.doc = exports.config = exports.build = exports.add = void 0;
+exports.upgrade = exports.test = exports.start = exports.newCommand = exports.mcp = exports.list = exports.generate = exports.doc = exports.config = exports.build = exports.aiConfig = exports.add = void 0;
 var add_1 = require("./add");
 Object.defineProperty(exports, "add", { enumerable: true, get: function () { return __importDefault(add_1).default; } });
+var ai_config_1 = require("./ai-config");
+Object.defineProperty(exports, "aiConfig", { enumerable: true, get: function () { return __importDefault(ai_config_1).default; } });
 var build_1 = require("./build");
 Object.defineProperty(exports, "build", { enumerable: true, get: function () { return __importDefault(build_1).default; } });
 var config_1 = require("./config");

package/lib/commands/types.d.ts

@@ -12,6 +12,7 @@ export declare const TEST_COMMAND_NAME = "test";
 export declare const LIST_COMMAND_NAME = "list";
 export declare const UPGRADE_COMMAND_NAME = "upgrade-packages";
 export declare const MCP_COMMAND_NAME = "mcp";
+export declare const AI_CONFIG_COMMAND_NAME = "ai-config";
 export declare const ALL_COMMANDS: Set<string>;
 export interface PositionalArgs {
     /** The framework that the project will target. */

package/lib/commands/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALL_COMMANDS = exports.MCP_COMMAND_NAME = exports.UPGRADE_COMMAND_NAME = exports.LIST_COMMAND_NAME = exports.TEST_COMMAND_NAME = exports.DOC_COMMAND_NAME = exports.CONFIG_COMMAND_NAME = exports.GENERATE_COMMAND_NAME = exports.START_COMMAND_NAME = exports.BUILD_COMMAND_NAME = exports.NEW_COMMAND_NAME = exports.ADD_COMMAND_NAME = void 0;
+exports.ALL_COMMANDS = exports.AI_CONFIG_COMMAND_NAME = exports.MCP_COMMAND_NAME = exports.UPGRADE_COMMAND_NAME = exports.LIST_COMMAND_NAME = exports.TEST_COMMAND_NAME = exports.DOC_COMMAND_NAME = exports.CONFIG_COMMAND_NAME = exports.GENERATE_COMMAND_NAME = exports.START_COMMAND_NAME = exports.BUILD_COMMAND_NAME = exports.NEW_COMMAND_NAME = exports.ADD_COMMAND_NAME = void 0;
 exports.ADD_COMMAND_NAME = "add";
 exports.NEW_COMMAND_NAME = "new";
 exports.BUILD_COMMAND_NAME = "build";
@@ -12,6 +12,7 @@ exports.TEST_COMMAND_NAME = "test";
 exports.LIST_COMMAND_NAME = "list";
 exports.UPGRADE_COMMAND_NAME = "upgrade-packages";
 exports.MCP_COMMAND_NAME = "mcp";
+exports.AI_CONFIG_COMMAND_NAME = "ai-config";
 exports.ALL_COMMANDS = new Set([
     exports.ADD_COMMAND_NAME,
     exports.NEW_COMMAND_NAME,
@@ -23,5 +24,6 @@ exports.ALL_COMMANDS = new Set([
     exports.TEST_COMMAND_NAME,
     exports.LIST_COMMAND_NAME,
     exports.UPGRADE_COMMAND_NAME,
-    exports.MCP_COMMAND_NAME
+    exports.MCP_COMMAND_NAME,
+    exports.AI_CONFIG_COMMAND_NAME
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "15.0.0-rc.0",
+  "version": "15.0.0-rc.2",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -66,9 +66,9 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~21.1.1500-rc.0",
-    "@igniteui/cli-core": "~15.0.0-rc.0",
-    "@igniteui/mcp-server": "~15.0.0-rc.0",
+    "@igniteui/angular-templates": "~21.1.1500-rc.2",
+    "@igniteui/cli-core": "~15.0.0-rc.2",
+    "@igniteui/mcp-server": "~15.0.0-rc.2",
     "@inquirer/prompts": "^7.9.0",
     "@types/yargs": "^17.0.33",
     "chalk": "^5.3.0",

package/templates/react/igr-ts/projects/_base/files/AGENTS.md

@@ -109,3 +109,8 @@ You are an expert in building front-end web applications with React with deep kn
 ## UI Components
 
 - Use `igniteui-react`.
+- Use `igniteui-react-grids` for advanced grids.
+- Use `igniteui-react` and `igniteui-grid-lite` for Grid Lite; import from `igniteui-react/grid-lite`.
+- Use `igniteui-react-charts`, `igniteui-react-gauges`, and `igniteui-react-maps` for charts, gauges, and maps.
+- For package-specific components such as grids, Grid Lite, charts, gauges, and maps, do not assume they come from `igniteui-react`; follow `.claude/skills/igniteui-react-components/SKILL.md` to choose the correct package and imports.
+- If the required Ignite UI package is not present in `package.json`, add or install the correct dependency first.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/README.md

@@ -0,0 +1,89 @@
+# LLM Agent Skills for Ignite UI for React
+
+This directory contains skills for GitHub Copilot and other LLM agents to help developers use **Ignite UI for React** effectively in their applications.
+
+## What are Skills?
+
+Skills are structured instructions that help AI agents understand and execute common tasks consistently. Each skill is a self-contained guide that provides step-by-step instructions, code examples, and best practices — all specific to React and the `igniteui-react` family of packages.
+
+## Available Skills
+
+| Skill | Description | Use When |
+| --- | --- | --- |
+| [igniteui-react-components](./igniteui-react-components/SKILL.md) | Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms | Choosing components or setting up and using them in React |
+| [igniteui-react-customize-theme](./igniteui-react-customize-theme/SKILL.md) | Customize styling using CSS custom properties, Sass, and the theming system in a React context | Applying custom brand colors/styles |
+| [igniteui-react-optimize-bundle-size](./igniteui-react-optimize-bundle-size/SKILL.md) | Reduce bundle size with granular imports, tree-shaking, and lazy loading | Optimizing production performance |
+
+## How to Use
+
+When working with an AI agent like GitHub Copilot, reference skills by name or ask questions naturally:
+
+### Natural Questions
+
+- "How do I add a data grid to my React app?"
+- "What Ignite UI component should I use for a date picker?"
+- "Help me customize the button colors to match my brand"
+- "My bundle size is too large, how can I reduce it?"
+- "How do I handle events on IgrCombo?"
+
+### Direct Skill Reference
+
+- "Follow the igniteui-react-components skill for setting up my project"
+- "Use the igniteui-react-customize-theme skill to help me style components"
+- "Apply the igniteui-react-optimize-bundle-size skill to reduce my bundle"
+
+## Skill Structure
+
+Each skill contains:
+
+- **Example Usage**: Common questions or scenarios
+- **When to Use**: Situations where the skill applies
+- **Related Skills**: Other relevant skills to explore
+- **Step-by-Step Instructions**: Detailed guidance with code examples
+- **Common Issues & Solutions**: Troubleshooting guidance
+- **Best Practices**: Recommended approaches
+- **Additional Resources**: Further reading and documentation
+
+## Editor / Agent Setup
+
+Most modern AI assistants (GitHub Copilot, Cursor, Windsurf, Claude Code, etc.) should auto-discover these skills from a specified location in the workspace or global profile.
+
+For example, you can copy them into the agent-specific skills folder for your editor:
+
+### GitHub Copilot
+
+Copy the skill files into your project's `.agents/skills/` directory:
+
+```
+.agents/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
+```
+
+### Claude Code
+
+Copy the skill files into your project's `.claude/skills/` directory:
+
+```
+.claude/
+  skills/
+    igniteui-react-components/
+      SKILL.md
+      reference/
+    igniteui-react-customize-theme/
+      SKILL.md
+      reference/
+    igniteui-react-optimize-bundle-size/
+      SKILL.md
+```
+
+### Other Agents (Cursor, Windsurf, etc.)
+
+Consult your agent's documentation for the correct skills directory path and copy the skill files there. The skill structure is agent-agnostic — any assistant that supports skill files can use them directly.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md

@@ -54,7 +54,6 @@ This skill is organized into focused reference files. Load the appropriate file
 | Event Handling | [EVENT-HANDLING.md](./reference/EVENT-HANDLING.md) | Event props, CustomEvent types, common events |
 | Refs & Forms | [REFS-FORMS.md](./reference/REFS-FORMS.md) | useRef, controlled/uncontrolled forms, React Hook Form |
 | Charts, Gauges, Maps & Grid Lite | [CHARTS-GRIDS.md](./reference/CHARTS-GRIDS.md) | Module registration, container sizing |
-| Reveal SDK | [REVEAL-SDK.md](./reference/REVEAL-SDK.md) | Embedded BI dashboards, theme sync |
 | Troubleshooting | [TROUBLESHOOTING.md](./reference/TROUBLESHOOTING.md) | Common issues and solutions |
 
 ---