Ignite UI MCP Server

Ignite UI CLI

快速创建适用于各种框架的项目，包括 Ignite UI for Angular 和 Ignite UI for Web Components。

概述

功能：

• 创建项目结构
• 添加包含 Ignite UI 组件的视图（例如 Combo、Grid 或 Chart）
• 添加包含多个组件的场景模板（例如仪表板）
• 构建并安装 npm 包
• 选择主题，即将支持自定义主题
• 分步指南

支持的框架

• Angular
• React
• Web Components
• Blazor
• jQuery

前置条件

该仓库包含多个包，并通过 lerna 和 yarn workspaces 协调这些包的构建与发布。

要在本地构建该仓库，需要在计算机上安装 yarn。 有关安装说明，请访问其官方页面

软件包

该 monorepo 包含多个组合成 igniteui-cli 的软件包：

Package	Description	Location
@igniteui/cli-core	包含 CLI 工具的核心功能	packages/core
@igniteui/angular-templates	包含 Angular 组件的模板定义	packages/igx-templates
@igniteui/angular-schematics	IgniteUI CLI 实现，可与 Angular CLI 的 schematics 引擎配合使用	packages/ng-schematics
igniteui-cli	适用于 React、Blazor、Angular、jQuery 和 Web Components 的独立 IgniteUI CLI 工具	packages/cli
@igniteui/mcp-server	MCP 服务，为 AI 助手提供 Ignite UI 文档和 API 参考	packages/igniteui-mcp/igniteui-doc-mcp

目录

• 安装
• 用法
  • 分步指南
  • 列出可用命令
  • 生成项目并添加组件
    • 生成 Ignite UI for Angular 项目
    • 生成 Ignite UI for React 项目
    • 添加组件
  • 构建和运行
• 配置 AI 工具
• MCP 服务
  • 与 AI 助手配合使用
  • 使用 MCP Inspector 测试
• Schematics
  • Schematic 定义
• 贡献

安装

将 npm 包安装为全局模块：

npm install -g igniteui-cli

用法

主入口为 igniteui，也可使用别名 ig。两者可以互换使用，以调用可用命令。更多详情请参阅我们的 Wiki 文档。

分步操作

若要通过引导了解可用选项，只需运行：

ig

创建完成后，项目会自动在默认浏览器中加载。 注意：如果没有自动加载，可能是端口已被占用。不同项目类型使用的端口有所不同，默认端口详情请参阅 ig start 命令说明。

列出可用命令。

ig help

生成项目和添加组件

创建新项目时，传入名称、框架和样式主题。

ig new <project name> --framework=<framework> --type=<proj-type> --theme=<theme>

这将创建项目并安装所需依赖项。

除名称外，其他参数均为可选。默认框架为 "angular"，项目类型默认为该框架下的第一个可用类型，主题默认为该项目下的第一个可用主题。更多信息请访问 ig new Wiki 页面。

生成 Ignite UI for Angular 项目

若要使用 Ignite UI for Angular 创建新项目，请使用 ig new，指定 angular 作为框架，并可选择指定 igx-ts 作为项目类型，同时选择一个项目模板：

ig new "IG Project" --framework=angular --type=igx-ts --template=side-nav

生成 Ignite UI for React 项目

若要使用 Ignite UI for React 创建新项目，请使用 ig new，指定 react 作为框架，并指定 igr-ts 作为项目类型：

ig new "IG Project" --framework=react --type=igr-ts

生成 Ignite UI for Web Components 项目

若要使用 Ignite UI for Web Components 创建新项目，请使用 ig new，指定 webcomponents 作为框架：

ig new "IG Project" --framework=webcomponents

添加组件

创建项目后，随时可以使用 ig add 添加其他组件模板。不带参数运行该命令，将引导你浏览可用模板：

ig add

添加新组件或模板时，传入组件 ID 并选择名称。

ig add <component/template> <component_name>

ID 对应某个组件（如 "grid"、"combo"、"text-editor" 等）或预定义模板。预定义模板因框架和项目而异，可提供包含多个组件的预定义视图，也可满足特定用例，例如 "form-validation"、"master-detail" 等。

若要查看当前项目支持的完整模板列表，只需运行 ig list 命令：

ig list

构建和运行

ig build
ig start

配置 AI 工具

Ignite UI 提供丰富的 AI 辅助开发工具链。若要配置 Ignite UI AI 工具（MCP 服务和 AI 编码技能），请运行：

ig ai-config

系统会提示你进行两项选择：

• AI Agent — 为哪些工具生成技能和指令文件（默认选择 Generic 和 Claude）
• 编码助手 — 为哪些助手配置 MCP 服务（默认选择通用 .mcp.json，兼容 Claude Code、VS Code 等）

