Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 17 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
[![npm version](https://badge.fury.io/js/igniteui-cli.svg)](https://badge.fury.io/js/igniteui-cli)
[![Discord](https://img.shields.io/discord/836634487483269200?logo=discord&logoColor=ffffff)](https://discord.gg/39MjrTRqds)

Quickly create projects including [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular) and [Ignite UI for jQuery](https://www.infragistics.com/products/ignite-ui) components for a variety of frameworks.
Quickly create projects including [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular), [Ignite UI for React](https://www.infragistics.com/products/ignite-ui-react), [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components) and [Ignite UI for jQuery](https://www.infragistics.com/products/ignite-ui) components.

## Overview
### Features:
Expand All @@ -19,9 +19,10 @@ Quickly create projects including [Ignite UI for Angular](https://www.infragisti
- Step by step guide

### Supported frameworks
* jQuery
* Angular
* React
* Web Components
* jQuery

### Prerequisites
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/).
Expand Down Expand Up @@ -95,7 +96,7 @@ ig new <project name> --framework=<framework> --type=<proj-type> --theme=<theme>
```
This will create the project and will install the needed dependencies.

Parameters besides name are optional. Framework default to "jquery", project type defaults to the first available in the framework and theme to the first available for the project. For more information visit [ig new](https://github.com/IgniteUI/igniteui-cli/wiki/New) Wiki page.
Parameters besides name are optional. Framework defaults to "jquery", project type defaults to the first available in the framework and theme to the first available for the project. For more information visit [ig new](https://github.com/IgniteUI/igniteui-cli/wiki/New) Wiki page.

#### Generate Ignite UI for Angular project

Expand Down Expand Up @@ -180,7 +181,7 @@ The MCP server exposes the following tools to AI assistants:
| `search_docs` | Full-text search across Ignite UI documentation |
| `get_api_reference` | Retrieve the full API reference for a component or class |
| `search_api` | Search API entries by keyword or partial component name |
| `generate_ignite_app` | Return a setup guide for a new Ignite UI project |
| `get_project_setup_guide` | Return a setup guide for a new Ignite UI project |

### Testing with MCP Inspector

Expand All @@ -190,7 +191,7 @@ npx @modelcontextprotocol/inspector ig mcp
```

## Schematics
You can also add `Ignite UI for Angular` components to your projects by using the `igniteui/angular-schematics` package. It included schematic definitions for most of the logic present in the [`igniteui-cli`](/packages/cli). These can be called in any existing Angular project or even when creating one. You can learn more about the schematics package on from its [readme](/package/ng-schematics).
You can also add `Ignite UI for Angular` components to your projects by using the `@igniteui/angular-schematics` package. It includes schematic definitions for most of the logic present in the [`igniteui-cli`](/packages/cli), as well as an Architect Builder for starting the MCP server via `ng run <project>:mcp`. These can be called in any existing Angular project or even when creating one. You can learn more about the schematics package from its [readme](/packages/ng-schematics).

## Contribution

Expand All @@ -199,20 +200,12 @@ See the [Contribution guide](https://github.com/IgniteUI/igniteui-cli/blob/maste
### Run locally
1. Clone the repository
2. Install dependencies with `yarn install`
3. Build the MCP server and bundle it into the CLI:
```bash
cd packages/igniteui-mcp/igniteui-doc-mcp
npm install
npm run build
cd ../../..
npm run build:mcp-bundle
```
4. Build the monorepo packages: `npm run build`
5. Open in Visual Studio Code
3. Build the monorepo packages (includes MCP server): `npm run build`
4. Open in Visual Studio Code

There is a predefined launch.config file for VS Code in the root folder, so you can use VS Code View/Debug window and choose one of the predefined actions. These include launching the step by step guide, create new project for a particular framework or add components.
There is a predefined `.vscode/launch.json` file for VS Code, so you can use VS Code View/Debug window and choose one of the predefined actions. These include launching the step by step guide, create new project for a particular framework or add components.

6. Hit Start Debugging/F5
5. Hit Start Debugging/F5

#### MCP Server development

Expand All @@ -238,55 +231,38 @@ npm run build:docs:all # Build both

> **Note:** Web Components requires a one-time library build (`npm run build:publish` in the submodule) before TypeDoc can run. The build script handles this automatically.

**Bundle MCP into CLI** (from the repo root):
```bash
npm run build:mcp-bundle # Copies dist/ and docs/ into packages/cli/mcp/
```

This copies the compiled MCP server, SQLite documentation database, and API reference docs into the CLI package. The `packages/cli/mcp/` directory is a build artifact (gitignored) and must be regenerated before publishing.

**Test the MCP server locally:**
```bash
npm run build:mcp-bundle
npm run build
node packages/cli/lib/cli.js mcp # Start via CLI
# or directly:
node packages/cli/mcp/dist/index.js # Start the bundled server
```

#### Building CLI package with bundled MCP server
#### Building CLI package with MCP server

The CLI package includes the MCP server as a bundled build artifact (not an npm dependency). To produce a complete CLI package with full MCP functionality, follow these steps:
The CLI package depends on `@igniteui/mcp-server` as an npm dependency. To produce a complete CLI package with full MCP functionality, follow these steps:

```bash
# 1. Install monorepo dependencies
yarn install

# 2. Build the MCP server
# 2. Build API reference docs (optional but recommended for full functionality)
cd packages/igniteui-mcp/igniteui-doc-mcp
npm install
npm run build # Compile TypeScript + copy SQLite DB

# 3. Build API reference docs (optional but recommended for full functionality)
npm run build:docs:all # Init submodules + generate Angular + WC API docs via TypeDoc

# 4. Bundle MCP into CLI (from repo root)
# 3. Build all packages for publishing (from repo root)
cd ../../..
npm run build:mcp-bundle # Copy dist/ + docs/ → packages/cli/mcp/

# 5. Build all packages for publishing
npm run build-pack
```

After step 5, `npm pack` from the repo root or `packages/cli/` will produce a tarball with the MCP server, documentation database, and API reference docs all included.
After step 3, `npm pack` from the repo root or `packages/cli/` will produce a tarball with the MCP server, documentation database, and API reference docs all included.

> **Skipping API docs:** If you skip step 3, the MCP server will still work for `list_components`, `get_doc`, `search_docs`, and `generate_ignite_app` tools using the bundled SQLite database. Only the `get_api_reference` and `search_api` tools require API docs.
> **Skipping API docs:** If you skip step 2, the MCP server will still work for `list_components`, `get_doc`, `search_docs`, and `get_project_setup_guide` tools using the bundled SQLite database. Only the `get_api_reference` and `search_api` tools require API docs.

## Data Collection

The Ignite UI CLI tool uses Google Analytics to anonymously report feature usage statistics and basic crash reports. This data is used to help improve the Ignite UI CLI tools over time. You can opt out of analytics before any data is sent by using

```bach
```bash
ig config set disableAnalytics true -g
```

Expand Down
19 changes: 18 additions & 1 deletion packages/ng-schematics/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,21 @@ ng g @igniteui/angular-schematics:component [templateId] [componentName]
```

You can find all of the template definitions in the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/component-templates.html)


## MCP Server

The package includes an Architect Builder that starts the [Ignite UI MCP server](../igniteui-mcp/igniteui-doc-mcp) for AI assistant integration. The `mcp` target is automatically registered in `angular.json` when you create a new project or run `ng add`.

```bash
ng run <project>:mcp
```

Options:

- `--remote <url>` — Use a remote backend instead of the local SQLite database
- `--debug` — Enable debug logging to `mcp-server.log`

```bash
ng run my-app:mcp --remote https://your-backend-url.com
ng run my-app:mcp --debug
```
3 changes: 3 additions & 0 deletions packages/ng-schematics/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,14 @@
"author": "",
"license": "MIT",
"schematics": "./src/collection.json",
"builders": "./src/builders.json",
"dependencies": {
"@angular-devkit/architect": "^0.2102.0",
"@angular-devkit/core": "^21.0.0",
"@angular-devkit/schematics": "^21.0.0",
"@igniteui/angular-templates": "~21.1.1500-rc.0",
"@igniteui/cli-core": "~15.0.0-rc.0",
"@igniteui/mcp-server": "~15.0.0-rc.0",
"@schematics/angular": "^21.0.0",
"minimatch": "^10.0.1",
"rxjs": "~7.8.1"
Expand Down
9 changes: 9 additions & 0 deletions packages/ng-schematics/src/builders.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"builders": {
"mcp": {
"implementation": "./builders/mcp/index",
"schema": "./builders/mcp/schema.json",
"description": "Starts the Ignite UI MCP server for AI assistant integration"
}
}
}
38 changes: 38 additions & 0 deletions packages/ng-schematics/src/builders/mcp/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as fs from "fs";
import * as path from "path";
import { spawnSync } from "child_process";
import { createBuilder, BuilderContext, BuilderOutput } from "@angular-devkit/architect";
import { McpOptions } from "../../mcp/schema";

export default createBuilder<McpOptions>((options: McpOptions, context: BuilderContext): BuilderOutput => {
let mcpEntry: string;
try {
const mcpPkgJson = require.resolve("@igniteui/mcp-server/package.json");
mcpEntry = path.resolve(path.dirname(mcpPkgJson), "dist", "index.js");
} catch {
context.logger.error(
"MCP server package not found. Install it first:\n" +
" yarn install\n"
);
return { success: false };
}

if (!fs.existsSync(mcpEntry)) {
context.logger.error(
"MCP server not built. Build it first:\n" +
" npm run build:mcp\n"
);
return { success: false };
}

const args: string[] = [];
if (options.remote) {
args.push("--remote", options.remote);
}
if (options.debug) {
args.push("--debug");
}

spawnSync(process.execPath, [mcpEntry, ...args], { stdio: "inherit" });
return { success: true };
});
15 changes: 15 additions & 0 deletions packages/ng-schematics/src/builders/mcp/schema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"$schema": "http://json-schema.org/draft-07/schema",
"type": "object",
"properties": {
"remote": {
"type": "string",
"description": "Backend URL for remote mode (uses HTTP instead of local SQLite)"
},
"debug": {
"type": "boolean",
"description": "Enable debug logging to mcp-server.log",
"default": false
}
}
}
26 changes: 23 additions & 3 deletions packages/ng-schematics/src/cli-config/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as ts from "typescript";
import { DependencyNotFoundException } from "@angular-devkit/core";
import { DependencyNotFoundException, workspaces } from "@angular-devkit/core";
import { chain, FileDoesNotExistException, Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
import { addClassToBody, FormatSettings, NPM_ANGULAR, resolvePackage, TypeScriptAstTransformer, TypeScriptUtils } from "@igniteui/cli-core";
import { addClassToBody, createWorkspaceHost, FormatSettings, NPM_ANGULAR, resolvePackage, TypeScriptAstTransformer, TypeScriptUtils } from "@igniteui/cli-core";
import { AngularTypeScriptFileUpdate } from "@igniteui/angular-templates";
import { createCliConfig } from "../utils/cli-config";
import { setVirtual } from "../utils/NgFileSystem";
Expand Down Expand Up @@ -157,6 +157,25 @@ export function addAIConfig(): Rule {
};
}

export function addMcpBuilderTarget(): Rule {
return async (tree: Tree) => {
const host = createWorkspaceHost(tree);
const { workspace } = await workspaces.readWorkspace("/", host);

const project = workspace.extensions.defaultProject ?
workspace.projects.get(workspace.extensions.defaultProject as string) :
workspace.projects.values().next().value as workspaces.ProjectDefinition;

if (project && !project.targets.has("mcp")) {
project.targets.set("mcp", {
builder: "@igniteui/angular-schematics:mcp",
options: {}
});
await workspaces.writeWorkspace(workspace, host);
}
};
}

export default function (): Rule {
return (tree: Tree) => {
setVirtual(tree);
Expand All @@ -166,7 +185,8 @@ export default function (): Rule {
importBrowserAnimations(),
createCliConfig(),
displayVersionMismatch(),
addAIConfig()
addAIConfig(),
addMcpBuilderTarget()
]);
};
}
6 changes: 6 additions & 0 deletions packages/ng-schematics/src/collection.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Starts the Ignite UI MCP server for AI assistant integration",
"factory": "./mcp/index",
"schema": "./mcp/schema.json",
"hidden": true
}
}
}
43 changes: 43 additions & 0 deletions packages/ng-schematics/src/mcp/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as fs from "fs";
import * as path from "path";
import { spawnSync } from "child_process";
import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
import { defer } from "rxjs";
import { McpOptions } from "./schema";

export default function(options: McpOptions): Rule {
return (_tree: Tree, _context: SchematicContext) => {
return defer(async () => {
let mcpEntry: string;
try {
const mcpPkgJson = require.resolve("@igniteui/mcp-server/package.json");
mcpEntry = path.resolve(path.dirname(mcpPkgJson), "dist", "index.js");
} catch {
_context.logger.error(
"MCP server package not found. Install it first:\n" +
" yarn install\n"
);
return _tree;
}

if (!fs.existsSync(mcpEntry)) {
_context.logger.error(
"MCP server not built. Build it first:\n" +
" npm run build:mcp\n"
);
return _tree;
}

const args: string[] = [];
if (options.remote) {
args.push("--remote", options.remote);
}
if (options.debug) {
args.push("--debug");
}

spawnSync(process.execPath, [mcpEntry, ...args], { stdio: "inherit" });
return _tree;
});
};
}
17 changes: 17 additions & 0 deletions packages/ng-schematics/src/mcp/schema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "http://json-schema.org/draft-07/schema",
"type": "object",
"properties": {
"remote": {
"type": "string",
"description": "Backend URL for remote mode (uses HTTP instead of local SQLite)",
"alias": "r"
},
"debug": {
"type": "boolean",
"description": "Enable debug logging to mcp-server.log",
"default": false,
"alias": "d"
}
}
}
4 changes: 4 additions & 0 deletions packages/ng-schematics/src/mcp/schema.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface McpOptions {
remote?: string;
debug?: boolean;
}
3 changes: 2 additions & 1 deletion packages/ng-schematics/src/ng-new/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { defer, Observable } from "rxjs";
import { NewProjectOptions } from "../app-projects/schema";
import { SchematicsPromptSession } from "../prompt/SchematicsPromptSession";
import { SchematicsTemplateManager } from "../SchematicsTemplateManager";
import { addAIConfig } from "../cli-config/index";
import { addAIConfig, addMcpBuilderTarget } from "../cli-config/index";
import { setVirtual } from "../utils/NgFileSystem";
import { OptionsSchema } from "./schema";

Expand Down Expand Up @@ -152,6 +152,7 @@ export function newProject(options: OptionsSchema): Rule {
}
},
addAIConfig(),
addMcpBuilderTarget(),
(_tree: Tree, _context: IgxSchematicContext) => {
return move(options.name!);
}
Expand Down
Loading
Loading