mcp-setup.md

Setting Up the Ignite UI CLI MCP Server

Part of the igniteui-angular-components skill hub.

Contents

• VS Code
• Cursor
• Claude Desktop
• WebStorm / JetBrains IDEs
• Verifying the Setup

The Ignite UI CLI MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.

VS Code

Create or edit .vscode/mcp.json in your project:

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

This works whether igniteui-cli is installed locally in node_modules or needs to be pulled from the npm registry — npx -y handles both cases.

Cursor

Create or edit .cursor/mcp.json:

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

Claude Desktop

Edit the Claude Desktop config file:

• 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@next", "mcp"]
    }
  }
}

WebStorm / JetBrains IDEs

1. Go to Settings → Tools → AI Assistant → MCP Servers
2. Click + Add MCP Server
3. Set Command to npx and Arguments to igniteui-cli@next mcp
4. Click OK and restart the AI Assistant

Verifying the Setup

After configuring the MCP server, ask your AI assistant:

"List all available Ignite UI components"

If the MCP server is running, the list_components tool will return all available components for the detected framework.