Ignite UI CLI MCP

Ignite UI CLI MCP는 모델 컨텍스트 프로토콜 (MCP) 서버로, AI 보조자가 프로젝트를 스캐폴드하고, 기존 앱을 수정하며, 컴포넌트를 생성 및 업데이트하고, Ignite UI for Angular 애플리케이션의 문서 질문에 답변할 수 있도록 합니다. Ignite UI CLI MCP를 에디터, GitHub 저장소, 데스크톱 AI 클라이언트에 연결하고 원하는 것을 설명하세요 - 어시스턴트가 CLI 도구를 대신 사용합니다.

개요

Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP. CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.

권장 설정 경로는 먼저 Ignite UI CLI부터 시작하는 것입니다. 그 경로는 프로젝트를 생성하고, 필요한 패키지를 설치하며, VS Code의 초기 MCP 구성을 작성합니다. 빈 폴더에서 시작해서 어시스턴트가 MCP를 통해 프로젝트를 만들거나, 이미 존재하는 프로젝트에 MCP를 연결할 수도 있습니다.

연결 후 시도해볼 수 있는 예시 프롬프트:

"이 폴더에 새 Ignite UI for Angular 프로젝트를 만들고, 권장 기본값을 사용하며, 샘플 데이터가 담긴 스타터 대시보드 페이지를 추가하세요."

"이 프로젝트에 새 그리드 페이지를 추가하고, 샘플 데이터에 연결하며, 현재 내비게이션 구조를 유지하세요."

"콤보 컴포넌트가 노출하는 속성과 이벤트는 무엇이며, 검색 가능한 드롭다운에 가장 유용한 것은 무엇일까요?"

"기존 프로젝트에 측면 내비게이션 레이아웃을 추가하고 현재 페이지와 경로를 보존하도록 업데이트하세요."

Prerequisites

MCP 서버를 구성하기 전에 다음을 확인하세요:

• Node.js (v18 이상) 설치 - 서버 실행에 사용되는 명령어를 제공합니다npx.
• ​MCP 지원이 가능한 AI 클라이언트- 예를 들어 GitHub Copilot, GitHub Copilot 클라우드 에이전트, 커서, Claude Desktop, Claude Code, 또는 AI Assistant 플러그인이 있는 JetBrains IDE가 있습니다.
• 서버가 처음 시작될 때 패키지 해석을 위한npx 인터넷 접속.
• 다음 시작 지점 중 하나:
  • 새 프로젝트를 위한 빈 폴더
  • Ignite UI CLI로 만든 프로젝트입니다
  • 계속 작업하고 싶은 기존 Ignite UI for Angular 프로젝트입니다

테마 도구를 같은 클라이언트 세션에 사용하고 싶고igniteui-theming 프로젝트에 아직 제공되지 않은 경우, 다음을 실행하세요:

npm install igniteui-theming

Configure Ignite UI CLI MCP for Your AI Client

MCP 서버는 다음과npx 같이 실행됩니다. 패키지에 대한 Node.js과 접근igniteui-cli 외에는 별도의 설치가 필요하지 않습니다.

표준 발사 명령은 다음과 같습니다:

npx -y igniteui-cli mcp

Note

​-y플래그는 서버가 수동 개입 없이 시작할 수 있도록 패키지 다운로드 프롬프트를 자동 확인하도록 알려npx 줍니다.

Choose a setup path

CLI MCP Ignite UI 세 가지 방법으로 시작할 수 있습니다:

추천 - CLI 우선 먼저 Ignite UI CLI 또는 매칭ig new 명령어를 사용npx --package igniteui-cli igniteui new 해 프로젝트를 생성하세요. 이 설정이 가장 쉽습니다. Ignite UI CLI가 프로젝트를 스캐폴드하고 필요한 패키지를 설치하며 VS Code를 자동으로 작성하기.vscode/mcp.json 때문입니다. 그 후에는 생성된 MCP 구성을 검토하고 AI 클라이언트에서 프로젝트를 열기만 하면 됩니다.

빈 폴더 완전히 비어 있는 폴더에서 시작해서 MCP 설정을 수동으로 추가한 후, 채팅으로 프로젝트를 만들어 달라고 어시스턴트에게 요청하세요. 이 경로는 CLI를 직접 실행하는 대신 MCP가 프로젝트 생성 흐름을 처음부터 주도하고 싶을 때 유용합니다.

