feat: add comprehensive MCP server implementation with enhanced tools and multi-framework support #1447
Conversation
Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
|
@copilot Before testing the changes, the solution seems clear and concise! Both mcp servers will work together and will complement the mcp server of Angular CLI (https://angular.dev/ai/mcp), by adding ignite ui components and configurations. Is it suggested to add additional functionalities in the @igniteui/cli and @igniteui/angular-schematics mcp servers that will use internally the angular-cli server mcp tools or configuring them angular-cli and igniteui-cli together is enough. Don't do any changes for now, just give some suggestions. |
Great question! Here are my suggestions for potential integration between the Ignite UI CLI MCP server and Angular CLI MCP server: Configuration Approach (Recommended)Configure both servers together is the cleanest approach. Users would have both in their MCP host config: {
"mcpServers": {
"angular-cli": {
"command": "npx",
"args": ["-y", "@angular/cli", "mcp"]
},
"igniteui-cli": {
"command": "npx",
"args": ["-y", "igniteui-cli", "mcp"]
}
}
}This allows AI assistants to:
Potential Internal Integration EnhancementsIf you want tighter integration, here are some suggestions: 1. Wrapper Tools for Angular OperationsAdd tools that delegate to Angular CLI for common workflows:
2. Enhanced Component Tools
3. Project Analysis Tools
4. Documentation/Example Tools
My RecommendationStart with separate configuration (current approach). This:
Consider adding internal integration later only if you see common workflow patterns that would benefit from it. For example, if users frequently need to:
You could add a single The current implementation is solid and follows MCP best practices. Integration can evolve based on user feedback. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot, the suggestions are great! Let's keep them exactly as they are and add some more suggestions for tools regarding the following matter. @igniteui/cli and @igniteui/angular-schematics are both made to work with https://github.com/IgniteUI/igniteui-angular product. On the other hand, @igniteui/cli is also working with other TypeScript libraries of Infragistics, like https://github.com/IgniteUI/igniteui-webcomponents for WebComponents and https://github.com/IgniteUI/igniteui-react for React. Should we create mcp server for those libraries or just use the @igniteui/cli and @igniteui/angular-schematics mcp servers for that purpose? What should those MCP tools be? One example can be to list each library component? To have a documentation (something already suggested)? |
Excellent question about supporting the WebComponents and React libraries! Here's my analysis and recommendations: MCP Server StrategyRecommendation: Use Existing @igniteui/cli MCP ServerNo need for separate MCP servers for WebComponents and React. The current
Current Architecture (Already Supporting All)Suggested Additional ToolsHere are framework-specific tools to add that would enhance the MCP server: 1. Component Documentation Tools// Get detailed documentation for a specific component
ig_get_component_docs
Parameters:
- framework: "angular" | "react" | "webcomponents"
- component: "grid" | "combo" | "chart" | etc.
Returns: {
description,
apiReference,
examples,
properties,
methods,
events
}
// Search documentation
ig_search_docs
Parameters:
- framework: string
- query: string
- category?: "components" | "api" | "guides"
Returns: Array of relevant doc links/snippets2. Component Discovery Tools// List components by category/feature
ig_list_components_by_category
Parameters:
- framework: string
- category?: "grids" | "charts" | "inputs" | "layouts" | "navigation"
Returns: Categorized component list with descriptions
// Find component by use case
ig_find_component_for_usecase
Parameters:
- framework: string
- usecase: "data table" | "hierarchical data" | "date picker" | etc.
Returns: Recommended components with rationale3. Framework-Specific Best Practices// Get best practices for specific framework
ig_get_best_practices
Parameters:
- framework: string
- topic?: "performance" | "theming" | "data-binding" | "accessibility"
Returns: Framework-specific guidelines
// Check component compatibility
ig_check_compatibility
Parameters:
- framework: string
- frameworkVersion?: string
- igniteUIVersion?: string
Returns: Compatibility matrix and warnings4. Code Examples Tool// Get code examples for component
ig_get_code_example
Parameters:
- framework: string
- component: string
- scenario?: "basic" | "advanced" | "data-binding" | "styling"
Returns: Code snippets with explanations
// List available examples
ig_list_examples
Parameters:
- framework: string
- component?: string
Returns: Available code examples by category5. Migration/Upgrade Tools// Get migration guide
ig_get_migration_guide
Parameters:
- framework: string
- fromVersion: string
- toVersion: string
Returns: Breaking changes, migration steps, deprecation warnings
// Analyze project for upgrade readiness
ig_analyze_upgrade_readiness
Parameters:
- targetVersion: string
Returns: List of issues, required changes, risk assessment6. Theme/Styling Tools// List available themes
ig_list_themes
Parameters:
- framework: string
Returns: Available themes with previews/descriptions
// Get theming guide
ig_get_theming_guide
Parameters:
- framework: string
- theme?: string
Returns: Customization instructions, CSS variables, examplesImplementation PriorityHigh Priority (Most valuable for AI assistants):
Medium Priority: Lower Priority (Can be added later): Current vs. Enhanced ArchitectureCurrent (Good baseline): Enhanced (Recommended additions): This approach leverages the existing multi-framework CLI infrastructure while adding documentation and discovery tools that make the MCP server much more useful for AI assistants working across all Infragistics TypeScript libraries. |
|
@copilot, those tools are great additions to the MCP! Let's continue with the plan and not apply any changes yet. Let's go back to the fundamental principles of any MCP server, as stated in the official documentation, and suggest any additional changes that can be made in the @igniteui/cli and @igniteui/angular-schematics MCP servers. Here are the principles:
|
Excellent point about the three core MCP primitives! Here's my analysis of the current implementation and suggestions for each primitive: Current State AnalysisCurrently Implemented:
Not Yet Implemented:
Suggested Additions by Primitive1. Resources (High Priority)Resources provide contextual information to AI applications. Here's what should be added: @igniteui/cli Resources// Project configuration resource
resource://igniteui-project/config
Returns: Current project's ignite-ui-cli.json configuration
// Available components catalog
resource://igniteui-components/{framework}
Returns: Full component catalog with metadata for framework
// Template library
resource://igniteui-templates/{framework}/{projectType}
Returns: Available templates, their files, and structure
// Package versions
resource://igniteui-packages/versions
Returns: Current installed versions vs. latest available
// Project structure
resource://igniteui-project/structure
Returns: Directory tree of current project with Ignite UI components@igniteui/angular-schematics Resources// Angular workspace info
resource://igniteui-ng/workspace
Returns: Angular workspace configuration, projects, paths
// Component registry
resource://igniteui-ng/components/installed
Returns: List of Ignite UI components already in the project
// Module registry
resource://igniteui-ng/modules
Returns: Available Angular modules where components can be added
// Routing configuration
resource://igniteui-ng/routes
Returns: Current routing configuration2. Prompts (Medium Priority)Prompts help structure interactions with language models. Suggested prompts: @igniteui/cli Prompts// Project creation prompt
prompt://igniteui/create-project
Template: Guide through project creation with framework selection
// Component selection prompt
prompt://igniteui/choose-component
Template: Help select appropriate component for use case
// Troubleshooting prompt
prompt://igniteui/troubleshoot
Template: Debug common issues with projects
// Best practices prompt
prompt://igniteui/best-practices/{framework}
Template: Framework-specific coding standards@igniteui/angular-schematics Prompts// Angular setup prompt
prompt://igniteui-ng/setup-angular-project
Template: Complete setup workflow for new Angular + Ignite UI project
// Component scaffolding prompt
prompt://igniteui-ng/scaffold-component
Template: Step-by-step component addition with routing
// Migration prompt
prompt://igniteui-ng/migrate-version
Template: Guide through version migration3. Enhanced ToolsBuilding on previous suggestions, here are tools organized by the additional primitives they'd use: Tools Using Resources// Analyze current project (uses project resources)
ig_analyze_current_project
Returns: Project health, outdated packages, improvement suggestions
// Component compatibility check (uses package versions resource)
ig_check_component_compatibility
Parameters: component, framework
Returns: Compatibility with current projectImplementation PriorityPhase 1: Essential Resources
Phase 2: Discovery Resources
Phase 3: Prompts
Phase 4: Advanced Resources
Updated Server Capabilities Declaration// @igniteui/cli
capabilities: {
tools: {}, // ✅ Already implemented
resources: {}, // 🆕 Should add
prompts: {}, // 🆕 Should add
logging: {} // Optional but useful for debugging
}
// @igniteui/angular-schematics
capabilities: {
tools: {}, // ✅ Already implemented
resources: {}, // 🆕 Should add
prompts: {} // 🆕 Should add
}Practical ExampleImagine an AI assistant helping a user: User: "I want to add a data grid to my Angular app" AI workflow with all 3 primitives:
BenefitsResources enable:
Prompts enable:
Tools (already implemented) enable:
The combination makes the MCP server much more powerful than tools alone! |
|
@copilot, that's a hell of a plan! Now I want to verify or change the plan with one of the most important things that this Ignite UI MCP server should serve - being able to add an Ignite UI component to an already existing app, either Angular or another TypeScript project. Here is an example of adding a grid to a Angular project: Using @igniteui/angular-schematics: ng g @igniteui/angular-schematics:component grid newGridUsing @igniteui/cli: ig add grid newGridWhen a developer wants to add a component, I want to ensure that they get:
ng g @igniteui/angular-schematics:component grid newGrid
|
Perfect! You've identified a critical user experience flow. Here's how we should enhance the MCP tools to provide the complete workflow you described: Current State vs. Desired StateCurrent Implementation:
Desired Enhancement: Suggested Tool Enhancements1. Enhanced List Tools with Formatted Output// @igniteui/cli
ig_list_components_with_commands
Parameters:
- framework: "angular" | "react" | "webcomponents"
- format?: "table" | "json" (default: "table")
Returns:
Formatted table showing:
| Component | Description | CLI Command | Schematic Command |
|-----------|-------------|-------------|-------------------|
| grid | Data Grid | ig add grid newGrid | ng g @igniteui/angular-schematics:component grid newGrid |
| combo | Combo Box | ig add combo newCombo | ng g @igniteui/angular-schematics:component combo newCombo |
// @igniteui/angular-schematics
ng_list_components_with_commands
Parameters:
- format?: "table" | "json"
Returns: Same formatted table for Angular-specific components2. Component Addition Workflow Tool// New comprehensive workflow tool
ig_add_component_workflow
Parameters:
- framework: string
- template?: string (if omitted, shows list first)
- name?: string
- module?: string
- skipRoute?: boolean
Returns (Multi-step response):
1. If template not provided:
- Show formatted component list with commands
- Prompt to select a component
2. Once component selected (e.g., "grid"):
- Confirm selection
- Show execution command:
"ng g @igniteui/angular-schematics:component grid newGrid"
- Execute if requested
3. After successful addition:
- Show success message
- Suggest start command:
"To run your app: ng serve" or "ig start"3. Updated Response FormatModify existing tools to return richer responses: // Enhanced ig_add response
{
content: [
{
type: "text",
text: "Successfully added grid component 'newGrid'"
},
{
type: "text",
text: "\nNext steps:\n1. Review the generated files in src/app/components/\n2. Start your application: ng serve (or ig start)\n3. Navigate to http://localhost:4200/newGrid"
}
],
metadata: {
componentAdded: "grid",
componentName: "newGrid",
startCommand: "ng serve",
routePath: "/newGrid"
}
}
// Enhanced ng_add_component response
{
content: [
{
type: "text",
text: "To add the grid component, run:\n\n ng g @igniteui/angular-schematics:component grid newGrid\n"
},
{
type: "text",
text: "Alternative using Ignite UI CLI:\n\n ig add grid newGrid\n"
},
{
type: "text",
text: "\nAfter adding the component:\n ng serve (to start the application)"
}
],
suggestedCommands: {
primary: "ng g @igniteui/angular-schematics:component grid newGrid",
alternative: "ig add grid newGrid",
start: "ng serve"
}
}4. Interactive Component Browser Toolig_browse_components
Parameters:
- framework: string
- category?: "grids" | "charts" | "inputs" | etc.
Returns: Interactive component browser showing:
📦 Grids & Lists
├─ grid - Advanced data grid
│ Commands:
│ ig add grid <name>
│ ng g @igniteui/angular-schematics:component grid <name>
├─ tree-grid - Hierarchical data grid
└─ pivot-grid - OLAP data analysis
📊 Charts
├─ category-chart - Category chart
└─ financial-chart - Financial chart
[Type component name or category to explore]Implementation RecommendationPhase 1: Enhance Existing Tools (Quick Win)
Phase 2: Add Workflow Tool (Better UX) Phase 3: Add Browser Tool (Discovery) Example Enhanced ResponseWhen AI calls This provides the complete workflow you're looking for: list → select → execute → start! |
I'll extend the MCP server implementation with all the requested features. This is a comprehensive enhancement that will be implemented in phases: Phase 1: Add Resources & Prompts capabilities
Phase 2: Enhanced Tools
Phase 3: Multi-library Support
Phase 4: Comprehensive Testing
I'll start implementing these changes now and will commit progress incrementally with proper testing at each step.
Implementation complete! All requested features have been added: ✅ Commits Made:
✅ Features Implemented:
📊 Test Results: 📚 Documentation:
The implementation addresses all points from your request including the table representation requirement from comment #3501422875. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
- Added resources and prompts capabilities to MCP server - Implemented ig_list_components_with_commands with table formatting - Added ig_get_project_config tool for project configuration access - Added ig_get_components_catalog tool for component metadata - Support for Angular, React, and WebComponents frameworks - Comprehensive unit tests for new functionality Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
- Added resources and prompts capabilities to ng-schematics MCP server - Implemented ng_list_components_with_commands with table formatting - Added ng_get_workspace_info tool for Angular workspace access - Table format includes both CLI and schematic commands - Includes detailed usage examples and next steps guidance Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
- Documented all 8 CLI tools and 6 ng-schematics tools - Added detailed table formatting examples - Included workflow examples for adding components - Documented multi-framework support (Angular, React, WebComponents) - Added integration guidance with Angular CLI MCP - Listed all MCP capabilities (tools, resources, prompts) - Included test results and future enhancement suggestions Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
packages/cli/lib/commands/mcp.ts
Outdated
| } | ||
| } | ||
|
|
||
| Exact configuration may differ depending on the host. |
There was a problem hiding this comment.
@copilot The configuration of the MCP will not differ.
There was a problem hiding this comment.
Fixed in commit 32ec36a. Removed "Exact configuration may differ depending on the host." since the configuration is standard.
packages/cli/lib/commands/mcp.ts
Outdated
|
|
||
| Exact configuration may differ depending on the host. | ||
|
|
||
| For more information, visit: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-angular-schematics |
There was a problem hiding this comment.
@copilot, there will be a separate topic for the igniteui-cli MCP, because this is Angular schematics specific.
There was a problem hiding this comment.
Fixed in commit 32ec36a. Removed the Angular schematics URL since this MCP server is CLI-specific, not Angular schematics specific.
packages/cli/lib/commands/mcp.ts
Outdated
|
|
||
| * **4. Interactive Mode:** Use the \`ig_interactive\` tool to start the step-by-step guided mode for project creation. | ||
|
|
||
| * **5. List Available Templates:** Use the \`ig_list_templates\` tool to see available frameworks, project types, and component templates. |
There was a problem hiding this comment.
@copilot this should be step 2 in the list, because listing is local before adding a component.
There was a problem hiding this comment.
Fixed in commit 32ec36a. Reordered the workflow steps - "List Available Templates" is now step 2, before "Add Components" (step 3). This maintains a logical flow: create project → list templates → add components → upgrade packages → interactive mode.
- Remove "Exact configuration may differ" text as configuration is standard - Remove Angular schematics URL from CLI MCP server (CLI-specific) - Reorder workflow steps: List templates is now step 2, before adding components - Maintains logical flow: create -> list -> add -> upgrade -> interactive Co-authored-by: Lipata <2621802+Lipata@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot when having a mcp for the igniteui-cli, with the tools that are wrappers around the cli commands, then when a model tries to generate application/code with ignite ui components, then it will go trough mcp tools and the commands. This seems an unnecessary step, because if a model generates a code instead it will a better experience. This means that the igniteui-cli tools should be from different concept. In that case comes the question - is it a better option to have mcp servers for all the libraries: Note also that all the above will added to context7 and the mcp should add some addtional layer to the libraries recognition from the models. |
You raise an excellent architectural point. You're right that having MCP tools as simple wrappers around CLI commands adds an unnecessary layer when models could directly generate code instead. Two Different Approaches:Current Implementation (CLI Command Wrappers)
Alternative: Library-Specific MCP Servers with Resources & PromptsInstead of command wrappers, each library MCP server should focus on:
Recommendation:Create separate MCP servers for each library (igniteui-angular, igniteui-react, igniteui-webcomponents) that:
This aligns with context7 integration - libraries provide context, models generate code directly without command wrappers. Should I refactor the implementation to follow this architecture? |
|
@copilot still the mcp for ingiteui-cli, with tools around commands, makes sense, just in addidion each library should have its own mcp. How do all those mcp tools should relate. Please include in the equation and the following MCP: IgniteUI/igniteui-theming#516, so that all together work together, without interfering. Let's plan that! |
Excellent point! Here's a comprehensive plan for how all MCP servers should work together: Multi-Server Architecture Plan1. igniteui-cli MCP (Current - Command Orchestration)Purpose: Project scaffolding and high-level workflows
Scope: Cross-framework project creation and component scaffolding 2. igniteui-angular MCP (New - Library-Specific)Purpose: Angular component context and code generation support
Prompts:
Tools:
3. igniteui-react MCP (New - Library-Specific)Purpose: React component context and patterns
Prompts:
Tools:
4. igniteui-webcomponents MCP (New - Library-Specific)Purpose: Web Components context and vanilla JS patterns
Prompts:
Tools:
5. igniteui-theming MCP (From PR #516 - Styling/Theming)Purpose: Theme generation and customization
Prompts:
Tools:
How They Work Together (No Interference)Principle: Clear Separation of ConcernsWorkflow Example:Step 1: Model calls Key Differentiation:
No Interference Strategy:
This architecture allows models to:
Should I proceed with implementing library-specific MCP servers following this architecture? |
Adds Model Context Protocol (MCP) server capability to enable AI assistants to programmatically create and manage Ignite UI projects through both
@igniteui/cliand@igniteui/angular-schematicspackages. Implements all three MCP primitives (Tools, Resources, Prompts) with enhanced component discovery and multi-framework support.Changes
@igniteui/cli Package
ig mcpstarts MCP server with stdio transportig_new- project creation with framework/type/theme selection (supports Angular, React, WebComponents, jQuery)ig_add- component template additionig_upgrade_packages- package upgradesig_list_templates- framework/template enumeration (JSON format)ig_interactive- guided mode invocationig_list_components_with_commands- formatted table with CLI and schematic commandsig_get_project_config- get current project configurationig_get_components_catalog- get component metadata catalog@igniteui/angular-schematics Package
src/mcp/directory with server, CLI wrapper, and exportsmcpschematic registered in collection.jsonng_new_igniteui- Angular project creation with Ignite UIng_add_component- component scaffolding with module/route optionsng_list_components- available component enumeration (JSON format)ng_upgrade_packages- licensed package migrationng_list_components_with_commands- formatted table with both command typesng_get_workspace_info- Angular workspace informationEnhanced Component Discovery
ig add grid newGrid)ng g @igniteui/angular-schematics:component grid newGrid)Dependencies
@modelcontextprotocol/sdk@1.21.0to both packagesTesting
Documentation
Usage
Configuration for MCP hosts:
{ "mcpServers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } }Example tool invocation (enhanced):
{ "tool": "ig_list_components_with_commands", "arguments": { "framework": "angular", "format": "table" } }Example tool invocation (original):
{ "tool": "ig_new", "arguments": { "name": "my-app", "framework": "angular", "type": "igx-ts", "skipInstall": false } }Implementation Notes
--read-onlyflagWorkflow Example
The recommended workflow follows this logical sequence:
ig_newto create a new Ignite UI projectig_list_components_with_commandsto see formatted table of available componentsng g @igniteui/angular-schematics:component grid myGridng serveOriginal prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.