Ignite UI AI 지원 개발

Ignite UI for Angular provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server (igniteui-cli) exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server (igniteui-theming) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (@igniteui/maker-mcp) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: npx igniteui-cli ai-config

The MCP servers and Agent Skills serve different purposes and have different prerequisites:

Component	제공하는 것	Requires Ignite UI installed?
Ignite UI MCP server	Documentation queries, API reference, scaffolding tools	No
Theming MCP server	Design tokens, palette tools, WCAG contrast validation	No
요원 기술	Project-level instruction packages for correct component usage	Yes

You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages.

The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts.

Configure the AI Toolchain

Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use --assistants to choose which coding assistants receive MCP config and --agents to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed.

npx igniteui-cli ai-config

Important

Without a version pin, npx may pull an older CLI version that does not recognize the ai-config subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x.

If ai-config cannot detect the framework from your project files, it prompts you to select one - so the command works even from a project where no Ignite UI package is installed yet.

After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent.

What to Expect

If Ignite UI is not installed in the project:

Note

Ignite UI MCP servers configured for your selected clients No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date.

The MCP servers are ready to use. Skills will be added automatically the next time you run ai-config after installing Ignite UI.

If Ignite UI is installed in the project:

Note

Ignite UI MCP servers configured for your selected clients Agent Skills copied to your selected agents' skills directories

Both the MCP servers and Skills are configured.

Start the Servers

VS Code with GitHub Copilot:

Open .vscode/mcp.json. VS Code displays an inline Start button above each server entry. Click Start for both igniteui and igniteui-theming. Once started, VS Code shows the available tool count next to each server (for example, "13 tools | 1 prompt"). Alternatively, run MCP: List Servers from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), select each server, and choose Start.

Cursor:

Open Settings → MCP, locate the igniteui and igniteui-theming entries, and toggle each one on. Cursor starts each server immediately and displays its tool count.

Claude Code:

Run claude mcp list to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required.

JetBrains AI Assistant:

Open Settings → Tools → AI Assistant → Model Context Protocol (MCP). Click the play icon next to each server entry to start it.

Claude Desktop:

Quit and relaunch Claude Desktop. The servers start automatically on launch.

Install Ignite UI and Add Skills Later

If you ran ai-config without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command:

npm install igniteui-angular
npx igniteui-cli@latest ai-config

The command detects that Skills are now available and copies them. The MCP configuration files for your selected clients are left unchanged (already up-to-date).

The AI Toolchain at a Glance

Ignite UI의 AI 툴체인은 세 개의 독립적으로 사용 가능한 계층으로 구성되어 있습니다. 각 계층은 독립적으로 활성화할 수 있으며; 이 두 장치는 함께 작동하도록 설계되었습니다.

층	제공하는 것	소유자	프레임워크
요원 기술	개발자 소유 명령어 패키지: 가져오기 경로, 컴포넌트 패턴, 의사결정 흐름, 프로젝트 관례	개발자	Angular, React, Web Components, Blazor
CLI MCP server (igniteui-cli)	프로젝트 스캐폴딩, 컴포넌트 관리, 문서 작성 및 MCP를 통한 API 쿼리	Infragistics	Angular, React, Web Components, Blazor
Theming MCP server (igniteui-theming)	디자인 토큰, 팔레트 정의, CSS 맞춤 속성 생성, WCAG AA 대비 검증	Infragistics	Angular, React, Web Components, Blazor

CLI MCP 서버와 테마 MCP 서버는 모두 STDIO 전송을 통해 MCP 호환 클라이언트를 통해npx 시작되고 연결됩니다. 에이전트 스킬은 프로젝트 내에 배치된 로컬 파일로, AI 클라이언트가 디스크에서 읽습니다.

요원 기술

에이전트 스킬은 구조화된 개발자 소유 패키지로, AI 코딩 보조원에게 특정 프레임워크에 맞는 Ignite UI 어떻게 사용해야 하는지 정확히 알려줍니다. 스킬 패키지는 구성 요소 패턴, 가져오기 경로, 의사결정 흐름이 포함된 명령어 파일; 권위 있는 Ignite UI 문서 참조, 그리고 스키마 파일이나 다이어그램과 같은 자산을 포함SKILL.md 할 수 있습니다. AI 클라이언트에서 스킬이 활성화되어 있을 때, 에이전트는 일반적인 학습 데이터에 의존하지 않고 스킬을 따릅니다. 일반적인 학습 데이터는 오래된 API 서명을 참조하거나 가져올 경로를 참조할 수 있습니다.