기존 프로젝트 이미 가지고 있는 프로젝트에 MCP 설정을 추가하고 현재 코드베이스에서 계속 작업하세요. 런(ig ai-config또는ng generate @igniteui/angular-schematics:ai-config Angular 프로젝트의 경우) 에이전트 스킬을 자동으로 작성.vscode/mcp.json 하고 복사하세요. 다른 AI 클라이언트의 경우, 아래 클라이언트별 섹션에서 서버 항목을 복사하세요.

세 경로 모두 동일한 MCP 서버를 사용합니다. 차이점은 프롬프트를 시작하기 전에 프로젝트를 어떻게 준비하느냐에 달려 있습니다:

• ​CLI 우선 경로에서는 Ignite UI CLI가 프로젝트를 생성하고 첫 번째 MCP 구성을 준비합니다
• ​empty-folder 경로에서는 먼저 MCP 구성을 만들고 그 다음에 어시스턴트가 프로젝트를 만들도록 합니다
• ​기존 프로젝트 경로에서 실행ig ai-config 하여 에이전트 스킬을 자동으로 작성.vscode/mcp.json 하고 복사하거나, 다른 클라이언트에 맞게 수동으로 구성을 추가하세요

모든 경우에 MCP 서버가 연결되어 AI 클라이언트에서 보이면, 어시스턴트는 같은 세션에서 계속 작업할 수 있습니다.

CLI를 먼저 사용해 프로젝트를 생성한다면, CLI Ignite UI 다음 두 가지 방식으로 실행할 수 있습니다:

• 글로벌 설치

  npm install -g igniteui-cli
  

  이 명령어는 어떤 터미널 세션에서든 해당 명령을 제공하며ig, 정기적으로 프로젝트를 만들고 스캐폴드를 구축할 계획이라면 가장 명확한 선택입니다.

• 글로벌 설치 없이

  npx --package igniteui-cli igniteui new
  

  이 방법은 전역npx 명령 대신 CLI를 실행합니다ig.

​CLI-first 경로에서는 가이드 모드나 직접 명령어로 프로젝트를 생성할 수 있습니다.

CLI 사용자가 사용 가능한 옵션을 안내해 주길 원할 때는 가이드 모드를 사용하세요:

ig new

Matching npx form:

npx --package igniteui-cli igniteui new

프로젝트 설정을 이미 알고 있다면 직접 명령어를 사용하세요:

ig new my-app --framework=angular --type=igx-ts --template=empty

Matching npx form:

npx ig new my-app --framework=angular --type=igx-ts --template=empty

가이드 모드에서는 프로젝트 이름, 프레임워크, 템플릿, 테마, 컴포넌트 추가나 설정 완료 여부에 대한 CLI 프롬프트를 Ignite UI 합니다. 직접 모드에서는 명령어 자체에서 프레임워크와 지원되는 옵션을 제공합니다.

VS Code

GitHub Copilot in VS Code는 작업 공간 수준의 구성 파일을 통해 MCP 서버를 지원합니다. 프로젝트 루트에서 실행ig ai-config (또는ng generate @igniteui/angular-schematics:ai-config run)하면 이 파일을 자동으로 생성하세요. 수동으로 설정하려면 프로젝트 루트에서 생성하거나 편집.vscode/mcp.json 하세요:

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

만약 CLI Ignite UI로 프로젝트를 먼저 만들었다면, 생성된.vscode/mcp.json 항목을 검토하고 두 항목이 모두 존재하는지 확인하세요.

저장 후 GitHub Copilot 채팅 패널을 열고 에이전트 모드로 전환하면 Ignite UI CLI MCP 도구가 활성화됩니다.

Note

VS Code에서 MCP 지원을 하려면 GitHub Copilot과 VS Code 1.99 이후 버전이 필요합니다.

Cursor

커서는 프로젝트 범위별 MCP 구성을 지원합니다. 프로젝트 루트를 생성하거나 편집.cursor/mcp.json 하세요:

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

서버는 새로운 커서 채팅 세션을 열면 자동으로 자동으로 시작됩니다.

Note

You can also configure MCP servers globally via Settings → MCP in Cursor.

Claude Desktop

서버를 Claude Desktop 설정 파일에 추가하세요:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

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

저장 후 Claude 데스크톱을 재시작하세요. 채팅 입력 영역에 MCP 서버 표시기(슬라이더 아이콘)가 나타나 MCP 도구가 활성화되어 있음을 확인할 수 있습니다.

Claude Code

Claude Code는 CLI와 프로젝트 범위가 부여된.mcp.json 파일을 통해 MCP 서버를 지원합니다. 구성을 팀과 공유하려면 프로젝트 루트에서 생성하거나 편집.mcp.json 하세요:

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

또는 명령줄을 통해 로컬 환경에만 서버를 추가할 수도 있습니다:

claude mcp add igniteui-cli -- npx -y igniteui-cli mcp
claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp

Claude Code 안에 있는/mcp 명령어를 사용해 서버가 연결되어 있는지 확인하세요.

JetBrains IDEs

JetBrains AI 어시스턴트는 IDE 설정을 통해 MCP 서버를 지원합니다:

1. ​설정 (또는 macOS에서는 환경설정)을 열어보세요.

2. Navigate to Tools → AI Assistant → Model Context Protocol (MCP).

3. 추가 +를 클릭하고 JSON 이름으로 선택하거나 폼 필드를 사용하세요.

4. 다음 구성이 등장합니다:

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

5. Click OK and restart the AI Assistant.

Note

MCP 지원은 JetBrains IDE에 AI Assistant 플러그인을 설치하고 활성화해야 합니다.

Other MCP Clients

다른 MCP 호환 클라이언트의 경우, 다음 실행 명령어와 함께 STDIO 전송을 사용하세요:

npx -y igniteui-cli mcp
npx -y igniteui-theming igniteui-theming-mcp

GitHub

GitHub Copilot 클라우드 에이전트는 저장소 수준의 MCP 구성을 지원합니다. 저장소에서:

1. 메인 저장소 페이지를 열어보세요.
2. Click Settings.
3. 사이드바에서 Copilot, 그 다음 Cloud 에이전트로 가세요.
4. ​MCP 설정 섹션에 JSON을 붙여넣으세요.
5. Click Save.

다음과 같은 저장소 구성을 사용하세요:

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

이 설정은 GitHub 클라우드 에이전트가 저장소 컨텍스트에서 동일한 CLI MCP와 테마 MCP 도구를 직접 사용하게 하고 싶을 때 유용합니다.

Available Tools

MCP 서버는 AI가 당신의 프롬프트에 따라 자동으로 사용하는 도구 세트를 공개합니다. 이 도구들을 직접 부르지 않습니다. 채팅에서 원하는 내용을 설명하면 어시스턴트가 적절한 답변을 골라줍니다. 이 표는 시작하기 전에 어떤 제품이 있는지 미리 알 수 있도록 준비되어 있습니다.

현재 매개변수가 포함된 실시간 목록을 얻으려면 다음을 물어보세요:

"Ignite UI CLI MCP는 어떤 도구를 제공하나요?"

다음은 각 도구에 대한 간략한 개요입니다:

Tool	설명
list_components	프레임워크용 컴포넌트 문서 Ignite UI 목록이 제공됩니다. 선택적 키워드 필터(이름, 키워드, 요약에 대한 대문자 구분 없는 서브문자열 매칭)를 허용합니다.
get_doc	kebab-case 이름으로 특정 컴포넌트 문서의 전체 마크다운 콘텐츠를 얻을 수 있습니다(예: ,).grid-editing​combo-overview 코드 샘플, 표, 링크가 포함되어 있습니다.
search_docs	Ignite UI 문서 전체를 통해 프레임워크를 찾으세요. 최대 20개의 순위 결과와 발췌문을 반환합니다.
get_project_setup_guide	특정 프레임워크에서 새 프로젝트를 생성하는 프로젝트 설정 가이드를 반환하며, CLI 단계와 설치 지침을 포함합니다.
search_api	Searches API entries by keyword or component name across Angular, React, Blazor and Web Components.
get_api_reference	Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, Blazor and Web Components.

큰 수준에서 CLI MCP 도구는 다음과 같은 기능을 지원합니다:

• 새로운 프로젝트 만들기
• 기존 프로젝트에서 일하고 있습니다
• 컴포넌트 추가와 수정
• 프로젝트 구조 및 구성 업데이트
• 문서 및 API 관련 질문에 답변하기

Note

프레임워크 감지는 컴포넌트 프리픽스를 사용합니다:for Angular,for React,for Web Components,.for Blazor 어시스턴트는 열린 파일이나 프롬프트 문맥에서 자동으로 올바른 프레임워크를 선택합니다.

테마 서버는 동일한 클라이언트 세션에 스타일링, 테마, 팔레트, 토큰 워크플로우를 추가합니다.

Common Workflows

다음 설정 시나리오는 각 시작 지점을 언제 사용해야 하는지 보여줍니다.

CLI-first setup

가장 빠른 가이드 설정 Ignite UI 원할 때 먼저 CLI로 프로젝트를 생성하고 자동으로 생성해.vscode/mcp.json 주세요.

Example scenarios:

• "먼저 Ignite UI CLI로 새 프로젝트를 만들고, 생성된 프로젝트를 VS 코드로 열고, 거기서 MCP로 계속 진행하고 싶습니다."
• "이미 React 프로젝트를 원한다는 걸 알고 있어서 CLI로 만들고 MCP를 사용해 페이지와 컴포넌트를 추가하고 싶어요."

Empty folder setup

MCP 설정을 직접 추가한 후 어시스턴트가 채팅에서 프로젝트를 만들길 원할 때는 빈 폴더에서 시작하세요.

Example scenarios:

• "완전히 비어 있는 폴더가 있는데, MCP가 연결된 후 어시스턴트가 채팅에서 전체 프로젝트를 만들길 원해요."
• "먼저 CLI Ignite UI 수동으로 실행하고 싶지 않아요. 저는 MCP가 첫 번째 프로젝트 제작 단계를 주도하기를 원합니다."

Existing project setup

현재 코드베이스를 유지하고 싶을 때는 MCP를 기존 프로젝트에 연결하고, 프로젝트 변경, 컴포넌트 작업, 문서 관련 질문에는 어시스턴트를 사용하세요.

Example scenarios:

• "이미 프로젝트가 있어서 MCP만 추가해서 조수가 페이지와 구성 요소를 업데이트하는 걸 도와줄 수 있어."
• "프로젝트는 이미 존재하며, 현재 코드베이스에서 작업하면서 주로 문서와 API 관련 질문을 하고 싶습니다."

Troubleshooting

npx인정받지 못한다

Node.js 현재 터미널 환경에서는 설치되지 않았거나 사용할 수 없습니다. nodejs.org에서 Node.js 설치하고 확인node --version 해 보세요.

ig인정받지 못한다

글로벌ig 명령을 사용하려면 먼저npm install -g igniteui-cli CLI Ignite UI 설치하세요. 글로벌 설치를 원하지 않는다면 양식을npx --package igniteui-cli igniteui ... 사용하세요.

구성 저장 후에는 MCP 도구가 나타나지 않습니다

작업 공간을 다시 불러오거나, 에디터를 다시 열거나, AI 클라이언트를 재시작하세요. 일부 클라이언트는 새로운 MCP 구성 파일을 감지하기 위해 전체 재시작이 필요합니다.

한 서버가 시작되지 않음

구성 내용이 예시와 정확히 일치하는지 확인하며, 키명과 인수 순서도 포함합니다.

프로젝트는 만들어졌지만, MCP 구성은 VS Code에서만 사용할 수 있습니다

Ignite UI CLI는 CLI 우선 경로에 대해 기록합니다.vscode/mcp.json. Cursor, Claude Desktop, Claude Code, JetBrains, GitHub 또는 다른 MCP 클라이언트를 사용 중이라면, 동일한 서버 항목을 해당 클라이언트의 구성 형식과 위치에 복사하세요.

어시스턴트가 잘못된 폴더에서 작업하거나 프로젝트 파일을 찾지 못하고 있습니다

AI 클라이언트가 프로젝트 루트를 향하도록 하세요. 에디터 기반 클라이언트를 사용 중이라면, 프로젝트 루트 폴더를 열어보세요. 데스크톱 또는 채팅 우선 클라이언트를 사용 중이라면, 세션 컨텍스트로 올바른 프로젝트 폴더를 제공하세요.

빈 폴더 설정이 기대한 대로 작동하지 않습니다

시작하기 전에 폴더가 실제로 비어 있는지 확인하세요. 폴더에 이미 프로젝트 파일이 있다면, 새로운 빈 작업 공간으로 취급하지 말고 기존 프로젝트 경로를 사용하세요.

GitHub MCP 설정이 거부되었습니다

JSON이 구조를 사용mcpServers 하는지, 각 로컬 서버 항목이type 포함되는지,command, 그리고args 포함되는지 검증하세요. 필드를tools 포함할 경우, 유효한 공구 이름을 사용하세요["*"].

Additional Resources

• Ignite UI AI 지원 개발
• Ignite UI for Angular Skills
• Ignite UI Theming MCP

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

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