你也可以直接传入选项：

ig ai-config --agents claude copilot generic --assistants vscode cursor

此操作会创建或更新特定于助手的 MCP 配置文件（例如 .mcp.json、.vscode/mcp.json、.cursor/mcp.json），其中包含 Ignite UI MCP 和 igniteui-theming MCP 服务的条目（保留现有服务）；还会从已安装的 Ignite UI 软件包复制 AI 编码技能文件，并生成特定于 Agent 的指令文件（例如 CLAUDE.md、AGENTS.md）。

ig new 命令也会在创建项目时提示你配置 AI 工具。

MCP 服务

CLI 内置了 MCP (Model Context Protocol) 服务，可为 AI 助手提供 Ignite UI 文档搜索、API 参考查询，以及 Angular、React、Blazor 和 Web Components 的脚手架指导。

启动 MCP 服务：

ig mcp

该服务通过 stdio 运行，并支持以下选项：

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

与 AI 助手搭配使用

对于 VS Code，ig ai-config 命令会自动处理配置（见上文）。对于其他 MCP 客户端（例如 Claude Desktop、Cursor），请手动配置：

{
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

MCP 服务向 AI 助手提供以下工具：

工具	描述
list_components	列出可用的 Ignite UI 组件文档。可按框架筛选，并可选地根据文件名、组件名称、关键词或摘要进行关键词匹配。
get_doc	按名称返回特定组件文档的完整 Markdown 内容（例如，grid-editing、accordion）。
search_docs	在指定框架的 Ignite UI 文档中进行全文搜索。支持前缀匹配（例如，grid*）。
search_api	按关键词、功能名称或部分组件名称搜索 Ignite UI API 条目。
get_api_reference	按准确名称返回特定 Ignite UI 组件或类的完整 API 参考。
get_project_setup_guide	返回创建新 Ignite UI 项目的设置指南。对于 Angular/React/Web Components：CLI 脚手架说明。对于 Blazor：dotnet new + NuGet 设置指南。

使用 MCP Inspector 进行测试

交互式测试和调试 MCP 服务工具：

npx @modelcontextprotocol/inspector ig mcp

Schematics

你也可以使用 igniteui/angular-schematics 包，将 Ignite UI for Angular 组件添加到项目中。该包包含了 igniteui-cli 中大部分逻辑对应的 schematic 定义。这些定义可在任何现有的 Angular 项目中调用，也可在创建新项目时调用。你可以在其 readme 中了解有关 schematics 包的更多信息。

贡献

请参阅贡献指南以开始参与。

在本地运行

1. 克隆仓库

2. 使用 yarn install 安装依赖

3. 构建 MCP 服务并将其打包到 CLI 中：

   cd packages/igniteui-mcp/igniteui-doc-mcp
   npm install
   npm run build
   cd ../../..
   npm run build:mcp
   

4. 构建 monorepo 包：npm run build

5. 在 Visual Studio Code 中打开

   根目录中有适用于 VS Code 的预定义 launch.config 文件，因此你可以使用 VS Code 的 View/Debug 窗口，并选择一个预定义操作。这些操作包括启动分步指南、为特定框架创建新项目或添加组件。

6. 按下 Start Debugging/F5

模板冒烟测试

scripts/smoke-test.sh 会端到端运行本地构建的 CLI：搭建项目、向其中添加每个组件模板、安装并构建。spec/ 下的 Jasmine 规格会替换 PackageManager.installPackages，因此它们只验证文件是否写入磁盘，不验证最终结果能否安装或编译——此脚本正是为了弥补这一空缺。

npm run build                 # required: the script runs your local build, not the published CLI
scripts/smoke-test.sh         # angular, react and webcomponents (~20-30 min)

选项：

选项	含义
-f, --frameworks LIST	逗号分隔；默认值为 angular,react,webcomponents
-p, --project ID	要搭建的项目模板（默认为该框架自己的默认模板）
--all-projects	搭建并构建每个项目模板，跳过组件添加
--templates LIST	仅使用这些组件模板 ID——迭代时的快速路径
--isolate	每个组件模板使用一个项目；速度较慢，用于二分定位故障
--skip-build	仅搭建和添加
--keep	即使全部通过，也保留生成的项目
-o, --out DIR	工作目录（默认值为 output/smoke，该目录已加入 gitignore）——每次运行都会清空，见下文
-j, --jobs N	并行运行的框架数（默认值为 1）

scripts/smoke-test.sh -f angular --templates grid,combo    # quick check, ~2 min
scripts/smoke-test.sh -f angular --all-projects            # every Angular project template
scripts/smoke-test.sh -f webcomponents --isolate           # bisect which template broke

每个步骤的日志会写入 <out>/logs/，而 <out>/results.tsv 是机器可读的 framework / step / template / status / seconds 表格。只要有任何步骤失败，脚本就会以非零状态码退出，并打印失败摘要。

每次运行都会删除并重新创建工作目录，因此脚本拒绝操作无法确认归其所有的目录：文件系统根目录、你的主目录、仓库或任何包含仓库的目录，以及既没有它创建的 .smoke-test-workdir 标记文件、也没有先前运行生成的 results.tsv 的非空目录。如果遇到这种情况，请将 --out 指向其他位置，或自行删除该目录。

修改脚本时需注意两点：

• 所有 ig 调用都必须在 npm install 之前完成。 packages/cli/bin/execute.js 只要在当前目录中解析到 node_modules/igniteui-cli，就会将调用委托给它；而每个项目模板都将 igniteui-cli 列为 devDependency——因此，生成的项目一旦安装完成，ig add 就会悄悄切换到已发布的 CLI 及其捆绑模板。使用 --skip-install 搭建项目，可以避免 PackageManager.queuePackage 启动安装，这样依赖会写入 package.json，并在最后统一安装。
• 退出码并不足以判断结果。 Util.error 会记录错误并返回，但不会设置退出码，因此 ig add does-not-exist x 会以 0 退出。每个步骤都会根据退出码、日志错误扫描结果以及产物检查综合判定。

jQuery 和 Blazor 需通过 -f 显式选择。jQuery 没有构建脚本，且其 13 个模板会从 Infragistics ProGet 源获取 ignite-ui-full，这需要凭据；Blazor 需要 .NET SDK，且没有组件模板，因此只会运行 dotnet build。

MCP 服务开发

packages/igniteui-mcp/igniteui-doc-mcp 中的 MCP 服务有独立于 monorepo 的构建流程。它使用 ESM（ES2022、Node16 模块），而 monorepo 的其余部分使用 CommonJS。完整的 MCP 服务开发指南请参阅 开发指南。

构建 MCP 服务：

cd packages/igniteui-mcp/igniteui-doc-mcp
npm install          # Install MCP-specific dependencies (separate from yarn workspaces)
npm run build        # Compile TypeScript + copy SQLite DB to dist/

构建 API 参考文档：

MCP 服务包含 Angular、React 和 Web Components 的 API 参考文档。Angular 和 Web Components 的文档通过 TypeDoc 从框架子模块生成（构建脚本会自动初始化子模块）。React 使用的是已构建的 TypeDoc JSON 模型，该模型已提交到 git。

cd packages/igniteui-mcp/igniteui-doc-mcp
npm run build:docs:angular         # Angular: init submodule → TypeDoc → markdown + index.json
npm run build:docs:webcomponents   # Web Components: init submodule → build lib → TypeDoc → markdown + index.json
npm run build:docs:all             # Build both

**注意：**运行 TypeDoc 之前，Web Components 需要先构建一次库（在子模块中运行 npm run build:publish）。构建脚本会自动处理此步骤。

构建 MCP 服务（在仓库根目录中运行）：

npm run build:mcp    # Compiles MCP server TypeScript and copies SQLite DB into dist/

在本地测试 MCP 服务：

npm run build:mcp
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

构建包含捆绑 MCP 服务的 CLI 包

CLI 包将 MCP 服务作为捆绑的构建产物（而非 npm 依赖项）。要生成具备完整 MCP 功能的 CLI 包，请按照以下步骤操作：

# 1. Install monorepo dependencies
yarn install

# 2. Build the MCP server
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)
cd ../../..
npm run build:mcp                      # Build MCP server

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

完成第 5 步后，在仓库根目录或 packages/cli/ 中运行 npm pack，即可生成包含 MCP 服务、文档数据库和 API 参考文档的压缩包。

**跳过 API 文档：**如果跳过第 3 步，MCP 服务仍可使用捆绑的 SQLite 数据库提供 list_components、get_doc、search_docs 和 get_project_setup_guide 工具。只有 get_api_reference 和 search_api 工具需要 API 文档。

数据收集

Ignite UI CLI 工具使用 Google Analytics 匿名报告功能使用统计数据和基本崩溃报告。这些数据用于帮助持续改进 Ignite UI CLI 工具。你可以在发送任何数据之前选择退出分析，只需在使用 CLI 时运行

ig config set disableAnalytics true -g

即可。你可以在 https://www.infragistics.com/legal/privacy 阅读 Infragistics 隐私政策。