Ignite UI 선박은 Angular, React, Web Components, Blazor 전용 스킬 패키지를 제공합니다. Skill 패키지는 개발자가 소유하고 있습니다: 팀SKILL.md의 관습에 맞게 수정하고, 프로젝트별 패턴을 추가하며, 내부 디자인 시스템을 참조한 뒤, 코드베이스와 함께 패키지를 버전 설정하세요.

전체 설정 지침과 IDE 배선은 Agent Skills를 참조하세요.

CLI MCP Server

The Ignite UI CLI MCP server (igniteui-cli) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session.

The CLI MCP server runs via npx without a global install:

npx -y igniteui-cli mcp

Use ai-config to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see CLI MCP for the full setup guide.

It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.

Theming MCP Server

Ignite UI 테마 MCP 서버(igniteui-theming)는 Ignite UI 테마 엔진을 쿼리 가능한 에이전트 컨텍스트로 노출하는 별도의 MCP 서버입니다. 디자인 토큰 접근, 팔레트 정의, CSS 맞춤 속성 생성, WCAG AA 대비 검증 등을 포함합니다. CLI MCP 서버와 아키텍처적으로 분리되어 있어, 독립적으로 연결되어 AI 에이전트가 테마 도구에 접근할 수 있도록 프로젝트 스캐폴딩 도구를 노출하지 않습니다.

The Theming MCP server starts via npx:

npx -y igniteui-theming igniteui-theming-mcp

테마 MCP 서버는 Angular, React, Web Components, Blazor를 지원합니다. 매 Ignite UI 릴리스마다 업데이트되기 때문에 에이전트는 항상 현재 토큰 표면에 맞춰 작동합니다.

구성 세부 사항은 테마 MCP를 참조하세요.

Supported AI Clients

CLI MCP 서버와 테마 MCP 서버는 STDIO 전송이 지원되는 MCP를 지원하는 모든 에디터나 AI 클라이언트와 함께 작동합니다.

Client	Configuration method
VS Code with GitHub Copilot	.vscode/mcp.json
Cursor	.cursor/mcp.json
Claude Desktop (macOS)	~/Library/Application Support/Claude/claude_desktop_config.json
Claude Desktop (Windows)	%APPDATA%\Claude\claude_desktop_config.json
Claude Code	.mcp.json또는 Claude Code MCP CLI 명령어
JetBrains AI Assistant	**Tools → AI Assistant → Model Context Protocol (MCP)*-

에이전트 스킬은 GitHub Copilot.github/copilot-instructions.md과 호환되며, 커서와 Windsurf.cursorrules를 통해.cursor/rules/ 또는 Windsurf를 통.windsurfrules 해, JetBrains AI Assistant와 프로젝트 레벨 프롬프트 설정을 통해 호환됩니다.

Quick Setup

The ai-config command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use --assistants to choose which coding assistants receive MCP config and --agents to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents.

Angular 회로도 사용:

ng generate @igniteui/angular-schematics:ai-config

This also registers the @angular/cli MCP server alongside the Ignite UI servers for your selected clients.

Ignite UI CLI 사용:

npx igniteui-cli ai-config

Ignite UI CLI가 전역적으로 설치되어 있다면, 짧은 형태를 사용하세요:

ig ai-config

Note

그리고npx igniteui-cli 폼은ig MCP 서버를 등록@angular/cli 하지 않습니다. 세 서버를 한 번에 구성하고 싶다면 위의 Angular Schematics 명령을 사용하세요.

Note

이 명령어는 프로젝트에 Ignite UI 개의 패키지를 설치해야 합니다(npm install). 스킬 파일이 없다면, 패키지가 최신 상태인지 확인하세요.

Step 1 - Load Agent Skills

Copy the Ignite UI Skill package for your framework into your project's agent discovery path.

The Skill package ships with the library in node_modules/igniteui-{framework}/skills/.

Wire it to your IDE using the persistent setup for your client.

See Agent Skills for the complete setup.

Step 2 - Connect the CLI MCP Server

AI 클라이언트 설정 파일에 MCP 서버 항목을 추가igniteui-cli 하세요. 클라이언트에 맞는 JSON 구조를 사용하세요:

VS Code (.vscode/mcp.json):

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

Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:

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

VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains 및 기타 MCP 호환 클라이언트를 포함한 전체 설정 가이드는 CLI MCP를 참조하세요.

Step 3 - Connect the Theming MCP Server (optional)

동일한 MCP 구성 파일에 항목을 추가하고, 다음과igniteui-theming 함께 다음을 추가igniteui-cli 하세요:

VS Code (.vscode/mcp.json):

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

Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:

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

구성 세부사항과 테마 작업 흐름은 테마 MCP를 참조하세요.

Additional Resources

• Agent Skills
• Ignite UI CLI MCP
• Ignite UI Theming MCP

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular