Skip to content

Commit f0c04c5

Browse files
Marina-L-StoyanovadamyanpetevCopilot
authored
feat(commands): add ai-config command (#1537)
Co-authored-by: damyanpetev <damyanpetev@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
1 parent 94aabb4 commit f0c04c5

13 files changed

Lines changed: 297 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ Quickly create projects including [Ignite UI for Angular](https://www.infragisti
1919
- Step by step guide
2020

2121
### Supported frameworks
22-
* jQuery
2322
* Angular
2423
* React
24+
* Web Components
25+
* jQuery
2526

2627
### Prerequisites
2728
The repository houses multiple packages and orchestrates building and publishing them with [lerna](https://github.com/lerna/lerna) and [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/).
@@ -51,6 +52,7 @@ This monorepo contains several packages that combine into the `igniteui-cli`:
5152
* [Generate Ignite UI for React project](#generate-ignite-ui-for-react-project)
5253
* [Adding components](#adding-components)
5354
* [Build and run](#build-and-run)
55+
* [Configure AI Tooling](#configure-ai-tooling)
5456
* [MCP Server](#mcp-server)
5557
* [Using with AI Assistants](#using-with-ai-assistants)
5658
* [Testing with MCP Inspector](#testing-with-mcp-inspector)
@@ -141,6 +143,16 @@ ig build
141143
ig start
142144
```
143145

146+
## Configure AI Tooling
147+
148+
To automatically configure Ignite UI MCP servers for VS Code, run:
149+
150+
```bash
151+
ig ai-config
152+
```
153+
154+
This creates or updates `.vscode/mcp.json` in the current project with entries for both the [Ignite UI MCP](#mcp-server) and `igniteui-theming` MCP servers. Existing servers in the file are preserved. New projects are created with AI tooling configuration out of the box.
155+
144156
## MCP Server
145157

146158
The CLI includes a bundled [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server that provides AI assistants with Ignite UI documentation search, API reference lookup, and scaffolding guidance for Angular, React, Blazor, and Web Components.
@@ -158,7 +170,7 @@ ig mcp --debug # Enable debug logging to mcp-server.log
158170

159171
### Using with AI Assistants
160172

161-
Configure your MCP client (e.g., VS Code, Claude Desktop, Cursor) to use the CLI as the MCP server:
173+
For VS Code, the `ig ai-config` command handles configuration automatically (see above). For other MCP clients (e.g., Claude Desktop, Cursor), configure them manually to use the CLI as the MCP server:
162174

163175
```json
164176
{

‎packages/cli/lib/PromptSession.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
} from "@igniteui/cli-core";
55
import * as path from "path";
66
import { default as add } from "./commands/add";
7+
import { configure as aiConfigure } from "./commands/ai-config";
78
import { default as start } from "./commands/start";
89
import { default as upgrade } from "./commands/upgrade";
910
import { TemplateManager } from "./TemplateManager";
@@ -103,6 +104,10 @@ export class PromptSession extends BasePromptSession {
103104
await upgrade.upgrade({ skipInstall: true, _: ["upgrade"], $0: "upgrade" });
104105
}
105106

107+
protected async configureAI(): Promise<void> {
108+
aiConfigure();
109+
}
110+
106111
/**
107112
* Get user name and set template's extra configurations if any
108113
* @param projectLibrary to add component to

‎packages/cli/lib/cli.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
add,
55
ADD_COMMAND_NAME,
66
ALL_COMMANDS,
7+
aiConfig,
78
build,
89
config,
910
doc,
@@ -56,6 +57,7 @@ export async function run(args = null) {
5657
.command(list)
5758
.command(upgrade)
5859
.command(mcp)
60+
.command(aiConfig)
5961
.version(false) // disable built-in `yargs.version` to override it with our custom option
6062
.options({
6163
version: {

‎packages/cli/lib/commands/ai-config.ts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { FsFileSystem, GoogleAnalytics, IFileSystem, Util } from "@igniteui/cli-core";
2+
import { ArgumentsCamelCase, CommandModule } from "yargs";
3+
import * as path from "path";
4+
5+
const IGNITEUI_SERVER_KEY = "igniteui-cli";
6+
const IGNITEUI_THEMING_SERVER_KEY = "igniteui-theming";
7+
8+
const igniteuiServer = {
9+
command: "npx",
10+
args: ["-y", "igniteui-cli@next", "mcp"]
11+
};
12+
13+
const igniteuiThemingServer = {
14+
command: "npx",
15+
args: ["-y", "igniteui-theming", "igniteui-theming-mcp"]
16+
};
17+
18+
interface McpServerEntry {
19+
command: string;
20+
args: string[];
21+
}
22+
23+
interface VsCodeMcpConfig {
24+
servers: Record<string, McpServerEntry>;
25+
}
26+
27+
function getConfigPath(): string {
28+
return path.join(process.cwd(), ".vscode", "mcp.json");
29+
}
30+
31+
function readJson<T>(filePath: string, fallback: T, fileSystem: IFileSystem): T {
32+
try {
33+
return JSON.parse(fileSystem.readFile(filePath)) as T;
34+
} catch {
35+
return fallback;
36+
}
37+
}
38+
39+
function writeJson(filePath: string, data: unknown, fileSystem: IFileSystem): void {
40+
fileSystem.writeFile(filePath, JSON.stringify(data, null, 2) + "\n");
41+
}
42+
43+
export function configureMCP(fileSystem: IFileSystem = new FsFileSystem()): void {
44+
const configPath = getConfigPath();
45+
const config = readJson<VsCodeMcpConfig>(configPath, { servers: {} }, fileSystem);
46+
config.servers = config.servers || {};
47+
48+
let modified = false;
49+
if (!config.servers[IGNITEUI_SERVER_KEY]) {
50+
config.servers[IGNITEUI_SERVER_KEY] = igniteuiServer;
51+
modified = true;
52+
}
53+
if (!config.servers[IGNITEUI_THEMING_SERVER_KEY]) {
54+
config.servers[IGNITEUI_THEMING_SERVER_KEY] = igniteuiThemingServer;
55+
modified = true;
56+
}
57+
58+
if (!modified) {
59+
Util.log(` Ignite UI MCP servers already configured in ${configPath}`);
60+
return;
61+
}
62+
writeJson(configPath, config, fileSystem);
63+
Util.log(Util.greenCheck() + ` MCP servers configured in ${configPath}`);
64+
}
65+
66+
export function configure(fileSystem: IFileSystem = new FsFileSystem()): void {
67+
configureMCP(fileSystem);
68+
}
69+
70+
const command: CommandModule = {
71+
command: "ai-config",
72+
describe: "Configure Ignite UI AI tooling (MCP servers)",
73+
builder: (yargs) => yargs.usage(""),
74+
async handler(_argv: ArgumentsCamelCase) {
75+
GoogleAnalytics.post({
76+
t: "screenview",
77+
cd: "MCP"
78+
});
79+
80+
GoogleAnalytics.post({
81+
t: "event",
82+
ec: "$ig ai-config",
83+
ea: "client: vscode"
84+
});
85+
86+
configure();
87+
}
88+
};
89+
90+
export default command;

‎packages/cli/lib/commands/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as add } from "./add";
2+
export { default as aiConfig } from "./ai-config";
23
export { default as build } from "./build";
34
export { default as config } from "./config";
45
export { default as doc } from "./doc";

‎packages/cli/lib/commands/types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const TEST_COMMAND_NAME = "test";
1313
export const LIST_COMMAND_NAME = "list";
1414
export const UPGRADE_COMMAND_NAME = "upgrade-packages";
1515
export const MCP_COMMAND_NAME = "mcp";
16+
export const AI_CONFIG_COMMAND_NAME = "ai-config";
1617

1718
export const ALL_COMMANDS = new Set([
1819
ADD_COMMAND_NAME,
@@ -25,7 +26,8 @@ export const ALL_COMMANDS = new Set([
2526
TEST_COMMAND_NAME,
2627
LIST_COMMAND_NAME,
2728
UPGRADE_COMMAND_NAME,
28-
MCP_COMMAND_NAME
29+
MCP_COMMAND_NAME,
30+
AI_CONFIG_COMMAND_NAME
2931
]);
3032

3133
export interface PositionalArgs {

‎packages/core/prompt/BasePromptSession.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@ export abstract class BasePromptSession {
9898
/** Upgrade packages to use private Infragistics feed */
9999
protected abstract upgradePackages();
100100

101+
/** Configure Ignite UI AI tooling (MCP servers) for the project */
102+
protected abstract configureAI(): Promise<void>;
103+
101104
/**
102105
* Get user name and set template's extra configurations if any
103106
* @param projectLibrary to add component to
@@ -419,6 +422,8 @@ export abstract class BasePromptSession {
419422
}
420423
}
421424

425+
await this.configureAI();
426+
422427
const defaultPort = config.project.defaultPort;
423428
const port = await this.getUserInput({
424429
type: "input",

‎packages/core/util/FileSystem.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ export class FsFileSystem implements IFileSystem {
1919
return fs.readFileSync(filePath).toString();
2020
}
2121
public writeFile(filePath: string, text: string): void {
22+
const dir = path.dirname(filePath);
23+
if (!fs.existsSync(dir)) {
24+
fs.mkdirSync(dir, { recursive: true });
25+
}
2226
fs.writeFileSync(filePath, text);
2327
}
2428
public directoryExists(dirPath: string): boolean {

‎packages/ng-schematics/src/prompt/SchematicsPromptSession.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ export class SchematicsPromptSession extends BasePromptSession {
5858
// TODO?
5959
}
6060

61+
protected async configureAI(): Promise<void> {
62+
// No-op in schematics context
63+
}
64+
6165
protected async upgradePackages() {
6266
this.userAnswers.set("upgradePackages", true);
6367
}

‎spec/acceptance/help-spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ describe("Help command", () => {
2626
upgrade-packages upgrades Ignite UI Packages
2727
mcp Starts the Ignite UI MCP server for AI assistant
2828
integration
29+
ai-config Configure Ignite UI AI tooling (MCP servers)
2930
Options:
3031
-v, --version Show current Ignite UI CLI version [boolean]
3132
-h, --help Show help [boolean]`.replace(/\s/g, "");

0 commit comments

Comments
 (0)