From 3ad6b610a3a9864fd3ed6e8372d59b6bf4dcfa36 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 09:58:54 +0300 Subject: [PATCH 01/52] docs(grids/_shared/row-actions): use IgbGridEditingActions for Blazor Replace manual edit/delete IgbButton blocks with IgbGridEditingActions (EditRow/DeleteRow/AddRow) and merge the Grid, TreeGrid, and HierarchicalGrid Blazor ComponentBlocks into a single block. Ported from igniteui-xplat-docs commit 416b6562 (Add corresponding code snippet for row editing actions topic, #1839). Co-authored-by: Mariela Tihova --- .../components/grids/_shared/row-actions.mdx | 39 +++---------------- 1 file changed, 6 insertions(+), 33 deletions(-) diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx index 888afe2e22..cfad8db5a2 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/row-actions.mdx @@ -214,22 +214,18 @@ These components expose templates giving flexibility for customization. For inst ``` - + ```razor
<{ComponentSelector} Data=northwindEmployees> - - edit - - @if (!IsDeleted(actionstrip.Context)) - { - - delete - - } + +
@@ -237,29 +233,6 @@ These components expose templates giving flexibility for customization. For inst - - -```razor -
- - - - - edit - - @if (!IsDeleted(actionstrip.Context)) - { - - delete - - } - - -
-``` - - - ```html From db51e21d3e55ff1c0e794df9c340331e84ba29dd Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:01:24 +0300 Subject: [PATCH 02/52] docs(layouts/tabs): drop Blazor-specific CSS-parts duplicate Remove the Blazor-only PlatformBlock that duplicated the WebComponents/React CSS parts example and drop the PlatformBlock wrapper so the styling documentation applies to all platforms. Ported from igniteui-xplat-docs commit 77ae9c59 (PR #1864). Co-authored-by: Mariela Tihova --- .../content/en/components/layouts/tabs.mdx | 55 ------------------- 1 file changed, 55 deletions(-) diff --git a/docs/xplat/src/content/en/components/layouts/tabs.mdx b/docs/xplat/src/content/en/components/layouts/tabs.mdx index 4247e71a88..daff322013 100644 --- a/docs/xplat/src/content/en/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/en/components/layouts/tabs.mdx @@ -263,9 +263,6 @@ The component exposes several CSS parts, giving you full The component exposes the following CSS parts: - - - |Name|Description| |--|--| | `content` | Tab header's label slot container. | @@ -311,58 +308,6 @@ igc-tab::part(tab-header)::before { } ``` - - - - - - - -|Name|Description| -|--|--| -| `content` | The content wrapper. | -| `prefix` | The prefix wrapper. | -| `suffix` | The suffix wrapper. | - -```css -igc-tab::part(tab-header), -igc-tabs::part(inner)::after { - --item-background: var(--ig-surface-600); - --border-color: var(--ig-success-300); -} - -igc-tab::part(tab-body), -igc-tab[selected] igc-icon { - --item-active-icon-color: var(--ig-success-300); -} - -igc-tab:not([selected]) igc-icon { - --item-icon-color: var(--ig-gray-500); -} - -igc-tabs::part(start-scroll-button), -igc-tabs::part(end-scroll-button) { - --background: var(--ig-surface-600); - --hover-background: var(--ig-surface-700); - --active-background: var(--ig-surface-700); - --disabled-background: var(--ig-gray-100); - --button-color: var(--ig-gray-700); - --button-hover-color: var(--ig-gray-800); - --button-disabled-color: var(--ig-gray-300); - --border-color: var(--ig-surface-600); -} - -igc-tab::part(tab-header) { - --item-hover-color: var(--ig-success-500); -} - -igc-tab::part(tab-header)::before { - --border-color--hover: var(--ig-gray-500); -} -``` - - - From a787f8f634d36130f66bf9d2f07b1c6c86b79c35 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:05:01 +0300 Subject: [PATCH 03/52] docs(grids/_shared/cell-editing): align Blazor snippet with WC and unify HierarchicalGrid validation example - Merge the Blazor cancel-edit description into the WC/React block now that the same UnitsOnOrder/UnitsInStock example applies to all three. - Drop the Age/HireDate Blazor-specific paragraph. - Rewrite the HierarchicalGrid validation snippets (WebComponents webHierarchicalGridCellEdit -> webGridEditingEventsCellEdit; Blazor igRegisterScript "HandleCellEdit" -> "WebGridEditingEventsCellEdit") to validate UnitsOnOrder against UnitsInStock instead of Debut/LaunchDate. - Drop the now-redundant Blazor "validating two columns" paragraph. Ported from igniteui-xplat-docs commit 37f196b8 (PR #1851, "fix: cell-editing docs and snippets for Blazor and WC"). Co-authored-by: Mariela Tihova --- .../components/grids/_shared/cell-editing.mdx | 45 ++++++------------- 1 file changed, 14 insertions(+), 31 deletions(-) diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx index 7304160546..c58cfed3f4 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx @@ -1233,10 +1233,7 @@ public webTreeGridCellEdit(args: IgrGridEditEventArgs): void { ``` - -If the value entered in a cell under the **Age** column is below 18 or the value in the **HireDate** column is in the future, the editing will be cancelled and the user will be alerted to the cancellation. - - + If the value entered in a cell under the **Units On Order** column is larger than the available amount (the value under **Units in Stock**), the editing will be cancelled and the user will be alerted to the cancellation. @@ -1251,18 +1248,12 @@ Here, we are validating two columns. If the user tries to set an invalid value f ```typescript -public webHierarchicalGridCellEdit(event: CustomEvent): void { - const today = new Date(); - const column = event.detail.column; - if (column.field === 'Debut') { - if (event.detail.newValue > today.getFullYear()) { - event.detail.cancel = true; - alert('The debut date must be in the past!'); - } - } else if (column.field === 'LaunchDate') { - if (event.detail.newValue > today) { - event.detail.cancel = true; - alert('The launch date must be in the past!'); + public webGridEditingEventsCellEdit(args: CustomEvent): void { + var d = args.detail; + if (d.column != null && d.column.field == "UnitsOnOrder") { + if (d.newValue > d.rowData.UnitsInStock) { + d.cancel = true; + alert("You cannot order more than the units in stock!") } } } @@ -1272,26 +1263,18 @@ public webHierarchicalGridCellEdit(event: CustomEvent): vo ```razor // In JavaScript -igRegisterScript("HandleCellEdit", (ev) => { - const today = new Date(); - const column = event.detail.column; - if (column.field === 'Debut') { - if (event.detail.newValue > today.getFullYear()) { - event.detail.cancel = true; - alert('The debut date must be in the past!'); - } - } else if (column.field === 'LaunchDate') { - if (event.detail.newValue > today) { - event.detail.cancel = true; - alert('The launch date must be in the past!'); +igRegisterScript("WebGridEditingEventsCellEdit", (ev) => { + var d = ev.detail; + + if (d.column != null && d.column.field == "UnitsOnOrder") { + if (d.newValue > d.rowData.UnitsInStock) { + d.cancel = true; + alert("You cannot order more than the units in stock!") } } }, false); ``` - -Here, we are validating two columns. If the user tries to change an artist's **Debut** year or an album's **Launch Date**, the grid will not allow any dates that are greater than today. - From 2ebe6b2fc0fb956257c49d9f9328b3114e694362 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:06:00 +0300 Subject: [PATCH 04/52] docs(grids/_shared/conditional-cell-styling): highlight every other row and tweak border - Change the activeRow predicate from 'row.index === 0' (highlights only the first row) to 'row.index % 2 === 0' (highlights every other row) in the Blazor, WebComponents and React snippets. - Change the CSS rule from 'border: 2px solid #fc81b8' to 'border-top: 2px solid #fc81b8' so the highlight reads as a row divider rather than a full box. Ported from igniteui-xplat-docs commits ad4f86ae + 0296a788 (fix: add corresponding code snippets for conditional styling for React and WC). Co-authored-by: Mariela Tihova --- .../components/grids/_shared/conditional-cell-styling.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx index d258bf88b1..d9363dc1f6 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx @@ -94,7 +94,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?. ```razor igRegisterScript("RowClassesHandler", () => { return { - activeRow: (row) => row.index === 0 + activeRow: (row) => row.index % 2 === 0 }; }, true); ``` @@ -102,7 +102,7 @@ igRegisterScript("RowClassesHandler", () => { ```ts public rowClasses = { - activeRow: (row: IgcRowType) => row.index === 0 + activeRow: (row: IgcRowType) => row.index % 2 === 0 } ``` @@ -110,14 +110,14 @@ public rowClasses = { ```tsx const rowClasses = { - activeRow: (row: IgrRowType) => row.index === 0 + activeRow: (row: IgrRowType) => row.index % 2 === 0 } ``` ```css .activeRow { - border: 2px solid #fc81b8; + border-top: 2px solid #fc81b8; border-left: 3px solid #e41c77; } ``` From f8db7f7860703c55c59738b7cdcf1aea023717d8 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:07:09 +0300 Subject: [PATCH 05/52] docs(grids/_shared/excel-style-filtering): align Blazor Debut column with sample Change IgbColumn Field="Debut" from Filterable="true" + DisablePinning + DisableHiding to a simple Filterable="false" so the Configure Menu Features snippet matches what the live sample actually renders. Ported from igniteui-xplat-docs commit 8c22c2bb (fix(esf): Edit Configure Menu Features code snippet so that it matches the sample). Co-authored-by: Mariela Tihova --- .../en/components/grids/_shared/excel-style-filtering.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx index 60e4ed1be8..c296199b46 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx @@ -262,7 +262,7 @@ In the sample below 'Product Name' and 'Discontinued' columns have all three fea Height="650px" Width="100%" Id="hierarchicalGrid"> - + @* ... *@ From c10ac9c2387741860b99c74218c62f38899e2038 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:08:13 +0300 Subject: [PATCH 06/52] docs(layouts/dock-manager): rewrite Localization for new i18n resource packages - Simplify the intro paragraph and clarify that the language detection reads the root lang attribute. Drop the list of built-in languages (no longer accurate now that translations live in a separate peer dependency). - Add a WebComponents snippet showing how to install igniteui-i18n-resources and register a bundle via igniteui-i18n-core's registerI18n(...) helper. - Reframe addResourceStrings as the escape hatch for languages outside the bundled set. - Soften the wording around the ResourceStrings override paragraph. Ported from igniteui-xplat-docs commits af489111, 29b3f69a, 9cb5e04b, 9f688e56, ebb027e1 (DockManager localization refresh, 2026-03-20..03-26). Co-authored-by: Galina Edinakova Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> --- .../en/components/layouts/dock-manager.mdx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx index 6d8cd20e99..b8654d1186 100644 --- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx @@ -1032,10 +1032,19 @@ The Dock Manager comes with a light and a dark theme. The light theme is the def ## Localization -The Dock Manager component supports localizing the strings used in the context menus, tooltips and aria attributes. By default, the Dock Manager detects the language of the page by searching for a [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on any of its parents. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is not set or is set to a value which the Dock Manager does not support, the default language used is [English (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). The Dock Manager provides built-in localized strings for the following languages: [English (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN), [Japanese (jp)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsJP), [Korean (ko)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsKO) and [Spanish (es)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsES). +The Dock Manager lets you localize the strings used in context menus, tooltips, and ARIA attributes. By default, it reads the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute from the root `` element to determine which language to use. If the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is missing or set to an unsupported value, the Dock Manager uses [English (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN). -In order to provide resource strings for any other language use the [addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) method: +Ready-to-use Dock Manager resource strings for Spanish (`es`), Japanese (`ja`), and Korean (`ko`) are provided via the `igniteui-i18n-resources` peer dependency. To use one of these languages, install `igniteui-i18n-resources` and register the corresponding bundle with `igniteui-i18n-core`: + +```ts +import { registerI18n } from 'igniteui-i18n-core'; +import { DockManagerResourceStringsES } from 'igniteui-i18n-resources'; + +registerI18n(DockManagerResourceStringsES, 'es'); +``` + +If you need to support a different language, use the [addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) method to provide your own translated strings: ```ts import { addResourceStrings } from 'igniteui-dockmanager'; @@ -1049,7 +1058,7 @@ addResourceStrings('fr', dockManagerStringsFr); ``` -The Dock Manager exposes `ResourceStrings` property which allows you to modify the strings. If you set the `ResourceStrings` property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. +The Dock Manager also exposes a `ResourceStrings` property that you can use to modify individual strings directly. When you set the `ResourceStrings` property, the Dock Manager uses the strings you provide regardless of the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute on the page. From 69e6861d2046ed310d26587e193f48612455b8ad Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:12:36 +0300 Subject: [PATCH 07/52] docs(changelog/blazor): add March SR Bug Fixes table, demote prior latest MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Open the {PackageVerLatest} section with a Bug Fixes table covering the new March service release (3229 Trial watermark on licensed Grids, 2754 IgbTabs/IgbSwitch interaction). The previous {PackageVerLatest} body (Grids features, Breaking Changes, etc.) is now under a new {PackageVerChanges-25-2-MAR} heading. Per migration guidance, the de-link of "Row Paging / Filter Row / Load-Save Layout / GroupBy Area / Cell Merging" in the historical Data Grid sections is intentionally NOT ported — those linked pages still exist in docs-template. Ported from igniteui-xplat-docs commits aa041d69, 5f917652, eec7614f and the bug-fix portion of cf7060d8. Co-authored-by: Deyan Kamburov Co-authored-by: Stamen Stoychev Co-authored-by: Stamen Stoychev --- .../content/en/components/general-changelog-dv-blazor.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx index 4e405f97d3..24d9c5269b 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx @@ -28,6 +28,14 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerLatest}** +### Bug Fixes +| Bug Number | Control | Description | +|------------|---------|-------------| +| 3229 | Grids | Latest version of Blazor Grids shows Trial watermark for Licensed version | +| 2754 | IgbTabs | Changing the check state for IgbSwitch inside the tab causes the tab content to disappear | + +## **{PackageVerChanges-25-2-MAR}** + ### {PackageGrids} (Grids) #### IgbGrid, IgbTreeGrid, IgbHierarchicalGrid, IgbPivotGrid From 2adae5f2a79d58e32a5f98c25b011a0f3fdbf25a Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:25:38 +0300 Subject: [PATCH 08/52] docs(changelog/react): add new PackageVerLatest section, demote 26-2-FEB, backfill 26-2-MAR - New {PackageVerLatest} section documenting: - Changed: DockManager bumped to igniteui-dockmanager@2.1.0 (with minResizeWidth/minResizeHeight, paneFlyoutToggle event, layoutChange detail); igniteui-webcomponents bumped to 7.1.0 with new Splitter and Highlight components. - New Features: AI-Assisted Development - Agent Skills shipped with the igniteui-react package (components, customize-theme, optimize-bundle-size). - Demote the previous {PackageVerLatest} in docs-template to {PackageVerChanges-26-2-FEB} so the version sequence matches xplat. - Backfill the {PackageVerChanges-26-2-MAR} bug-fixes table from xplat at commit 06b6851 (this section existed in xplat before our migration window, but was missing from docs-template). Per migration guidance, the de-linking edits in cf7060d8 (DataGrid / Row Paging / Filter Row / Load-Save Layout / GroupBy Area / Cell Merging / Data Grid in the imports table) are NOT ported - those linked pages still exist in docs-template. The > [!Note] reformatting fix from eec7614f is also a no-op for this file because docs-template already renders these admonitions as JSX components. Ported from igniteui-xplat-docs commits aa041d69 (#1940), 5f917652 (#1946), eec7614f, plus partial cf7060d8 (#1982). Co-authored-by: Deyan Kamburov Co-authored-by: Stamen Stoychev Co-authored-by: Stamen Stoychev --- .../components/general-changelog-dv-react.mdx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx index de9e9d8e4d..28f83f9dae 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx @@ -22,6 +22,37 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; All notable changes for each version of {ProductName} are documented on this page. ## **{PackageVerLatest}** + +### {PackageCommon} + +#### Changed + +- `DockManager`: Updated to use the latest `igniteui-dockmanager@2.1.0` with new `minResizeWidth` and `minResizeHeight` properties, `paneFlyoutToggle` event; additional `layoutChange` event detail and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-dockmanager/blob/master/CHANGELOG.md#210). +- Updated to use the latest `igniteui-webcomponents@7.1.0` including new `Splitter` and `Highlight` container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19). + +#### New Features + +- #### AI-Assisted Development - Agent Skills + - Structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for React. + - The skill files are included in the `igniteui-react` package and also live in the [skills/](https://github.com/IgniteUI/igniteui-react/tree/master/skills) directory: + - **components** - Identify the right React components (`Igr*`) for a UI pattern, then install, import, and use them — JSX patterns, events, refs, forms, etc. + - **customize-theme** - Customize styling using CSS custom properties, Sass, and the theming system in React, including using Ignite UI Theming MCP server. + - **optimize-bundle-size** - Reduce bundle size with granular imports, tree-shaking, and lazy loading. + - These skills are automatically discovered when placed in the agent's skills path (e.g. `.agents/skills` or `.claude/skills`). + +## **{PackageVerChanges-26-2-MAR}** + +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +| 3055 | IgrDataPieChart | missing styling properties for the Others Slice | +| 38668 | IgrDataTooltipLayer | TitleTextColor is overriden when chart's TitleTextColor is used | +| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | +| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | +| 41594 | IgrDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | + +## **{PackageVerChanges-26-2-FEB}** ### {PackageCommon} #### New Features From ca3cbf417dc57747adcfc919ef7ff328e765f397 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:28:01 +0300 Subject: [PATCH 09/52] docs(changelog/angular): backfill Bug Fixes section, demote 26-1-JAN The xplat diff for this file is a single typo fix in a Bug Fixes row (overriden -> overridden, row 38668 IgxDataTooltipLayer). That row lives in xplat's {PackageVerLatest} Bug Fixes table, which did NOT exist in docs-template - docs-template's {PackageVerLatest} held the 26-1-JAN GA content (Charts enhancements, Angular 21 support). Apply the same rename+backfill approach used for the React changelog: - Backfill the {PackageVerLatest} Bug Fixes table from xplat at commit 06b6851 (with the typo already corrected to "overridden"). - Demote the prior docs-template {PackageVerLatest} content to {PackageVerChanges-26-1-JAN} so the version sequence matches xplat. Ported from igniteui-xplat-docs commit 4655d9c2 (fix typo), backfill sourced from xplat reference commit 06b6851. Co-authored-by: IGvaleries --- .../content/en/components/general-changelog-dv.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/xplat/src/content/en/components/general-changelog-dv.mdx b/docs/xplat/src/content/en/components/general-changelog-dv.mdx index 195daf00db..af94934c2c 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv.mdx @@ -28,6 +28,20 @@ For changes specific to igniteui-angular components, please see CHANGELOG.MD. ## **{PackageVerLatest}** +### Bug Fixes + +| Bug Number | Control | Description | +|------------|---------|-------------| +| 2189 | IgxDataChart | DataChart skips rendering axis when there are no labels | +| 3055 | IgxDataPieChart | added missing styling properties for the Others Slice | +| 38668 | IgxDataTooltipLayer | TitleTextColor is overridden when chart's TitleTextColor is used | +| 40238 | Excel | fixed Excel Formula parser - Workbook.Load() throwing a Excel.FormulaParseException| +| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | +| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | +| 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | + +## **{PackageVerChanges-26-1-JAN}** + ### Enhancements ### {PackageCharts} From 71b80742b994d561cd32b9cab37dc4c88d292bad Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:31:01 +0300 Subject: [PATCH 10/52] docs(general/cli-overview): full rewrite for new CLI features and MCP The xplat source for this file was effectively rewritten end-to-end across PRs #1963, #1975, and a follow-up docs sync. Port the new content into the .mdx, preserving the docs-template conventions: - New frontmatter (title/description/keywords/license/last_updated). - New intro framing the CLI as a standalone scaffold + MCP server tool. - Install section now covers npm and yarn, plus an `ig version` check. - Create a New Project split into "guided wizard" and "non-interactive" modes; new --template flag and per-framework template tables. - New arguments reference table for `ig new`. - Add a Component Template section reworked; the inline "> NOTE: Your routing file..." converted to . - Run the Application now uses `ig start`; Vite block clarified. - Brand-new AI Assistant Integration (MCP) section covering `ig mcp`, `npx -y igniteui-cli mcp`, and the `ig ai-config` quick-setup helper. Includes mcp.json snippets for VS Code, Cursor, Claude Desktop, Claude Code, and JetBrains. - Commands table rewritten and expanded with `ig upgrade-packages`, `ig mcp`, and `ig ai-config`. Converted HTML platform comments to , and the markdown admonition to . Links preserved (.md targets unchanged). Ported from igniteui-xplat-docs commits 52228c2e (#1963), cf575cdf (#1975), and 10704024 (docs follow-up). Co-authored-by: RadoMirchev Co-authored-by: Ivaylo Barakov Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> --- .../en/components/general-cli-overview.mdx | 296 +++++++++++++----- 1 file changed, 218 insertions(+), 78 deletions(-) diff --git a/docs/xplat/src/content/en/components/general-cli-overview.mdx b/docs/xplat/src/content/en/components/general-cli-overview.mdx index 579bd390fa..1cc01db8c9 100644 --- a/docs/xplat/src/content/en/components/general-cli-overview.mdx +++ b/docs/xplat/src/content/en/components/general-cli-overview.mdx @@ -1,8 +1,10 @@ --- -title: "{Platform} CLI | Data Visualization Tools and Tables | Infragistics" -description: The {ProductName} toolset has a {Platform} CLI to help you boost productivity and get your project started quickly. Create a {ProductName} application now! +title: "{Platform} CLI - {ProductName}" +description: "The {ProductName} CLI scaffolds {Platform} projects, adds pre-configured component views, and connects AI coding assistants via a built-in MCP server." keywords: "{Platform} cli, command line interface, {ProductName}, Infragistics" mentionedTypes: [] +license: MIT +last_updated: "2026-04-21" --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; @@ -10,161 +12,299 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc # Ignite UI CLI for {Platform} -Our CLI tools provide project templates pre-configured for the {ProductName} toolset that help you get your next application off the ground in record time. The +The [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) (`igniteui-cli`) is a standalone global command-line tool for creating and scaffolding {Platform} applications with {ProductName}. It provides project templates pre-configured for {ProductName}, a guided step-by-step wizard for first-time setup, non-interactive `new` and `add` commands for scripted workflows, a development server, and a built-in MCP server for connecting AI coding assistants to live {ProductName} documentation. + +The Ignite UI CLI does not replace the build tooling for your framework - projects it creates are standard {Platform} applications that remain fully compatible with their native build commands and configuration after scaffolding. -Ignite UI CLI +The Ignite UI CLI does not replace Vite or other React tooling - projects created with the CLI are standard Vite-based React applications and remain fully compatible with npm scripts and Vite commands after scaffolding. - -Ignite UI CLI - +## Install the Ignite UI CLI -is a stand-alone command-line tool for creating and scaffolding your applications for a variety of different frameworks and provides a substantial productivity boost for developers. +Install the Ignite UI CLI globally using npm: -## Getting Started +```cmd +npm install -g igniteui-cli +``` -To get started, install the CLI: +Or, using yarn: ```cmd -npm install -g igniteui-cli +yarn global add igniteui-cli ``` -The above install command will make the Ignite UI CLI available for creation, scaffolding, and running of your {ProductName} application. +Verify the installation: + +```cmd +ig version +``` ## Create a New Project -To create an application that is configured to use the {ProductName} controls using the Ignite UI CLI, you can use the following template in your command line: +The Ignite UI CLI provides two modes for project creation: a guided interactive wizard and a direct command with arguments. +### Use the guided wizard - +The guided wizard is the recommended starting point for new projects. It prompts you to choose a framework, project type, template, and theme, then scaffolds and commits the project automatically. +To activate the wizard, run: ```cmd -ig new "[name_of_project]" --framework=[target_framework] --type=[project_type] +ig ``` -Using the above template, if you wanted to create a **React** application named "My Project" targeting TypeScript, you could write the following command: +or: ```cmd -ig new "My Project" --framework=react --type=igr-ts +ig new ``` +For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). -TypeScript support will be available starting from Ignite UI CLI version 13. +### Create a project directly + +To create a React project non-interactively, provide `react` as the framework and `igr-ts` as the project type: - +```cmd +ig new --framework=react --type=igr-ts --template=top-nav +``` +The following project templates are available for React: +| Template ID | Description | +| :---------- | :------------------------------------------------- | +| empty | Minimal project structure with no predefined views | +| base | Project structure with a home page | +| top-nav | Project structure with a top navigation bar | - + + +To create a Web Components project non-interactively, provide `webcomponents` as the framework and `igc-ts` as the project type: ```cmd -ig new "[name_of_project]" --framework=[target_framework] +ig new --framework=webcomponents --type=igc-ts --template=side-nav ``` -Using the above template, if you wanted to create a **Web Components** application named "My Project" you could write the following command: +The following project templates are available for Web Components: -```cmd -ig new "My Project" --framework=webcomponents -``` +| Template ID | Description | +| :---------- | :------------------------------------------------- | +| empty | Minimal project structure with no predefined views | +| base | Project structure with a home page | +| side-nav | Project structure with a side navigation drawer | +The following arguments are available when creating a project: + +| Argument | Alias | Description | +| :--------------- | :----- | :-------------------------------------------------------------------------------------------------------------------- | +| `name` | `-n` | The name of the application. The application is created inside a directory with the same name. | +| `--framework` | `-f` | The framework for the generated project. Default: `jquery`. Supported: `jquery`, `angular`, `react`, `webcomponents`. | +| `--type` | `-t` | The project type for the selected framework. Use `igr-ts` for React or `igc-ts` for Web Components. | +| `--template` | | The project template to use. See the template tables above for available options per framework. | +| `--skip-git` | `--sg` | Skips automatic Git repository initialization. Uses the global `skip-git` config value if omitted. | +| `--skip-install` | `--si` | Skips npm package installation on project creation. | -## Adding Components +## Add a Component Template -Once you have created a project, you can then add additional component templates using **ig add** at any point. Running this command without any parameters will guide you through the available templates by using a keyboard navigation CLI to add the control of your choosing. +Once you have created a project, you can add additional component views at any point. Running `ig add` without arguments launches an interactive template browser: ```cmd ig add ``` -Alternatively, you can simply run the **ig list** command to get a full list of supported templates in the current project you have created. +To add a specific component template directly, provide the template ID and a name for the new component: ```cmd -ig list +ig add [component-template] [component-name] ``` -After running **ig list** and you find the component template you would like to add, you can do so quickly by following this template in your command line: +For example, to add a data grid component named `MyGrid`: ```cmd -ig add [component_template] [component_name] +ig add grid MyGrid ``` -The "component_template" above will generally match an {ProductName} component ("grid", "category-chart", "linear-gauge", etc.). - -For example, if you wanted to add a data grid templated component named "MyGridComponent" to your application, you could run the following: +To list all available templates in the current project: ```cmd -ig add grid MyGridComponent +ig list ``` -> NOTE: Your routing file will be updated with the path to the page with the new component - in that case `/my-grid-component`. You can use it to manually navigate to the newly generated page. +For a guided walkthrough of the component addition wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md#add-view). + +Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. + + + +To see all component templates available for the current project, run `ig list`. The list is project-aware and reflects the selected framework and type. + +The following component templates are available for Web Components: + +| Name | Component Template | +| :---------------- | :----------------- | +| Accordion | accordion | +| Avatar | avatar | +| Badge | badge | +| Banner | banner | +| Button | button | +| Button Group | button-group | +| Calendar | calendar | +| Card | card | +| Checkbox | checkbox | +| Chip | chip | +| Circular Progress | circular-progress | +| Date Picker | date-picker | +| Date Time Input | date-time-input | +| Divider | divider | +| Dock Manager | dock-manager | +| Dropdown | dropdown | +| Expansion Panel | expansion-panel | +| Financial Chart | financial-chart | +| Form | form | +| Grid | grid | +| Icon | icon | +| Icon Button | icon-button | +| Input | input | +| Linear Gauge | linear-gauge | +| Linear Progress | linear-progress | +| List | list | +| Navbar | navbar | +| Pie Chart | pie-chart | +| Radial Gauge | radial-gauge | +| Radio Group | radio-group | +| Rating | rating | +| Ripple | ripple | +| Slider | slider | +| Switch | switch | +| Tabs | tabs | +| Text Area | text-area | +| Tree | tree | + + +## Run the Application -Currently the CLI can be used with the following Web Components: - -| Name | Component Template | -| ------------------|---------------------| -| Avatar | avatar | -| Card | card | -| Badge | badge | -| Button | button | -| Checkbox | checkbox | -| Form | form | -| Icon | icon | -| Icon Button | icon-button | -| Input | input | -| Radio Group | radio-group | -| Switch | switch | -| Calendar | calendar | -| List | list | -| Navbar | navbar | -| Ripple | ripple | -| Pie Chart | pie-chart | -| Dock Manager | dock-manager | +The `start` command builds the application, starts a local web server, and opens it in your default browser: +```cmd +ig start +``` + + +### Using Vite + +The React application generated by Ignite UI CLI uses [Vite](https://vitejs.dev/) as the build tool and supports fast development builds and hot module replacement (HMR). To start the Vite development server directly without the CLI wrapper: + +```bash +npm run dev +``` + +The Vite dev server starts on `http://localhost:5173` by default. Use `ig start` when you want the CLI to handle building and launching in a single command. + -## Build and Run the Application +## AI Assistant Integration (MCP) -In order to build and run the {ProductName} application, you can call the **ig build** and **ig run** commands: +The Ignite UI CLI includes a built-in **MCP (Model Context Protocol) server** that connects AI coding assistants - GitHub Copilot, Claude, Cursor, and others - directly to {ProductName} component documentation and API references. Once configured, your AI assistant can scaffold projects, add and modify components, search docs, look up API details, and generate accurate {ProductName} code without leaving your editor. -```cmd -ig build -ig run +The CLI MCP server starts via `npx` without requiring a global install: + +```bash +npx -y igniteui-cli mcp ``` - +Or, if you have Ignite UI CLI installed globally: +```bash +ig mcp +``` -### Using Vite + -The React application generated by Ignite UI CLI utilizes Vite as the build tool. Vite offers fast development and production builds, providing an efficient development experience with features like hot module replacement (HMR) during development. +### Quick Setup with `ig ai-config` +To configure {ProductName} Agent Skills and both MCP servers in a single step, run the following from your project root after installing {ProductName} packages: + +```cmd +npx igniteui-cli ai-config +``` + +If you have the CLI installed globally: + +```cmd +ig ai-config +``` + +This copies {ProductName} Agent Skills into `.claude/skills/` and writes the full Ignite UI MCP server configuration, including the CLI and Theming servers, to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. For AI clients other than VS Code, use the manual configuration below. + +For full setup instructions across all AI clients and Agent Skills wiring, see [Agent Skills](./ai/skills.md) and [Ignite UI CLI MCP](./ai/cli-mcp.md). +Configure your AI client to use the CLI MCP server manually. Most teams connect both the CLI MCP and the Theming MCP together - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, and design tokens. + +**VS Code** - create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +For per-client setup guides (VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains) and a full description of available tools, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). + + ## Ignite UI CLI Commands -A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): - -| Command | Alias | Description | -| --- | --- | --- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. -| [ig version](https://github.com/IgniteUI/igniteui-cli/wiki) | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | +A full list of available Ignite UI CLI commands is maintained on the [Ignite UI CLI wiki](https://github.com/IgniteUI/igniteui-cli/wiki): + +| Command | Alias | Description | +| :-------------------------------------------------------------------- | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server, and opens it in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory. | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types. | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists available commands with brief descriptions. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Reads and writes Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for a given term. | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists available templates for the project's framework and type. When run inside a project folder, uses the project's framework and type regardless of provided arguments. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig upgrade-packages | | Upgrades Ignite UI packages in the project from Trial to Licensed. | +| ig mcp | | Starts the built-in MCP server for connecting AI coding assistants to {ProductName} component documentation. | +| ig ai-config | | Copies {ProductName} Agent Skills into `.claude/skills/` and writes Ignite UI MCP server configuration to `.vscode/mcp.json`. Run once per project. | +| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | From 2b0b7592ce87987120ce0ba640c6b2c231fc36e6 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:37:50 +0300 Subject: [PATCH 11/52] docs(general/getting-started): update React/WC flows, add MCP and Upgrade sections, shift Blazor headings React (interactive CLI flow): - Add a non-interactive 'ig new' command alternative with --template=top-nav. - Replace the single CLI link with a pair of links: Step-by-Step Guide and CLI Overview. - Promote "Package Installation" from H5 to H4 to match the surrounding hierarchy. - Fix typo in the App.tsx comment (was "App.txs"). WebComponents (interactive CLI flow): - Heading "Install Ignite UI CLI" -> "Using Ignite UI CLI" (the section already covers more than installation). - Add the same non-interactive 'ig new' alternative for WebComponents. - Same dual-link replacement. New shared sections (React, WebComponents): - "Upgrade from Trial to Licensed" - documents 'ig upgrade-packages'. - "AI-Assisted Development" - introduces Agent Skills, the CLI MCP and Theming MCP servers, and 'ig ai-config'. Cross-links the new ai/ai-assisted-development-overview.md, ai/cli-mcp.md, and general-how-to-mcp-e2e.md pages (to be migrated next). Heading rebalance: - "{ProductName} Packages Overview" H1 -> H2 in both the WebComponents and React blocks, so the H1 is only the top-level "Getting Started". - Blazor section shifted up one level so it has its own H1 (Getting Started With ...), mirroring React/WC, with consistent H2 and H3 subsections. Frontmatter updated: refreshed description, dropped _language, cleared mentionedTypes, added last_updated. Ported from igniteui-xplat-docs commits 52228c2e (#1963) and cf575cdf (#1975). Per migration policy: the source's added HTML schema/component-meta comments (, etc.) are intentionally omitted - they were docfx-specific metadata not used in docs-template. Co-authored-by: Ivaylo Barakov Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> --- .../en/components/general-getting-started.mdx | 73 ++++++++++++++----- 1 file changed, 56 insertions(+), 17 deletions(-) diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx index 0705807cef..aca02ca1a3 100644 --- a/docs/xplat/src/content/en/components/general-getting-started.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started.mdx @@ -1,9 +1,9 @@ --- title: Getting Started | {ProductName} | Infragistics -description: Use Infragistics' {Platform} components to create apps and improve data visualization with the world’s fastest, virtualized, real-time {Platform} data grid and streaming financial and business and financial charts. +description: "Install {ProductName} and render your first component. Covers CLI scaffolding, manual package setup, and AI tooling with Agent Skills and MCP servers." keywords: "{ProductName}, Infragistics, Getting Started" -_language: en - +last_updated: "2025-04-06" +mentionedTypes: [] --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; @@ -80,7 +80,14 @@ ig ``` Then choose `React` as the framework and `Ignite UI for React TS` as the project type. Select the `Default Top Navigation` project template, add a specific component/view, or select `Complete & Run`. -For more information about the Ignite UI CLI, see the [CLI overview](general-cli-overview.md). + +Or create a project directly in one command, for example: + +```cmd +ig new --framework=react --type=igr-ts --template=top-nav +``` + +For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). If you added a Grid component during the prompts, once the application is running you should see something similar to the following: @@ -110,7 +117,7 @@ Then follow the prompts to choose a name for the project, React as the framework ### Adding an Ignite UI React Grid Component -##### Package Installation +#### Package Installation To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package: ```cmd @@ -132,7 +139,7 @@ import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; We are now ready to use the {ProductName} grid component in our markup! Let's go ahead and define it: ```tsx -// App.txs +// App.tsx function App() { const data = [ { name: "John", age: 30 }, @@ -182,7 +189,7 @@ After executing this command, your project will be built and served locally on y -## Install Ignite UI CLI +## Using Ignite UI CLI To create an application from scratch and configure it to use the Ignite UI Web Components you can use the Ignite UI CLI. The first step is to install the respective package globally as follows: @@ -197,7 +204,14 @@ ig ``` Then choose Web Components as framework, select `Base` project template, add a specific component/view or select `Complete & Run`. -Additionally, you can read more about the Ignite UI CLI in this [topic](general-cli-overview.md). + +Or create a project directly in one command, for example: + +```cmd +ig new --framework=webcomponents --type=igc-ts --template=side-nav +``` + +For a step-by-step walkthrough of the wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands and options, see the [CLI Overview](general-cli-overview.md). ## Install Polyfills @@ -464,10 +478,35 @@ This will automatically install packages for {ProductName}, along with all of th + + +## Upgrade from Trial to Licensed + +The Ignite UI CLI installs the trial version of {ProductName} by default. To upgrade from the trial package to the licensed version, run the upgrade command in your project root: + +```bash +ig upgrade-packages +``` + +You will be prompted to log in to the Infragistics private npm registry if not already configured. For details on the license model, see [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md). + +## AI-Assisted Development + +Ignite UI provides a three-part AI toolchain - **Agent Skills**, the **Ignite UI CLI MCP server**, and the **Ignite UI Theming MCP server** - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Once connected, your AI assistant can scaffold projects, add and modify components, answer documentation questions, and generate accurate {ProductName} code without leaving your editor. + +Run `ig ai-config` from your project root to copy {ProductName} Agent Skills and write the Ignite +UI MCP server configuration to `.vscode/mcp.json` in a single step. + +For an overview of all three layers and setup instructions, see [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.md). For the full CLI MCP client setup guide, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md). + + + + + -# {ProductName} Packages Overview +## {ProductName} Packages Overview {ProductName} is a complete set of UI widgets, components, and UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 and JavaScript apps for modern desktop browsers, mobile experiences, and progressive web apps (PWAs) targeting the browsers web components APIs. @@ -479,7 +518,7 @@ This will automatically install packages for {ProductName}, along with all of th -# {ProductName} Packages Overview +## {ProductName} Packages Overview {ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs. @@ -515,11 +554,11 @@ The {ProductName} [Geographic Map](geo-map.md) component brings the ability to v -## Getting Started With {ProductName} +# Getting Started With {ProductName} This topic provides step-by-step instructions for creating Blazor Server applications with Ignite UI for Blazor using Visual Studio. -### Create a New Blazor Server Project +## Create a New Blazor Server Project The steps below describe how to create a new Blazor Server project. If you want to add Ignite UI for Blazor to an existing application, go to the [**Install Ignite UI for Blazor Package**](#install-ignite-ui-for-blazor) section. Start Visual Studio 2022 and click **Create a new project** on the start page, select the **Blazor Server App** template, and click **Next**. @@ -534,7 +573,7 @@ Specify additional project options, and click **Create** new-blazor-info-server -### Install Ignite UI for Blazor +## Install Ignite UI for Blazor Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for Blazor components in your Blazor applications, you must first install the appropriate NuGet packages. @@ -542,9 +581,9 @@ In Visual Studio, open the NuGet package manager by selecting **Tools** → **Nu For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic. -### Register Ignite UI for Blazor +## Register Ignite UI for Blazor -#### .NET 6 and Later Applications +### .NET 6 and Later Applications 1 - Open the **Program.cs** file and register the Ignite UI for Blazor Service by calling **builder.Services.AddIgniteUIBlazor** function: @@ -581,7 +620,7 @@ var app = builder.Build(); ``` -#### .NET 5 Applications +### .NET 5 Applications 1 - Open the **Startup.cs** file and register the Ignite UI for Blazor Service by calling **services.AddIgniteUIBlazor()**: @@ -614,7 +653,7 @@ public void ConfigureServices(IServiceCollection services) ``` -### Add Ignite UI for Blazor Component +## Add Ignite UI for Blazor Component Add an Ignite UI for Blazor component to your razor page: From 3d06f14692bd3500ad45950e6a854b924a3673fd Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:40:37 +0300 Subject: [PATCH 12/52] docs(ai/skills): full rewrite for cross-agent skills install flow This page was substantially restructured in xplat-docs across six commits (PR #1919 restructure, PR #1972 setup instructions, follow-up doc syncs, and PR #1995 enabling Blazor + GH CLI). Port the new content end-to-end: - Replace the "Approach 1: persistent IDE agent / Approach 2: download and load" structure with a unified "Available Skills" + "Skill Locations" + "Installing Skills" + "Theming MCP Server" layout. - Add per-platform skill tables for WebComponents, React, Angular, and Blazor (previously WC-only). Each lists the framework-specific skill packages and their SKILL.md paths. - New "Skill Locations" section enumerates the discovery directories for each AI tool: General (.agents/skills/), GitHub Copilot, Claude, Cursor, Gemini CLI/Antigravity, Junie (JetBrains), and Windsurf. - "Installing Skills" now offers four options: A. ig ai-config (with --assistants and --agents flags and an Angular Schematics variant: ng generate @igniteui/angular-schematics:ai-config) B. GitHub CLI: gh skill install/update IgniteUI/ (per platform) C. gemini skills install (user + workspace scope variants per platform) D. npx skills add IgniteUI/{PackageCommon} - Per-platform copy commands (cp / robocopy) for node_modules-shipped skills, gated by PlatformBlock. - Theming MCP Server section now points to the framework-specific customize-theme SKILL.md path via PlatformBlock. - Additional Resources cross-links the new ai-assisted-development-overview and cli-mcp pages; Angular gets external infragistics.com links. Converted source HTML platform comments to and the > [!NOTE] admonitions to . Schema HTML comments omitted (docfx-only metadata, not used in docs-template). All GitHub URLs use the {GithubLink} placeholder so they resolve per platform at build time. Ported from igniteui-xplat-docs commits a24b6ed2 (#1919), f1b848d4, cde675a7, 8ac36c8c (#1972), 729347d1, and bd21bcf7 (#1995). Co-authored-by: RadoMirchev Co-authored-by: Marina Stoyanova Co-authored-by: Zdravko Kolev Co-authored-by: Konstantin Dinev Co-authored-by: georgianastasov --- .../src/content/en/components/ai/skills.mdx | 587 +++++++++++++----- 1 file changed, 439 insertions(+), 148 deletions(-) diff --git a/docs/xplat/src/content/en/components/ai/skills.mdx b/docs/xplat/src/content/en/components/ai/skills.mdx index b305e81272..02106c7b01 100644 --- a/docs/xplat/src/content/en/components/ai/skills.mdx +++ b/docs/xplat/src/content/en/components/ai/skills.mdx @@ -1,243 +1,515 @@ --- -title: AI-Assisted Development | AI Skills | {ProductName} | Infragistics -description: Learn how to use Agent Skills to supercharge AI-assisted development with {ProductName} components, grids, data operations, and theming. -keywords: "{ProductName}, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai" +title: "Agent Skills | AI Skills | AI-Assisted Development | {ProductName} | Infragistics" +description: "Learn how to use Agent Skills to supercharge AI-assisted development with {ProductName} components, grids, data operations, and theming." +keywords: "{ProductName}, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie" license: MIT mentionedTypes: [] +last_updated: "2026-04-24" --- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; -# AI-Assisted Development -{ProductName} ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with {ProductName}. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. +# {ProductName} Agent Skills + +{ProductName} ships with **[Agent Skills](https://agentskills.io/)** - structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, Gemini CLI, JetBrains Junie, etc.) how to work with {ProductName}. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices. + + +The AI tooling landscape is evolving rapidly. Skill discovery locations and distribution options may change as tools and IDEs are updated. Always consult the official documentation for your specific tool or agent for the latest information. + ## Available Skills -The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-webcomponents/tree/master/skills) directory of the Ignite UI for WebComponents repository: +The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directory of the {ProductName} repository: + + | Skill | Path | Description | |:------|:-----|:------------| -| Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | Standalone components, form controls, overlays, layout | -| Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | Helps with integrating components to the user's platform of choice | -| Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size +| Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | Helps with integrating components to the user's platform of choice | +| Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | + -There are two ways to use skills with your AI assistant: [create a persistent IDE agent](#approach-1-create-a-persistent-ide-agent) that always applies them automatically, or [download and load them manually](#approach-2-download-and-load-the-skills) into your preferred IDE on demand. + -## Approach 1: Create a Persistent IDE Agent +| Skill | Path | Description | +|:------|:-----|:------------| +| Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them - JSX patterns, event handling, refs, forms, TypeScript | +| Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | -This approach wires the skills permanently into your project so that every AI session automatically follows the {ProductName} guidelines — no copy-pasting required. + -### GitHub Copilot (VS Code) + -GitHub Copilot reads custom instructions from a `.github/copilot-instructions.md` file at the root of your repository. To create a persistent agent: +| Skill | Path | Description | +|:------|:-----|:------------| +| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -1. Create (or open) `.github/copilot-instructions.md` in your project root. -2. Add a reference or paste the relevant skill content into that file. For example: + +Starting with {ProductName} **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. + -````markdown -# Copilot Instructions + -This project uses {ProductName}. Follow the guidelines in the skill files below: + -- Components & Layout: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md -- Theming & Styling: https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md -```` +| Skill | Path | Description | +|:------|:-----|:------------| +| Components & Layout | [`skills/igniteui-blazor-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-components/SKILL.md) | Components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-blazor-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Grid Lite, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-blazor-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | -3. Alternatively, paste the full content of the relevant `SKILL.md` files directly into `copilot-instructions.md` for fully offline, self-contained instructions. -4. Copilot will now apply these instructions automatically on every chat and inline suggestion in VS Code. + -### Cursor +## Skill Locations -Cursor supports persistent project rules through a `.cursorrules` file or the `.cursor/rules/` directory: +Each AI coding tool discovers skills from specific directories. Place your skill files in the appropriate location so your AI assistant can find and use them automatically. The general `.agents/skills/` convention is supported across multiple tools, while each tool also has its own specific directories. -1. Create `.cursorrules` in your project root (or `.cursor/rules/igniteui.md` for a named rule). -2. Paste the contents of the desired `SKILL.md` files into that file. For example: +### General (`.agents/skills/`) - ````markdown - # {ProductName} Rules +The `.agents/skills/` directory is a cross-agent convention supported by multiple tools, including [VS Code with Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills), [OpenAI Codex](https://developers.openai.com/codex/skills), [Cursor](https://cursor.com/docs/skills), [Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers), [Antigravity](https://antigravity.google/docs/skills), and [Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes). Copy the skill directories into `.agents/skills/` in your project root: - - - ```` + -3. Cursor will include these rules in every AI request automatically. You can also use the `@rules` mention in chat to reference a specific rule on demand. +``` +.agents/ + skills/ + igniteui-wc-choose-components/ + SKILL.md + igniteui-wc-integrate-with-framework/ + SKILL.md + igniteui-wc-customize-component-theme/ + SKILL.md + igniteui-wc-optimize-bundle-size/ + SKILL.md +``` -### Windsurf + + + + +``` +.agents/ + skills/ + igniteui-react-components/ + SKILL.md + igniteui-react-customize-theme/ + SKILL.md + igniteui-react-optimize-bundle-size/ + SKILL.md +``` + + + + + +``` +.agents/ + skills/ + igniteui-angular-components/ + SKILL.md + igniteui-angular-grids/ + SKILL.md + igniteui-angular-theming/ + SKILL.md +``` + + + + -Windsurf reads persistent rules from a `.windsurfrules` file at the project root: +``` +.agents/ + skills/ + igniteui-blazor-components/ + SKILL.md + igniteui-blazor-grids/ + SKILL.md + igniteui-blazor-theming/ + SKILL.md +``` -1. Create `.windsurfrules` in your project root. -2. Paste the contents of the relevant `SKILL.md` files into it. -3. Every Cascade AI session in Windsurf will now include these as persistent instructions. + -### JetBrains IDEs (WebStorm, IntelliJ) +For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. -JetBrains AI Assistant supports project-level prompts that are applied to every AI interaction: +### GitHub Copilot -1. Open **Settings** (or **Preferences** on macOS) → **Tools** → **AI Assistant** → **Project-level prompt**. -2. Paste the contents of the relevant `SKILL.md` files into the prompt field. -3. Click **Apply**. The AI Assistant will now follow these instructions for all requests inside the project. +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) discovers skills from: -### Claude Code +| Scope | Location | +|:------|:---------| +| Project | `.github/skills/`, `.claude/skills/` | +| Personal | `~/.copilot/skills/`, `~/.claude/skills/` (Copilot coding agent and GitHub Copilot CLI only) | -Claude Code supports a `CLAUDE.md` file at the project root as persistent agent instructions: +> **Tip:** In [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), these locations also include the general `.agents/skills/` and `~/.agents/skills/` and you can configure additional skill locations using the `chat.agentSkillsLocations` setting. -1. Create `CLAUDE.md` in your project root. -2. Paste the contents of the relevant `SKILL.md` files into it. For example: +### Claude - ````markdown - # Project Instructions +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) discovers skills from: - This project uses {ProductName}. Always follow these guidelines: +| Scope | Location | +|:------|:---------| +| Project | `.claude/skills/` | +| Personal | `~/.claude/skills/` | - - ```` +### Cursor -3. Claude Code will automatically read `CLAUDE.md` at the start of every session. +[Cursor](https://cursor.com/docs/skills#skill-directories) discovers skills from: -### General AI Agents +| Scope | Location | +|:------|:---------| +| Project | `.agents/skills/`, `.cursor/skills/` | +| User (global) | `~/.cursor/skills/` | -Alternatively, one can use a general Agent Skills config so your Agent can easily discover and load skills automatically on demand: +### Gemini CLI and Antigravity -1. Create a `.agents/skills/` directory in your project root. -2. Copy the skill directories from `igniteui-webcomponents/skills/` repository into `.agents/skills/`: +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) and [Antigravity](https://antigravity.google/docs/skills) discover skills from: - ```shell - .agents/ - skills/ - igniteui-wc-choose-components/ - igniteui-wc-customize-component-theme/ - igniteui-wc-optimize-bundle-size/ - ``` +| Scope | Location | +|:------|:---------| +| Workspace | `.gemini/skills/`, `.agents/skills/` | +| User | `~/.gemini/skills/`, `~/.agents/skills/` | -3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request. +> **Tip:** Use the `/skills` slash command in Gemini CLI to view and manage installed skills. + +### Junie (JetBrains IDEs) + +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) discovers skills from: + +| Scope | Location | +|:------|:---------| +| Project | `.junie/skills/` | +| User | `~/.junie/skills/` | + +### Windsurf -> **Tip for VS Code:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) discovers skills from: -> **Tip:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. +| Scope | Location | +|:------|:---------| +| Workspace | `.windsurf/skills/`, `.agents/skills/` | +| Global | `~/.codeium/windsurf/skills/`, `~/.agents/skills/` | --- -## Approach 2: Download and Load the Skills +## Installing Skills -Use this approach when you want to load a specific skill on demand, without permanently modifying project configuration files. +Use one of the options below to download and place the skill files into the appropriate [skill location](#skill-locations) for your AI assistant. -### Step 1: Get the Skill Files +### **Option A - Use the Ignite UI CLI** -#### **Option A — Download individual files** +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. -Each skill file can be downloaded directly from GitHub. First, create the `.agents/skills/` directory in your project root, then download the files into it: +```bash +ig ai-config --assistants generic --agents claude +``` + +Use `--agents` with multiple values to target several agents at once: + +```bash +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|------|--------|---------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + + + +**Using Angular Schematics:** ```bash -# Create the .agents/skills directory -mkdir -p .agents/skills +ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot +``` -# Download skill files into .agents/skills/ -cd .agents/skills +This also registers the `@angular/cli` MCP server alongside the Ignite UI servers. -# Components & Layout -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md + -# Theming & Styling -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md -# Optimization -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md +### **Option B - Use the `GitHub CLI`** -# Platform Integration -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md +The GitHub CLI can be used to download skill files directly from the {ProductName} repository. Run the following commands in your project root to start the installation process: + + + +```bash +gh skill install IgniteUI/igniteui-angular ``` -The skill files will now be available in `.agents/skills/` and will be automatically discovered by compatible AI assistants. + + -#### **Option B — Use the `gemini skills` CLI** +```bash +gh skill install IgniteUI/igniteui-webcomponents +``` -The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: + -- **User scope** (default) — installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. -- **Workspace scope** — installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. + -**Install to user scope (default):** +```bash +gh skill install IgniteUI/igniteui-react +``` + + + + ```bash -gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-choose-components -gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme -gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-optimize-bundle-size -gemini skills install https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework +gh skill install IgniteUI/igniteui-blazor ``` -**Install to workspace scope:** + + +You will be asked to select which skills to install (components, grids, theming) and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. + +To update skills later, run the following command: + + ```bash -gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-choose-components -gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-customize-component-theme -gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-optimize-bundle-size -gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-webcomponents.git --path skills/igniteui-wc-integrate-with-framework +gh skill update IgniteUI/igniteui-angular ``` -Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. + + -#### **Option C — Use the installed npm package** +```bash +gh skill update IgniteUI/igniteui-webcomponents +``` + + -If {ProductName} is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. for use with General AI Agents under `.agents/skills/`), run: + ```bash -# macOS / Linux -cp -r node_modules/igniteui-webcomponents/skills/. .agents/skills/ +gh skill update IgniteUI/igniteui-react ``` -```powershell -# Windows (PowerShell) -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .agents\skills\ + + + + +```bash +gh skill update IgniteUI/igniteui-blazor +``` + + + +If {ProductName} is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: + +**macOS / Linux / Windows (PowerShell)** + +```bash +cp -r node_modules/{PackageCommon}/skills/. .agents/skills/ +``` + +**Windows (Command Prompt)** + +```cmd +robocopy node_modules\{PackageCommon}\skills .agents\skills /E ``` Or copy individual skill directories as needed: -**macOS / Linux** +**macOS / Linux / Windows (PowerShell)** + + + +```bash +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-choose-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-customize-component-theme .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-optimize-bundle-size .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework .agents/skills/ +``` + + + + + +```bash +cp -r node_modules/{PackageCommon}/skills/igniteui-react-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-customize-theme .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .agents/skills/ +``` + + + + ```bash -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-choose-components .agents/skills/ -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-customize-component-theme .agents/skills/ -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-optimize-bundle-size .agents/skills/ -cp -r node_modules/igniteui-webcomponents/skills/igniteui-wc-integrate-with-framework .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skills/ ``` -**Windows (PowerShell)** + -```powershell -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\ + + +```bash +cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-grids .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-theming .agents/skills/ ``` + + **Windows (Command Prompt)** + + +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-choose-components .agents\skills\igniteui-wc-choose-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E +``` + + + + + +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-react-components .agents\skills\igniteui-react-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +``` + + + + + +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +``` + + + + + ```cmd -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components .agents\skills\onents -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme .agents\skills -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size .agents\skills\ -xcopy /E /I node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework .agents\skills\ +robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-components .agents\skills\igniteui-blazor-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-grids .agents\skills\igniteui-blazor-grids /E +robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-theming .agents\skills\igniteui-blazor-theming /E ``` -The skill files are located at: + + +### **Option C - Use the `gemini skills` CLI** + +The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes: + +- **User scope** (default) - installs skills globally for your user account, making them available across all projects. Skills are placed in `~/.gemini/skills/` or `~/.agents/skills/`. +- **Workspace scope** - installs skills locally into the current project directory under `.agents/skills/`, scoping them to that project only. -```shell -node_modules\igniteui-webcomponents\skills\igniteui-wc-choose-components\SKILL.md -node_modules\igniteui-webcomponents\skills\igniteui-wc-customize-component-theme\SKILL.md -node_modules\igniteui-webcomponents\skills\igniteui-wc-optimize-bundle-size\SKILL.md -node_modules\igniteui-webcomponents\skills\igniteui-wc-integrate-with-framework\SKILL.md +**Install to user scope (default):** + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-wc-choose-components +gemini skills install {GithubLink}.git --path skills/igniteui-wc-customize-component-theme +gemini skills install {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size +gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework ``` -#### **Option D — Use the `npx skills` CLI** + + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-react-components +gemini skills install {GithubLink}.git --path skills/igniteui-react-customize-theme +gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +``` + + + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-angular-components +gemini skills install {GithubLink}.git --path skills/igniteui-angular-grids +gemini skills install {GithubLink}.git --path skills/igniteui-angular-theming +``` + + + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-components +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-grids +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-theming +``` + + + +**Install to workspace scope:** + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-choose-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-customize-component-theme +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +``` + + + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-customize-theme +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +``` + + + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-grids +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-theming +``` + + + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-grids +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-theming +``` + + + +Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. + +### **Option D - Use the `npx skills` CLI** The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: -```shell -npx skills add IgniteUI/igniteui-webcomponents +```bash +npx skills add IgniteUI/{PackageCommon} ``` The CLI will guide you through a series of prompts to: @@ -246,28 +518,37 @@ The CLI will guide you through a series of prompts to: 2. Choose the target location for the skill files in your project (e.g. `.agents/skills/`, `.github/skills/`). 3. Download and write the selected skill files automatically. -Once complete, the skills are ready to use — no manual file copying required. +Once complete, the skills are ready to use - no manual file copying required. + +> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/{PackageCommon}]({GithubLink}) repository. + +--- -> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-webcomponents](https://github.com/IgniteUI/igniteui-webcomponents) repository. +## Theming MCP Server -### Step 2: Load the Skill into Your IDE + -Once you have the files, open them and load them into your AI assistant: +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. -| IDE / Tool | How to load | -|:-----------|:------------| -| **VS Code + GitHub Copilot** | Use `#file:path/to/SKILL.md` in the Copilot Chat input to attach it as context for that session. | -| **Cursor** | Drag the `SKILL.md` file into the chat window, or type `@file` and select it. | -| **Windsurf** | Attach the file using the **+** button in the Cascade chat panel. | -| **JetBrains AI Assistant** | Click the paperclip icon in the AI chat to attach the file as context. | -| **Claude Desktop** | Drag the file into the chat or add it to the project knowledge base via **Project → Add Content**. | -| **Other assistants** | Open the `SKILL.md` file, copy its full contents, and paste them into the system prompt or at the top of your first message. | + ---- + -## Theming MCP Server +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + + + + + +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + + + + + +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. -The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. + For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation. @@ -275,8 +556,18 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
+ - [Getting Started with {ProductName}](../general-getting-started.md) + + - [Ignite UI CLI](../general-cli-overview.md) + + +- Getting Started with {ProductName} +- Angular Schematics & Ignite UI CLI + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md)
From d38a066cb44a76c155b29b6514bbf053d648c96b Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:44:13 +0300 Subject: [PATCH 13/52] docs(ai/theming-mcp): refine overview, add Angular-specific guidance, cross-link new pages Significant additions and refinements across six xplat commits: - Tighten the description and remove the redundant lead-paragraph flourish so it matches the new MCP-server framing. - Overview: collapse three paragraphs into two, then add a paragraph positioning Theming MCP as complementary to CLI MCP (with a React/WebComponents-gated link to the new end-to-end walkthrough). - New Angular-only "How version resolution works" subsection explaining npx detection of the locally-installed igniteui-theming and the behavior when no project is present. - "Other MCP Clients" reformatted from a Command/Arguments list to a single launch-command code block. - Heading rename: Customizing -> Customize AI Behavior with Project Rules (matches imperative style of nearby headings). - New Angular-only DocsAside after the compound-components note pointing to the `licensed` parameter for @infragistics/igniteui-angular consumers. - Section heading "Example Scenarios" -> "Common Workflows". - New Project Theme: Angular gets its own Sass example using @use 'igniteui-angular/theming' / core() / theme(...) mixins. - Brand-Exact Color Shades: inline Angular-only link to the Sass palettes reference on infragistics.com. - Troubleshooting "Platform not detected": use {PackageCommon} placeholder instead of the hard-coded `igniteui-react` example. - New Angular-only troubleshooting block "Generated Sass does not compile" with the `ng add igniteui-angular` remedy. - Additional Resources expanded: cross-links to the new general-how-to-mcp-e2e.md (React/WC), ai-assisted-development-overview.md, cli-mcp.md, and maker-framework.md pages. HTML platform comments converted to . Schema HTML comment omitted (docfx-only). Em-dash -> hyphen stylistic conversions in the source diff are intentionally NOT ported here - they would touch a lot of unrelated text and the visual rendering is unchanged. Ported from igniteui-xplat-docs commits 331d90d3, bdbd1621, cde675a7, 7bc76c30 (#1971), 10704024, and bd21bcf7 (#1995). Co-authored-by: RadoMirchev Co-authored-by: Stamen Stoychev Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: Konstantin Dinev Co-authored-by: georgianastasov --- .../content/en/components/ai/theming-mcp.mdx | 100 +++++++++++++++--- 1 file changed, 85 insertions(+), 15 deletions(-) diff --git a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx index d45f826b3d..bd62d687ea 100644 --- a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx +++ b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx @@ -1,25 +1,32 @@ --- -title: "{Platform} Theming MCP | Infragistics " -description: "{Platform} works with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your {ProductName} applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements." +title: "{Platform} Theming MCP | Infragistics" +description: "Use the Ignite UI Theming MCP server to generate {ProductName} palettes, themes, typography, and design token overrides through your AI assistant." keywords: "{ProductName} controls, {Platform} widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations" license: MIT mentionedTypes: [] --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; # Ignite UI Theming MCP -

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe what you want — the assistant does the rest.

+

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

## Overview -Instead of writing styles by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more. +The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems — **Material**, **Bootstrap**, **Fluent**, and **Indigo** — in both light and dark variants. While this guide focuses on {Platform}, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on {Platform}, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. -Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** — the server compiles it for you. +Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. + +The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client. + + +For a concrete combined workflow after setup, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md). + **Example prompts to try once connected:** @@ -59,6 +66,16 @@ npx -y igniteui-theming igniteui-theming-mcp The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + +### How version resolution works + +Because `igniteui-theming` is a dependency of `igniteui-angular`, it is already present in your `node_modules` after `npm install`. When you run the launch command above, `npx` detects the locally installed copy and runs it directly. No network request is made. This means the MCP server version always stays in sync with the rest of your Ignite UI packages. + +If you run the command outside a project (or before running `npm install`), `npx -y` downloads the **latest** version from npm into a temporary cache instead. The server will still start, but `detect_platform` will return `generic` since there is no `package.json` to inspect. + +Choose your AI client below for the specific configuration steps. + + ### VS Code GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root: @@ -172,12 +189,13 @@ MCP support requires the AI Assistant plugin to be installed and enabled in your ### Other MCP Clients -For any other MCP-compatible client, use the STDIO transport with the following command and arguments: +For any other MCP-compatible client, use the STDIO transport with this launch command: -- **Command**: `npx` -- **Arguments**: `-y`, `igniteui-theming`, `igniteui-theming-mcp` +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` -## Customizing AI Behavior with Project Rules +## Customize AI Behavior with Project Rules This section is optional. It is aimed at teams that want to fine-tune _how_ the AI generates theming code to match their existing codebase conventions. @@ -252,7 +270,13 @@ Here is a brief overview of each tool: For compound components (e.g., `combo`, `select`, `grid`), `get_component_design_tokens` returns a list of related child themes instead of a flat token list. For example, querying `grid` may return child themes such as `grid`, `grid-toolbar`, `grid-filtering`, and `paginator`. The AI will generate a separate `create_component_theme` call for each child theme using the appropriate scoped selector. -## Example Scenarios + + +If your project uses the licensed `@infragistics/igniteui-angular` package, tell the AI so it can set the `licensed` parameter on palette, theme, and component tools. This adjusts the generated import paths accordingly. + + + +## Common Workflows The following scenarios show what you can ask the AI to do once the MCP server is connected. @@ -262,6 +286,29 @@ The following scenarios show what you can ask the AI to do once the MCP server i The AI will call `create_theme` and return a ready-to-use `styles.scss` file. The generated output will look similar to this: + +```scss +/* styles.scss */ +@use 'igniteui-angular/theming' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, + $gray: #9e9e9e, +); + +$my-typography: typography( + $font-family: 'Roboto, sans-serif', +); + +@include core(); +@include typography($my-typography); +@include theme($my-palette, $schema: $light-material-schema); +``` + + + ```scss /* styles.scss */ @use 'igniteui-theming' as *; @@ -281,6 +328,7 @@ $my-palette: palette( $type-scale: $material-type-scale ); ``` + ### Dark Mode Variant @@ -288,9 +336,9 @@ $my-palette: palette( ### Brand-Exact Color Shades -> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_ +> _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values - create a custom palette."_ -The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. +The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes) for more detail on shade generation. ### Component-Level Customization @@ -308,7 +356,7 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-react`) as a dependency. You can also tell the AI explicitly: _"Use {ProductName}."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `{PackageCommon}`) as a dependency. You can also tell the AI explicitly: _"Use the {Platform} platform."_ **Luminance warning on colors** @@ -318,9 +366,31 @@ If the AI warns about color luminance, it means the chosen color is too light or For light themes use a light surface (e.g., `#fafafa`). For dark themes use a dark surface (e.g., `#121212`). Mismatched surface colors cause the AI to emit a warning. + +**Generated Sass does not compile** + +Ensure `igniteui-angular` and `igniteui-theming` are installed: + +```bash +ng add igniteui-angular +``` + +Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index) for the correct file setup. + + ## Additional Resources + +- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md) + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) - [{ProductName} Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [MAKER Framework](./maker-framework.md) + +
+ +Our community is active and always welcoming to new ideas. + - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) - From e67e370f0d53302d78958e81f52d20fe62f99f67 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:46:18 +0300 Subject: [PATCH 14/52] docs(ai/ai-assisted-development-overview): create overview hub for the AI toolchain New file - this is the top-level entry point for Ignite UI's AI tooling, introduced in xplat across multiple commits during April-May 2026. Covers all three independently usable layers: - Agent Skills (developer-owned instruction packages) - CLI MCP server (igniteui-cli) for project scaffolding + docs/API queries - Theming MCP server (igniteui-theming) for design tokens, palettes, contrast - MAKER MCP server (@igniteui/maker-mcp) - multi-agent orchestration Highlights: - "Configure the AI Toolchain" section centres on `npx igniteui-cli ai-config` with a DocsAside warning about the unpinned-version pitfall. - "What to Expect" documents the two terminal outputs (with/without Ignite UI installed in the project). - "Start the Servers" enumerates the manual start step in each supported AI client (VS Code, Cursor, Claude Code, JetBrains AI Assistant, Claude Desktop). - "Install Ignite UI and Add Skills Later" - per-framework install commands via PlatformBlock; Blazor gets a callout that ai-config is not yet wired and points at `gh skill install`. - "AI Toolchain at a Glance" comparison table. - Supported AI Clients table with per-client config file locations. - Step 1/2/3 setup walkthrough with VS Code and generic mcpServers JSON snippets. Conversions performed: - HTML platform comments -> . - > [!NOTE] and > [!IMPORTANT] admonitions -> and . - _description/_keywords/_license -> docs-template's quoted-string keys. - _language and namespace frontmatter fields dropped (docfx-only). - Schema HTML comment dropped (docfx-only). - Cross-links updated from .md to keep the existing docs-template convention (links to skills.md, cli-mcp.md, theming-mcp.md remain). Ported from igniteui-xplat-docs commits fd76a947, bdbd1621, 63648259, cde675a7, 7bc76c30 (#1971), 9381b41e (#1984), f365af61 (#1988), and bd21bcf7 (#1995). Co-authored-by: georgianastasov Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: Konstantin Dinev Co-authored-by: RadoMirchev --- .../ai/ai-assisted-development-overview.mdx | 297 ++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx diff --git a/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx new file mode 100644 index 0000000000..fb7ffc84c3 --- /dev/null +++ b/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx @@ -0,0 +1,297 @@ +--- +title: "AI-Assisted Development with Ignite UI - {ProductName}" +description: "Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command - npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs." +keywords: "{Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +last_updated: "2026-05-03" +mentionedTypes: [] +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# AI-Assisted Development with Ignite UI + +{ProductName} 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/mcp-server`) 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 | What it provides | 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 | +| Agent Skills | 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. + +```bash +npx igniteui-cli ai-config +``` + + +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. + + +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: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +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: + +``` +Ignite UI MCP servers configured in .vscode/mcp.json +Agent Skills copied to .claude/skills/ +``` + +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: + + + +```bash +npm install igniteui-angular +npx igniteui-cli@latest ai-config +``` + + + + + +```bash +npm install igniteui-react +npx igniteui-cli@latest ai-config +``` + + + + + +```bash +npm install igniteui-webcomponents +npx igniteui-cli@latest ai-config +``` + + + + + + +For Blazor, the `ai-config` command is currently not available. Install the skills using the GitHub CLI: + + +```bash +gh skill install IgniteUI/igniteui-blazor +``` + + + +The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date) + +## The AI Toolchain at a Glance + +Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together. + +| Layer | What it provides | Owner | Frameworks | +| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- | +| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor | +| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor | +| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor | + +The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk. + +## Agent Skills + +Agent Skills are structured, developer-owned packages that tell AI coding assistants exactly how to use Ignite UI for a specific framework. A Skill package can contain a `SKILL.md` instruction file with component patterns, import paths, and decision flows; references to authoritative Ignite UI documentation; and assets such as schema files or diagrams. When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data - which may reference outdated API signatures or import paths. + +Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase. + +For full setup instructions and IDE wiring, see [Agent Skills](skills.md). + +## 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 is configured via `npx` without a global install: + +```bash +npx igniteui-cli ai-config +``` + +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 the CLI MCP setup guides below. + +It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts. + +## Theming MCP Server + +The Ignite UI Theming MCP server (`igniteui-theming`) is a separate MCP server that exposes the Ignite UI Theming Engine as queryable agent context. It covers design token access, palette definitions, CSS custom property generation, and WCAG AA contrast validation. It is architecturally separate from the CLI MCP server - it can be connected independently to give the AI agent access to theming tools without exposing project scaffolding tools. + +The Theming MCP server starts via `npx`: + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface. + +For configuration details, see [Theming MCP](theming-mcp.md). + +## Supported AI Clients + +The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport. + +| 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` or the Claude Code MCP CLI command | +| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** | + +Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings. + +### 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. + + +**Using Angular Schematics:** + +```bash +ng generate @igniteui/angular-schematics:ai-config +``` + +This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers. + + +**Using the Ignite UI CLI:** + +```bash +npx igniteui-cli ai-config +``` + +If you have the Ignite UI CLI installed globally, use the shorter form: + +```bash +ig ai-config +``` + + + +The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step. + + + + + +The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date. + + + +### 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](skills.md) for the complete setup. + +### Step 2 - Connect the CLI MCP Server + +Add the `igniteui-cli` MCP server entry to the configuration file for your AI client. Use the JSON structure that matches your client: + +**VS Code (`.vscode/mcp.json`):** + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md). + +### Step 3 - Connect the Theming MCP Server (optional) + +Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`: + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +For configuration details and theming workflows, see [Theming MCP](theming-mcp.md). + +## Additional Resources + +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) From f537fb58547025dd4b8545010f8138da4b67670f Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:48:17 +0300 Subject: [PATCH 15/52] docs(ai/cli-mcp): create CLI MCP setup guide for AI clients New file - documents the Ignite UI CLI MCP server that gives AI assistants direct access to Ignite UI CLI scaffolding, component generation, project modification, and documentation-aware workflows via the Model Context Protocol. Content covers: - Overview positioning CLI MCP next to Theming MCP (both connect to the same AI client session). - Example prompts ("Create a new project...", "Add a grid page...", etc.). - Prerequisites: Node 18+, MCP-capable client, internet access, starting point options (empty folder / CLI-scaffolded / existing project). - "Choose a setup path" section formalising the three flows: CLI-first (recommended), empty folder, existing project. Each path includes the exact CLI commands and Angular Schematics equivalents. - Per-platform 'ig new' command variants with Angular/React/WebComponents template flags, plus matching `npx --package igniteui-cli igniteui new` forms. - Per-client setup guides with full mcp.json snippets: VS Code (servers), Cursor (.cursor/mcp.json), Claude Desktop (per-OS path), Claude Code (.mcp.json + `claude mcp add ...`), JetBrains AI Assistant, generic STDIO command, and GitHub Copilot cloud agent with the {type, command, args, tools} repo-level format. - Available Tools table (list_components, get_doc, search_docs, get_project_setup_guide, search_api, get_api_reference). - Common Workflows table mapping scenarios to setup paths. - Troubleshooting section covering npx/ig not recognized, MCP tools missing after save, server start failures, wrong-folder context, empty-folder pitfalls, and rejected GitHub configurations. Conversions performed: - HTML platform comments -> . - > [!NOTE] admonitions -> . - _description/_keywords/_license -> docs-template's quoted-string keys. - _language and namespace frontmatter dropped (docfx-only). - _canonicalLink retained (docs-template convention). - Schema HTML comment dropped (docfx-only). Ported from igniteui-xplat-docs commits fd76a947, bdbd1621, 63648259, cde675a7, plus follow-on tweaks in 28a8aca8/19f17971/f9658faa/5476e2f5/ 4eb094ae (all 'Update doc/en/components/ai/cli-mcp.md') and 262f796e (docs build fix). Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: RadoMirchev Co-authored-by: georgianastasov --- .../src/content/en/components/ai/cli-mcp.mdx | 458 ++++++++++++++++++ 1 file changed, 458 insertions(+) create mode 100644 docs/xplat/src/content/en/components/ai/cli-mcp.mdx diff --git a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx new file mode 100644 index 0000000000..3e841fac06 --- /dev/null +++ b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx @@ -0,0 +1,458 @@ +--- +title: "Ignite UI CLI MCP | Infragistics" +description: "Use the Ignite UI CLI MCP server to scaffold {ProductName} projects, add components, and answer API questions through your AI assistant." +keywords: "{Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" +last_updated: "2026-04-24" +mentionedTypes: [] +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# Ignite UI CLI MCP + +

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for {ProductName} applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

+ +
+ +## Overview + +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](./theming-mcp.md). 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. + +The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. + +**Example prompts to try once connected:** + +> _"Create a new {ProductName} project in this folder, use the recommended defaults, and add a starter dashboard page with sample data."_ + +> _"Add a new grid page to this project, wire it to sample data, and keep the current navigation structure."_ + +> _"What properties and events does the combo component expose, and which ones are most useful for a searchable dropdown?"_ + +> _"Update the existing project to add a side navigation layout and preserve the current pages and routes."_ + +## Prerequisites + +Before configuring the MCP server, make sure you have: + +- **Node.js** (v18 or later) installed - this provides the `npx` command used to launch the server. +- An **AI client with MCP support** - for example, VS Code with GitHub Copilot, GitHub Copilot cloud agent, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. +- Internet access for `npx` package resolution the first time the server starts. +- One of the following starting points: + - an empty folder for a new project + - a project you created with Ignite UI CLI + - an existing {ProductName} project you want to continue working on + +If you want theming tools in the same client session and `igniteui-theming` is not already available in your project, run: + +```bash +npm install igniteui-theming +``` + +## Configure Ignite UI CLI MCP for Your AI Client + +The MCP server is launched through `npx`. No separate installation is required beyond Node.js and access to the `igniteui-cli` package. + +The canonical launch command is: + +```bash +npx -y igniteui-cli mcp +``` + + +The `-y` flag tells `npx` to auto-confirm the package download prompt so the server can start without manual intervention. + + +### Choose a setup path + +You can start with Ignite UI CLI MCP in three ways: + +> **Recommended - CLI first** +> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and writes `.vscode/mcp.json` for VS Code automatically. After that, you only need to review the generated MCP configuration and open the project in your AI client. + +> **Empty folder** +> Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first. + +> **Existing project** +> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write `.vscode/mcp.json` and copy the Agent Skills into your project automatically. For other AI clients, copy the server entries from the client-specific sections below. + +All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting: + +- in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you +- in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that +- in the **existing-project** path, run `ig ai-config` to write `.vscode/mcp.json` and copy the Agent Skills automatically, or add the configuration manually for other clients + +In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session. + +If you are creating a project with Ignite UI CLI first, you can run the CLI in either of these ways: + +- **Global install** + + ```bash + npm install -g igniteui-cli + ``` + + This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly. + +- **Without a global install** + + ```bash + npx --package igniteui-cli igniteui new + ``` + + This runs the CLI through `npx` instead of a global `ig` command. + +For the **CLI-first** path, you can create the project in guided mode or with a direct command. + +Use guided mode when you want the CLI to walk you through the available options: + +```bash +ig new +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new +``` + +Use a direct command when you already know the project settings: + + + +```bash +ig new my-app --framework=angular --type=igx-ts --template=empty +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=angular --type=igx-ts --template=empty +``` + + + + + +```bash +ig new my-app --framework=react --type=igr-ts --template=top-nav +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=react --template=top-nav +``` + + + + + +```bash +ig new my-app --framework=webcomponents --template=side-nav +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=webcomponents --template=side-nav +``` + + + +In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself. + + +For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the [Ignite UI CLI documentation](../general-cli-overview.md). + + +### VS Code + +GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config`) from your project root to generate this file automatically. To configure it manually, create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +If you created the project with Ignite UI CLI first, review the generated `.vscode/mcp.json` and confirm that both entries are present. + +Once saved, open the GitHub Copilot chat panel, switch to **Agent** mode, and the Ignite UI CLI MCP tools will be available. + + +MCP support in VS Code requires GitHub Copilot and VS Code 1.99 or later. + + +### Cursor + +Cursor supports project-scoped MCP configuration. Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +The servers will be picked up automatically when you open a new Cursor chat session. + + +You can also configure MCP servers globally via **Settings → MCP** in Cursor. + + +### Claude Desktop + +Add the servers to your Claude Desktop configuration file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Restart Claude Desktop after saving. You will see an MCP server indicator (slider icon) in the chat input area, confirming that MCP tools are active. + +### Claude Code + +Claude Code supports MCP servers through its CLI and a project-scoped `.mcp.json` file. To share the configuration with your team, create or edit `.mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +Alternatively, you can add the servers via the command line for your local environment only: + +```bash +claude mcp add igniteui-cli -- npx -y igniteui-cli mcp +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Use the `/mcp` command inside Claude Code to verify the servers are connected. + +### JetBrains IDEs + +JetBrains AI Assistant supports MCP servers through the IDE settings: + +1. Open **Settings** (or **Preferences** on macOS). + +2. Navigate to **Tools → AI Assistant → Model Context Protocol (MCP)**. + +3. Click **+ Add** and choose **As JSON** or use the form fields. + +4. Enter the following configuration: + + ```json + { + "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. + + +MCP support requires the AI Assistant plugin to be installed and enabled in your JetBrains IDE. + + +### Other MCP Clients + +For any other MCP-compatible client, use the STDIO transport with these launch commands: + +```bash +npx -y igniteui-cli mcp +npx -y igniteui-theming igniteui-theming-mcp +``` + +### GitHub + +GitHub Copilot cloud agent supports repository-level MCP configuration. In your repository: + +1. Open the main repository page. +2. Click **Settings**. +3. In the sidebar, go to **Copilot** then **Cloud agent**. +4. Paste your JSON in the **MCP configuration** section. +5. Click **Save**. + +Use a repository configuration like this: + +```json +{ + "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": ["*"] + } + } +} +``` + +This setup is useful when you want the GitHub cloud agent to use the same CLI MCP and Theming MCP tools directly from the repository context. + +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never call these tools directly. Describe what you want in chat, and the assistant picks the right one. This table is here so you know what's available before you start. + +To get the live list with current parameters, ask: + +> _"What tools does the Ignite UI CLI MCP provide?"_ + +Here is a brief overview of each tool: + +| Tool | Description | +| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | +| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | +| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | +| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | +| `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. | + +At a high level, the CLI MCP tools help with: + +- creating new projects +- working in existing projects +- adding and modifying components +- updating project structure and configuration +- answering documentation and API questions + + +Framework detection uses component prefixes: `for Angular`, `for React`, `for Web Components`, `for Blazor`. The assistant picks up the right framework automatically from your open files or prompt context. + + +The theming server adds styling, theme, palette, and token workflows to the same client session. + +## Common Workflows + +The following setup scenarios show when to use each starting point. + +### CLI-first setup + +Create the project with Ignite UI CLI first when you want the fastest guided setup and want `.vscode/mcp.json` generated for you automatically. + +Example scenarios: + +- _"I want to create a new project with Ignite UI CLI first, open the generated project in VS Code, and continue from there with MCP."_ +- _"I already know I want a React project, so I want to create it with the CLI and then use MCP to add pages and components."_ + +### Empty folder setup + +Start from an empty folder when you want the assistant to create the project from chat after you add the MCP configuration yourself. + +Example scenarios: + +- _"I have a completely empty folder and I want the assistant to create the whole project from chat after MCP is connected."_ +- _"I do not want to run Ignite UI CLI manually first. I want MCP to drive the first project creation step."_ + +### Existing project setup + +Connect MCP to an existing project when you want to keep the current codebase and use the assistant for project changes, component work, and documentation questions. + +Example scenarios: + +- _"I already have a project and only want to add MCP so the assistant can help me update pages and components."_ +- _"The project exists already, and I mainly want to ask documentation and API questions while working in the current codebase."_ + +## Troubleshooting + +**`npx` is not recognized** + +Node.js is not installed or is not available in the current terminal environment. Install Node.js from [nodejs.org](https://nodejs.org) and verify with `node --version`. + +**`ig` is not recognized** + +If you want to use the global `ig` command, install Ignite UI CLI first with `npm install -g igniteui-cli`. If you do not want a global install, use the `npx --package igniteui-cli igniteui ...` form instead. + +**The MCP tools do not appear after saving the configuration** + +Reload the workspace, reopen the editor, or restart the AI client. Some clients require a full restart to detect new MCP configuration files. + +**One server fails to start** + +Verify that the configuration content matches the examples exactly, including key names and argument order. + +**The project was created, but the MCP configuration is only available for VS Code** + +Ignite UI CLI writes `.vscode/mcp.json` for the CLI-first path. If you are using Cursor, Claude Desktop, Claude Code, JetBrains, GitHub, or another MCP client, copy the same server entries into that client's configuration format and location. + +**The assistant is working in the wrong folder or cannot find the project files** + +Make sure the AI client is pointed at the project root. If you are using an editor-based client, open the project root folder. If you are using a desktop or chat-first client, make the correct project folder available as the session context. + +**The empty-folder setup does not behave as expected** + +Check that the folder is actually empty before starting. If the folder already contains project files, use the existing-project path instead of treating it as a new empty workspace. + +**The GitHub MCP configuration is rejected** + +Validate that the JSON uses the `mcpServers` structure and that each local server entry includes `type`, `command`, and `args`. If you include the `tools` field, use valid tool names or `["*"]`. + +## Additional Resources + +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [{ProductName} Skills](./skills.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) From da922c660e5288b8c00eb718ce9c1b85be91a84e Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:50:23 +0300 Subject: [PATCH 16/52] docs(ai/maker-framework): create MAKER multi-agent orchestration MCP page New file introducing the MAKER Framework MCP server (@igniteui/maker-mcp), a multi-agent AI orchestration server from Infragistics. Framework-agnostic - not specific to Angular/React/WC/Blazor and does not modify source files on its own. Content covers: - Overview: MAKER decomposes complex tasks into validated step plans using a first-to-ahead-by-K consensus vote across multiple AI agents. Based on Cognizant AI Lab's "Solving a million-step LLM task with zero errors". - How MAKER Works: planning phase (proposer + plan-voter), execution phase (executor + execution-voter), red-flag validation layer with custom IAIRedFlagValidator implementations. - Install: one-time GitHub Packages registry setup (`npm config set @igniteui:registry https://npm.pkg.github.com`) plus a PAT with read:packages scope in ~/.npmrc. - Connect to Your AI Client: full mcp.json snippets for VS Code, Claude Desktop, Cursor/Claude Code/JetBrains; STDIO transport across all. - Configure: env-var conventions (double-underscore separator), AI provider keys (OpenAI/Anthropic/Google), per-internal-client model selection for the four pipelines (Planning, PlanVoting, Execution, ExecutionVoting), external MCP server registration via indexed env vars (Executor__McpServers__0__*), and batchSize/k tuning guidance. - Available Tools: plan, execute, plan_and_execute. - Common Workflows: one-shot, inspect-before-execute, high-confidence critical (k=15), low-cost exploratory (k=3). - Supported Platforms: win-x64, osx-x64, osx-arm64, linux-x64; ARM Linux not yet packaged. MAKER_MCP_CACHE override documented. Conversions performed: - Frontmatter normalized to docs-template style (quoted keys, no _language/namespace). - HTML schema/cspell comments dropped (docfx-only). - No needed - this file is platform-agnostic by design. - No DocsAside needed - source uses no [!NOTE]/[!IMPORTANT] admonitions. - last_updated retained but timestamp updated to reflect docs-template port date is not necessary; left as the source originally provided no trailing field, so it is omitted here. Ported from igniteui-xplat-docs commits 7bc76c30 (#1971, add-maker-to-ai-docs) and bd21bcf7 (#1995, Blazor + GH CLI follow-on). Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: Konstantin Dinev --- .../en/components/ai/maker-framework.mdx | 236 ++++++++++++++++++ 1 file changed, 236 insertions(+) create mode 100644 docs/xplat/src/content/en/components/ai/maker-framework.mdx diff --git a/docs/xplat/src/content/en/components/ai/maker-framework.mdx b/docs/xplat/src/content/en/components/ai/maker-framework.mdx new file mode 100644 index 0000000000..9a7b61fa32 --- /dev/null +++ b/docs/xplat/src/content/en/components/ai/maker-framework.mdx @@ -0,0 +1,236 @@ +--- +title: "MAKER Framework | Ignite UI AI Orchestration" +description: "The MAKER Framework is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated step plans using consensus-based voting across OpenAI, Anthropic, and Google AI providers." +keywords: "{Platform}, {ProductName}, Infragistics, MAKER, multi-agent, AI orchestration, MCP, Model Context Protocol, consensus voting, plan and execute, task decomposition" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/maker-framework" +mentionedTypes: [] +--- + +# MAKER Framework + +The MAKER Framework (`@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. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction. + +The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry. + +## How MAKER Works + +The MAKER Framework operates in two sequential phases: planning and execution. Each phase uses a dedicated set of internal AI clients and applies the same consensus-based voting mechanism to validate outputs before advancing. + +In the **planning phase**, a planning client proposes batches of steps (configurable batch size, default 3). A separate plan-voting client then runs a "first-to-ahead-by-K" vote: multiple AI agents vote "Yes", "No", or "End" on the proposed steps. A proposal is accepted when one outcome leads the others by K votes. Rejected proposals include the rejection reasons in the next retry, driving continuous refinement until the plan is complete or the retry limit is reached. + +In the **execution phase**, the framework processes the validated step plan in configurable batches. An execution client runs each batch and produces an updated state. An execution-voting client validates the new state against the previous state and the original task, using the same K-margin voting algorithm. Rejected executions retry with feedback. The final accumulated state is the task result. + +The red-flag validation layer operates throughout both phases. Every AI client request is wrapped in a guarded call that runs configurable validators on the response before it enters the voting system. Malformed or too-short responses are retried with the failure message appended to the prompt. Custom validators can be added by implementing `IAIRedFlagValidator`. + +## Install the MAKER MCP Server + +MAKER is published on GitHub Packages under the `@igniteui` scope and requires a one-time registry setup. Run the following command once on your machine: + +```bash +npm config set @igniteui:registry https://npm.pkg.github.com +``` + +Then open `~/.npmrc` (Windows: `%USERPROFILE%\.npmrc`) and add your GitHub Personal Access Token with `read:packages` scope: + +```ini +//npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT +``` + +After the registry is configured, the MCP server runs via `npx` without a separate global install. The native binary (~50 MB) is downloaded and cached on first run. Subsequent starts are instant. + +## Connect to Your AI Client + +Add the `maker` server entry to the MCP configuration file for your AI client. The `env` block passes your AI provider key; only set keys for the providers you use. + +### VS Code (GitHub Copilot) + +Add to `.vscode/mcp.json` in your workspace: + +```json +{ + "servers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_and_execute` appear in the tools list. + +### Claude Desktop + +1. Open your Claude Desktop configuration file: + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` +2. Add the `maker` entry to the `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } +} +``` + +3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). + +### Cursor, Claude Code, JetBrains, and Other MCP Clients + +Any client that supports MCP with STDIO transport uses the same `mcpServers` block: + +```json +{ + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__OpenAI": "" + } + } + } +} +``` + +## Configure the MAKER MCP Server + +All MAKER configuration is supplied through environment variables. The naming convention uses double underscore (`__`) as the section separator. Pass variables in the `env` block of your MCP client configuration. + +### AI Provider Keys + +Set at least one provider key. You can set keys for multiple providers simultaneously and assign different providers to different internal clients. + +| Environment Variable | Description | +| ------------------------------------- | ----------------- | +| `Executor__AIProviderKeys__OpenAI` | OpenAI API key | +| `Executor__AIProviderKeys__Anthropic` | Anthropic API key | +| `Executor__AIProviderKeys__Google` | Google AI API key | + +### Select Models per Internal Client + +MAKER uses four internal AI clients: `Planning`, `PlanVoting`, `Execution`, and `ExecutionVoting`. Each client can target a different provider and model. The defaults use `gpt-5.1` on OpenAI for all four clients. + +To mix providers for cost and quality balance, set the `Provider` and `Model` variables per client: + +```json +"env": { + "Executor__AIProviderKeys__OpenAI": "", + "Executor__AIProviderKeys__Anthropic": "", + "Executor__Clients__Planning__Provider": "Anthropic", + "Executor__Clients__Planning__Model": "claude-opus-4-5", + "Executor__Clients__PlanVoting__Provider": "OpenAI", + "Executor__Clients__PlanVoting__Model": "gpt-4.1-mini", + "Executor__Clients__Execution__Provider": "Anthropic", + "Executor__Clients__Execution__Model": "claude-opus-4-5", + "Executor__Clients__ExecutionVoting__Provider": "OpenAI", + "Executor__Clients__ExecutionVoting__Model": "gpt-4.1-mini" +} +``` + +Valid `Provider` values: `OpenAI`, `Anthropic`, `Google`. + +### Connect External MCP Servers + +MAKER can connect to external MCP servers as tool providers, making their tools available to the execution client. Configure each server with a name, description, URL, and optional API key using indexed environment variables: + +```json +"env": { + "Executor__McpServers__0__Name": "igniteui-cli", + "Executor__McpServers__0__Description": "Ignite UI CLI scaffolding and documentation tools", + "Executor__McpServers__0__Url": "https://mcp.example.com/igniteui-cli" +} +``` + +Increment the index (`0`, `1`, `2`, ...) to register additional servers. + +### Tune Batch Size and Voting Threshold + +Each MCP tool call accepts `batchSize` and `k` parameters in natural language. Set them in your prompt when invoking the tools. + +| Parameter | Default | Description | +| ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------- | +| `batchSize` | `3` | Steps proposed or executed per voting round. Lower values give more control; higher values improve throughput. | +| `k` | `10` | Consensus margin threshold. Higher values require stronger agreement across voting agents before a result is accepted. | + +Lower `k` (3-5) for faster, exploratory tasks. Raise `k` (15-20) for critical tasks where correctness is more important than token cost. + +## Available Tools + +The MAKER MCP server exposes three tools to the connected AI agent. + +| Tool | Description | +| ------------------ | ------------------------------------------------------------------------- | +| `plan` | Decompose a task into a validated, ordered step list without executing it | +| `execute` | Execute a step list produced by `plan`, with consensus voting per batch | +| `plan_and_execute` | Plan and execute in one call with live progress events between phases | + +Use `plan` followed by `execute` when you want to inspect and validate the step plan before execution. Use `plan_and_execute` for unattended runs where inspection is not required. + +## Common Workflows + +### One-Shot Task + +Invoke `plan_and_execute` directly with default settings: + +> Use plan_and_execute to write a detailed comparison of REST vs GraphQL for a technical blog post. + +### Inspect the Plan Before Executing + +Use `plan` to review steps, then pass them to `execute`: + +> 1. Use plan to create a plan for migrating a PostgreSQL schema to a multi-tenant design. +> 2. Show me the steps. +> 3. Use execute with those steps to carry out the migration script. + +### High-Confidence Execution for Critical Tasks + +Raise `k` to require stronger consensus: + +> Use plan_and_execute with batchSize=3 and k=15 to review this smart contract for security vulnerabilities. + +### Low-Cost Exploratory Task + +Reduce both parameters to minimize token usage: + +> Use plan_and_execute with batchSize=3 and k=3 to draft a project README for a Node.js CLI tool. + +## Supported Platforms + +The native binary is distributed for four platforms. The correct binary is selected and cached automatically on first run. + +| Platform | Architecture | RID | +| -------- | --------------------- | ----------- | +| Windows | x64 | `win-x64` | +| macOS | x64 (Intel) | `osx-x64` | +| macOS | arm64 (Apple Silicon) | `osx-arm64` | +| Linux | x64 | `linux-x64` | + +ARM Linux is not currently packaged. To request additional platform support, open an issue at [github.com/IgniteUI/MAKER](https://github.com/IgniteUI/MAKER). + +The binary cache location can be overridden with the `MAKER_MCP_CACHE` environment variable. The default cache paths are `%LOCALAPPDATA%\maker-mcp\{version}\{rid}\` on Windows and `~/.cache/maker-mcp/{version}/{rid}/` on macOS and Linux. + +## Additional Resources + +- [AI-Assisted Development Overview](ai-assisted-development-overview.md) +- [Agent Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) From dfbc3567ea264411cac3db623922d005ffccafa8 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:51:42 +0300 Subject: [PATCH 17/52] docs(general-how-to-mcp-e2e): create end-to-end CLI MCP + Theming MCP walkthrough New file. The companion piece to ai/cli-mcp.md and ai/theming-mcp.md: a single linear walkthrough that takes the reader from "empty folder" to a themed, working Ignite UI app, using only chat prompts after step 2. Step-by-step layout: 1. Start with Ignite UI CLI (global install or npx; guided or direct mode; per-platform 'ig new' for React/WebComponents). 2. Connect CLI MCP and Theming MCP (full mcp.json snippets for VS Code's 'servers:' shape and the generic 'mcpServers:' shape for Cursor / Claude Desktop / Claude Code / JetBrains). 3. Let the Assistant Review the Project. 4. Add a Real Feature Through Chat (Orders grid example with sample data, filtering/sorting/paging follow-up). 5. Ask Documentation Questions in the Same Session. 6. Apply a Custom Theme (Theming MCP prompts). 7. Continue Iterating (alternate project + theming in one conversation). Plus a "Topic Takeaways" closer and Related Topics cross-links. Includes a "How CLI MCP and Theming MCP Divide Responsibilities" table at the top that pins down which server owns which workflow. Conversions: - HTML platform comments -> (React, WebComponents). - _description / _keywords / _license -> docs-template's bare/quoted keys. - _language and namespace frontmatter dropped (docfx-only). - _canonicalLink retained (docs-template convention). - No DocsAside needed; source has no markdown admonitions. Fixed an odd source artifact: "Add or update {}components" -> "Add or update {Platform} components" (the source token expansion was missing). Ported from igniteui-xplat-docs commits 68da8b55, 63648259, 7a8854aa, 13929aa4, and a5aa9c75 (Simplify npx command usage). Co-authored-by: georgianastasov --- .../en/components/general-how-to-mcp-e2e.mdx | 277 ++++++++++++++++++ 1 file changed, 277 insertions(+) create mode 100644 docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx diff --git a/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx b/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx new file mode 100644 index 0000000000..83e703e9d5 --- /dev/null +++ b/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx @@ -0,0 +1,277 @@ +--- +title: "Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP - {ProductName}" +description: "Follow an end-to-end {ProductName} workflow with Ignite UI CLI MCP and Ignite UI Theming MCP start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme." +keywords: "{Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, workflow, theming, prompt" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/general-how-to-mcp-e2e" +mentionedTypes: [] +--- +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP + +

Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme an {ProductName} application through chat prompts. CLI MCP handles project creation, component work, and documentation questions. Theming MCP handles palettes, themes, tokens, and styling workflows. This topic shows the full process in one clear flow.

+ +
+ +## How CLI MCP and Theming MCP Divide Responsibilities + +CLI MCP and Theming MCP are two separate STDIO-transport MCP servers with distinct, non-overlapping responsibilities in an Ignite UI for Angular development workflow. + +| Concern | Server | +| ------------------------------------------------ | ----------- | +| Create and scaffold project structure | CLI MCP | +| Add or update {Platform} components | CLI MCP | +| Query component APIs and documentation | CLI MCP | +| Generate color palettes and shade variations | Theming MCP | +| Create and apply global theme configurations | Theming MCP | +| Generate component-level design tokens | Theming MCP | +| Adjust spacing, sizing, and border-radius | Theming MCP | + +Neither server executes steps autonomously - the AI assistant invokes MCP tools only in response to your prompts. CLI MCP does not generate or modify theme or Sass files. Theming MCP does not scaffold components, modify application logic, or answer documentation questions. Both servers require an MCP client that supports STDIO transport; they cannot be used from a browser-only chat interface. + +## What You Need + +Before you start, make sure you have: + +- **Node.js** installed so `npx` is available +- a supported AI client with MCP support +- internet access for `npx` package resolution on first use +- a folder for the project + +This walkthrough works best with a **CLI-first** setup because Ignite UI CLI scaffolds the project and prepares the first MCP configuration for VS Code automatically. + +If you still need the detailed setup reference for each client, see [Ignite UI CLI MCP](ai/cli-mcp.md) and [Ignite UI Theming MCP](ai/theming-mcp.md). + +## Step 1: Start with Ignite UI CLI + +The recommended starting point is to create the project with Ignite UI CLI first. + +You can run Ignite UI CLI in either of these ways: + +### Global install + +```bash +npm install -g igniteui-cli +``` + +This gives you the `ig` command in any terminal session. + +### Without a global install + +```bash +npx ig new +``` + +This runs the CLI through `npx` instead of a global `ig` command. + +You can use **guided mode** if you want the CLI to walk you through the options: + +```bash +ig new +``` + +Matching `npx` form: + +```bash +npx ig new +``` + +You can also use a direct command when you already know the project settings. + + +For React: + +```bash +ig new my-app --framework=react +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=react +``` + + + +For Web Components: + +```bash +ig new my-app --framework=webcomponents +``` + +Matching `npx` form: + +```bash +npx ig new my-app --framework=webcomponents +``` + + +What happens next: + +- Ignite UI CLI creates the project structure +- the required project packages are installed +- for the CLI-first path, VS Code also gets an initial `.vscode/mcp.json` + +## Step 2: Connect CLI MCP and Theming MCP + +After the project is created, make sure both MCP servers are available in your AI client. + +### VS Code + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +After saving the configuration, reopen or restart the AI client and confirm that both `igniteui-cli` and `igniteui-theming` are available. + +## Step 3: Let the Assistant Review the Project + +Once both MCP servers are running, open a new chat and start by giving the assistant project-level context. + +Useful prompts: + +> _"Review this project and explain the current structure before we start adding features."_ + +> _"Tell me what was created, what the main entry points are, and where new pages should be added."_ + +What happens next: + +- CLI MCP inspects the generated or existing project +- the assistant summarizes the structure +- you now have a shared starting point for the next steps + +## Step 4: Add a Real Feature Through Chat + +After the project structure is clear, ask for a concrete feature. + +Example prompt: + +> _"Add an Orders page with an {ProductName} grid. Include columns for Order ID, Customer Name, Order Date, and Total Amount, and bind the grid to sample data."_ + +Follow-up prompt: + +> _"Enable filtering, sorting, and paging on the Orders grid, and keep the page layout consistent with the rest of the app."_ + +What happens next: + +- CLI MCP adds or updates the right page +- the assistant creates or updates the component code +- the feature is integrated into the existing app structure + +You can continue with smaller refinements: + +> _"Add a simple toolbar above the grid and keep the layout compact."_ + +## Step 5: Ask Documentation Questions in the Same Session + +You do not need to leave the conversation to look up component APIs. + +Example prompts: + +> _"What filtering options does the {Platform} grid support, and which ones are the best fit for a simple orders table?"_ + +> _"What events does the combo component expose, and which one should I use for selection changes?"_ + +> _"Which {ProductName} component is the best fit for a side navigation layout, and why?"_ + +What happens next: + +- CLI MCP answers the question using documentation-aware tools +- you can immediately follow with an implementation request + +For example: + +> _"Apply the recommended filtering approach to the current Orders grid."_ + +## Step 6: Apply a Custom Theme + +Once the app structure and main feature are in place, switch to Theming MCP in the same chat. + +Example prompt: + +> _"Apply a professional theme to the app. Use a deep blue primary color, a warm amber secondary color, and keep the spacing compact."_ + +What happens next: + +- Theming MCP generates the palette and theme configuration +- the assistant updates the right theme or styles files +- the app styling stays aligned with the current structure + +You can refine the theme further with more targeted prompts: + +> _"Make the grid header use the primary color, increase the row height slightly, and keep the rest of the page visually clean."_ + +> _"Show me the generated primary and secondary palette shades before you refine the grid styling."_ + +## Step 7: Continue Iterating + +The strongest part of this workflow is that you can keep moving between project work, documentation questions, and theming in one conversation. + +Example prompts: + +> _"Keep the current Orders page structure, but simplify the layout and make the filter area more compact."_ + +> _"Use the current theme, but make the dashboard cards and grid spacing more consistent with the rest of the app."_ + +> _"Review the generated files and explain the main project, component, and theme changes you made."_ + +What happens next: + +- CLI MCP handles project and component refinements +- Theming MCP handles theme and token refinements +- the assistant keeps the whole workflow connected end to end + +## Topic Takeaways + +This workflow works well when you want to keep project setup, component work, documentation lookups, and theming in one chat session. + +Use it when: + +- you want to start from a real project scaffold instead of isolated code snippets +- you expect to alternate between implementation and documentation questions +- you want project structure and visual styling to evolve together + +In practice, the most effective pattern is to use CLI MCP for project and component changes, pause for documentation questions when needed, and then use Theming MCP to refine the result without leaving the same conversation. + +## Related Topics + +- [AI-Assisted Development with Ignite UI](ai/ai-assisted-development-overview.md) +- [{ProductName} Skills](ai/skills.md) +- [Ignite UI CLI MCP](ai/cli-mcp.md) +- [Ignite UI Theming MCP](ai/theming-mcp.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) From 012ce861975920c8a1dcfb21a6347d5d949e8b49 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:52:53 +0300 Subject: [PATCH 18/52] docs(general-step-by-step-guide-using-cli): new page documenting the CLI interactive wizard New file. Cross-linked from general-cli-overview, general-getting-started, and ai/cli-mcp. Walks through the Ignite UI CLI's interactive 'ig' / 'ig new' wizard step by step: - Create a New Project - Enter a project name - Select a framework (React or WebComponents, gated by PlatformBlock) - Select a project type (Ignite UI for React TS / Web Components TS) - Select a project template (per-platform tables: Empty/Base/Top Navigation for React; Empty/Base/Side Navigation for WebComponents) - Select a theme (default pre-compiled CSS vs custom Sass palette) - Complete or continue - Add View ('ig add' interactive; direct 'ig add [template] [name]' form with grid MyGrid example) - Run the Application ('ig start') Notes the limitation that step-by-step mode is interactive-only (no scripted use) and points at Inquirer.js terminal-compat docs. Conversions: - The entire body is wrapped in (matches the source which gates the whole file under those platforms). - Inner per-platform variants for framework/type/template tables use nested . - > [!NOTE] -> . - Frontmatter normalized; docfx schema comment dropped. Ported from igniteui-xplat-docs commit 52228c2e (#1963, feat: update cli overview/getting started topics) and follow-up cf575cdf (#1975). Co-authored-by: Ivaylo Barakov Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> --- .../general-step-by-step-guide-using-cli.mdx | 132 ++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx diff --git a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx new file mode 100644 index 0000000000..76f6adaf47 --- /dev/null +++ b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx @@ -0,0 +1,132 @@ +--- +title: "Step-by-Step Guide Using Ignite UI CLI | {ProductName} | Infragistics" +description: "Walk through the Ignite UI CLI interactive wizard to create a new {Platform} project, choose a template and theme, and add {ProductName} component views." +keywords: "{Platform} cli, ignite ui cli, {ProductName}, scaffolding, step-by-step, Infragistics" +mentionedTypes: [] +last_updated: "2025-04-08" +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + + + +# Step-by-Step Guide Using Ignite UI CLI + +The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for {ProductName} projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront. + +The step-by-step mode does not support scripted or non-interactive use - for that, use the `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. For the full CLI reference, see [Ignite UI CLI Overview](general-cli-overview.md). + +To activate the wizard, run: + +```cmd +ig +``` + +or: + +```cmd +ig new +``` + +## Create a New Project + +The wizard walks through project naming, framework and type selection, template choice, and theming in sequence. Each step displays its options as an interactive list - navigate with the arrow keys and confirm with ENTER. + +### Enter a project name + +First, you will be prompted to enter a name for your application. The project is created inside a directory with the same name. + +### Select a framework + +Navigate through the options using the arrow keys and press ENTER to confirm: + + +Select **React** to scaffold a project pre-configured for {ProductName}. + + + +Select **Web Components** to scaffold a project pre-configured for {ProductName}. + + +### Select a project type + + +Select **Ignite UI for React TS** as the project type. + + + +Select **Ignite UI for Web Components TS** as the project type. + + +### Select a project template + +Choose one of the available project templates. Navigate through the options using the arrow keys and press ENTER to confirm: + + +| Template | Description | +| :--------------- | :-------------------------------------------------- | +| Empty | Minimal project structure with no predefined views | +| Base | Project structure with a home page | +| Top Navigation | Project structure with a top navigation bar | + + + +| Template | Description | +| :--------------- | :-------------------------------------------------- | +| Empty | Minimal project structure with no predefined views | +| Base | Project structure with a home page | +| Side Navigation | Project structure with a side navigation drawer | + + +### Select a theme + +Choose a theme for your application: + +- The **default** option includes a pre-compiled CSS file with the default {ProductName} theme. +- The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.md). + +### Complete or continue + +After completing the above steps, the project structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application. + +## Add View + +The Ignite UI CLI supports multiple component templates that can be added to an existing project. This mode is available either as a continuation of project creation or inside an existing project using: + +```cmd +ig add +``` + +You will be provided with a list of available component templates, grouped by category. Use the arrow keys to navigate through the groups and ENTER to select. For some templates, such as `Custom Grid`, you will be provided with a list of optional features that can be toggled on or off with the SPACE key before confirming your selection. + +After selecting a group, choose a specific template from the list and enter a name for the new component. If you choose to add a scenario template, you will also be presented with a list of available scenario templates. + +After adding a template, you will be asked whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is built and opened in your default browser. + +To add more views to a project later without the wizard, use the direct `add` command: + +```cmd +ig add [template] [name] +``` + +For example: + +```cmd +ig add grid MyGrid +``` + + +Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`. + + +## Run the Application + +Once your project is complete, run it at any time with: + +```cmd +ig start +``` + +This builds the project, starts a local web server, and opens the application in your default browser. + + From 182b23537729cb02a827d52b7e7c4ebca4904e9d Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 10:54:10 +0300 Subject: [PATCH 19/52] docs(layouts/splitter): new {Platform} Splitter topic for WebComponents and React New file. The Splitter was introduced in igniteui-webcomponents@7.1.0 (also documented in the changelog migration earlier in this branch). It pairs a resizable two-pane layout with collapse/expand controls, keyboard support, and nested-splitter composition. Sections covered: - Overview + Example (Sample at /layouts/splitter/base, 520px). - Getting Started: install instructions and registration (defineComponents for WebComponents; npm install igniteui-react + IgrSplitter + CSS import for React). - Using {Platform} Splitter: 'start'/'end' slots with platform-gated HTML and JSX examples. - Orientation (horizontal default vs vertical). - Pane Size and Constraints: StartSize/EndSize/min/max with examples. - Collapsing and Resizing: DisableResize / DisableCollapse / HideDragHandle / HideCollapseButtons; programmatic toggle('start') with refs. - Nested Splitters (second Sample at /layouts/splitter/nested). - Events: WC uses igcResizeStart/igcResizing/igcResizeEnd; React uses ResizeStart/Resizing/ResizeEnd. Event detail shape documented per platform. - Keyboard Navigation table (Arrow keys, Home/End, Ctrl + Arrow). - Styling: CSS parts table + CSS custom property list + sample at /layouts/splitter/styling. - API References via . Conversions performed to match docs-template conventions: - HTML platform comments ( / ) -> . - Sample backtick syntax (`sample="..."`) -> . - Standalone API type backticks in API References -> JSX. - Inline `Splitter` references in body text -> for consistency with neighbouring topics (e.g. tabs.mdx). - mentionedTypes carried over from source frontmatter so the API search index picks up Splitter and SplitterResizeEventArgs. Ported from igniteui-xplat-docs commits e42211ea (docs(splitter): create splitter topic) and 94a47688 (feat(splitter): enable topic for React; add API maps for WC and React). Co-authored-by: Bozhidara Pachilova Co-authored-by: didimmova --- .../en/components/layouts/splitter.mdx | 315 ++++++++++++++++++ 1 file changed, 315 insertions(+) create mode 100644 docs/xplat/src/content/en/components/layouts/splitter.mdx diff --git a/docs/xplat/src/content/en/components/layouts/splitter.mdx b/docs/xplat/src/content/en/components/layouts/splitter.mdx new file mode 100644 index 0000000000..ee1012e349 --- /dev/null +++ b/docs/xplat/src/content/en/components/layouts/splitter.mdx @@ -0,0 +1,315 @@ +--- +title: "{Platform} Splitter Component | Layout Controls | Infragistics" +description: "Use the {ProductName} Splitter component to create two resizable panes with horizontal or vertical layouts, collapse and expand behavior, keyboard support, and nested split views." +keywords: "splitter, split panes, resizable panes, web components splitter, {Platform} splitter, {ProductName}" +license: MIT +mentionedTypes: ["Splitter", "SplitterResizeEventArgs"] +--- +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiRef from 'igniteui-astro-components/components/mdx/ApiRef.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + +# {Platform} Splitter Overview + +The {ProductName} Splitter provides a resizable split-pane layout that divides content into two areas: `start` and `end`. Users can drag the splitter bar, use keyboard shortcuts, or collapse and expand panes with built-in controls. You can also nest splitters to build complex dashboard-style layouts. + +## {Platform} Splitter Example + + + +
+ +## Getting Started with {Platform} Splitter + + + +First, you need to install the {ProductName} by running the following command: + +```cmd +npm install {PackageWebComponents} +``` + +Before using the , you need to register it as follows: + +```ts +import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcSplitterComponent); +``` + +For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic. + + + + + +First, you need to install the corresponding {ProductName} npm package by running the following command: + +```cmd +npm install igniteui-react +``` + +You will then need to import the and its necessary CSS, like so: + +```tsx +import { IgrSplitter } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + + + +## Using {Platform} Splitter + +Use the `start` and `end` slots to place pane content: + + + +```html + +
Start pane content
+
End pane content
+ +``` + + + + + +```tsx + +
Start pane content
+
End pane content
+ +``` + + + +### Orientation + +Set the `Orientation` property to control pane direction: + +- `horizontal` (default): start and end panes are rendered left and right. +- `vertical`: start and end panes are rendered top and bottom. + + + +```html + +
Top pane
+
Bottom pane
+ +``` + + + + + +```tsx + +
Top pane
+
Bottom pane
+ +``` + + + +### Pane Size and Constraints + +Use size properties to set initial and constrained pane sizes: + +- `StartSize`, `EndSize` +- `StartMinSize`, `EndMinSize` +- `StartMaxSize`, `EndMaxSize` + +Values accept CSS length values such as `px` and `%`. + + + +```html + +
Navigation
+
Main content
+ +``` + + + + + +```tsx + +
Navigation
+
Main content
+ +``` + + + +### Collapsing and Resizing + +Use these properties to control interactions: + +- `DisableResize`: disables pane resizing. +- `DisableCollapse`: disables pane collapsing. +- `HideDragHandle`: hides the drag handle. +- `HideCollapseButtons`: hides collapse and expand buttons. + +You can also collapse or expand panes programmatically: + + + +```ts +const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent; + +splitter.toggle('start'); // collapse start pane +splitter.toggle('start'); // expand start pane +``` + + + + + +```tsx +import { useRef } from 'react'; + +const splitterRef = useRef(null); + +const toggleStartPane = () => { + splitterRef.current?.toggle('start'); +}; +``` + + + +### Nested Splitters + +Splitters can be nested to create multi-region layouts. + + + +## Events + +The Splitter emits the following events during resize operations: + + + +- `igcResizeStart`: fired once when resizing starts. +- `igcResizing`: fired continuously while resizing. +- `igcResizeEnd`: fired once when resizing ends. + +The event detail includes current `startPanelSize`, `endPanelSize`, and `delta` for ongoing and end events. + + + + + +- `ResizeStart`: fired once when resizing starts. +- `Resizing`: fired continuously while resizing. +- `ResizeEnd`: fired once when resizing ends. + +The event detail includes current `StartPanelSize`, `EndPanelSize`, and `Delta` for ongoing and end events. + + + + + +```ts +const splitter = document.querySelector('igc-splitter'); + +splitter?.addEventListener('igcResizeEnd', (event: CustomEvent) => { + console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta); +}); +``` + + + + + +```tsx +const handleResizeEnd = (event: CustomEvent) => { + console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta); +}; + + +
Start pane
+
End pane
+ +``` + + + +## Keyboard Navigation + +When the splitter bar is focused: + +| Keys | Description | +| ---- | ----------- | +| Arrow Left / Arrow Right | Resize panes in horizontal orientation | +| Arrow Up / Arrow Down | Resize panes in vertical orientation | +| Home | Snap start pane to its minimum size | +| End | Snap start pane to its maximum size | +| Ctrl + Arrow Left / Arrow Up | Collapse or expand the start pane | +| Ctrl + Arrow Right / Arrow Down | Collapse or expand the end pane | + +## Styling + +The component exposes CSS parts for styling: + +| Name | Description | +| ---- | ----------- | +| `splitter-bar` | The draggable separator between panes | +| `drag-handle` | The drag handle element in the splitter bar | +| `start-pane` | The start pane container | +| `end-pane` | The end pane container | +| `start-collapse-btn` | Button that collapses the start pane | +| `end-collapse-btn` | Button that collapses the end pane | +| `start-expand-btn` | Button that expands the start pane | +| `end-expand-btn` | Button that expands the end pane | + +It also supports theme CSS variables, including: + +- `--bar-color` +- `--handle-color` +- `--expander-color` +- `--bar-color-active` +- `--handle-color-active` +- `--expander-color-active` +- `--focus-color` +- `--size` + +```css +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} +``` + + + +## API References + + + +- [`Styling & Themes`](../themes/overview.md) + +## Additional Resources + +- [{ProductName} **Forums**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) From dd20f792120e67e89ada510d82374363b3e6e12f Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:02:54 +0300 Subject: [PATCH 20/52] docs(jp/changelog/blazor): port the 25.2 GA + March SR Japanese changelog content Mirror of the English Blazor changelog migration applied to the Japanese translation. The xplat JP file received the same structural change as EN: - New {PackageVerLatest} contains only the March SR bug fixes (2 rows: 3229 IgbGrid trial-watermark, 2754 IgbTabs / IgbSwitch state issue). - New {PackageVerChanges-25-2-MAR} contains the 25.2 GA content (IgbQueryBuilder intro, IgbGrid/Tree/Hierarchical/Pivot scroll perf, PDF export, breaking change on data mutations, IgbThemeProvider, Badge, Checkbox, Combo, Mask input, accessibility/styling enhancements, and a large bug-fixes table). - The previous JP {PackageVerLatest} content (Charts enhancements + 4-row IgbDataChart bug table) is demoted under a new {PackageVerChanges-25-2-DEC} heading. Translations preserved verbatim from xplat JP source. The "Fix typos and improve clarity in changelog" tweaks from 3f7e236c are also captured. Ported from igniteui-xplat-docs commits 51ac4e7e (docs(jp): sync JP changelog files with EN changes) and 3f7e236c (typo fixes). Co-authored-by: TomoyaWashio <148823993+TomoyaWashio@users.noreply.github.com> --- .../general-changelog-dv-blazor.mdx | 100 ++++++++++++++++++ 1 file changed, 100 insertions(+) diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx index 290baca01e..e86a0c3c84 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx @@ -30,6 +30,106 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; ## **{PackageVerLatest}** +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 3229 | IgbGrid | グリッドにライセンス版にもかかわらず Trial の透かしが表示される。 | +| 2754 | IgbTabs | IgbTabs タブ内の IgbSwitch のチェック状態を変更すると、タブのコンテンツが消える。 | + +## **{PackageVerChanges-25-2-MAR}** + +### {PackageGrids} (グリッド) + +#### IgbQueryBuilder +- 新しいコンポーネント IgbQueryBuilder を追加しました。直感的なビジュアル インターフェイスを通じて複雑なフィルタリング条件を構築できる UI コンポーネントです。 + +#### IgbGrid、IgbTreeGrid、IgbHierarchicalGrid、IgbPivotGrid + - グリッドに表示されるデータに基づいてスクロール スロットルを動的に調整することでパフォーマンスを改善しました。 + +#### IgbGrid、IgbTreeGrid、IgbHierarchicalGrid + - グリッド コンポーネントに PDF エクスポート機能を追加しました。既存の Excel および CSV エクスポート オプションに加えて、グリッドを PDF 形式にエクスポートできるようになりました。 + +#### 重大な変更 + +- IgbGrid、IgbTreeGrid、IgbHierarchicalGrid、IgbPivotGrid + - 元の `data` 配列の変更 (元の配列へのレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更を検出するには、コンポーネントに配列参照の変更が必要です。 + +### 一般 + +#### IgbThemeProvider +- 新しいコンポーネント IgbThemeProvider を追加しました。Lit のコンテキスト API を使用して特定のページ セクションにテーマをスコープでき、1 つのページで複数のテーマを有効にします。Shadow DOM と Light DOM の両方で動作します。 + +#### Badge + - 新しいドット タイプ、WCAG AA アクセシビリティ標準に準拠した改善されたアウトライン実装、テーマ ベースのサイズ調整。[#1889](https://github.com/IgniteUI/igniteui-webcomponents/pull/1889) + +#### Checkbox + - 新しい --tick-width CSS プロパティ。[#1897](https://github.com/IgniteUI/igniteui-webcomponents/pull/1897) +#### Combo + - コンボ コンポーネントのクリア ボタンを無効にする新しい disableClear プロパティ。[#1896](https://github.com/IgniteUI/igniteui-webcomponents/pull/1896) +#### Mask input + - 数値パターン用の Unicode 数字コード ポイントを ASCII 数字に変換します。[#1907](https://github.com/IgniteUI/igniteui-webcomponents/pull/1907) + + +#### 機能拡張 + - Button、Button group、Calendar、Checkbox、Date picker、date range picker、Nav drawer、Radio group、Stepper のアクセシビリティ カラー調整。[#1959](https://github.com/IgniteUI/igniteui-webcomponents/pull/1959) + - Button、Calendar、Carousel、Combo、Date picker、Date range picker、input、Select、Textarea のスタイルを更新してデザイン キットと合わせました。 + - Combo のキーボード ナビゲーション エクスペリエンスとグループ化 (ネイティブの Math.groupBy を使用) を改善しました。 + + +### バグ修正 +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 2189 | IgbDataChart | ラベルがない場合に DataChart が軸のレンダリングをスキップする | +| 2317 | IgbGrid | IgbGrid BodyTemplate パフォーマンスの改善 (C#/.NET テンプレート) | +| 2326 | IgbDataPieChart | DataPieChart に OthersCategory スタイリング プロパティを追加 | +| 2907 | IgbDateTimeInput | IgbDateTimeInput の Prompt パラメーターが基盤となる Web Component の prompt プロパティに伝播されない | +| 2908 | IgbMaskInput | IgbMaskInput の Prompt パラメーターが基盤となる Web Component の prompt プロパティに伝播されない | +| 2909 | IgbPivotGrid | IgbPivotGrid は SnackbarDisplayTime を公開しているが、このプロパティは適用されず、誤ったテスト失敗を引き起こす | +| 38668 | IgbDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない | +| 41594 | IgbDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない | +| 41598 | IgbDataChart | ドーナツ チャートの編集時に例外が発生 – DivideByZeroException | +| [#2079](https://github.com/IgniteUI/igniteui-webcomponents/pull/2079) | Calendar | 当月以外の週の `aria-hidden` 状態 | +| [#2078](https://github.com/IgniteUI/igniteui-webcomponents/pull/2078) | Date Picker | ダイアログ モードでのスロット付きアクションの CSS ボーダー | +| [#2068](https://github.com/IgniteUI/igniteui-webcomponents/pull/2068) | Input | フォーカス時のプレースホルダー カラー | +| [#2073](https://github.com/IgniteUI/igniteui-webcomponents/pull/2073) | Input | サフィックス スロット コンテンツが存在する場合の CSS ボーダー | +| [#2069](https://github.com/IgniteUI/igniteui-webcomponents/pull/2069) | Textarea | 下部パディングをデザイン システムに合わせて調整 | +| [#2063](https://github.com/IgniteUI/igniteui-webcomponents/pull/2063) | Validation | スロット付き検証テキストが現在のテーマに従う | +| [#2059](https://github.com/IgniteUI/igniteui-webcomponents/pull/2059) | Tile Manager | コンテンツがなく、最大化/フルスクリーンが無効の場合のみヘッダーを非表示にする | +| [#2061](https://github.com/IgniteUI/igniteui-webcomponents/pull/2061) | Theming | スタイルシートではなくドキュメントの計算スタイルに基づいて初期テーマを解決する | +| [#1909](https://github.com/IgniteUI/igniteui-webcomponents/pull/1909) | Sass Theme Support | Checkbox — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1926](https://github.com/IgniteUI/igniteui-webcomponents/pull/1926) | Sass Theme Support | Chip — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1920](https://github.com/IgniteUI/igniteui-webcomponents/pull/1920) | Sass Theme Support | Combo — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1933](https://github.com/IgniteUI/igniteui-webcomponents/pull/1933) | Sass Theme Support | Select — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1966](https://github.com/IgniteUI/igniteui-webcomponents/pull/1966) | Sass Theme Support | Snackbar — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1972](https://github.com/IgniteUI/igniteui-webcomponents/pull/1972) | Sass Theme Support | コンポーネントに不足していたシャドウを追加 | +| [#1929](https://github.com/IgniteUI/igniteui-webcomponents/pull/1929) | Sass Theme Support | Tabs — 動作しない Sass テーマ パラメーターを修正 | +| [#1935](https://github.com/IgniteUI/igniteui-webcomponents/pull/1935) | Sass Theme Support | Textarea — Sass テーマを更新 | +| [#1980](https://github.com/IgniteUI/igniteui-webcomponents/pull/1980) | Sass Theme Support | Radio — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#1991](https://github.com/IgniteUI/igniteui-webcomponents/pull/1991) | Sass Theme Support | Switch — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#2015](https://github.com/IgniteUI/igniteui-webcomponents/pull/2015) | Sass Theme Support | List — テーマ パッケージの Sass ツールを使用してスタイル設定 | +| [#2030](https://github.com/IgniteUI/igniteui-webcomponents/pull/2030) | Calendar | 月/年ビューのフォーカス スタイル | +| [#1965](https://github.com/IgniteUI/igniteui-webcomponents/pull/1965) | Combo | Notch ボーダー スタイル | +| [#1964](https://github.com/IgniteUI/igniteui-webcomponents/pull/1964) | Checkbox & Switch | `helper-text` スロットのスロット付きコンテンツにカーソルを合わせたときの内部リップルの不透明度 | +| [#1947](https://github.com/IgniteUI/igniteui-webcomponents/pull/1947) | Dialog | 基盤となるダイアログ要素が `display: contents` を持つようになり、DOM レイアウトに参加しない | +| [#1986](https://github.com/IgniteUI/igniteui-webcomponents/pull/1986) | Dialog | `keepOpenOnEscape` が Escape キー押下時にダイアログが閉じるのを防げていない | +| [#1997](https://github.com/IgniteUI/igniteui-webcomponents/pull/1997) | Dialog | 基本スタイルとテーマ | +| [#1985](https://github.com/IgniteUI/igniteui-webcomponents/pull/1985) | List & List Item | リスト アイテムのスロット付き `igc-icon` に不足していたスタイルを追加 | +| [#2010](https://github.com/IgniteUI/igniteui-webcomponents/pull/2010) | List & List Item | Indigo テーマのアイコンとアイコン ボタンのサイズ | +| [#2006](https://github.com/IgniteUI/igniteui-webcomponents/pull/2006) | Mask Input | リテラルを含むマスク パターンの自動入力動作 | +| [#1956](https://github.com/IgniteUI/igniteui-webcomponents/pull/1956) | Navbar | アイコンとアイコン ボタンのサイズ | +| [#1957](https://github.com/IgniteUI/igniteui-webcomponents/pull/1957) | Select | アウトライン タイプのカラー | +| [#1998](https://github.com/IgniteUI/igniteui-webcomponents/pull/1998) | Tabs | Material テーマでアクティブ タブの疑似要素の背景を追加 | +| [#2008](https://github.com/IgniteUI/igniteui-webcomponents/pull/2008) | Tabs | アクティブ タブ インジケーターの配置時にスケール係数を考慮 | +| [#2028](https://github.com/IgniteUI/igniteui-webcomponents/pull/2028) | Tabs | 選択されたインジケーターの配置 | +| [#1828](https://github.com/IgniteUI/igniteui-webcomponents/issues/1828) | Tooltip | ツールチップ ターゲットがクリックされたときにツールチップを表示しない | +| [#1936](https://github.com/IgniteUI/igniteui-webcomponents/pull/1936) | Tooltip | スロット付きコンテンツの max-width 制限を削除 | + +## **{PackageVerChanges-25-2-DEC}** + ### 機能拡張 #### {PackageCharts} From 8b222cedf80aa110a818f4984b0400edf3fe07f2 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:04:21 +0300 Subject: [PATCH 21/52] docs(jp/changelog/react): port the 26.2 GA + 26-2-MAR Japanese changelog content Mirror of the English React changelog migration applied to the Japanese translation: - New {PackageVerLatest} contains the 26-2-MAR SR bug fixes (5 rows). - New {PackageVerChanges-26-2-FEB} contains the full 26.2 GA content ({PackageCommon} new features incl. Copilot Skills + Chat, breaking changes in Themes/Chat/Tooltip/Library, IgrGrid scroll perf, i18n rewrite, PDF export, Popover API). - Prior {PackageVerLatest} content (Charts enhancements + IgrDataChart bug rows) is demoted under {PackageVerChanges-25-2-FEB}. Translations preserved verbatim from xplat JP source. Ported from igniteui-xplat-docs commits 51ac4e7e (jp sync) and 3f7e236c (typo fix). Co-authored-by: TomoyaWashio <148823993+TomoyaWashio@users.noreply.github.com> --- .../components/general-changelog-dv-react.mdx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx index ba170d125a..dd82c697c1 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx @@ -24,6 +24,80 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 ## **{PackageVerLatest}** + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 3055 | IgrDataPieChart | Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgrDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | +| 41594 | IgrDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。 | + +## **{PackageVerChanges-26-2-FEB}** +### {PackageCommon} + +#### 新機能 + +- #### AI 支援開発 - Copilot スキル + - `{PackageCommon}` パッケージの `skills/` ディレクトリに 4 つのエンドユーザー スキルが同梱されるようになりました。GitHub Copilot やその他の LLM エージェントに一般的なタスクのステップバイステップのガイダンスを提供します: + - **igniteui-wc-choose-components** - 特定の UI パターンに適したコンポーネントを識別する。 + - **igniteui-wc-integrate-with-framework** - React、Angular、Vue、またはバニラ JS でコンポーネントをセットアップして使用する。 + - **igniteui-wc-customize-component-theme** - CSS カスタム プロパティ、パーツ、テーマ システムを使用してカスタム スタイルを適用する。 + - **igniteui-wc-optimize-bundle-size** - 選択的インポートと遅延読み込みを使用して本番バンドル サイズを削減する。 +- #### チャット + - `adoptRootStyles` を実行時にオン/オフ切り替えできるようになりました。 + + +#### 重大な変更 + +- #### テーマ + - 他の Ignite UI コンポーネント ライブラリに合わせるため、コンポーネント テーマの CSS カスタム プロパティのグローバル プレフィックスを変更しました。 + +- #### チャット + - `typingIndicator` テンプレート レンダラーを削除しました。代わりに `typing-indicator` スロットを使用してください。 + +- #### ツールチップ + - 非推奨の `disableArrow` プロパティを削除しました。 + +- #### ライブラリ + - 必要な最小 Node バージョンが >= 22 になりました。 + + #### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|[2033](https://github.com/IgniteUI/igniteui-webcomponents/pull/2033)|Carousel|Blazor でのコンテキスト インスタンス化| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Combo|非入力部分のカーソル スタイルを修正| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Textarea|非入力部分のカーソル スタイルを修正| + +### {PackageGrids} (グリッド) + +- `IgrGrid`、`IgrTreeGrid`、`IgrHierarchicalGrid`、`IgrPivotGrid` + - グリッドに表示されるデータに基づいてスクロール スロットルを動的に調整することでパフォーマンスを改善しました。 + +**重大な変更** + +- `IgrGrid`、`IgrTreeGrid`、`IgrHierarchicalGrid`、`IgrPivotGrid` + - 元の `data` 配列の変更 (元の配列へのレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更を検出するには、コンポーネントに配列参照の変更が必要です。 + +**ローカライゼーション (i18n)** + +- `IgrGrid`、`IgrTreeGrid`、`IgrHierarchicalGrid`、`IgrPivotGrid`、`IgrCombo`、`IgrDatePicker`、`IgrDateRangePicker`、`IgrCalendar`、`IgrCarousel`、`IgrChip`、`IgrInput`、`IgrTree` + - グリッド コンポーネントで日付や数値などのデータをフォーマットおよびレンダリングするための新しい `Intl` 実装。`IgrCalendar`、`IgrDatePicker`、`IgrDateRangePicker` の `Intl` 実装を更新しました。 + - 現在サポートされているすべての言語のリソース文字列を持つすべてのコンポーネントに対する新しいローカライゼーション実装。 + - 新しいパブリック ローカライゼーション API と、新しいリソースを含む `igniteui-i18n-resources` という名前のパッケージ。 + +**PDF エクスポート** +- グリッド データを PDF 形式にエクスポートできる PDF エクスポート機能を追加しました。 + +**Popover API** + +- ドロップダウン メニューとダイアログが HTML Popover API を使用するようになり、より優れた配置とアクセシビリティを提供します。 + +## **{PackageVerChanges-25-2-FEB}** + ### 機能拡張 #### {PackageCharts} From 5e21153d0e4294f173ac4400245a6228d1aca38c Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:07:01 +0300 Subject: [PATCH 22/52] docs(jp/changelog/wc): port the 26.1 GA + March SR Japanese changelog content Mirror of the JP changelog sync (commit 51ac4e7e) for the WC variant. Adds the new SR bug fixes table to PackageVerLatest and creates a new PackageVerChanges-26-1-FEB section with the full 26.1 GA content (charts bug fixes; AI skills; Themes/Chat/Tooltip/Library breaking changes; IgcGrid perf, i18n, PDF export, Popover API). The previous PackageVerLatest body is demoted to PackageVerChanges-25-2-DEC. Ported from igniteui-xplat-docs commit 51ac4e7e (docs(jp): sync JP changelog files with EN changes). Co-authored-by: Deyan Kamburov --- .../jp/components/general-changelog-dv-wc.mdx | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx index d555fd4c6e..2e807739f5 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx @@ -26,6 +26,90 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; ## **{PackageVerLatest}** +#### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 3055 | IgcDataPieChart | DataPieChart - Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgcDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | + +## **{PackageVerChanges-26-1-FEB}** + +### {PackageCharts} +#### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|2327|IgcToolbar|WebComponents で SubPanel サンプルが機能しない。| +|2638|IgcDataChart|回転したラベルのマウス ヒット検出を改善。| +|2959|IgcLinearGauge|ゲージが View 関数を呼び出さないように修正。| +|2326|IgcDataChart|others の色を設定するプロパティを追加。| +|41594|IgcDataChart|AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。| + +### {PackageCommon} + +#### 新機能 + +- #### AI 支援開発 - Copilot スキル + - `{PackageCommon}` パッケージの `skills/` ディレクトリに 4 つのエンドユーザー スキルが同梱されるようになりました。GitHub Copilot やその他の LLM エージェントに一般的なタスクのステップバイステップのガイダンスを提供します: + - **igniteui-wc-choose-components** - 特定の UI パターンに適したコンポーネントを識別する。 + - **igniteui-wc-integrate-with-framework** - React、Angular、Vue、またはバニラ JS でコンポーネントをセットアップして使用する。 + - **igniteui-wc-customize-component-theme** - CSS カスタム プロパティ、パーツ、テーマ システムを使用してカスタム スタイルを適用する。 + - **igniteui-wc-optimize-bundle-size** - 選択的インポートと遅延読み込みを使用して本番バンドル サイズを削減する。 + +- #### チャット + - `adoptRootStyles` を実行時にオン/オフ切り替えできるようになりました。 + + +#### 重大な変更 + +- #### テーマ + - 他の Ignite UI コンポーネント ライブラリに合わせるため、コンポーネント テーマの CSS カスタム プロパティのグローバル プレフィックスを変更しました。 + +- #### チャット + - `typingIndicator` テンプレート レンダラーを削除しました。代わりに `typing-indicator` スロットを使用してください。 + +- #### ツールチップ + - 非推奨の `disableArrow` プロパティを削除しました。 + +- #### ライブラリ + - 必要な最小 Node バージョンが >= 22 になりました。 + +#### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|[2033](https://github.com/IgniteUI/igniteui-webcomponents/pull/2033)|Carousel|Blazor でのコンテキスト インスタンス化| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Combo|非入力部分のカーソル スタイルを修正| +|[2085](https://github.com/IgniteUI/igniteui-webcomponents/pull/2085)|Textarea|非入力部分のカーソル スタイルを修正| + +### {PackageGrids} (グリッド) + +- `IgcGrid`、`IgcTreeGrid`、`IgcHierarchicalGrid`、`IgcPivotGrid` + - グリッドに表示されるデータに基づいてスクロール スロットルを動的に調整することでパフォーマンスを改善しました。 + +**重大な変更** + +- `IgcGrid`、`IgcTreeGrid`、`IgcHierarchicalGrid`、`IgcPivotGrid` + - 元の `data` 配列の変更 (元の配列へのレコードの追加/削除/移動など) は自動的に検出されなくなりました。変更を検出するには、コンポーネントに配列参照の変更が必要です。 + +**ローカライゼーション (i18n)** + +- `IgcGrid`、`IgcTreeGrid`、`IgcHierarchicalGrid`、`IgcPivotGrid`、`IgcCombo`、`IgcDatePicker`、`IgcDateRangePicker`、`IgcCalendar`、`IgcCarousel`、`IgcChip`、`IgcInput`、`IgcTree` + - グリッド コンポーネントで日付や数値などのデータをフォーマットおよびレンダリングするための新しい `Intl` 実装。以前 `igniteui-webcomponents` で使用されていた `IgcCalendar`、`IgcDatePicker`、`IgcDateRangePicker` の `Intl` 実装を更新しました。 + - 現在サポートされているすべての言語のリソース文字列を持つすべてのコンポーネントに対する新しいローカライゼーション実装。 + - 新しいパブリック ローカライゼーション API と、新しいリソースを含む `igniteui-i18n-resources` という名前のパッケージ。 +**PDF エクスポート** +- グリッド データを PDF 形式にエクスポートできる PDF エクスポート機能を追加しました。 + +**Popover API** +ドロップダウン メニューとダイアログが HTML Popover API を使用するようになり、より優れた配置とアクセシビリティを提供します。 + +## **{PackageVerChanges-25-2-DEC}** + ### 機能拡張 #### {PackageCharts} From 58e23c84422c6d01be9238bd3da2e967a97f2519 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:16:07 +0300 Subject: [PATCH 23/52] docs(jp/changelog/angular): port the {PackageVerLatest} Bug Fixes section, demote 26-1-JAN Mirror of the English Angular changelog migration. New {PackageVerLatest} contains a 7-row Bug Fixes table (IgxDataChart, IgxDataPieChart, IgxDataTooltipLayer, Excel, etc.). Prior PackageVerLatest body (Charts enhancements with DataPieChart additions) is demoted under a new {PackageVerChanges-26-1-JAN} heading. Ported from igniteui-xplat-docs commit 51ac4e7e (docs(jp): sync JP changelog files with EN changes). Co-authored-by: Deyan Kamburov --- .../content/jp/components/general-changelog-dv.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx index 877d949bcc..bf46a89928 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx @@ -30,6 +30,20 @@ igniteui-angular コンポーネントに固有の変更については CHANGELO ## **{PackageVerLatest}** +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +| 2189 | IgxDataChart | ラベルがない場合に DataChart が軸のレンダリングをスキップする。 | +| 3055 | IgxDataPieChart | Others スライスのスタイル プロパティが不足している。 | +| 38668 | IgxDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 | +| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 | +| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 | +| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 | +| 41594 | IgxDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。 | + +## **{PackageVerChanges-26-1-JAN}** + ### 機能拡張 ### {PackageCharts} From 7c0ee2d50684a5810bf085489746b5c290081d57 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:17:57 +0300 Subject: [PATCH 24/52] docs(jp/dock-manager): rewrite Localization for new i18n resource packages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mirror of the English dock-manager migration applied to JP. Same set of changes: - Simplified the intro paragraph; clarified language detection reads the root lang attribute. - New WebComponents snippet showing the igniteui-i18n-resources peer dependency + registerI18n() flow. - Reframed addResourceStrings(...) as the escape hatch for languages outside the bundled set. - Softened the ResourceStrings property paragraph. Also fixed pre-existing structural issues in the JP file: - The previous "ローカライズ" heading was misplaced (above the ApiRef instead of above the localization content) and the localization content under "テーマ" was still in English. Restructured to: ## テーマ -> theme paragraph ## ローカライズ -> the new JP localization content ## API リファレンス -> ApiRef Ported from igniteui-xplat-docs commits 962756c1, 57ba6c86, and 7a507bf9 (dock-manager localization JP sync, 2026-03-26..03-31). Co-authored-by: Galina Edinakova --- .../jp/components/layouts/dock-manager.mdx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx index 2da6c6baa7..2362691e42 100644 --- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx +++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx @@ -980,8 +980,21 @@ igc-dockmanager::part(content-pane) { ドック マネージャーには、light (明るい) テーマと dark (暗い) テーマがあります。Light テーマがデフォルトです。Dark に変更するには、**igc.themes.css** ファイルを css にインポートし、**dark-theme** クラスをドック マネージャーまたはその親に追加します。 +## ローカライズ + +ドック マネージャーは、コンテキスト メニュー、ツールチップ、および ARIA 属性で使用される文字列のローカライズをサポートします。デフォルトでは、ルートの `` 要素の [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性を読み取って使用する言語を決定します。[lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性が設定されていないか、サポートされていない値に設定されている場合、ドック マネージャーは [英語 (en)]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#IgcDockManagerResourceStringsEN) を使用します。 + -In order to provide resource strings for any other language use the [addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) method: +スペイン語 (`es`)、日本語 (`ja`)、韓国語 (`ko`) の既製のドック マネージャー リソース文字列は、`igniteui-i18n-resources` ピア依存関係を通じて提供されます。これらの言語のいずれかを使用するには、`igniteui-i18n-resources` をインストールし、対応するバンドルを `igniteui-i18n-core` に登録します: + +```ts +import { registerI18n } from 'igniteui-i18n-core'; +import { DockManagerResourceStringsES } from 'igniteui-i18n-resources'; + +registerI18n(DockManagerResourceStringsES, 'es'); +``` + +別の言語をサポートする必要がある場合は、[addResourceStrings]({environment:infragisticsBaseUrl}/products/ignite-ui/dock-manager/docs/typescript/latest/index.html#addResourceStrings) メソッドを使用して独自の翻訳済み文字列を提供します: ```ts import { addResourceStrings } from 'igniteui-dockmanager'; @@ -995,8 +1008,8 @@ addResourceStrings('fr', dockManagerStringsFr); ``` -The Dock Manager exposes `ResourceStrings` property which allows you to modify the strings. If you set the `ResourceStrings` property, the Dock Manager will use your strings no matter what [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute is set. +ドック マネージャーは、個々の文字列を直接変更するために使用できる `ResourceStrings` プロパティも公開します。`ResourceStrings` プロパティを設定すると、ドック マネージャーはページの [lang](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang) 属性に関係なく、指定された文字列を使用します。 -## ローカライズ +## API リファレンス From babd190b1784d7d0350dc292ed5011318307d497 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:19:14 +0300 Subject: [PATCH 25/52] docs(jp/layouts/splitter): new JP splitter topic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Japanese translation of the new Splitter component topic introduced in igniteui-webcomponents@7.1.0. The JP source covers only the WebComponents variant (the React/Angular variants were added on the EN side after the JP file was first translated). Sections mirror EN: Overview, Example, Usage (install + register + slots), Orientation, Pane Size and Constraints, Collapsing and Resizing (with programmatic toggle), Nested Splitters, Events, Keyboard Navigation, Styling (CSS parts + custom properties), API References, Additional Resources. Conversions applied to match docs-template conventions: - `sample="..."` backtick syntax -> . - `Splitter` backtick references in body -> . - "## API リファレンス" body backtick list -> . - Frontmatter normalized to docs-template style (quoted keys, _language removed). Ported from igniteui-xplat-docs commit 95b8a931 ([jp-sync] docs(jp/splitter): translate splitter topic to Japanese, #1943). Co-authored-by: Stamen Stoychev Co-authored-by: MonikaKirkova Co-authored-by: MonikaKirkova <47036441+MonikaKirkova@users.noreply.github.com> Co-authored-by: Vasya Kacheshmarova Co-authored-by: Bozhidara Pachilova <35433937+ddaribo@users.noreply.github.com> --- .../jp/components/layouts/splitter.mdx | 190 ++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 docs/xplat/src/content/jp/components/layouts/splitter.mdx diff --git a/docs/xplat/src/content/jp/components/layouts/splitter.mdx b/docs/xplat/src/content/jp/components/layouts/splitter.mdx new file mode 100644 index 0000000000..cfb993d872 --- /dev/null +++ b/docs/xplat/src/content/jp/components/layouts/splitter.mdx @@ -0,0 +1,190 @@ +--- +title: "{Platform} スプリッター コンポーネント | レイアウト コントロール | Infragistics" +description: "{ProductName} スプリッター コンポーネントを使用して、水平または垂直レイアウトでサイズ変更可能な 2 つのペインを作成し、折りたたみ/展開の動作、キーボード サポート、およびネストされた分割ビューを実現します。" +keywords: "スプリッター, 分割ペイン, サイズ変更可能なペイン, Web Components スプリッター, {Platform} スプリッター, {ProductName}" +license: MIT +mentionedTypes: ["Splitter"] +--- +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiRef from 'igniteui-astro-components/components/mdx/ApiRef.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + +# {Platform} スプリッターの概要 + +{ProductName} スプリッターは、コンテンツを `start` と `end` の 2 つの領域に分割する、サイズ変更可能な分割ペイン レイアウトを提供します。ユーザーはスプリッター バーをドラッグしたり、キーボード ショートカットを使用したり、組み込みコントロールでペインを折りたたんだり展開したりできます。また、スプリッターをネストして複雑なダッシュボード スタイルのレイアウトを構築することもできます。 + +## {Platform} スプリッターの例 + + + +
+ +## 使用方法 + +まず、次のコマンドを実行して {ProductName} をインストールする必要があります: + +```cmd +npm install {PackageWebComponents} +``` + + を使用する前に、次のように登録する必要があります: + +```ts +import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents'; + +defineComponents(IgcSplitterComponent); +``` + +{ProductName} の概要については、[**作業の開始**](../general-getting-started.md) トピックを参照してください。 + +`start` スロットと `end` スロットを使用してペイン コンテンツを配置します: + +```html + +
Start pane content
+
End pane content
+ +``` + +### 方向 + +`orientation` プロパティを設定してペインの方向を制御します: + +- `horizontal` (デフォルト): start ペインと end ペインが左右に表示されます。 +- `vertical`: start ペインと end ペインが上下に表示されます。 + +```html + +
Top pane
+
Bottom pane
+ +``` + +### ペインのサイズと制約 + +サイズ プロパティを使用して、初期ペイン サイズと制約付きペイン サイズを設定します: + +- `start-size`、`end-size` +- `start-min-size`、`end-min-size` +- `start-max-size`、`end-max-size` + +値には `px` や `%` などの CSS 長さの値を指定できます。 + +```html + +
Navigation
+
Main content
+ +``` + +### 折りたたみとサイズ変更 + +以下のプロパティを使用してインタラクションを制御します: + +- `disable-resize`: ペインのサイズ変更を無効にします。 +- `disable-collapse`: ペインの折りたたみを無効にします。 +- `hide-drag-handle`: ドラッグ ハンドルを非表示にします。 +- `hide-collapse-buttons`: 折りたたみボタンと展開ボタンを非表示にします。 + +ペインをプログラムで折りたたんだり展開したりすることもできます: + +```ts +const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent; + +splitter.toggle('start'); // collapse start pane +splitter.toggle('start'); // expand start pane +``` + +### ネストされたスプリッター + +スプリッターをネストして、複数の領域のレイアウトを作成できます。 + + + +## イベント + +スプリッターは、サイズ変更操作中に次のイベントを発行します: + +- `igcResizeStart`: サイズ変更の開始時に 1 回発行されます。 +- `igcResizing`: サイズ変更中に継続的に発行されます。 +- `igcResizeEnd`: サイズ変更の終了時に 1 回発行されます。 + +イベントの詳細には、進行中のイベントと終了イベントの現在の `startPanelSize`、`endPanelSize`、および `delta` が含まれます。 + +```ts +const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent; + +splitter.addEventListener('igcResizeEnd', (event: CustomEvent) => { + console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta); +}); +``` + +## キーボード ナビゲーション + +スプリッター バーにフォーカスがある場合: + +| キー | 説明 | +| ---- | ----------- | +| ← / → | 水平方向のペインのサイズを変更します | +| ↑ / ↓ | 垂直方向のペインのサイズを変更します | +| Home | start ペインを最小サイズにスナップします | +| End | start ペインを最大サイズにスナップします | +| Ctrl + ← / ↑ | start ペインを折りたたむか展開します | +| Ctrl + → / ↓ | end ペインを折りたたむか展開します | + +## スタイル設定 + + コンポーネントは、スタイル設定のための CSS パーツを公開しています: + +| 名前 | 説明 | +| ---- | ----------- | +| `splitter-bar` | ペイン間のドラッグ可能なセパレーター | +| `drag-handle` | スプリッター バーのドラッグ ハンドル要素 | +| `start-pane` | start ペインのコンテナー | +| `end-pane` | end ペインのコンテナー | +| `start-collapse-btn` | start ペインを折りたたむボタン | +| `end-collapse-btn` | end ペインを折りたたむボタン | +| `start-expand-btn` | start ペインを展開するボタン | +| `end-expand-btn` | end ペインを展開するボタン | + +また、次のテーマ CSS 変数もサポートしています: + +- `--bar-color` +- `--handle-color` +- `--expander-color` +- `--bar-color-active` +- `--handle-color-active` +- `--expander-color-active` +- `--focus-color` +- `--size` + +```css +igc-splitter { + --bar-color: #011627; + --handle-color: #ecaa53; + --expander-color: #ecaa53; + --bar-color-active: #011627; + --handle-color-active: #ecaa53; + --expander-color-active: #ecaa53; + --focus-color: #ecaa53; +} +``` + + + +## API リファレンス + + + +- [`スタイル設定とテーマ`](../themes/overview.md) + +## その他のリソース + +- [{ProductName} **フォーラム**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) From b87893b34288cf818722d8622a15112fc19098a5 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:21:40 +0300 Subject: [PATCH 26/52] docs(jp/ai/skills): new JP Agent Skills topic Japanese translation of the cross-agent Skills installation guide. The JP source is one sync cycle behind EN: it covers WebComponents, React, and Angular variants but not yet Blazor, and the install options are A) installed npm package -> B) gemini skills CLI -> C) npx skills CLI (the EN file has additional A) ig ai-config and B) GitHub CLI options that were added in a later commit). Mirror of EN sections: Available Skills (per-platform tables) -> Skill Locations (Copilot, Claude, Cursor, Gemini CLI/Antigravity, Junie, Windsurf) -> Installing Skills (3 options) -> Theming MCP Server -> Additional Resources. Conversions performed: - HTML platform comments -> . - > [!NOTE] admonitions -> . - _description/_keywords/_license -> docs-template's quoted-string keys. - _language frontmatter dropped (docfx-only). - All GitHub URLs use {GithubLink} placeholders for per-platform resolution at build time. Ported from igniteui-xplat-docs commit aa02fd20 ([jp-sync] Sync Japanese AI MCP documentation with English changes from PR #1969, 2026-05-01). Co-authored-by: jsakamotoIGJP Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com> --- .../src/content/jp/components/ai/skills.mdx | 400 ++++++++++++++++++ 1 file changed, 400 insertions(+) create mode 100644 docs/xplat/src/content/jp/components/ai/skills.mdx diff --git a/docs/xplat/src/content/jp/components/ai/skills.mdx b/docs/xplat/src/content/jp/components/ai/skills.mdx new file mode 100644 index 0000000000..2f6e5c0ef1 --- /dev/null +++ b/docs/xplat/src/content/jp/components/ai/skills.mdx @@ -0,0 +1,400 @@ +--- +title: "エージェント スキル | AI スキル | AI 支援開発 | {ProductName} | Infragistics" +description: "エージェント スキルを使用して、{ProductName} コンポーネント、グリッド、データ操作、テーマ設定を使った AI 支援開発を強化する方法について説明します。" +keywords: "{ProductName}, エージェント スキル, AI 支援開発, github copilot, cursor, windsurf, claude, gemini cli, junie" +license: MIT +mentionedTypes: [] +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# {ProductName} エージェント スキル + +{ProductName} には **[エージェント スキル](https://agentskills.io/)** が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、Gemini CLI、JetBrains Junie など) に {ProductName} の使用方法を教える構造化されたナレッジ ファイルです。これらのスキル ファイルは、コンポーネント、グリッド、データ操作、テーマ設定に関するコンテキスト対応のガイダンスを提供し、AI アシスタントがベスト プラクティスに従った正確で慣用的なコードを生成できるようにします。 + + +AI ツールのランドスケープは急速に進化しています。スキルの検出場所と配布オプションは、ツールや IDE の更新に伴って変更される可能性があります。最新情報については、使用しているツールやエージェントの公式ドキュメントを常に参照してください。 + + +## 利用可能なスキル + +スキル ファイルは、{ProductName} リポジトリの [`skills/`]({GithubLink}/tree/master/skills) ディレクトリにあります: + + + +| スキル | パス | 説明 | +|:------|:-----|:------------| +| コンポーネントとレイアウト | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト | +| プラットフォーム統合 | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | ユーザーが選択したプラットフォームへのコンポーネントの統合を支援 | +| テーマ設定とスタイル設定 | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | +| 最適化 | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス | + + + + + +| スキル | パス | 説明 | +|:------|:-----|:------------| +| コンポーネント | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | 適切なコンポーネントの特定、インストール、インポート、使用 — JSX パターン、イベント処理、refs、フォーム、TypeScript | +| テーマ設定とスタイル設定 | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | +| 最適化 | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス | + + + + + +| スキル | パス | 説明 | +|:------|:-----|:------------| +| コンポーネントとレイアウト | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.md) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト | +| データ グリッド | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid、Tree Grid、Hierarchical Grid、Pivot Grid、ソート、フィルタリング、グループ化、ページング、リモート データ | +| テーマ設定とスタイル設定 | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー | + + +{ProductName} **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。 + + + + +## スキルの場所 + +各 AI コーディング ツールは、特定のディレクトリからスキルを検出します。AI アシスタントがスキルを自動的に検出して使用できるように、スキル ファイルを適切な場所に配置します。一般的な `.agents/skills/` の規則は複数のツールでサポートされていますが、各ツールには独自の特定のディレクトリもあります。 + +### 一般 (`.agents/skills/`) + +`.agents/skills/` ディレクトリは、[VS Code と Copilot](https://code.visualstudio.com/docs/copilot/customization/agent-skills)、[OpenAI Codex](https://developers.openai.com/codex/skills)、[Cursor](https://cursor.com/docs/skills)、[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers)、[Antigravity](https://antigravity.google/docs/skills)、[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) など、複数のツールでサポートされているクロスエージェントの規則です。プロジェクト ルートの `.agents/skills/` にスキル ディレクトリをコピーします: + + + +``` +.agents/ + skills/ + igniteui-wc-choose-components/ + SKILL.md + igniteui-wc-integrate-with-framework/ + SKILL.md + igniteui-wc-customize-component-theme/ + SKILL.md + igniteui-wc-optimize-bundle-size/ + SKILL.md +``` + + + + + +``` +.agents/ + skills/ + igniteui-react-components/ + SKILL.md + igniteui-react-customize-theme/ + SKILL.md + igniteui-react-optimize-bundle-size/ + SKILL.md +``` + + + + + +``` +.agents/ + skills/ + igniteui-angular-components/ + SKILL.md + igniteui-angular-grids/ + SKILL.md + igniteui-angular-theming/ + SKILL.md +``` + + + +すべてのプロジェクトで利用可能なユーザー レベル (グローバル) スキルの場合は、代わりに `~/.agents/skills/` を使用します。 + +### GitHub Copilot + +[GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills) はスキルを以下から検出します: + +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.github/skills/`、`.claude/skills/` | +| パーソナル | `~/.copilot/skills/`、`~/.claude/skills/` (Copilot コーディング エージェントと GitHub Copilot CLI のみ) | + +> **ヒント:** [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) では、これらの場所に加えて一般的な `.agents/skills/` と `~/.agents/skills/` も含まれ、`chat.agentSkillsLocations` 設定を使用して追加のスキルの場所を構成できます。 + +### Claude + +[Claude](https://code.claude.com/docs/en/skills#where-skills-live) はスキルを以下から検出します: + +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.claude/skills/` | +| パーソナル | `~/.claude/skills/` | + +### Cursor + +[Cursor](https://cursor.com/docs/skills#skill-directories) はスキルを以下から検出します: + +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.agents/skills/`、`.cursor/skills/` | +| ユーザー (グローバル) | `~/.cursor/skills/` | + +### Gemini CLI と Antigravity + +[Gemini CLI](https://geminicli.com/docs/cli/skills/#skill-discovery-tiers) と [Antigravity](https://antigravity.google/docs/skills) はスキルを以下から検出します: + +| スコープ | 場所 | +|:------|:---------| +| ワークスペース | `.gemini/skills/`、`.agents/skills/` | +| ユーザー | `~/.gemini/skills/`、`~/.agents/skills/` | + +> **ヒント:** Gemini CLI で `/skills` スラッシュ コマンドを使用して、インストールされたスキルを表示および管理できます。 + +### Junie (JetBrains IDE) + +[Junie](https://junie.jetbrains.com/docs/agent-skills.html) はスキルを以下から検出します: + +| スコープ | 場所 | +|:------|:---------| +| プロジェクト | `.junie/skills/` | +| ユーザー | `~/.junie/skills/` | + +### Windsurf + +[Windsurf](https://docs.windsurf.com/windsurf/cascade/skills#skill-scopes) はスキルを以下から検出します: + +| スコープ | 場所 | +|:------|:---------| +| ワークスペース | `.windsurf/skills/`、`.agents/skills/` | +| グローバル | `~/.codeium/windsurf/skills/`、`~/.agents/skills/` | + +--- + +## スキルのインストール + +以下のオプションのいずれかを使用して、スキル ファイルをダウンロードし、AI アシスタントに適した[スキルの場所](#スキルの場所)に配置します。 + +### **オプション A — インストールされた npm パッケージを使用する** + +{ProductName} がプロジェクトに既にインストールされている場合、スキル ファイルは `node_modules` の下で利用できます。それらをプロジェクトにコピーする (例: `.agents/skills/` の下での使用) には、次のコマンドを実行します: + +**macOS / Linux / Windows (PowerShell)** + +```bash +cp -r node_modules/{PackageCommon}/skills/. .agents/skills/ +``` + +**Windows (Command Prompt)** + +```cmd +robocopy node_modules\{PackageCommon}\skills .agents\skills /E +``` + +または、必要に応じて個別のスキル ディレクトリをコピーします: + +**macOS / Linux / Windows (PowerShell)** + + + +```bash +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-choose-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-customize-component-theme .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-optimize-bundle-size .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework .agents/skills/ +``` + + + + + +```bash +cp -r node_modules/{PackageCommon}/skills/igniteui-react-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-customize-theme .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .agents/skills/ +``` + + + + + +```bash +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skills/ +``` + + + +**Windows (Command Prompt)** + + + +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-choose-components .agents\skills\igniteui-wc-choose-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E +``` + + + + + +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-react-components .agents\skills\igniteui-react-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +``` + + + + + +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +``` + + + +### **オプション B — `gemini skills` CLI を使用する** + +`gemini skills install` コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします: + +- **ユーザー スコープ** (デフォルト) — ユーザー アカウントにスキルをグローバルにインストールし、すべてのプロジェクトで利用できるようにします。スキルは `~/.gemini/skills/` または `~/.agents/skills/` に配置されます。 +- **ワークスペース スコープ** — 現在のプロジェクト ディレクトリの `.agents/skills/` にスキルをローカルにインストールし、そのプロジェクトのみにスコープします。 + +**ユーザー スコープにインストールする (デフォルト):** + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-wc-choose-components +gemini skills install {GithubLink}.git --path skills/igniteui-wc-customize-component-theme +gemini skills install {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size +gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +``` + + + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-react-components +gemini skills install {GithubLink}.git --path skills/igniteui-react-customize-theme +gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +``` + + + + + +```bash +gemini skills install {GithubLink}.git --path skills/igniteui-angular-components +gemini skills install {GithubLink}.git --path skills/igniteui-angular-grids +gemini skills install {GithubLink}.git --path skills/igniteui-angular-theming +``` + + + +**ワークスペース スコープにインストールする:** + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-choose-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-customize-component-theme +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +``` + + + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-customize-theme +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +``` + + + + + +```bash +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-components +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-grids +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-theming +``` + + + +インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。 + +### **オプション C — `npx skills` CLI を使用する** + +`skills` CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します: + +```shell +npx skills add IgniteUI/{PackageCommon} +``` + +CLI は、一連のプロンプトをガイドします: + +1. インストールするスキルを選択します (components、theming など)。 +2. プロジェクト内のスキル ファイルのターゲット場所を選択します (例: `.agents/skills/`、`.github/skills/`)。 +3. 選択したスキル ファイルを自動的にダウンロードして書き込みます。 + +完了すると、スキルはすぐに使用できます。手動でファイルをコピーする必要はありません。 + +> **注:** Node.js とインターネット接続が必要です。コマンドは、[IgniteUI/{PackageCommon}]({GithubLink}) リポジトリから最新のスキル ファイルを取得します。 + +--- + +## Theming MCP サーバー + + + +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md)を参照してください。 + + + + + +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md)を参照してください。 + + + + + +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md)を参照してください。 + + + +Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md) のドキュメントを参照してください。 + +## その他のリソース + +
+ + +- [{ProductName} で作業を開始](../general-getting-started.md) +- [Ignite UI CLI](../general-cli-overview.md) + + +- {ProductName} で作業を開始 +- Angular Schematics & Ignite UI CLI + +- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+コミュニティに参加して新しいアイデアをご提案ください。 + +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink}) From 81b0e22d5cf7a909c0e0d512359f84796d3e8cc3 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:31:00 +0300 Subject: [PATCH 27/52] docs(jp/ai/theming-mcp): new JP Theming MCP topic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Japanese translation of the Theming MCP setup guide. Covers connection to VS Code, Cursor, Claude Desktop, Claude Code, JetBrains, and generic MCP clients; the full Available Tools reference; example prompts and Common Workflows scenarios; troubleshooting; plus Angular-specific guidance on version resolution and the licensed @infragistics/igniteui- angular package. Conversions performed: - HTML platform comments -> . - > [!NOTE] -> . - Frontmatter normalized; _language and namespace dropped. - Inline Angular link wrapper that lost its closing tag in the source ("[Sass を使用したテーマ設定]()") restored to a clean markdown link. Ported from igniteui-xplat-docs commit aa02fd20 ([jp-sync] Sync Japanese AI MCP documentation with English changes from PR #1969). Co-authored-by: Stamen Stoychev Co-authored-by: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: Zdravko Kolev --- .../content/jp/components/ai/theming-mcp.mdx | 412 ++++++++++++++++++ 1 file changed, 412 insertions(+) create mode 100644 docs/xplat/src/content/jp/components/ai/theming-mcp.mdx diff --git a/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx b/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx new file mode 100644 index 0000000000..0869a682a0 --- /dev/null +++ b/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx @@ -0,0 +1,412 @@ +--- +title: "{Platform} Theming MCP | Infragistics" +description: "{ProductName} には Ignite UI Theming MCP サーバーが付属しており、{Platform} アプリケーション用のカスタム テーマ、パレット、タイポグラフィ、エレベーションを作成できます。MCP サーバーを使用してブランドおよび設計要件に合わせたカスタム テーマを生成および適用する方法について説明します。" +keywords: "{ProductName}, UI コントロール, {Platform} ウィジェット, web ウィジェット, UI ウィジェット, コンポーネント スイート, 人工知能, AI, MCP, Model Context Protocol, テーマ設定, カスタム テーマ, パレット, タイポグラフィ, エレベーション" +license: MIT +mentionedTypes: [] +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# Ignite UI Theming MCP + +

Ignite UI Theming MCP は、AI アシスタントが Ignite UI アプリケーション用の本番対応のテーマ コードを生成できるようにする Model Context Protocol (MCP) サーバーです。MCP は、AI アシスタントが外部サーバーによって提供される特殊なツールを呼び出すことができるようにするオープン標準です。Ignite UI Theming MCP をエディターまたはデスクトップ AI クライアントに接続し、必要なものを説明すると、アシスタントが残りを行います。

+ +
+ +## 概要 + +スタイルを手動で記述する代わりに、テーマの意図を自然言語で説明し、AI アシスタントに正しいコードを生成させることができます。MCP サーバーは、適切なシェード生成を備えたパレット、タイポグラフィ、エレベーション、コンポーネント デザイン トークン オーバーライドなどを含む、正確なテーマ コードを生成するために必要な知識とツールを AI に提供します。 + +このサーバーは、4 つすべての Ignite UI デザイン システム (**Material**、**Bootstrap**、**Fluent**、**Indigo**) をライトとダークの両方のバリアントでサポートします。このガイドでは {Platform} に焦点を当てていますが、MCP サーバーは Infragistics のすべての Ignite UI コンポーネント ライブラリでも動作します。`detect_platform` ツールは `package.json` を読み取り、正しいインポート パスとセレクターを自動的に選択します。 + +ほとんどのツールは、**Sass** または **CSS** 出力のいずれかを生成できます。Sass 出力がデフォルトで、`igniteui-theming` Sass モジュールと統合されます。CSS 出力は、すぐに使用できる CSS カスタム プロパティを生成し、**ローカル Sass ツールチェーンなしで**使用できます。サーバーがコンパイルを行います。 + +Ignite UI Theming MCP は Ignite UI CLI MCP と連携します。実際には、Theming MCP はパレット、テーマ、トークン、タイポグラフィ、エレベーション、スタイリング ワークフローを処理し、CLI MCP はプロジェクト作成、プロジェクト変更、コンポーネント ワークフロー、ドキュメント指向のタスクを処理します。ほとんどのチームは、両方のサーバーを同じ AI クライアントに接続させます。 + + +セットアップ後の具体的な組み合わせワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 + + +**接続後に試すプロンプトの例:** + +> 「プライマリ #2563eb とコーラル セカンダリ #f97316 を使用して、{Platform} アプリ用の完全な Material Design ダーク テーマを作成して」 + +> 「ボタン コンポーネントで利用可能なデザイン トークンは何ですか? ブランドの紫 #8b5cf6 でカスタマイズして」 + +> 「ブランド ガイドラインでは、すべてのプライマリ シェードに正確な 16 進数値が指定されています。これらの明示的な値でカスタム パレットを作成して」 + +> 「カレンダー コンポーネントでより小さい間隔を使用するようにして」 + +## 前提条件 + +MCP サーバーを構成する前に、次のものがあることを確認してください。 + +- **Node.js** (v18 以降) がインストールされていること — これにより、サーバーの起動に使用される `npx` コマンドが提供されます。 +- `package.json` に依存関係として **Ignite UI パッケージ**がリストされているプロジェクト。 + +Angular の場合、これは `igniteui-angular` (v15.0 以降) です。サーバーは、`igniteui-webcomponents`、`igniteui-react`、`igniteui-blazor` もサポートします。 + +- **MCP サポートを備えた AI クライアント** — 例: VS Code と GitHub Copilot、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。 + + +`igniteui-angular` がまだインストールされていない場合は、次のコマンドを実行します。 + +```bash +ng add igniteui-angular +``` + + + +Ignite UI Theming がまだインストールされていない場合は、次のコマンドを実行します。 + +```bash +npm install igniteui-theming +``` + + +## セットアップ + +MCP サーバーは `igniteui-theming` パッケージにバンドルされており、`npx` 経由で起動されます。プロジェクトに Ignite UI パッケージが既にインストールされている以外に、別途インストールする必要はありません。 + +正規の起動コマンドは次のとおりです。 + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + + +`-y` フラグは、`npx` にパッケージ ダウンロード プロンプトを自動確認するように指示するため、サーバーは手動介入なしで起動できます。 + + + +### バージョン解決の仕組み + +`igniteui-theming` は `igniteui-angular` の依存関係であるため、`npm install` 後には既に `node_modules` に存在します。上記の起動コマンドを実行すると、`npx` はローカルにインストールされたコピーを検出し、直接実行します。ネットワーク リクエストは行われません。つまり、MCP サーバーのバージョンは、常に他の Ignite UI パッケージと同期した状態を保ちます。 + +プロジェクトの外部 (または `npm install` を実行する前) でコマンドを実行すると、`npx -y` は代わりに npm から**最新**バージョンを一時キャッシュにダウンロードします。サーバーは引き続き起動しますが、検査する `package.json` がないため、`detect_platform` は `generic` を返します。 + + +以下から AI クライアントを選択して、特定の構成手順を確認してください。 + +### VS Code + +VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します。 + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +保存したら、GitHub Copilot チャット パネルを開き、**Agent** モードに切り替えると、Ignite UI Theming ツールが利用できるようになります。 + + +VS Code での MCP サポートには、GitHub Copilot と VS Code 1.99 以降が必要です。 + + +### Cursor + +Cursor は、プロジェクト スコープの MCP 構成をサポートします。プロジェクト ルートに `.cursor/mcp.json` を作成または編集します。 + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +新しい Cursor チャット セッションを開くと、サーバーが自動的に検出されます。 + + +Cursor の **Settings → MCP** を介して、MCP サーバーをグローバルに構成することもできます。 + + +### Claude Desktop + +Claude Desktop 構成ファイルにサーバーを追加します。 + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +保存後、Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることが確認できます。 + +### Claude Code + +Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファイルを介して MCP サーバーをサポートします。構成をチームと共有するには、プロジェクト ルートに `.mcp.json` を作成または編集します。 + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +あるいは、ローカル環境のみにコマンド ラインを介してサーバーを追加できます。 + +```bash +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Claude Code 内で `/mcp` コマンドを使用して、サーバーが接続されていることを確認します。 + +### JetBrains IDE + +JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポートします。 + +1. **[Settings]** (macOS では **[Preferences]**) を開きます。 +2. **[Tools] → [AI Assistant] → [Model Context Protocol (MCP)]** に移動します。 +3. **[+ Add]** をクリックし、**[As JSON]** を選択するか、フォーム フィールドを使用します。 +4. 以下の構成を入力します。 + + ```json + { + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. **[OK]** をクリックし、AI Assistant を再起動します。 + + +MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。 + + +### その他の MCP クライアント + +その他の MCP 互換クライアントの場合は、次の起動コマンドで STDIO トランスポートを使用します。 + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +## プロジェクト ルールでの AI 動作のカスタマイズ + +このセクションはオプションです。これは、既存のコードベース規則に一致するように AI がテーマ コードを生成する方法を微調整したいチームを対象としています。 + +VS Code や Cursor などのエディターでは、AI の動作を形成するプロジェクト レベルの指示ファイルを提供できます。MCP サーバーは、どのツールをどの順序で呼び出すかを既に AI に教えています。それを繰り返す必要はありません。代わりに、これらの指示ファイルを使用して、**プロジェクトの設計上の決定、コード規則、ファイル構成**をエンコードして、AI が最初の試行でコードベースに適合するコードを生成するようにします。 + +### VS Code (`.github/copilot-instructions.md`) + +```markdown +## Theming Conventions + +### Sass Code Style +- Use `@use` / `@forward` — never `@import`. +- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). +- Prefer setting primary design tokens over overriding many dependent tokens. + For example, setting `$foreground` on a flat button automatically derives + `$hover-background`, `$focus-background`, and `$active-background`. +- Keep component overrides scoped — use the component's default selector + (e.g., `.igx-button--flat`) unless a narrower scope is needed. +``` + +### Cursor (`.cursor/rules/theming.mdc`) + +```markdown +--- +description: Ignite UI for {Platform} theming conventions +globs: ["**/*.scss", "**/styles/**"] +--- + +## Project Theming Rules + +### Code conventions +- `@use` / `@forward` only — no `@import`. +- Extract shared colors into variables; do not repeat hex literals. +- Prefer primary tokens — let dependent tokens derive automatically. +- One component override per file. Name the file after the component. +- Comment every override with the design rationale. +- Never hard-code gray shades for text — use palette grays so dark mode works. +- For dark mode, only the palette changes. Component overrides stay the same. +``` + + +両方のファイルはソース管理にコミットされるため、すべてのチーム メンバーが手動設定なしで同じ AI 動作を得られます。プロジェクトに合わせてブランド カラー、デザイン システム、ファイル パスを調整してください。 + + +## 利用可能なツール + +MCP サーバーは、プロンプトに基づいて AI が自動的に使用するツール セットを公開します。それらを直接呼び出す必要はありません。必要なものを説明するだけです。 + +現在の完全なツール リストとそのパラメーターをいつでも確認するには、AI アシスタントに次のように尋ねてください。 + +> 「Ignite UI Theming MCP はどのようなツールを提供していますか?」 + +各ツールの簡単な概要を以下に示します。 + +| ツール | 説明 | +|------|-------------| +| `detect_platform` | `package.json` を読み取り、プロジェクトが Ignite UI for Angular、Web Components、React、Blazor のいずれを使用しているかを識別します。以降のすべてのツールに対して正しいインポート パスとコンポーネント セレクターを選択します。 | +| `create_palette` | 基本ブランド カラーから自動シェード バリアント (50–900、A100–A700) を持つカラー パレットを生成します。`output` パラメーター (`sass` または `css`) と、スキーマを選択する `designSystem` を受け入れます。 | +| `create_custom_palette` | きめ細かいパレット作成 — 自動生成が適さない場合に、すべてのシェードに対して正確な 16 進数値を指定します。 | +| `create_typography` | 指定されたデザイン システムのフォント ファミリとタイプ スケールを設定します。 | +| `create_elevations` | Material または Indigo デザイン システムのボックス シャドウ エレベーション レベル (0-24) を構成します。 | +| `create_theme` | ワンショット完全テーマ: パレット + タイポグラフィ + エレベーション、`styles.scss` に含める準備ができています。`designSystem` (`material`、`bootstrap`、`fluent`、または `indigo`) と `variant` (`light` または `dark`) を受け入れます。 | +| `set_size` | `--ig-size` をグローバルまたは特定のコンポーネントに設定します (`small`、`medium`、または `large`)。 | +| `set_spacing` | `--ig-spacing` (およびオプションでインライン/ブロック オーバーライド) をグローバルまたはコンポーネントごとに設定します。 | +| `set_roundness` | `--ig-radius-factor` (0 = 四角、1 = 完全な丸) をグローバルまたはコンポーネントごとに設定します。 | +| `get_component_design_tokens` | コンポーネントで利用可能なすべてのデザイン トークンを返します — `create_component_theme` の前に常にこれを呼び出します。 | +| `create_component_theme` | コンポーネントのトークン (色、境界線など) をカスタマイズするための Sass または CSS を生成します。正しいスキーマを選択するために `variant` (`light` または `dark`) を受け入れます。 | +| `get_color` | パレット カラーの CSS 変数参照 (例: `var(--ig-primary-500)`) を返します。オプションのコントラストと不透明度パラメーターをサポートします。 | +| `read_resource` | 4 つのカテゴリに編成された組み込み参照リソースを読み取ります: プラットフォーム構成 (6)、パレット/タイポグラフィ/エレベーション プリセット (5)、カラー ガイダンス (7)、レイアウト/間隔ドキュメント (8)。 | + + +複合コンポーネント (例: `combo`、`select`、`grid`) の場合、`get_component_design_tokens` はフラットなトークン リストではなく、関連する子テーマのリストを返します。たとえば、`grid` をクエリすると、`grid`、`grid-toolbar`、`grid-filtering`、`paginator` などの子テーマが返される場合があります。AI は、適切なスコープされたセレクターを使用して、各子テーマに対して個別の `create_component_theme` 呼び出しを生成します。 + + + + +プロジェクトでライセンス版の `@infragistics/igniteui-angular` パッケージを使用している場合は、AI にそのことを伝えてください。そうすることで、パレット、テーマ、コンポーネント ツールで `licensed` パラメーターを設定できます。これにより、生成されるインポート パスがそれに応じて調整されます。 + + + +## シナリオ例 + +次のシナリオは、MCP サーバーが接続された後に AI に何を依頼できるかを示します。 + +### 新しいプロジェクト テーマ + +> 「Ignite UI を使用して新しい {Platform} プロジェクトを開始しています。プライマリ #2563eb、セカンダリ #f97316、Roboto フォントで完全な Material Design ライト テーマを作成して。」 + +AI は `create_theme` を呼び出し、すぐに使用できる `styles.scss` ファイルを返します。生成される出力は次のようになります。 + + + +```scss +/* styles.scss */ +@use 'igniteui-angular/theming' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, + $gray: #9e9e9e, +); + +$my-typography: typography( + $font-family: 'Roboto, sans-serif', +); + +@include core(); +@include typography($my-typography); +@include theme($my-palette, $schema: $light-material-schema); +``` + + + + + +```scss +/* styles.scss */ +@use 'igniteui-theming' as *; +@use 'igniteui-theming/sass/typography/presets' as *; +@use 'igniteui-theming/sass/elevations/presets' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, +); + +@include elevations($material-elevations); +@include palette($light-material-palette); +@include typography( + $font-family: "Titillium Web, sans-serif", + $type-scale: $material-type-scale +); +``` + + + +### ダーク モード バリアント + +> 「既存のテーマのダーク モード バージョンが必要です。同じプライマリ ブルーを維持しますが、ダーク サーフェス #121212 を使用して。」 + +### ブランド固有のカラー シェード + +> 「デザイン システムでは、プライマリ グリーンの 14 個すべてのシェードに正確な 16 進数値が指定されています。値を貼り付けます — カスタム パレットを作成して。」 + +AI は、プライマリ カラーに `mode: "explicit"` を使用して `create_custom_palette` を呼び出し、残りは自動生成します。 シェード生成の詳細については、[パレット](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes)を参照してください。 + +### コンポーネント レベルのカスタマイズ + +> 「フラット ボタンを紫の背景 #8b5cf6 と白いテキストでスタイル設定し、ホバー時にはより明るい紫 #a78bfa にして。」 + +AI は最初に `get_component_design_tokens` を呼び出して有効なトークン名を検出し、次に正しい値で `create_component_theme` を呼び出します。 + +### レイアウト調整 + +> 「カレンダーが場所を取りすぎている感じがします — 間隔を減らして、すべてのコンポーネントを少し小さくして。」 + +AI は、カレンダー コンポーネントにスコープされた `set_spacing` と `:root` レベルで `set_size` を呼び出します。 + +## トラブルシューティング + +**プラットフォームが検出されない** + +`detect_platform` が `null` または `generic` を返す場合は、`package.json` に Ignite UI パッケージ (例: `{PackageCommon}`) が依存関係としてリストされていることを確認してください。AI に明示的に伝えることもできます: 「{Platform} プラットフォームを使用して。」 + +**カラーの輝度警告** + +AI がカラーの輝度について警告した場合、選択したカラーが自動シェード生成がうまく機能するには明るすぎるか暗すぎることを意味します。中間範囲のカラーを選択するか、代わりに明示的なシェード値で `create_custom_palette` を使用するように AI に依頼してください。 + +**サーフェス カラーの不一致** + +ライト テーマには明るいサーフェス (例: `#fafafa`) を使用してください。ダーク テーマには暗いサーフェス (例: `#121212`) を使用してください。不一致のサーフェス カラーは、AI に警告を発生させます。 + + +**生成された Sass がコンパイルされない** + +`igniteui-angular` と `igniteui-theming` がインストールされていることを確認してください。 + +```bash +ng add igniteui-angular +``` + +また、`styles.scss` で他のテーマ mixin の前に `core()` が呼び出されていることを確認してください。正しいファイルのセットアップについては、[Sass を使用したテーマ設定](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index)を参照してください。 + + +## その他のリソース + + +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) + +- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md) +- [{ProductName} スキル](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) + +
+ +コミュニティは常に活気があり、新しいアイデアを歓迎しています。 + +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink}) From 81047a39c5bbb9dc1d1cb8f4b254f025a41b3554 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:32:16 +0300 Subject: [PATCH 28/52] docs(jp/ai/ai-assisted-development-overview): new JP overview hub Japanese translation of the AI-Assisted Development overview hub page. The JP source is one sync cycle behind EN: it documents the three-layer toolchain (Agent Skills + CLI MCP + Theming MCP) without the MAKER MCP layer, the ai-config quick-setup helper, or the "Configure the AI Toolchain" / "Start the Servers" / Install-and-add- later sections that landed later on the EN side. Sections covered: intro -> AI Toolchain at a Glance (table) -> Agent Skills -> CLI MCP Server -> Theming MCP Server -> Supported AI Clients (table) -> Setup walkthrough (Step 1 Load Skills, Step 2 Connect CLI MCP, Step 3 Connect Theming MCP optional) -> Additional Resources. Conversions performed: - HTML platform comments -> . - Frontmatter normalized; _language and namespace dropped. - _canonicalLink retained. Ported from igniteui-xplat-docs commit aa02fd20 ([jp-sync] Sync Japanese AI MCP documentation with English changes from PR #1969). Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Co-authored-by: RadoMirchev --- .../ai/ai-assisted-development-overview.mdx | 153 ++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx diff --git a/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx b/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx new file mode 100644 index 0000000000..892dd2aa98 --- /dev/null +++ b/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx @@ -0,0 +1,153 @@ +--- +title: "Ignite UI を使った AI 支援開発 - {ProductName}" +description: "Ignite UI は、Angular、React、Web Components 全体で正しいコンポーネント API、インポート パス、デザイン トークンを AI コーディング アシスタントに提供するために、エージェント スキル、Ignite UI CLI MCP サーバー、Theming MCP サーバーを提供します。" +keywords: "{Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, エージェント スキル, AI, エージェント, Copilot, Cursor" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" +mentionedTypes: [] +--- +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# Ignite UI を使った AI 支援開発 + +Ignite UI for Angular、React、Web Components は、3 つのパーツで構成される AI ツールチェーン (エージェント スキル、Ignite UI CLI MCP サーバー、Ignite UI Theming MCP サーバー) を提供します。これにより、AI コーディング アシスタントに正しいコンポーネント API、インポート パス、デザイン トークンを提供します。エージェント スキルは、AI エージェントが特定のプロジェクトで Ignite UI を使用する方法を定義する、開発者が管理する命令パッケージです。CLI MCP サーバーは、Model Context Protocol を介してアクティブな AI エージェント セッションに Ignite UI CLI スキャフォールディング、コンポーネント管理、ドキュメント ツールを公開します。Theming MCP サーバーは、Ignite UI テーマ エンジンをクエリ可能なエージェント コンテキストとして公開します。3 つのコンポーネントはすべて、GitHub Copilot、Cursor、Claude Desktop、Claude Code、JetBrains AI Assistant と連携します。 + +AI ツールチェーンは、現在、CLI MCP およびエージェント スキル レイヤーで Blazor をサポートしていません。Blazor の対応は Theming MCP のみで提供されます。CLI MCP サーバーには STDIO トランスポートが必要であり、HTTP ベースの MCP クライアントはサポートされていません。エージェント スキルと CLI MCP サーバーは、プロジェクト ファイルを自律的に変更することはなく、アクティブな AI エージェントにツールと命令を公開し、開発者のプロンプトに応じてエージェントが動作します。 + +## AI ツールチェーンの概要 + +Ignite UI の AI ツールチェーンは、独立して使用可能な 3 つのレイヤーで構成されています。各レイヤーは単独で有効にすることができ、連携して動作するように設計されています。 + +| レイヤー | 提供するもの | 所有者 | フレームワーク | +| --- | --- | --- | --- | +| エージェント スキル | 開発者が管理する命令パッケージ: インポート パス、コンポーネント パターン、デシジョン フロー、プロジェクト規約 | 開発者 | Angular、React、Web Components、Blazor | +| CLI MCP サーバー (`igniteui-cli`) | MCP を介したプロジェクト スキャフォールディング、コンポーネント管理、ドキュメントと API クエリ | Infragistics | Angular、React、Web Components | +| Theming MCP サーバー (`igniteui-theming`) | デザイン トークン、パレット定義、CSS 変数生成、MCP を介したテーマ クエリ | Infragistics | Angular、React、Web Components、Blazor | + +CLI MCP サーバーと Theming MCP サーバーはどちらも `npx` を通じて起動され、STDIO トランスポートを介して任意の MCP 互換クライアントに接続します。エージェント スキルは、AI クライアントがディスクから読み取る、プロジェクトに配置されたローカル ファイルです。 + +## エージェント スキル + +エージェント スキルは、特定のフレームワークにおける Ignite UI の使用方法を、AI コーディング アシスタントに正確に伝えるための、開発者が管理する構造化されたパッケージです。スキル パッケージには、コンポーネント パターン、インポート パス、デシジョン フローを含む `SKILL.md` 命令ファイル、Ignite UI 公式ドキュメントへの参照、スキーマ ファイルや図などのアセットを含めることができます。スキルが AI クライアントでアクティブになると、エージェントは、古い API シグネチャやインポート パスを引用する恐れのある一般的な学習データに依存する代わりに、スキルに従います。 + +Ignite UI は、Angular、React、Web Components、Blazor 向けの専用スキル パッケージを提供しています。スキル パッケージは開発者が管理するものであり、チームの規約に合わせて `SKILL.md` を編集したり、プロジェクト固有のパターンの追加や内部デザイン システムを参照するなどして、コードベースとともにパッケージをバージョン管理できます。 + +完全なセットアップ手順と IDE の設定については、[エージェント スキル](skills.md)を参照してください。 + +## CLI MCP サーバー + +Ignite UI CLI MCP サーバー (`igniteui-cli`) は、Infragistics が管理する MCP サーバーで、Ignite UI CLI スキャフォールディングとドキュメント ツールをアクティブな AI エージェント セッションに公開します。接続すると、AI アシスタントはチャット セッションの自然言語プロンプトを通じて、Angular、React、または Web Components プロジェクトの作成、Ignite UI コンポーネントの追加と変更、ドキュメントと API の質問への回答を行うことができます。 + +CLI MCP サーバーはグローバル インストールなしで `npx` 経由で起動します。 + +```bash +npx -y igniteui-cli mcp +``` + +サーバーは、GitHub Copilot を使用した VS Code、Cursor、Claude Desktop、Claude Code、JetBrains AI Assistant、および STDIO トランスポートをサポートするその他の MCP 互換クライアントに接続します。クライアントによって構成形式が異なります。以下の CLI MCP セットアップ ガイドを参照してください。 + +CLI MCP サーバーは Blazor をサポートしていません。また、CLI MCP サーバーはコードを自律的に生成することはなく、AI エージェントにツールを公開するのみです。開発者のプロンプトに応じてエージェントがツールを呼び出します。 + +## Theming MCP サーバー + +Ignite UI Theming MCP サーバー (`igniteui-theming`) は、Ignite UI テーマ エンジンをクエリ可能なエージェント コンテキストとして公開する別の MCP サーバーです。デザイン トークン アクセス、パレット定義、CSS カスタム プロパティ生成、WCAG AA コントラスト検証をカバーします。CLI MCP サーバーとはアーキテクチャ的に分離されており、プロジェクト スキャフォールディング ツールを公開せずに AI エージェントにテーマ ツールへのアクセスを提供するために、独立して接続できます。 + +Theming MCP サーバーは `npx` 経由で起動します。 + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +Theming MCP サーバーは Angular、React、Web Components、Blazor をサポートしています。Ignite UI のリリースごとに更新されるため、エージェントは常に最新のトークン サーフェスに対して動作します。 + +構成の詳細については、[Theming MCP](theming-mcp.md)を参照してください。 + +## サポートされている AI クライアント + +CLI MCP サーバーと Theming MCP サーバーは、STDIO トランスポートで MCP をサポートする任意のエディターまたは AI クライアントと連携します。 + +| クライアント | 構成方法 | +| --- | --- | +| GitHub Copilot を使用した VS Code | `.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-instructions.md` を介した GitHub Copilot、`.cursorrules` または `.cursor/rules/` を介した Cursor、`.windsurfrules` を介した Windsurf、プロジェクト レベルのプロンプト設定を介した JetBrains AI Assistant と互換性があります。 + +## AI ツールチェーンのセットアップ + +Ignite UI AI ツールチェーンのセットアップには 3 つのステップがあります。フレームワークのエージェント スキルをロードし、CLI MCP サーバーを接続し、オプションで Theming MCP サーバーを接続します。3 つのステップはすべて独立しており、任意の順序で実行できます。 + +### ステップ 1 - エージェント スキルをロードする + +フレームワークの Ignite UI スキル パッケージをプロジェクトのエージェント検出パスにコピーします。スキル パッケージは `node_modules/igniteui-{framework}/skills/` のライブラリに付属しています。IDE との連携設定はクライアントに応じてその構成ファイルに保存してください。 + +完全なセットアップについては、[エージェント スキル](skills.md)を参照してください。 + +### ステップ 2 - CLI MCP サーバーを接続する + +AI クライアントの構成ファイルに `igniteui-cli` MCP サーバー エントリを追加します。クライアントに合った JSON 構造を使用してください。 + +**VS Code (`.vscode/mcp.json`):** + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +**Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP クライアント:** + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](cli-mcp.md)を参照してください。 + +### ステップ 3 - Theming MCP サーバーを接続する (オプション) + +`igniteui-cli` と並んで、同じ MCP 構成ファイルに `igniteui-theming` エントリを追加します。 + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +構成の詳細とテーマ ワークフローについては、[Theming MCP](theming-mcp.md)を参照してください。 + +## その他のリソース + + +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) + +- [エージェント スキル](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink}) From 3fa0452cc4d40debcb185d6794c5c99ed60c0460 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:34:37 +0300 Subject: [PATCH 29/52] docs(jp/ai/cli-mcp): new JP CLI MCP setup guide Japanese translation of the CLI MCP setup guide. Mirrors the EN structure: Overview -> Example Prompts -> Prerequisites -> Configure (canonical launch + setup-path picker for CLI-first/empty-folder/existing-project, plus per-platform 'ig new' command variants) -> per-client setup blocks (VS Code, Cursor, Claude Desktop, Claude Code, JetBrains, generic STDIO, GitHub Copilot cloud agent) -> Available Tools (six MCP tools with descriptions) -> Common Workflows -> Troubleshooting -> Additional Resources. Conversions performed: - HTML platform comments -> . - > [!NOTE] -> . - Frontmatter normalized; _language and namespace dropped. - _canonicalLink retained. Ported from igniteui-xplat-docs commit aa02fd20 ([jp-sync] Sync Japanese AI MCP documentation with English changes from PR #1969). Co-authored-by: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: RadoMirchev --- .../src/content/jp/components/ai/cli-mcp.mdx | 462 ++++++++++++++++++ 1 file changed, 462 insertions(+) create mode 100644 docs/xplat/src/content/jp/components/ai/cli-mcp.mdx diff --git a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx new file mode 100644 index 0000000000..9ec002bb9c --- /dev/null +++ b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx @@ -0,0 +1,462 @@ +--- +title: "{Platform} Ignite UI CLI MCP | Infragistics" +description: "Ignite UI CLI MCP を AI クライアントに接続して、{ProductName} のプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問に回答します。VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP クライアントのセットアップ オプションについて説明します。" +keywords: "{Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, エージェント, GitHub Copilot, Cursor, Claude, JetBrains" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp" +mentionedTypes: [] +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# Ignite UI CLI MCP + +

Ignite UI CLI MCP は、AI アシスタントが {ProductName} アプリケーションのプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問に回答できるようにする Model Context Protocol (MCP) サーバーです。Ignite UI CLI MCP をエディター、GitHub リポジトリ、またはデスクトップ AI クライアントに接続し、やりたいことを伝えると、アシスタントが CLI ツールを使用します。

+ +
+ +## 概要 + +Ignite UI CLI MCP は、チャットまたはエージェント モードを通じて、Ignite UI CLI プロジェクトのスキャフォールディング、コンポーネント生成、プロジェクト変更、ドキュメント対応ワークフローへの直接アクセスを AI アシスタントに提供します。サーバーは Ignite UI Theming MCP と連携して動作します。CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、Theming MCP がパレット、テーマ、トークン、スタイリングを処理します。ほとんどのチームは、両方のサーバーを同じ AI クライアント セッションに接続させます。 + +推奨セットアップ手順は、最初に Ignite UI CLI から始めることです。この手順では、Ignite UI CLI がプロジェクトを作成し、必要なパッケージをインストールし、VS Code 用の MCP 構成を初期設定します。また、空のフォルダーでアシスタントが MCP を通じてプロジェクトを作成するところから開始することも、既存のプロジェクトに MCP を接続することもできます。 + + +セットアップ後の完全なビルド フローを確認したい場合は、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 + + +**接続後に試すプロンプトの例:** + +> _「このフォルダーに新しい Ignite UI for {Platform} プロジェクトを作成し、推奨されるデフォルトを使用して、サンプル データを含むスターター ダッシュボード ページを追加して」_ + +> _「このプロジェクトに新しいグリッド ページを追加し、サンプル データに接続して、現在のナビゲーション構造を維持して」_ + +> _「コンボ コンポーネントが公開するプロパティとイベントは何ですか? 検索可能なドロップダウンに最も役立つものはどれですか?」_ + +> _「既存のプロジェクトを更新してサイド ナビゲーション レイアウトを追加し、現在のページとルートを維持して」_ + +## 前提条件 + +MCP サーバーを構成する前に、以下の前提条件が満たされていることを確認してください。 + +- **Node.js** (v18 以降) がインストールされていること — これにより、サーバーの起動に使用される `npx` コマンドが提供されます。 +- **MCP サポートを備えた AI クライアント** — 例: VS Code と GitHub Copilot、GitHub Copilot クラウド エージェント、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。 +- 最初にサーバーが起動するときの `npx` パッケージ解決のためのインターネット アクセス。 +- 以下のいずれかの開始点: + - 新しいプロジェクト用の空のフォルダー + - Ignite UI CLI で作成したプロジェクト + - 引き続き作業する既存の {ProductName} プロジェクト + +同じクライアント セッションでテーマ ツールも使用したいが、`igniteui-theming` がまだプロジェクトで利用できない場合は、次のコマンドを実行します。 + +```bash +npm install igniteui-theming +``` + +## AI クライアント用の Ignite UI CLI MCP の構成 + +MCP サーバーは `npx` を通じて起動されます。Node.js と `igniteui-cli` パッケージへのアクセス以外に追加のインストールは必要ありません。 + +正規の起動コマンドは次のとおりです。 + +```bash +npx -y igniteui-cli mcp +``` + + +`-y` フラグは、`npx` にパッケージ ダウンロード プロンプトを自動確認するように指示するため、サーバーは手動介入なしで起動できます。 + + +### セットアップ手順を選択する + +Ignite UI CLI MCP を開始するには 3 つの方法があります。 + +> **推奨 - CLI ファースト** + 最初に `ig new` または `npx --package igniteui-cli igniteui new` コマンドにより Ignite UI CLI を使ってプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、VS Code 用の `.vscode/mcp.json` を自動的に作成するため、これが最も簡単なセットアップです。その後、生成された MCP 構成を確認し、AI クライアントでプロジェクトを開くだけです。 + +> **空のフォルダー** + 完全に空のフォルダーから始め、MCP 構成を手動で追加してから、アシスタントにチャットを通じてプロジェクトを作成するよう依頼します。このパスは、最初に CLI を自分で実行するのではなく、MCP でプロジェクト作成フローを最初から動かしたい場合に便利です。 + +> **既存プロジェクト** + 既存のプロジェクトに MCP 構成を追加し、現在のコードベースで作業を続けます。このパスは、プロジェクトが既に存在し、プロジェクトの変更、コンポーネント作業、ドキュメントへの質問を、何も再生成することなくアシスタントに支援させたい場合に便利です。 + +3 つのパスはすべて同じ MCP サーバーを使用します。違いは、プロンプトを開始する前にプロジェクトがどのように準備されるかだけです。 + +- **CLI ファースト**の手順では、Ignite UI CLI がプロジェクトを作成し、最初の MCP 構成を準備します +- **空のフォルダー**の手順では、最初に MCP 構成を作成し、その後アシスタントにプロジェクトを作成させます +- **既存プロジェクト**の手順では、MCP を現在のコードベースにアタッチし、既存のものから続行します + +いずれの場合も、MCP サーバーが接続されて AI クライアントで表示されたら、アシスタントは同じセッションで作業を続けることができます。 + +最初に Ignite UI CLI でプロジェクトを作成する場合は、次のいずれかの方法で CLI を実行できます。 + +- **グローバル インストール** + + ```bash + npm install -g igniteui-cli + ``` + + これにより、任意のターミナル セッションで `ig` コマンドが使用できるようになります。定期的にプロジェクトの作成あるいはスキャフォールディングを行う場合は、最も明確なオプションです。 + +- **グローバル インストールなし** + + ```bash + npx --package igniteui-cli igniteui new + ``` + + グローバルな `ig` コマンドの代わりに `npx` を通じて CLI を実行します。 + +**CLI ファースト**の手順の場合、ガイド モードまたは直接コマンドでプロジェクトを作成できます。 + +CLI に利用可能なオプションを案内させたい場合はガイド モードを使用します。 + +```bash +ig new +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new +``` + +プロジェクト設定を既に知っている場合は直接コマンドを使用します。 + + +```bash +ig new my-app --framework=angular --type=igx-ts --template=empty +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +``` + + + +```bash +ig new my-app --framework=react +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=react +``` + + + +```bash +ig new my-app --framework=webcomponents +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=webcomponents +``` + + +ガイド モードでは、Ignite UI CLI は、プロジェクト名、フレームワーク、テンプレート、テーマ、コンポーネントを追加するか、セットアップを完了するか、を対話形式で聞いてきます。直接モードでは、フレームワークとサポートされているオプションをコマンド自体に指定します。 + + +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、Angular の Ignite UI CLI ドキュメントを参照してください。 + + +プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、[Ignite UI CLI](../general-cli-overview.md) を参照してください。 + + +### VS Code + +VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します。 + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +最初に Ignite UI CLI でプロジェクトを作成した場合は、生成された `.vscode/mcp.json` を確認し、両方のエントリが存在することを確認してください。 + +保存したら、GitHub Copilot チャット パネルを開き、**Agent** モードに切り替えると、Ignite UI CLI MCP ツールが利用できるようになります。 + + +VS Code での MCP サポートには、GitHub Copilot と VS Code 1.99 以降が必要です。 + + +### Cursor + +Cursor はプロジェクト スコープの MCP 構成をサポートします。プロジェクト ルートに `.cursor/mcp.json` を作成または編集します。 + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +サーバーは、新しい Cursor チャット セッションを開くと自動的に選択されます。 + + +Cursor の **Settings → MCP** を介してグローバルに MCP サーバーを構成することもできます。 + + +### Claude Desktop + +サーバーを Claude Desktop 構成ファイルに追加します。 + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +保存後に Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることが確認されます。 + +### Claude Code + +Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファイルを介して MCP サーバーをサポートします。チームと構成を共有するには、プロジェクト ルートに `.mcp.json` を作成または編集します。 + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +または、ローカル環境専用にコマンド ラインでサーバーを追加できます。 + +```bash +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 IDE + +JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポートします。 + +1. **Settings** (macOS では **Preferences**) を開きます。 +2. **Tools → AI Assistant → Model Context Protocol (MCP)** に移動します。 +3. **+ Add** をクリックし、**As JSON** を選択するかフォーム フィールドを使用します。 +4. 次の構成を入力します。 + + ```json + { + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. **OK** をクリックして AI Assistant を再起動します。 + + +MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。 + + +### その他の MCP クライアント + +他の MCP 互換クライアントの場合は、次の起動コマンドで STDIO トランスポートを使用します。 + +```bash +npx -y igniteui-cli mcp +npx -y igniteui-theming igniteui-theming-mcp +``` + +### GitHub + +GitHub Copilot クラウド エージェントはリポジトリ レベルの MCP 構成をサポートします。リポジトリで次の操作を行います。 + +1. メインのリポジトリ ページを開きます。 +2. **Settings** をクリックします。 +3. サイドバーで **Copilot** → **Cloud agent** に移動します。 +4. **MCP configuration** セクションに JSON を貼り付けます。 +5. **Save** をクリックします。 + +次のようなリポジトリ構成を使用します。 + +```json +{ + "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 と Theming MCP ツールを使用する場合に便利です。 + +## 利用可能なツール + +MCP サーバーは、AI がプロンプトに基づいて自動的に使用するツールのセットを公開しています。これらのツールを直接呼び出す必要はありません。チャットで必要なものを説明すれば、アシスタントが適切なツールを選択します。このテーブルは、開始前に何が利用可能かを把握するためのものです。 + +現在のパラメーターを含むライブ リストを取得するには、次のように質問します。 + +> _「Ignite UI CLI MCP が提供するツールは何ですか?」_ + +各ツールの概要を以下に示します。 + +| ツール | 説明 | +|------|-------------| +| `list_components` | フレームワークの利用可能な Ignite UI コンポーネント ドキュメントをリストします。オプションのキーワード フィルター (名前、キーワード、概要に対する大文字と小文字を区別しない部分文字列一致) を受け入れます。 | +| `get_doc` | ケバブ ケース名 (例: `grid-editing`、`combo-overview`) で特定のコンポーネント ドキュメントの完全なマークダウン コンテンツを取得します。コード サンプル、テーブル、リンクを含みます。 | +| `search_docs` | フレームワークの Ignite UI ドキュメント全体でフルテキスト検索を実行します。抜粋付きで最大 20 件のランク付けされた結果を返します。 | +| `get_project_setup_guide` | CLI 手順とインストール手順を含む、特定のフレームワークで新しいプロジェクトを作成するためのプロジェクト セットアップ ガイドを返します。 | +| `search_api` | Angular、React、Web Components 全体でキーワードまたはコンポーネント名によって API エントリを検索します。 | +| `get_api_reference` | プロパティ、メソッド、イベントを含む、特定のコンポーネントまたはクラスの完全な API リファレンスを返します。Angular、React、Web Components をサポートします。 | + +まとめると、CLI MCP ツールは以下を支援します。 + +- 新しいプロジェクトの作成 +- 既存プロジェクトでの作業 +- コンポーネントの追加と変更 +- プロジェクト構造と構成の更新 +- ドキュメントと API の質問への回答 + + +フレームワークの検出にはコンポーネント名のプレフィックスを参照します: Angular は `Igx`、React は `Igr`、Web Components は `Igc`、Blazor は `Igb` です。アシスタントは、開いているファイルまたはプロンプト コンテキストから正しいフレームワークを自動的に選択します。 + + +テーマ サーバーは、同じクライアント セッションにスタイリング、テーマ、パレット、トークン ワークフローを追加します。 + + +主要なハンズオン ワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。 + + +## 一般的なワークフロー + +以下のセットアップ シナリオは、各開始点を使用するタイミングを示します。 + +### CLI ファーストセットアップ + +最も速いガイド付きセットアップが必要で、`.vscode/mcp.json` を自動生成したい場合は、最初に Ignite UI CLI でプロジェクトを作成します。 + +シナリオの例: + +- _「最初に Ignite UI CLI で新しいプロジェクトを作成し、生成されたプロジェクトを VS Code で開き、そこから MCP で続ける」_ +- _「React プロジェクトが必要なので、CLI で作成してから MCP を使用してページとコンポーネントを追加する」_ + +### 空のフォルダーのセットアップ + +自分で MCP 構成を追加した後、アシスタントにチャットからプロジェクトを作成させたい場合は、空のフォルダーから始めます。 + +シナリオの例: + +- _「完全に空のフォルダーがあり、MCP が接続された後にアシスタントにチャットからプロジェクト全体を作成させる」_ +- _「最初に Ignite UI CLI を手動で実行したくない。MCP で最初のプロジェクト作成ステップを動かしたい」_ + +### 既存プロジェクトのセットアップ + +現在のコードベースを維持してアシスタントにプロジェクトの変更、コンポーネント作業、ドキュメントの質問を支援させたい場合は、MCP を既存のプロジェクトに接続します。 + +シナリオの例: + +- _「プロジェクトは既にあり、アシスタントにページとコンポーネントの更新を支援させるためだけに MCP を追加したい」_ +- _「プロジェクトは既に存在し、主に現在のコードベースで作業しながらドキュメントと API の質問をしたい」_ + +## トラブルシューティング + +**`npx` が認識されない** + +Node.js がインストールされていないか、現在のターミナル環境で利用できません。[nodejs.org](https://nodejs.org) から Node.js をインストールし、`node --version` で確認します。 + +**`ig` が認識されない** + +グローバルな `ig` コマンドを使用したい場合は、最初に `npm install -g igniteui-cli` で Ignite UI CLI をインストールします。グローバル インストールが不要な場合は、代わりに `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` フィールドを含める場合は、有効なツール名または `["*"]` を使用します。 + +## その他のリソース + + +- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md) + +- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md) +- [{ProductName} スキル](./skills.md) +- [Ignite UI Theming MCP](./theming-mcp.md) + +
+ +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink}) From ad481c1d30918c95bec7b9713b0e74c8fa2077e6 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 11:35:54 +0300 Subject: [PATCH 30/52] docs(jp/general-how-to-mcp-e2e): new JP end-to-end CLI MCP + Theming MCP walkthrough Japanese translation of the linear 7-step walkthrough from "empty folder" to a themed, working {ProductName} app, using only chat prompts after step 2. Mirrors the EN structure: - CLI MCP and Theming MCP Responsibilities (table) - What You Need - Step 1: Start with Ignite UI CLI (global install / npx / guided / direct; per-platform 'ig new' for React and WebComponents) - Step 2: Connect CLI MCP and Theming MCP (mcp.json for VS Code 'servers' shape + generic 'mcpServers' shape) - Step 3: Let the Assistant Review the Project - Step 4: Add a Real Feature Through Chat (Orders grid example) - Step 5: Ask Documentation Questions in the Same Session - Step 6: Apply a Custom Theme - Step 7: Continue Iterating - Topic Takeaways - Related Topics Conversions performed: - HTML platform comments -> . - Frontmatter normalized; _language and namespace dropped. - _canonicalLink retained. Ported from igniteui-xplat-docs commit aa02fd20 ([jp-sync] Sync Japanese AI MCP documentation with English changes from PR #1969). Co-authored-by: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Co-authored-by: RadoMirchev --- .../jp/components/general-how-to-mcp-e2e.mdx | 277 ++++++++++++++++++ 1 file changed, 277 insertions(+) create mode 100644 docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx diff --git a/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx b/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx new file mode 100644 index 0000000000..daad2f82cd --- /dev/null +++ b/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx @@ -0,0 +1,277 @@ +--- +title: "Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド - {ProductName}" +description: "Ignite UI CLI MCP と Ignite UI Theming MCP を使用した {ProductName} のエンドツーエンドのワークフローに従ってください。CLI 優先で始め、両方の MCP サーバーを接続し、チャットを通じてアプリを作成または拡張し、ドキュメントの質問をして、カスタム テーマを適用します。" +keywords: "{Platform}, {ProductName}, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, ワークフロー, テーマ設定, プロンプト" +license: MIT +_canonicalLink: "{environment:dvUrl}/components/general-how-to-mcp-e2e" +mentionedTypes: [] +--- +import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; + +# Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド + +

Ignite UI CLI MCP と Ignite UI Theming MCP は連携して動作し、チャット プロンプトを通じて AI アシスタントが {ProductName} アプリケーションのスキャフォールディング、拡張、テーマ設定を行えるようにします。CLI MCP はプロジェクト作成、コンポーネントの操作、ドキュメントの質問を処理します。Theming MCP はパレット、テーマ、トークン、スタイリング ワークフローを処理します。このトピックでは、一連のプロセスを 1 つの明確なフローで示します。

+ +
+ +## CLI MCP と Theming MCP の役割分担 + +CLI MCP と Theming MCP は、2つの独立した STDIO トランスポート MCP サーバーであり、Ignite UI for Angularの開発ワークフローにおいて、それぞれ明確に異なる役割を担っています。 + +| 関心事 | サーバー | +| ------------------------------------------------ | ----------- | +| プロジェクト構造の作成とスキャフォールディング | CLI MCP | +| コンポーネントの追加または更新 | CLI MCP | +| コンポーネント API とドキュメントの問い合わせ | CLI MCP | +| カラー パレットとシェード バリエーションの生成 | Theming MCP | +| グローバル テーマ構成の作成と適用 | Theming MCP | +| コンポーネント レベルのデザイン トークンの生成 | Theming MCP | +| 間隔、サイズ、ボーダー半径の調整 | Theming MCP | + +どちらのサーバーも自律的にステップを実行することはありません。AI アシスタントはプロンプトに応じてのみ MCP ツールを呼び出します。CLI MCP はテーマや Sass ファイルを生成または変更しません。Theming MCP はコンポーネントをスキャフォールディングしたり、アプリケーション ロジックを変更したり、ドキュメントの質問に回答したりしません。両サーバーとも STDIO トランスポートをサポートする MCP クライアントが必要であり、ブラウザーのみのチャット インターフェイスからは使用できません。 + +## 必要なもの + +開始前に、以下の前提条件が揃っていることを確認してください。 + +- `npx` を利用できるように **Node.js** がインストールされていること +- MCP サポートを備えたサポートされている AI クライアント +- 初回使用時の `npx` パッケージ解決のためのインターネット アクセス +- プロジェクト用のフォルダー + +このウォークスルーは、**CLI ファースト**のセットアップで最も効果的に機能します。Ignite UI CLI がプロジェクトをスキャフォールディングし、VS Code 用の MCP 構成を自動的に初期設定するためです。 + +各クライアントの詳細なセットアップ リファレンスが必要な場合は、[Ignite UI CLI MCP](ai/cli-mcp.md) と [Ignite UI Theming MCP](ai/theming-mcp.md) を参照してください。 + +## ステップ 1: Ignite UI CLI で始める + +推奨される手順は、最初に Ignite UI CLI でプロジェクトを作成することです。 + +Ignite UI CLI を次のいずれかの方法で実行します。 + +### グローバル インストール + +```bash +npm install -g igniteui-cli +``` + +これにより、任意のターミナル セッションで `ig` コマンドが使用できるようになります。 + +### グローバル インストールなし + +```bash +npx --package igniteui-cli igniteui new +``` + +グローバルな `ig` コマンドの代わりに `npx` を通じて CLI を実行します。 + +CLI にオプションを案内させたい場合は**ガイド モード**を使用できます。 + +```bash +ig new +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new +``` + +プロジェクト設定を既に知っている場合は直接コマンドを使用することもできます。 + + +React の場合: + +```bash +ig new my-app --framework=react +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=react +``` + + + +Web Components の場合: + +```bash +ig new my-app --framework=webcomponents +``` + +`npx` で実行する場合: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=webcomponents +``` + + +続いて行われる処理: + +- Ignite UI CLI がプロジェクト構造を作成します +- 必要なプロジェクト パッケージがインストールされます +- CLI を使ったセットアップ手順では、VS Code 用の `.vscode/mcp.json` も初期設定されます + +## ステップ 2: CLI MCP と Theming MCP を接続する + +プロジェクトを作成したら、両方の MCP サーバーが AI クライアントで利用可能であることを確認します。 + +### VS Code + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP クライアント + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +構成を保存したら、AI クライアントを再起動して、`igniteui-cli` と `igniteui-theming` の両方の MCP サーバーが利用可能であることを確認します。 + +## ステップ 3: アシスタントにプロジェクトを確認させる + +両方の MCP サーバーが起動したら、新しいチャットを開き、アシスタントにプロジェクト レベルのコンテキストを提供することから始めます。 + +プロンプトの例: + +> _「このプロジェクトを確認し、機能の追加を開始する前に現在の構造を説明して」_ + +> _「作成されたもの、メイン エントリ ポイント、新しいページを追加する場所を教えて」_ + +続いて行われる処理: + +- CLI MCP が、生成された、あるいは既存のプロジェクトを検査します +- アシスタントが構造を要約します +- 次のステップのための共通の理解が得られます + +## ステップ 4: チャットを通じて実際の機能を追加する + +プロジェクト構造が明確になったら、具体的な機能を要求します。 + +プロンプトの例: + +> _「{ProductName} グリッドを使用した Orders ページを追加して。Order ID、Customer Name、Order Date、Total Amount の列を含め、サンプル データにグリッドをバインドして」_ + +追加のプロンプト: + +> _「Orders グリッドでフィルタリング、ソート、ページングを有効にして、ページ レイアウトをアプリの残りの部分と一致させて」_ + +続いて行われる処理: + +- CLI MCP が適切なページを追加または更新します +- アシスタントがコンポーネント コードを作成または更新します +- 機能が既存のアプリ構造に統合されます + +さらに小さな改良の指示を続けることができます。 + +> _「グリッドの上にシンプルなツールバーを追加し、レイアウトをコンパクトに保って」_ + +## ステップ 5: 同じセッションでドキュメントの質問をする + +コンポーネント API を調べるために会話を離れる必要はありません。 + +プロンプトの例: + +> _「{Platform} グリッドがサポートするフィルタリング オプションは何ですか? シンプルな注文テーブルに最も適したものはどれですか?」_ + +> _「コンボ コンポーネントが公開するイベントは何ですか? 選択変更にはどれを使うべきですか?」_ + +> _「サイド ナビゲーション レイアウトに最も適した {ProductName} コンポーネントはどれですか? その理由は?」_ + +続いて行われる処理: + +- CLI MCP がドキュメント対応ツールを使用して質問に回答します +- すぐに実装要求を続けることができます + +例えば: + +> _「推奨されるフィルタリング アプローチを現在の Orders グリッドに適用して」_ + +## ステップ 6: カスタム テーマを適用する + +アプリ構造とメイン機能が整ったら、同じチャットで Theming MCP に切り替えます。 + +プロンプトの例: + +> _「アプリにプロフェッショナルなテーマを適用して。深いブルーのプライマリ カラー、暖かいアンバーのセカンダリ カラーを使用し、間隔をコンパクトに保って」_ + +続いて行われる処理: + +- Theming MCP がパレットとテーマ構成を生成します +- アシスタントが適切なテーマまたはスタイル ファイルを更新します +- アプリのスタイリングを、現在の構造と一致した状態に維持します + +より具体的なプロンプトでテーマをさらに調整できます。 + +> _「グリッド ヘッダーにプライマリ カラーを使用し、行の高さを少し増やして、ページの残りの部分を視覚的にクリーンに保って」_ + +> _「グリッドのスタイリングを改良する前に、生成されたプライマリとセカンダリのパレット シェードを表示して」_ + +## ステップ 7: 反復を続ける + +このワークフローの最も強力な部分は、1 つの会話の中で、プロジェクト作業、ドキュメントの質問、テーマ設定、を自由に行き来できることです。 + +プロンプトの例: + +> _「現在の Orders ページ構造を維持しながら、レイアウトを簡略化してフィルタリング エリアをよりコンパクトにして」_ + +> _「現在のテーマを使用しながら、ダッシュボード カードとグリッドの間隔をアプリの残りの部分とより一致させて」_ + +> _「生成されたファイルを確認し、主なプロジェクト、コンポーネント、テーマの変更を説明して」_ + +続いて行われる処理: + +- CLI MCP がプロジェクトとコンポーネントの改良を処理します +- Theming MCP がテーマとトークンの改良を処理します +- ワークフロー全体の流れが途切れることなく、アシスタントがサポートします + +## トピックのまとめ + +このワークフローは、プロジェクトのセットアップ、コンポーネント作業、ドキュメントの検索、テーマ設定を 1 つのチャット セッションで行いたい場合に有効です。 + +以下の場合におすすめです: + +- 個々のコード スニペットではなく、実際のプロジェクト スキャフォールドから始めたい場合 +- 実装とドキュメントへの質問とを交互に行いたい場合 +- プロジェクト構造とビジュアル スタイリングを並行して改善していきたい場合 + +実際の運用では、プロジェクトとコンポーネントの変更に CLI MCP を使用し、必要に応じてドキュメントの質問のために立ち止まり、続けて Theming MCP を使用して生成結果を改良する流れが、同じ会話を離れることのない、最も効率的なパターンです。 + +## 関連トピック + +- [Ignite UI を使った AI 支援開発](ai/ai-assisted-development-overview.md) +- [{ProductName} スキル](ai/skills.md) +- [Ignite UI CLI MCP](ai/cli-mcp.md) +- [Ignite UI Theming MCP](ai/theming-mcp.md) + +
+ +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{ProductName} **フォーラム** (英語)]({ForumsLink}) +- [{ProductName} **GitHub** (英語)]({GithubLink}) From 3829784486a9c4adea2948a8807e8477a7f97390 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 12:09:22 +0300 Subject: [PATCH 31/52] docs(toc): register newly migrated pages in xplat EN and JP TOC MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit EN toc.json: - AI-Assisted Development section expanded from 2 entries to 5, matching xplat EN structure: - Agent Workflow (ai-assisted-development-overview.md) NEW - Agent Skills (ai/skills.md) - renamed from "{ProductName} Skills" - CLI MCP (ai/cli-mcp.md) NEW - Theming MCP (ai/theming-mcp.md) - unchanged - Maker Framework (ai/maker-framework.md) NEW - "Ignite UI CLI" entry now nests "Step-by-Step Guide Using Ignite UI CLI" (general-step-by-step-guide-using-cli.md) as a child item, mirroring xplat. Parent status promoted to UPDATED. - "Splitter" (layouts/splitter.md) inserted between Divider and Tile Manager in the Layouts section. - New "How to" section added after Licensing with the "Build App with CLI MCP and Theming MCP" (general-how-to-mcp-e2e.md) entry, mirroring xplat. All new EN entries use `"exclude": ["Blazor", "Angular"]` (or `["Angular", "Blazor"]` where it matches the surrounding convention), keeping visibility consistent with the existing AI / CLI / Licensing entries. JP toc.json: - New AI-Assisted Development section (AI 支援開発) added at the top with the two entries that exist in xplat JP today: Agent Skills (エージェント スキル -> ai/skills.md) and Theming MCP (ai/theming-mcp.md). Both excluded from Blazor only, matching xplat JP. - The other new JP files we created in this branch (ai-assisted-development-overview, cli-mcp, splitter, general-how-to-mcp-e2e) are deliberately NOT registered in JP toc yet because xplat JP toc has not registered them either. They can be added in a follow-up once xplat JP catches up. --- docs/xplat/src/content/en/toc.json | 49 ++++++++++++++++++++++++++++-- docs/xplat/src/content/jp/toc.json | 17 +++++++++++ 2 files changed, 64 insertions(+), 2 deletions(-) diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json index 14526e3fde..85e729d1e1 100644 --- a/docs/xplat/src/content/en/toc.json +++ b/docs/xplat/src/content/en/toc.json @@ -6,16 +6,34 @@ }, { "exclude": ["Blazor", "Angular"], - "name": "{ProductName} Skills", + "name": "Agent Workflow", + "href": "ai/ai-assisted-development-overview.md", + "status": "new" + }, + { + "exclude": ["Blazor", "Angular"], + "name": "Agent Skills", "href": "ai/skills.md", "status": "new" }, + { + "exclude": ["Blazor", "Angular"], + "name": "CLI MCP", + "href": "ai/cli-mcp.md", + "status": "new" + }, { "exclude": ["Blazor", "Angular"], "name": "Theming MCP", "href": "ai/theming-mcp.md", "status": "new" }, + { + "exclude": ["Blazor", "Angular"], + "name": "Maker Framework", + "href": "ai/maker-framework.md", + "status": "new" + }, { "name": "General", "header": true @@ -96,7 +114,15 @@ "exclude": ["Angular", "Blazor"], "name": "Ignite UI CLI", "href": "general-cli-overview.md", - "status": "" + "status": "UPDATED", + "items": [ + { + "exclude": ["Angular", "Blazor"], + "name": "Step-by-Step Guide Using Ignite UI CLI", + "href": "general-step-by-step-guide-using-cli.md", + "status": "NEW" + } + ] }, { "exclude": ["Blazor", "Angular"], @@ -104,6 +130,19 @@ "href": "general-licensing.md", "status": "" }, + { + "exclude": ["Angular", "Blazor"], + "name": "How to", + "status": "NEW", + "items": [ + { + "exclude": ["Angular", "Blazor"], + "name": "Build App with CLI MCP and Theming MCP", + "href": "general-how-to-mcp-e2e.md", + "status": "new" + } + ] + }, { "exclude": ["Blazor", "React", "WebComponents"], "name": "How to", @@ -1909,6 +1948,12 @@ "href": "layouts/divider.md", "status": "new" }, + { + "exclude": ["Angular", "Blazor"], + "name": "Splitter", + "href": "layouts/splitter.md", + "status": "new" + }, { "exclude": ["Angular"], "name": "Tile Manager", diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json index 13e6ee4cbc..400a4ad8a6 100644 --- a/docs/xplat/src/content/jp/toc.json +++ b/docs/xplat/src/content/jp/toc.json @@ -1,4 +1,21 @@ [ + { + "exclude": ["Blazor"], + "name": "AI 支援開発", + "header": true + }, + { + "exclude": ["Blazor"], + "name": "エージェント スキル", + "href": "ai/skills.md", + "status": "new" + }, + { + "exclude": ["Blazor"], + "name": "Theming MCP", + "href": "ai/theming-mcp.md", + "status": "new" + }, { "name": "概要", "header": true From 5c2c6cb2a9d6a400118a7aedf5128cd05819226c Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 13:57:40 +0300 Subject: [PATCH 32/52] docs(scheduling/date-range-picker): single-input mode is now editable - Collapse the Usage section's two-mode caveat paragraph into one sentence: "The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities." (The old text claimed single-input mode was non-editable, which is no longer true.) - Merge the keyboard navigation tables: drop the "Two Inputs Mode" / "Both Single and Two Inputs Modes" subsection split now that the caret/arrow/CTRL/HOME/END/CTRL+; bindings apply to both modes. The ALT+arrow dropdown bindings are appended to the unified table. Ported from igniteui-xplat-docs commit 23707e7c (feat(drp): edit per new single input editable feature). Co-authored-by: Bozhidara Pachilova --- .../en/components/scheduling/date-range-picker.mdx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx index 78d6295c5d..2fe30dec00 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx @@ -96,9 +96,7 @@ For a complete introduction to the {ProductName}, read the [**Getting Started**] ## Usage -The allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. - -The picker offers two modes for displaying date values: single input and two inputs. In single input mode, the field is non-editable, and the date range cannot be edited by typing. In two inputs mode, however, users can edit the start and end dates by typing in separate input fields. +The allows users to select a start and end date either by choosing a date range from a dropdown/calendar pop-up or by typing directly into the input fields - one for the start date and one for the end date. The picker offers two modes for displaying date values: single input and two inputs. Both provide editing and masking capabilities. When the calendar is visible, a date range can be selected by choosing both a start and end date. Selecting a date will set both the start and end date, and once a second date is chosen, it will set the end date. If a range is already selected, clicking any other date on the calendar will start a new range selection. @@ -319,10 +317,6 @@ By default, when clicked, the open The features intuitive keyboard navigation, allowing users to easily increment, decrement, or jump between different component parts, all without needing to use a mouse. -The available keyboard navigation options vary depending on whether the component is in single input or two inputs mode. - -**Two Inputs Mode:** - |Keys|Description| |----|-----------| | ← | Moves the caret one character to the left | @@ -334,11 +328,6 @@ The available keyboard navigation options vary depending on whether the componen | HOME | Moves the caret to the beginning of the input mask | | END | Moves the caret to the end of the input mask | | CTRL + ; | Sets the current date as the value of the component | - -**Both Single and Two Inputs Modes:** - -|Keys|Description| -|----|-----------| | ALT + ↓ | Opens the calendar dropdown | | ALT + ↑ | Closes the calendar dropdown | From 617c44ae471400ab5c93ccfdc3d3a0875665d46b Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 14:04:48 +0300 Subject: [PATCH 33/52] docs(ai/skills): add Generate From Image Design skill across all platforms New "Generate From Image Design" skill added everywhere it needs to appear so the document parallels its xplat source: - All four per-platform "Available Skills" tables (WC / React / Angular / Blazor) get the new skill row. - The `.agents/skills/` directory tree examples for all four platforms list the new igniteui-{platform}-generate-from-image-design/ folder. - Per-platform copy commands (cp -r and robocopy) gain the new path. - Per-platform gemini skills install commands gain the new path, in both the user-scope (default) and workspace-scope variants. Also drops the "(components, grids, theming)" parenthetical from the GitHub CLI install instructions - the prompt now covers more skill types than that explicit triple. Ported from igniteui-xplat-docs commits ea6f5a21 (docs(skills): add generate-from-image-design skill) and 43457666 (docs(skills): refine installation instructions for clarity). Co-authored-by: georgianastasov --- .../src/content/en/components/ai/skills.mdx | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/docs/xplat/src/content/en/components/ai/skills.mdx b/docs/xplat/src/content/en/components/ai/skills.mdx index 02106c7b01..a35d6c992f 100644 --- a/docs/xplat/src/content/en/components/ai/skills.mdx +++ b/docs/xplat/src/content/en/components/ai/skills.mdx @@ -30,6 +30,7 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo | Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | Helps with integrating components to the user's platform of choice | | Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | | Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | +| Generate From Image Design | [`skills/igniteui-wc-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-generate-from-image-design/SKILL.md) | Build Web Components apps from screenshots, mockups, and wireframes using Ignite UI components | @@ -40,6 +41,7 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo | Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them - JSX patterns, event handling, refs, forms, TypeScript | | Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | | Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size | +| Generate From Image Design | [`skills/igniteui-react-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-generate-from-image-design/SKILL.md) | Build React apps from screenshots, mockups, and wireframes using Ignite UI components | @@ -50,6 +52,7 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo | Components & Layout | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular apps from screenshots, mockups, and wireframes using Ignite UI components | Starting with {ProductName} **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. @@ -64,6 +67,7 @@ Starting with {ProductName} **21.1.0**, these skills are automatically discovere | Components & Layout | [`skills/igniteui-blazor-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-components/SKILL.md) | Components, form controls, overlays, layout | | Data Grids | [`skills/igniteui-blazor-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Grid Lite, sorting, filtering, grouping, paging, remote data | | Theming & Styling | [`skills/igniteui-blazor-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Generate From Image Design | [`skills/igniteui-blazor-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-generate-from-image-design/SKILL.md) | Build Blazor apps from screenshots, mockups, and wireframes using Ignite UI components | @@ -88,6 +92,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-wc-optimize-bundle-size/ SKILL.md + igniteui-wc-generate-from-image-design/ + SKILL.md ``` @@ -103,6 +109,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-react-optimize-bundle-size/ SKILL.md + igniteui-react-generate-from-image-design/ + SKILL.md ``` @@ -118,6 +126,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-angular-theming/ SKILL.md + igniteui-angular-generate-from-image-design/ + SKILL.md ``` @@ -133,6 +143,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-blazor-theming/ SKILL.md + igniteui-blazor-generate-from-image-design/ + SKILL.md ``` @@ -271,7 +283,7 @@ gh skill install IgniteUI/igniteui-blazor -You will be asked to select which skills to install (components, grids, theming) and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. +You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. To update skills later, run the following command: @@ -332,6 +344,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-choose-components .agents/ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-customize-component-theme .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-optimize-bundle-size .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-generate-from-image-design .agents/skills/ ``` @@ -342,6 +355,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework . cp -r node_modules/{PackageCommon}/skills/igniteui-react-components .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-react-customize-theme .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-generate-from-image-design .agents/skills/ ``` @@ -352,6 +366,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .a cp -r node_modules/{PackageCommon}/skills/igniteui-angular-components .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-angular-grids .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-generate-from-image-design .agents/skills/ ``` @@ -362,6 +377,7 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skill cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-components .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-grids .agents/skills/ cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-theming .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-generate-from-image-design .agents/skills/ ``` @@ -375,6 +391,7 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-wc-choose-components .agen robocopy node_modules\{PackageCommon}\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E robocopy node_modules\{PackageCommon}\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-generate-from-image-design .agents\skills\igniteui-wc-generate-from-image-design /E ``` @@ -385,6 +402,7 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framewor robocopy node_modules\{PackageCommon}\skills\igniteui-react-components .agents\skills\igniteui-react-components /E robocopy node_modules\{PackageCommon}\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-generate-from-image-design .agents\skills\igniteui-react-generate-from-image-design /E ``` @@ -395,6 +413,7 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size robocopy node_modules\{PackageCommon}\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E robocopy node_modules\{PackageCommon}\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E ``` @@ -405,6 +424,7 @@ robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\sk robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-components .agents\skills\igniteui-blazor-components /E robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-grids .agents\skills\igniteui-blazor-grids /E robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-theming .agents\skills\igniteui-blazor-theming /E +robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-generate-from-image-design .agents\skills\igniteui-blazor-generate-from-image-design /E ``` @@ -425,6 +445,7 @@ gemini skills install {GithubLink}.git --path skills/igniteui-wc-choose-componen gemini skills install {GithubLink}.git --path skills/igniteui-wc-customize-component-theme gemini skills install {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +gemini skills install {GithubLink}.git --path skills/igniteui-wc-generate-from-image-design ``` @@ -435,6 +456,7 @@ gemini skills install {GithubLink}.git --path skills/igniteui-wc-integrate-with- gemini skills install {GithubLink}.git --path skills/igniteui-react-components gemini skills install {GithubLink}.git --path skills/igniteui-react-customize-theme gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +gemini skills install {GithubLink}.git --path skills/igniteui-react-generate-from-image-design ``` @@ -445,6 +467,7 @@ gemini skills install {GithubLink}.git --path skills/igniteui-react-optimize-bun gemini skills install {GithubLink}.git --path skills/igniteui-angular-components gemini skills install {GithubLink}.git --path skills/igniteui-angular-grids gemini skills install {GithubLink}.git --path skills/igniteui-angular-theming +gemini skills install {GithubLink}.git --path skills/igniteui-angular-generate-from-image-design ``` @@ -455,6 +478,7 @@ gemini skills install {GithubLink}.git --path skills/igniteui-angular-theming gemini skills install {GithubLink}.git --path skills/igniteui-blazor-components gemini skills install {GithubLink}.git --path skills/igniteui-blazor-grids gemini skills install {GithubLink}.git --path skills/igniteui-blazor-theming +gemini skills install {GithubLink}.git --path skills/igniteui-blazor-generate-from-image-design ``` @@ -468,6 +492,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-customize-component-theme gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-optimize-bundle-size gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-integrate-with-framework +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-wc-generate-from-image-design ``` @@ -478,6 +503,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-components gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-customize-theme gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-optimize-bundle-size +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-react-generate-from-image-design ``` @@ -488,6 +514,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-components gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-grids gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-theming +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-angular-generate-from-image-design ``` @@ -498,6 +525,7 @@ gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui- gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-components gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-grids gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-theming +gemini skills install --scope workspace {GithubLink}.git --path skills/igniteui-blazor-generate-from-image-design ``` From 982fee14d6910666a69c732bbd3514ee64678dd3 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 14 May 2026 15:21:10 +0300 Subject: [PATCH 34/52] fix(docConfig): register the new PackageVerChanges tokens used by the migrated changelogs The changelog migrations introduced PackageVerChanges-* tokens that were not in docs-template's docConfig.json. MDX treats unresolved {tokens} as JSX expressions, which caused the Angular build to fail with "ReferenceError: PackageVerChanges is not defined" when rendering /general-changelog-dv. Tokens registered per platform (values mirrored from xplat-docs docConfig.json): Angular: - {PackageVerChanges-26-1-JAN} = 21.0.0 (January 2026) - the prior PackageVerLatest content, demoted under this heading. - {PackageVerLatest} = 21.0.1 (March 2026) - new SR. React: - {PackageVerChanges-26-2-FEB} = 19.5.1 (February 2026) - prior PackageVerLatest content (the 26.2 GA), demoted under this heading. - {PackageVerChanges-26-2-MAR} = 19.5.2 (March 2026) - backfilled Bug Fixes block. - {PackageVerLatest} = 19.6.0 (March 2026) - new release. Web Components: - {PackageVerChanges-26-1-FEB} = 7.0.0 (February 2026) - prior PackageVerLatest content, demoted under this heading. - {PackageVerLatest} = 7.0.1 (March 2026) - new SR. Blazor: - {PackageVerChanges-25-2-DEC} = 25.2.38 (December 2025) - prior PackageVerLatest content, demoted under this heading. - {PackageVerChanges-25-2-MAR} = 25.2.77 (March 2026) - the 25.2 GA content backfilled under this heading. - {PackageVerLatest} = 25.2.83 (March 2026) - new SR. --- docs/xplat/docConfig.json | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/xplat/docConfig.json b/docs/xplat/docConfig.json index c1a0815cde..f47eec7690 100644 --- a/docs/xplat/docConfig.json +++ b/docs/xplat/docConfig.json @@ -59,7 +59,8 @@ { "name": "{PackageVerChanges-25-2-NOV}", "value": "20.2.0 (November 2025)"}, { "name": "{PackageVerChanges-25-2-DEC}", "value": "20.2.1 (December 2025)"}, { "name": "{PackageVerChanges-25-2-FEB}", "value": "20.2.2 (February 2026)"}, - { "name": "{PackageVerLatest}", "value": "21.0.0 (January 2026)"}, + { "name": "{PackageVerChanges-26-1-JAN}", "value": "21.0.0 (January 2026)"}, + { "name": "{PackageVerLatest}", "value": "21.0.1 (March 2026)"}, { "name": "{PackageAngularComponents}", "value": "igniteui-angular"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/browser"}, @@ -191,7 +192,9 @@ { "name": "{PackageVerChanges-25-2-NOV}", "value": "19.3.0 (November 2025)"}, { "name": "{PackageVerChanges-25-2-DEC}", "value": "19.3.1 (December 2025)"}, { "name": "{PackageVerChanges-25-2-FEB}", "value": "19.3.2 (February 2026)"}, - { "name": "{PackageVerLatest}", "value": "19.5.1 (February 2026)"}, + { "name": "{PackageVerChanges-26-2-FEB}", "value": "19.5.1 (February 2026)"}, + { "name": "{PackageVerChanges-26-2-MAR}", "value": "19.5.2 (March 2026)"}, + { "name": "{PackageVerLatest}", "value": "19.6.0 (March 2026)"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-react-examples/tree/master/browser"}, { "name": "{GithubLink}", "value": "https://github.com/IgniteUI/igniteui-react"}, @@ -432,7 +435,8 @@ { "name": "{PackageDockManagerVerChanges-1.14.2}", "value": "1.14.2"}, { "name": "{PackageDockManagerVerChanges-1.14.3}", "value": "1.14.3"}, { "name": "{PackageDockManagerVerChanges-1.14.4}", "value": "1.14.4"}, - { "name": "{PackageVerLatest}", "value": "7.0.0 (February 2026)"}, + { "name": "{PackageVerChanges-26-1-FEB}", "value": "7.0.0 (February 2026)"}, + { "name": "{PackageVerLatest}", "value": "7.0.1 (March 2026)"}, { "name": "{PackageWebComponents}", "value": "igniteui-webcomponents"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-wc-examples/tree/master/browser"}, @@ -609,7 +613,9 @@ { "name": "{PackageVerChanges-25-1-AUG}", "value": "25.1.63 (August 2025)"}, { "name": "{PackageVerChanges-25-1-SEP}", "value": "25.1.82 (September 2025)"}, { "name": "{PackageVerChanges-25-2-NOV}", "value": "25.2.32 (November 2025)"}, - { "name": "{PackageVerLatest}", "value": "25.2.38 (December 2025)"}, + { "name": "{PackageVerChanges-25-2-DEC}", "value": "25.2.38 (December 2025)"}, + { "name": "{PackageVerChanges-25-2-MAR}", "value": "25.2.77 (March 2026)"}, + { "name": "{PackageVerLatest}", "value": "25.2.83 (March 2026)"}, { "name": "{RepoSamples}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/samples"}, { "name": "{RepoBrowser}", "value": "https://github.com/IgniteUI/igniteui-blazor-examples/tree/master/browser"}, From 87708289493a84870e1590b5e7d32b58ce455e33 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Fri, 15 May 2026 15:39:25 +0300 Subject: [PATCH 35/52] Fix API reference links in multiple grid documentation files by correcting the syntax for components. --- .../jp/components/grids/_shared/advanced-filtering.mdx | 2 +- .../content/jp/components/grids/_shared/batch-editing.mdx | 8 ++++---- .../jp/components/grids/_shared/cascading-combos.mdx | 2 +- .../content/jp/components/grids/_shared/cell-editing.mdx | 2 +- .../content/jp/components/grids/_shared/cell-merging.mdx | 2 +- .../jp/components/grids/_shared/cell-selection.mdx | 2 +- .../components/grids/_shared/clipboard-interactions.mdx | 2 +- .../grids/_shared/collapsible-column-groups.mdx | 2 +- .../content/jp/components/grids/_shared/column-hiding.mdx | 2 +- .../content/jp/components/grids/_shared/column-moving.mdx | 2 +- .../jp/components/grids/_shared/column-pinning.mdx | 2 +- .../jp/components/grids/_shared/column-resizing.mdx | 2 +- .../jp/components/grids/_shared/column-selection.mdx | 2 +- .../content/jp/components/grids/_shared/column-types.mdx | 2 +- .../components/grids/_shared/conditional-cell-styling.mdx | 2 +- .../src/content/jp/components/grids/_shared/editing.mdx | 2 +- .../jp/components/grids/_shared/excel-style-filtering.mdx | 2 +- .../content/jp/components/grids/_shared/export-excel.mdx | 2 +- .../src/content/jp/components/grids/_shared/filtering.mdx | 2 +- .../jp/components/grids/_shared/keyboard-navigation.mdx | 2 +- .../src/content/jp/components/grids/_shared/live-data.mdx | 2 +- .../jp/components/grids/_shared/multi-column-headers.mdx | 2 +- .../jp/components/grids/_shared/multi-row-layout.mdx | 2 +- .../src/content/jp/components/grids/_shared/paging.mdx | 2 +- .../components/grids/_shared/remote-data-operations.mdx | 2 +- .../content/jp/components/grids/_shared/row-actions.mdx | 2 +- .../content/jp/components/grids/_shared/row-adding.mdx | 2 +- .../src/content/jp/components/grids/_shared/row-drag.mdx | 2 +- .../content/jp/components/grids/_shared/row-editing.mdx | 2 +- .../content/jp/components/grids/_shared/row-pinning.mdx | 4 ++-- .../content/jp/components/grids/_shared/row-selection.mdx | 4 ++-- .../src/content/jp/components/grids/_shared/search.mdx | 2 +- .../src/content/jp/components/grids/_shared/selection.mdx | 2 +- .../src/content/jp/components/grids/_shared/size.mdx | 2 +- .../src/content/jp/components/grids/_shared/sizing.mdx | 2 +- .../src/content/jp/components/grids/_shared/sorting.mdx | 2 +- .../jp/components/grids/_shared/state-persistence.mdx | 2 +- .../src/content/jp/components/grids/_shared/summaries.mdx | 2 +- .../src/content/jp/components/grids/_shared/toolbar.mdx | 2 +- .../content/jp/components/grids/_shared/validation.mdx | 2 +- .../jp/components/grids/_shared/virtualization.mdx | 2 +- 41 files changed, 46 insertions(+), 46 deletions(-) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx index 40391e0fe5..64e010abaf 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx @@ -600,7 +600,7 @@ $custom-drop-down: drop-down-theme( ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx index 91c491c00b..280a3c4c54 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx @@ -429,10 +429,10 @@ export class GridBatchEditingSampleComponent { ## 一括編集のリモート ページング デモ - - - - + + + + ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx index 5f53a441cb..5bade439a0 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cascading-combos.mdx @@ -321,7 +321,7 @@ public webGridCountryDropDownTemplate: IgcRenderFunction ## {Platform} {ComponentTitle} API メンバー - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx index 1458a366bb..6e52461467 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx @@ -1461,7 +1461,7 @@ In addition to the steps above, we can also style the controls that are used for ## スタイル ライブラリのインポート - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx index 3c992919cf..d895bb31b8 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-merging.mdx @@ -329,7 +329,7 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom ## デモ - + ## 機能の統合 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx index b01bd33e85..7c9de52c2f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx @@ -461,7 +461,7 @@ $custom-grid-theme: grid-theme( ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx index 5ede1a92ac..6f28768682 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx @@ -74,7 +74,7 @@ Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自 ## その他のリソース - + ## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx index 0cfdfe3dab..5216ab15af 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx @@ -303,7 +303,7 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => { ## API リファレンス - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx index 6b74125b49..7515ac9259 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx @@ -1193,7 +1193,7 @@ $custom-button: button-theme( ## API リファレンス - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx index 144dd0a277..e10685933d 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx @@ -436,7 +436,7 @@ $dark-grid-column-moving-theme: grid-theme( ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx index b3b4ba947d..3880d869bf 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx @@ -968,7 +968,7 @@ Then set the related CSS properties to this class: ## グローバル テーマのインポート - + ## カスタム テーマの定義 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx index 9fe35d8f1b..f7fa2cbb6b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx @@ -889,7 +889,7 @@ $custom-grid-theme: grid-theme( ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx index 1fdaf8b055..e43fb0c363 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx @@ -206,7 +206,7 @@ Internet Explorer 11 のコンポーネントをスタイル設定するには ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx index 150c8dc2cd..1590012647 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx @@ -692,7 +692,7 @@ public init(column: IgxColumnComponent) { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx index 51b6e9c8bd..0c181bf2b6 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx @@ -1232,7 +1232,7 @@ const editDone = (event: IgrGridEditEventArgs) => { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx index b19e248948..87c57214f1 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx @@ -176,7 +176,7 @@ function onSorting(args: IgrSortingEventArgs) { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx index aa3ff9e1d3..06a23df4b3 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx @@ -945,7 +945,7 @@ Then set the related CSS properties to this class: ## デモ - + ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx index 1fefeccf38..871de29bd9 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx @@ -292,7 +292,7 @@ this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions(' ## その他のリソース - + ## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx index c9a585d234..a398872780 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx @@ -908,7 +908,7 @@ $custom-grid: grid-theme( ## デモ - + ## 既知の問題と制限 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx index bb55b4b0e6..f4288b34d5 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx @@ -365,7 +365,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx index 542195cdf1..76694abe66 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx @@ -226,7 +226,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx index 3e573547d6..6885ff344a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx @@ -914,7 +914,7 @@ import 'core-js/es7/array'; ## API リファレンス - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx index ad406a7daf..86eea9fb10 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx @@ -401,7 +401,7 @@ $my-custom-schema: extend($light-schema, ( ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx index 6b14c02fe4..ea5cff8ac6 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx @@ -364,7 +364,7 @@ $dark-button: button-theme( ## ページネーション スタイルの例 - + ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx index 12ac294852..f17236a54a 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx @@ -1852,7 +1852,7 @@ As you can see in the `Paginate` method, custom pagination logic is performed, b ## グリッド リモート ページングのデモ - + ## グリッド リモート ページングのデモ diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx index 1bfac00fa2..c96b78a30e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-actions.mdx @@ -324,6 +324,6 @@ import { IgxActionStripModule } from 'igniteui-angular'; ## API リファレンス - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx index d85da1f946..d63e2de50f 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx @@ -642,7 +642,7 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx index 498fdc4fa9..1503b7753e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx @@ -1505,7 +1505,7 @@ Following is the example of both scenarios described above - showing a drop indi ## 行ドラッグ シナリオでの UX の改善 - + ## カーソル位置に基づいてドラッグ ゴーストを変更する 以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーされた行の名前を表示する方法を示しています。 diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index 6ba65dcfb2..ef4928db40 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -770,7 +770,7 @@ Then set the related CSS properties for that class: ## API References - + ## Additional Resources diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx index 556b84034f..bed4c22bff 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx @@ -688,8 +688,8 @@ $custom-grid-theme: grid-theme( ## API リファレンス - - + + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx index 7082d79a0a..97d9930b1b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx @@ -854,8 +854,8 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => { ## API リファレンス - - + + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx index 30c612e2ce..bac3e46829 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx @@ -1341,7 +1341,7 @@ public updateSearch() { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx index 2ceb02146f..3f6ca6d617 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx @@ -564,7 +564,7 @@ import "core-js/es7/array"; ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx index 45eaee9e08..0f17023e1e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx @@ -977,7 +977,7 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx index 19f949cd6d..1af797208b 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx @@ -292,7 +292,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx index 91ea537765..5274619c84 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx @@ -927,7 +927,7 @@ const sortAscendingHeaderIconTemplate = (ctx: IgrGridHeaderTemplateContext) => { ## デモ - + ## API リファレンス diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx index dd290d46a4..5dbf8f9112 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx @@ -1090,7 +1090,7 @@ Add snippet for blazor for restore state ## 制限 - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx index 0c07ca98a4..4c6e60938e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx @@ -1517,7 +1517,7 @@ Don't forget to include the themes in the same way as it was demonstrated above. ## デモ - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx index f9a1cc066b..b6a162f3a2 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx @@ -1469,7 +1469,7 @@ Currently, defining a toolbar component directly inside the {RowIslandSelector} ## スタイル設定 - + diff --git a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx index 8de301b7ea..745729eae7 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx @@ -649,7 +649,7 @@ public cellStyles = { ## API リファレンス - + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx index 46f83e5096..6ae8a21947 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx @@ -101,7 +101,7 @@ igRegisterScript("CellTemplate", (ctx) => { ## API リファレンス - + ## その他のリソース From 219d533f20792dbbcefcca17c0c39de5a591c9f1 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov <105818882+Zneeky@users.noreply.github.com> Date: Mon, 18 May 2026 10:08:43 +0300 Subject: [PATCH 36/52] spelling mistake fix Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../src/content/en/components/general-changelog-dv-react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx index 28f83f9dae..f4791720c7 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx @@ -47,7 +47,7 @@ All notable changes for each version of {ProductName} are documented on this pag | Bug Number | Control | Description | |------------|---------|-------------| | 3055 | IgrDataPieChart | missing styling properties for the Others Slice | -| 38668 | IgrDataTooltipLayer | TitleTextColor is overriden when chart's TitleTextColor is used | +| 38668 | IgrDataTooltipLayer | TitleTextColor is overridden when chart's TitleTextColor is used | | 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool | | 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | | 41594 | IgrDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | From 77df7afd9835b5ea298152e1ab69e1b0bee660b5 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Mon, 18 May 2026 10:49:32 +0300 Subject: [PATCH 37/52] docs(layouts/tabs): correct snippets and topic content for latest state Update the Tabs snippets to the current API (EN + JP): - Simple declaration: tabs now use the `Label` property (or `label` slot) instead of the old WebComponents `
` for every tab. The Blazor snippet drops the obsolete Panel / IgbTabPanel model in favour of inline `` with child content. The third tab keeps the `label` slot form to show both styles. - Disabled Tab snippets updated to the self-closing `label="..." disabled` form across WebComponents/Blazor/React. - New paragraph explaining tab text can be set via the `Label` property or the `label` slot, with remaining default-slot children rendered as the tab content. - Prefix / Suffix paragraph reworded to reference the `label` slot rather than a generic "default slot". Ported from igniteui-xplat-docs commit 95c26d8c. Co-authored-by: damyanpetev --- .../content/en/components/layouts/tabs.mdx | 41 +++++++++++-------- .../content/jp/components/layouts/tabs.mdx | 41 +++++++++++-------- 2 files changed, 46 insertions(+), 36 deletions(-) diff --git a/docs/xplat/src/content/en/components/layouts/tabs.mdx b/docs/xplat/src/content/en/components/layouts/tabs.mdx index 758c59af39..3429983ffc 100644 --- a/docs/xplat/src/content/en/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/en/components/layouts/tabs.mdx @@ -94,12 +94,10 @@ Simple declaration is done as follows: ```html - -
Tab 1
+ Content for tab 1 - -
Tab 2
+ Content for tab 2 @@ -115,12 +113,16 @@ Simple declaration is done as follows: ```razor - Tab 1 - Tab 2 - Tab 3 - Panel 1 - Panel 2 - Panel 3 + + Content for tab 1 + + + Content for tab 2 + + +
Tab 3
+ Content for tab 3 + ``` @@ -131,19 +133,22 @@ Simple declaration is done as follows: ```tsx - Panel 1 + Content for tab 1 - Panel 2 + Content for tab 2 - - Panel 3 + +
Tab 3
+ Content for tab 3 ``` +Tab text can be set either as simple string using the `Label` property or by assigning children to the `label` slot. Any remaining children in the default slot are rendered as the tab content. + ### Selection The emits event when the user selects an item either by key press or click. The method allows you to select a tab by specifying the or its id. @@ -159,7 +164,7 @@ A tab is disabled by setting the `Disabled` attribute: ```html -Tab 1 + ``` @@ -167,7 +172,7 @@ A tab is disabled by setting the `Disabled` attribute: ```razor -Tab 1 + ``` @@ -175,7 +180,7 @@ A tab is disabled by setting the `Disabled` attribute: ```tsx -Tab 1 + ``` @@ -217,7 +222,7 @@ Scroll buttons are shown when the available space is not enough to render all {P ### Prefix / Suffix -Each tab has default slot to display information - icon, text or both and `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. +Besides the `label` slot to display information - icon, text or both, each tab also has `prefix` and `suffix` slots to show additional content in the beginning and/or in the end. diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx index 515bfd2ebd..4d7408a16e 100644 --- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx +++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx @@ -96,12 +96,10 @@ defineComponents(IgcTabsComponent); ```html - -
Tab 1
+ Content for tab 1 - -
Tab 2
+ Content for tab 2 @@ -117,12 +115,16 @@ defineComponents(IgcTabsComponent); ```razor - Tab 1 - Tab 2 - Tab 3 - Panel 1 - Panel 2 - Panel 3 + + Content for tab 1 + + + Content for tab 2 + + +
Tab 3
+ Content for tab 3 + ``` @@ -133,19 +135,22 @@ defineComponents(IgcTabsComponent); ```tsx - Panel 1 + Content for tab 1 - Panel 2 + Content for tab 2 - - Panel 3 + +
Tab 3
+ Content for tab 3 ``` +タブ テキストは、`Label` プロパティを使用して単純な文字列として設定することも、`label` スロットに子要素を割り当てることで設定することもできます。デフォルト スロットの残りの子要素は、タブ コンテンツとしてレンダリングされます。 + ### 選択 ユーザーがキーを押すかクリックして項目を選択すると、 は イベントを発行します。 メソッドを使用すると、 またはその ID を指定してタブを選択できます。 @@ -161,7 +166,7 @@ defineComponents(IgcTabsComponent); ```html -Tab 1 + ``` @@ -169,7 +174,7 @@ defineComponents(IgcTabsComponent); ```razor -Tab 1 + ``` @@ -177,7 +182,7 @@ defineComponents(IgcTabsComponent); ```tsx -Tab 1 + ``` @@ -219,7 +224,7 @@ defineComponents(IgcTabsComponent); ### Prefix / Suffix (プレフィックス / サフィックス) -各タブには、情報を表示するためのデフォルト スロットがあります。アイコン、テキスト、またはその両方と、開始および / または終了に追加のコンテンツを表示するための `prefix` と `suffix` のスロットです。 +各タブは `label` スロットでアイコン、テキスト、またはその両方などの情報を表示できるほか、`prefix` と `suffix` スロットで開始および / または終了に追加のコンテンツを表示することもできます。 From eb242e2fd0a26b1c01e0e5b1bba713b7698125d8 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Mon, 18 May 2026 10:52:01 +0300 Subject: [PATCH 38/52] docs(themes/overview): add Blazor themes listing, gate unavailable API ref EN + JP themes overview: - Add a Blazor-specific bundled-themes table (light + dark variants for Bootstrap, Material, Fluent, Indigo) pointing at the _content/IgniteUI.Blazor/themes/... stylesheet paths. - Wrap the "API References" section (the ConfigureTheme entry) in a React/WebComponents PlatformBlock - the ConfigureTheme runtime API is not available for Blazor, so the reference is hidden there. Converted the source HTML platform comments (, ) to wrappers. Ported from igniteui-xplat-docs commit ab90e347. Co-authored-by: damyanpetev --- .../content/en/components/themes/overview.mdx | 19 +++++++++++++++++++ .../content/jp/components/themes/overview.mdx | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/docs/xplat/src/content/en/components/themes/overview.mdx b/docs/xplat/src/content/en/components/themes/overview.mdx index fe0b8ab936..67d56bc376 100644 --- a/docs/xplat/src/content/en/components/themes/overview.mdx +++ b/docs/xplat/src/content/en/components/themes/overview.mdx @@ -37,6 +37,21 @@ Here's the complete list of all bundled themes and their path: + + +| Name | Variant | Location | +| ----------- | ------- | ------------------------------------------------- | +| **Bootstrap** | Light | _content/IgniteUI.Blazor/themes/light/bootstrap.css | +| **Material** | Light | _content/IgniteUI.Blazor/themes/light/material.css | +| **Fluent** | Light | _content/IgniteUI.Blazor/themes/light/fluent.css | +| **Indigo** | Light | _content/IgniteUI.Blazor/themes/light/indigo.css | +| **Bootstrap** | Dark | _content/IgniteUI.Blazor/themes/dark/bootstrap.css | +| **Material** | Dark | _content/IgniteUI.Blazor/themes/dark/material.css | +| **Fluent** | Dark | _content/IgniteUI.Blazor/themes/dark/fluent.css | +| **Indigo** | Dark | _content/IgniteUI.Blazor/themes/dark/indigo.css | + + + @@ -78,7 +93,11 @@ This only tells components to switch their internal styles to the desired theme, + + ## API References
+ + diff --git a/docs/xplat/src/content/jp/components/themes/overview.mdx b/docs/xplat/src/content/jp/components/themes/overview.mdx index 96d07d8d30..faa708ec94 100644 --- a/docs/xplat/src/content/jp/components/themes/overview.mdx +++ b/docs/xplat/src/content/jp/components/themes/overview.mdx @@ -39,6 +39,21 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc + + +| 名前 | バリアント | 場所 | +| ----------- | ------- | ------------------------------------------------- | +| **Bootstrap** | ライト | _content/IgniteUI.Blazor/themes/light/bootstrap.css | +| **Material** | ライト | _content/IgniteUI.Blazor/themes/light/material.css | +| **Fluent** | ライト | _content/IgniteUI.Blazor/themes/light/fluent.css | +| **Indigo** | ライト | _content/IgniteUI.Blazor/themes/light/indigo.css | +| **Bootstrap** | ダーク | _content/IgniteUI.Blazor/themes/dark/bootstrap.css | +| **Material** | ダーク | _content/IgniteUI.Blazor/themes/dark/material.css | +| **Fluent** | ダーク | _content/IgniteUI.Blazor/themes/dark/fluent.css | +| **Indigo** | ダーク | _content/IgniteUI.Blazor/themes/dark/indigo.css | + + + @@ -79,7 +94,11 @@ configureTheme("material"); + + ## API リファレンス + + From 71146f0fb9026ffce5a76f0e7d207a8680fea95b Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 19 May 2026 10:43:20 +0300 Subject: [PATCH 39/52] docs(ai): fix Blazor docs, package names, and clarify ai-config prompt flow Port the AI-docs fixes from igniteui-xplat-docs PR #2010 across all four AI pages. ai-assisted-development-overview: - Correct the CLI MCP server package name: @igniteui/mcp-server -> igniteui-cli. - description uses npx igniteui-cli@latest ai-config. - New Blazor note: ai-config detects the project via .csproj/.sln; the IgniteUI.Blazor NuGet package need not be installed. - "What to Expect" terminal output reworked into DocsAside notes, platform-gated (Angular/React/WC mention npm install; Blazor omits it). - Blazor "Add Skills Later" now uses npx igniteui-cli@latest ai-config instead of gh skill install. - CLI MCP Server section: launch command npx -y igniteui-cli mcp; ai-config noted as the way to write client config. - Step 1 split: Angular/React/WC pull skills from node_modules; Blazor has them copied automatically by ai-config. - Step 3: added the generic mcpServers JSON variant for non-VS Code clients. cli-mcp: - Replace "writes .vscode/mcp.json for VS Code" wording throughout with the new "prompts you to choose which AI clients and agents to configure" flow (Overview, setup-path picker, Common Workflows, Troubleshooting). theming-mcp: - detect_platform description notes Blazor projects have no package.json and return generic. - Prerequisites/Setup platform-gated: Angular/React/WC reference igniteui-theming + package.json; Blazor references the IgniteUI.Blazor NuGet package and notes npx fetches the MCP server directly. - New Blazor block under "New Project Theme" about CSS custom property output applied in wwwroot/css/app.css. - "Platform not detected" troubleshooting platform-gated. skills: - New Blazor note after the ai-config flags table. - Restructure Installing Skills: the node_modules manual-copy instructions move directly under Option A inside an Angular/React/WebComponents PlatformBlock (Blazor cp/robocopy variants dropped - Blazor uses ai-config / gh skill); Option B (GitHub CLI) now follows the manual-copy block. - Option D npx skills command platform-gated (IgniteUI/{PackageCommon} vs IgniteUI/igniteui-blazor). HTML platform comments converted to ; markdown admonitions to . EN only - no JP sync for these exists in xplat yet. Ported from igniteui-xplat-docs commits 066b9636, 1394241b, 9783cf16, and 873fd1cb (PR #2010, ganastasov/ai-docs-fixes). Co-authored-by: georgianastasov --- .../ai/ai-assisted-development-overview.mdx | 85 +++++++-- .../src/content/en/components/ai/cli-mcp.mdx | 14 +- .../src/content/en/components/ai/skills.mdx | 180 +++++++++--------- .../content/en/components/ai/theming-mcp.mdx | 48 ++++- 4 files changed, 209 insertions(+), 118 deletions(-) diff --git a/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx index fb7ffc84c3..127fec2cbf 100644 --- a/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx +++ b/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx @@ -1,6 +1,6 @@ --- title: "AI-Assisted Development with Ignite UI - {ProductName}" -description: "Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command - npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs." +description: "Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command - npx igniteui-cli@latest ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs." keywords: "{Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config" license: MIT _canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview" @@ -12,7 +12,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc # AI-Assisted Development with Ignite UI -{ProductName} 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/mcp-server`) 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` +{ProductName} 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: @@ -38,25 +38,41 @@ npx igniteui-cli ai-config 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. + + +For Blazor, `ai-config` detects your project by looking for a `.csproj` or `.sln` file. The `IgniteUI.Blazor` NuGet package does not need to be installed. + + + +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: -``` -Ignite UI MCP servers configured in .vscode/mcp.json -No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date. -``` + + +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. + + + + + +Ignite UI MCP servers configured for your selected clients + + 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: -``` -Ignite UI MCP servers configured in .vscode/mcp.json -Agent Skills copied to .claude/skills/ -``` + +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. @@ -115,17 +131,13 @@ npx igniteui-cli@latest ai-config - -For Blazor, the `ai-config` command is currently not available. Install the skills using the GitHub CLI: - - ```bash -gh skill install IgniteUI/igniteui-blazor +npx igniteui-cli@latest ai-config ``` -The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date) +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 @@ -151,13 +163,13 @@ For full setup instructions and IDE wiring, see [Agent Skills](skills.md). 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 is configured via `npx` without a global install: +The CLI MCP server runs via `npx` without a global install: ```bash -npx igniteui-cli ai-config +npx -y igniteui-cli mcp ``` -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 the CLI MCP setup guides below. +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](cli-mcp.md) 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. @@ -201,7 +213,7 @@ The `ai-config` command configures MCP servers, copies framework-specific skill ng generate @igniteui/angular-schematics:ai-config ``` -This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers. +This also registers the `@angular/cli` MCP server alongside the Ignite UI servers for your selected clients. **Using the Ignite UI CLI:** @@ -228,9 +240,25 @@ The command requires Ignite UI packages to be installed in your project (`npm in + + +For Blazor, `ai-config` detects your project via `.csproj` or `.sln`. If no project file is found, the command prompts you to select a framework. + + + ### 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. +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/`. + + + +The Skill package for Blazor is copied automatically when `ai-config` detects a `.csproj` or `.sln` file in your project root. + + +Wire it to your IDE using the persistent setup for your client. See [Agent Skills](skills.md) for the complete setup. @@ -270,6 +298,8 @@ For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Cla Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`: +**VS Code (`.vscode/mcp.json`):** + ```json { "servers": { @@ -281,6 +311,19 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside ` } ``` +**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:** + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + For configuration details and theming workflows, see [Theming MCP](theming-mcp.md). ## Additional Resources diff --git a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx index 3e841fac06..7e6473daf5 100644 --- a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx +++ b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx @@ -20,7 +20,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc 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](./theming-mcp.md). 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. -The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. +The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists. **Example prompts to try once connected:** @@ -69,19 +69,19 @@ The `-y` flag tells `npx` to auto-confirm the package download prompt so the ser You can start with Ignite UI CLI MCP in three ways: > **Recommended - CLI first** -> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and writes `.vscode/mcp.json` for VS Code automatically. After that, you only need to review the generated MCP configuration and open the project in your AI client. +> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and prompts you to choose which AI clients to configure for MCP and which agents to set up skill files for. After that, you only need to review the generated configuration and open the project in your AI client. > **Empty folder** > Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first. > **Existing project** -> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write `.vscode/mcp.json` and copy the Agent Skills into your project automatically. For other AI clients, copy the server entries from the client-specific sections below. +> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write MCP configuration for your selected AI clients and copy the Agent Skills into your project. The command prompts you to choose which clients and agents to configure. All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting: - in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you - in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that -- in the **existing-project** path, run `ig ai-config` to write `.vscode/mcp.json` and copy the Agent Skills automatically, or add the configuration manually for other clients +- in the **existing-project** path, run `ig ai-config` to write MCP configuration for your selected clients and copy the Agent Skills automatically In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session. @@ -385,7 +385,7 @@ The following setup scenarios show when to use each starting point. ### CLI-first setup -Create the project with Ignite UI CLI first when you want the fastest guided setup and want `.vscode/mcp.json` generated for you automatically. +Create the project with Ignite UI CLI first when you want the fastest guided setup. `ig new` prompts you to select which AI clients to configure for MCP and which agents to set up skill files for. Example scenarios: @@ -428,9 +428,9 @@ Reload the workspace, reopen the editor, or restart the AI client. Some clients Verify that the configuration content matches the examples exactly, including key names and argument order. -**The project was created, but the MCP configuration is only available for VS Code** +**The project was created, but MCP is not configured for one of your AI clients** -Ignite UI CLI writes `.vscode/mcp.json` for the CLI-first path. If you are using Cursor, Claude Desktop, Claude Code, JetBrains, GitHub, or another MCP client, copy the same server entries into that client's configuration format and location. +`ig new` prompts you to select which clients to configure. If you skipped a client during project creation, run `ig ai-config` and select the missing clients when prompted. **The assistant is working in the wrong folder or cannot find the project files** diff --git a/docs/xplat/src/content/en/components/ai/skills.mdx b/docs/xplat/src/content/en/components/ai/skills.mdx index a35d6c992f..28e9916fd4 100644 --- a/docs/xplat/src/content/en/components/ai/skills.mdx +++ b/docs/xplat/src/content/en/components/ai/skills.mdx @@ -217,7 +217,7 @@ Use one of the options below to download and place the skill files into the appr ### **Option A - Use the Ignite UI CLI** -The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files — all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files - all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below. ```bash ig ai-config --assistants generic --agents claude @@ -234,6 +234,12 @@ ig ai-config --assistants generic vscode --agents claude copilot cursor | `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | | `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + + +For Blazor, `ai-config` detects your project via `.csproj` or `.sln`. The `IgniteUI.Blazor` NuGet package does not need to be installed. If no project file is found, the command prompts you to select a framework. + + + **Using Angular Schematics:** @@ -247,104 +253,116 @@ This also registers the `@angular/cli` MCP server alongside the Ignite UI server -### **Option B - Use the `GitHub CLI`** + -The GitHub CLI can be used to download skill files directly from the {ProductName} repository. Run the following commands in your project root to start the installation process: + +If you installed {ProductName} manually and want to copy skills without running `ai-config`, the skill files are also available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: + - +**macOS / Linux / Windows (PowerShell)** ```bash -gh skill install IgniteUI/igniteui-angular +cp -r node_modules/{PackageCommon}/skills/. .agents/skills/ ``` - - - +**Windows (Command Prompt)** -```bash -gh skill install IgniteUI/igniteui-webcomponents +```cmd +robocopy node_modules\{PackageCommon}\skills .agents\skills /E ``` - +Or copy individual skill directories as needed: - +**macOS / Linux / Windows (PowerShell)** + + ```bash -gh skill install IgniteUI/igniteui-react +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-choose-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-customize-component-theme .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-optimize-bundle-size .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-wc-generate-from-image-design .agents/skills/ ``` - + ```bash -gh skill install IgniteUI/igniteui-blazor +cp -r node_modules/{PackageCommon}/skills/igniteui-react-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-customize-theme .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-react-generate-from-image-design .agents/skills/ ``` -You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. - -To update skills later, run the following command: - ```bash -gh skill update IgniteUI/igniteui-angular +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skills/ +cp -r node_modules/{PackageCommon}/skills/igniteui-angular-generate-from-image-design .agents/skills/ ``` +**Windows (Command Prompt)** + -```bash -gh skill update IgniteUI/igniteui-webcomponents +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-choose-components .agents\skills\igniteui-wc-choose-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E +robocopy node_modules\{PackageCommon}\skills\igniteui-wc-generate-from-image-design .agents\skills\igniteui-wc-generate-from-image-design /E ``` -```bash -gh skill update IgniteUI/igniteui-react +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-react-components .agents\skills\igniteui-react-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E +robocopy node_modules\{PackageCommon}\skills\igniteui-react-generate-from-image-design .agents\skills\igniteui-react-generate-from-image-design /E ``` - + -```bash -gh skill update IgniteUI/igniteui-blazor +```cmd +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +robocopy node_modules\{PackageCommon}\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E ``` -If {ProductName} is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run: + -**macOS / Linux / Windows (PowerShell)** +### **Option B - Use the `GitHub CLI`** -```bash -cp -r node_modules/{PackageCommon}/skills/. .agents/skills/ -``` +The GitHub CLI can be used to download skill files directly from the {ProductName} repository. Run the following commands in your project root to start the installation process: -**Windows (Command Prompt)** + -```cmd -robocopy node_modules\{PackageCommon}\skills .agents\skills /E +```bash +gh skill install IgniteUI/igniteui-angular ``` -Or copy individual skill directories as needed: - -**macOS / Linux / Windows (PowerShell)** + ```bash -cp -r node_modules/{PackageCommon}/skills/igniteui-wc-choose-components .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-wc-customize-component-theme .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-wc-optimize-bundle-size .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-wc-integrate-with-framework .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-wc-generate-from-image-design .agents/skills/ +gh skill install IgniteUI/igniteui-webcomponents ``` @@ -352,79 +370,51 @@ cp -r node_modules/{PackageCommon}/skills/igniteui-wc-generate-from-image-design ```bash -cp -r node_modules/{PackageCommon}/skills/igniteui-react-components .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-react-customize-theme .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-react-optimize-bundle-size .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-react-generate-from-image-design .agents/skills/ +gh skill install IgniteUI/igniteui-react ``` - + ```bash -cp -r node_modules/{PackageCommon}/skills/igniteui-angular-components .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-angular-grids .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-angular-theming .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-angular-generate-from-image-design .agents/skills/ +gh skill install IgniteUI/igniteui-blazor ``` - +You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents. + +To update skills later, run the following command: + + ```bash -cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-components .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-grids .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-theming .agents/skills/ -cp -r node_modules/{PackageCommon}/skills/igniteui-blazor-generate-from-image-design .agents/skills/ +gh skill update IgniteUI/igniteui-angular ``` -**Windows (Command Prompt)** - -```cmd -robocopy node_modules\{PackageCommon}\skills\igniteui-wc-choose-components .agents\skills\igniteui-wc-choose-components /E -robocopy node_modules\{PackageCommon}\skills\igniteui-wc-customize-component-theme .agents\skills\igniteui-wc-customize-component-theme /E -robocopy node_modules\{PackageCommon}\skills\igniteui-wc-optimize-bundle-size .agents\skills\igniteui-wc-optimize-bundle-size /E -robocopy node_modules\{PackageCommon}\skills\igniteui-wc-integrate-with-framework .agents\skills\igniteui-wc-integrate-with-framework /E -robocopy node_modules\{PackageCommon}\skills\igniteui-wc-generate-from-image-design .agents\skills\igniteui-wc-generate-from-image-design /E +```bash +gh skill update IgniteUI/igniteui-webcomponents ``` -```cmd -robocopy node_modules\{PackageCommon}\skills\igniteui-react-components .agents\skills\igniteui-react-components /E -robocopy node_modules\{PackageCommon}\skills\igniteui-react-customize-theme .agents\skills\igniteui-react-customize-theme /E -robocopy node_modules\{PackageCommon}\skills\igniteui-react-optimize-bundle-size .agents\skills\igniteui-react-optimize-bundle-size /E -robocopy node_modules\{PackageCommon}\skills\igniteui-react-generate-from-image-design .agents\skills\igniteui-react-generate-from-image-design /E -``` - - - - - -```cmd -robocopy node_modules\{PackageCommon}\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E -robocopy node_modules\{PackageCommon}\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E -robocopy node_modules\{PackageCommon}\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E -robocopy node_modules\{PackageCommon}\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E +```bash +gh skill update IgniteUI/igniteui-react ``` -```cmd -robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-components .agents\skills\igniteui-blazor-components /E -robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-grids .agents\skills\igniteui-blazor-grids /E -robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-theming .agents\skills\igniteui-blazor-theming /E -robocopy node_modules\{PackageCommon}\skills\igniteui-blazor-generate-from-image-design .agents\skills\igniteui-blazor-generate-from-image-design /E +```bash +gh skill update IgniteUI/igniteui-blazor ``` @@ -536,10 +526,22 @@ Once installed, the skill files are available in the respective location and wil The `skills` CLI is an interactive tool that downloads and installs skills directly into your project. Run the following command in your project root: + + ```bash npx skills add IgniteUI/{PackageCommon} ``` + + + + +```bash +npx skills add IgniteUI/igniteui-blazor +``` + + + The CLI will guide you through a series of prompts to: 1. Select which skills to install (components, theming, etc.). @@ -548,7 +550,13 @@ The CLI will guide you through a series of prompts to: Once complete, the skills are ready to use - no manual file copying required. + > **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/{PackageCommon}]({GithubLink}) repository. + + + +> **Note:** Requires Node.js and an internet connection. The command fetches the latest skill files from the [IgniteUI/igniteui-blazor]({GithubLink}) repository. + --- diff --git a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx index bd62d687ea..c13af7b102 100644 --- a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx +++ b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx @@ -18,7 +18,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on {Platform}, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on {Platform}, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool identifies the project framework and selects the correct import paths and selectors automatically. For Blazor projects, which have no `package.json`, it returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. @@ -43,18 +43,40 @@ For a concrete combined workflow after setup, see [Build an App End-to-End with Before configuring the MCP server, make sure you have: - **Node.js** (v18 or later) installed — this provides the `npx` command used to launch the server. + + - A project with an **Ignite UI package** listed as a dependency in `package.json`. + + + +- A project with the **`IgniteUI.Blazor`** NuGet package installed. + + - An **AI client with MCP support** — for example, VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, or a JetBrains IDE with the AI Assistant plugin. + If you do not have Ignite UI Theming installed yet, run: ```bash npm install igniteui-theming ``` + + + + +The Theming MCP server is an npm package launched directly via `npx` - no local npm install is required in your Blazor project. `npx -y` fetches it from the npm registry on first use and caches it automatically. + + ## Setup -The MCP server is bundled with the `igniteui-theming` package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. + +The MCP server is bundled with the `igniteui-theming` npm package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. + + + +The MCP server is launched via `npx` directly from the npm registry. It is not bundled with the `IgniteUI.Blazor` NuGet package - `npx -y` fetches and caches it automatically on first use. + The canonical launch command is: @@ -252,7 +274,7 @@ Here is a brief overview of each tool: | Tool | Description | |------|-------------| -| `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | +| `detect_platform` | Identifies the project framework and selects the correct import paths and selectors. For Angular, React, and Web Components projects, reads `package.json`. For Blazor projects, which do not have a `package.json`, returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ | | `create_palette` | Generates a color palette with automatic shade variants (50–900, A100–A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | | `create_custom_palette` | Fine-grained palette creation — specify exact hex values for every shade when automatic generation is not suitable. | | `create_typography` | Sets up a font family and type scale for a given design system. | @@ -330,6 +352,14 @@ $my-palette: palette( ``` + +The Theming MCP generates **CSS custom properties** for Blazor projects. Tell the AI explicitly to use the Blazor platform and request CSS output: + +> _"Create a complete Material Design light theme for my Blazor app with primary #2563eb and secondary #f97316. Use the Blazor platform and generate CSS output."_ + +Apply the generated CSS in your `wwwroot/css/app.css`. + + ### Dark Mode Variant > _"I need a dark mode version of my existing theme. Keep the same primary blue but use a dark surface #121212."_ @@ -356,7 +386,17 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `{PackageCommon}`) as a dependency. You can also tell the AI explicitly: _"Use the {Platform} platform."_ + +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `{PackageCommon}`) as a dependency. + + + +Blazor projects do not have a `package.json`, so `detect_platform` will always return `generic`. Tell the AI explicitly: _"Use the Blazor platform."_ + + + +You can also tell the AI explicitly: _"Use the {Platform} platform."_ + **Luminance warning on colors** From f1cf50118029c000f85b39946e6d6f61e26d3084 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 19 May 2026 11:05:03 +0300 Subject: [PATCH 40/52] docs(general/cli): document AI tooling configuration prompts in CLI project creation Port igniteui-xplat-docs PR #2011 (mstoyanova/updating-ai-config-section). general-cli-overview: - Add `--assistants` and `--agents` rows to the `ig new` arguments table. - New "AI Configuration During Project Creation" section (React/WebComponents PlatformBlock) showing the interactive assistant/agent selection prompts that `ig new` displays after scaffolding, plus how to skip them (`--assistants none --agents none`) or pre-answer them non-interactively. - "Quick Setup with ig ai-config" rewritten: new intro, a version-pin DocsAside warning, and Interactive Mode / Non-Interactive Mode / Start the Servers subsections (with the per-client prompt listings and the --assistants/--agents flag table). - Commands table: `ig ai-config` row linked to the CLI wiki and reworded. - Code-block syntax aligned with the source: npm install -> bash; npm run dev / npx -y igniteui-cli mcp / ig mcp -> cmd. general-step-by-step-guide-using-cli: - New "Configure AI Tooling" step between "Select a theme" and "Complete or continue", showing the two wizard prompts and the non-interactive `--assistants`/`--agents` escape hatch, cross-linked to the CLI Overview anchor. HTML platform comments converted to ; admonition to . EN only - no JP sync for PR #2011 exists in xplat yet. Ported from igniteui-xplat-docs commits 8e09d7ce, f181da5a, 9e9bab0d, 286eb84f, 79be0eca, bdcac9a7, 44fd8b8c, and ae855170 (PR #2011). Co-authored-by: Marina Stoyanova Co-authored-by: Konstantin Dinev --- .../en/components/general-cli-overview.mdx | 117 ++++++++++++++++-- .../general-step-by-step-guide-using-cli.mdx | 38 ++++++ 2 files changed, 148 insertions(+), 7 deletions(-) diff --git a/docs/xplat/src/content/en/components/general-cli-overview.mdx b/docs/xplat/src/content/en/components/general-cli-overview.mdx index 1cc01db8c9..bafd0b86db 100644 --- a/docs/xplat/src/content/en/components/general-cli-overview.mdx +++ b/docs/xplat/src/content/en/components/general-cli-overview.mdx @@ -24,7 +24,7 @@ The Ignite UI CLI does not replace Vite or other React tooling - projects create Install the Ignite UI CLI globally using npm: -```cmd +```bash npm install -g igniteui-cli ``` @@ -108,6 +108,52 @@ The following arguments are available when creating a project: | `--template` | | The project template to use. See the template tables above for available options per framework. | | `--skip-git` | `--sg` | Skips automatic Git repository initialization. Uses the global `skip-git` config value if omitted. | | `--skip-install` | `--si` | Skips npm package installation on project creation. | +| `--assistants` | | Configures MCP servers for the specified AI coding assistants. Values: `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none`. | +| `--agents` | | Copies Agent Skill files into the specified agents' skill directories. Values: `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none`. | + + + +### AI Configuration During Project Creation + +When `--agents` and `--assistants` flags are not provided, `ig new` prompts you to configure AI tooling as part of the project creation flow. After scaffolding the project, the wizard displays the following prompts: + +```bash +? Which AI coding assistants do you want to configure MCP servers for? (Press to select) +❯◉ VS Code (GitHub Copilot) + ◉ Cursor + ◯ Generic (.mcp.json) + ◯ Gemini CLI + ◯ JetBrains (AI Assistant) + ◯ None +``` + +```bash +? Which AI agents should receive skill files? (Press to select) +❯◉ GitHub Copilot (.agents/skills/) + ◉ Claude (.claude/skills/) + ◉ Cursor (.cursor/rules/) + ◯ Codex (.codex/) + ◯ Windsurf (.windsurfrules) + ◯ Gemini CLI (.gemini/) + ◯ JetBrains Junie (.junie/guidelines/) + ◯ None +``` + +Navigate through the options using the arrow keys, toggle selections with SPACE, and confirm with ENTER. + +To skip the AI configuration prompts entirely during project creation, pass `--assistants none --agents none`: + +```cmd +ig new my-app --framework=react --type=igr-ts --template=top-nav --assistants none --agents none +``` + +To auto-configure AI tools without prompting, specify the desired values: + +```cmd +ig new my-app --framework=react --type=igr-ts --template=top-nav --assistants vscode --agents copilot claude +``` + + ## Add a Component Template @@ -203,7 +249,7 @@ ig start The React application generated by Ignite UI CLI uses [Vite](https://vitejs.dev/) as the build tool and supports fast development builds and hot module replacement (HMR). To start the Vite development server directly without the CLI wrapper: -```bash +```cmd npm run dev ``` @@ -218,13 +264,13 @@ The Ignite UI CLI includes a built-in **MCP (Model Context Protocol) server** th The CLI MCP server starts via `npx` without requiring a global install: -```bash +```cmd npx -y igniteui-cli mcp ``` Or, if you have Ignite UI CLI installed globally: -```bash +```cmd ig mcp ``` @@ -232,7 +278,7 @@ ig mcp ### Quick Setup with `ig ai-config` -To configure {ProductName} Agent Skills and both MCP servers in a single step, run the following from your project root after installing {ProductName} packages: +The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files - all in a single step. Run it from your project root: ```cmd npx igniteui-cli ai-config @@ -244,7 +290,64 @@ If you have the CLI installed globally: ig ai-config ``` -This copies {ProductName} Agent Skills into `.claude/skills/` and writes the full Ignite UI MCP server configuration, including the CLI and Theming servers, to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op. For AI clients other than VS Code, use the manual configuration below. + +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. + + +#### Interactive Mode + +If no parameters are provided, the command enters interactive mode. You are first prompted to select which AI coding assistants should receive MCP server configuration: + +```bash +? Which AI coding assistants do you want to configure MCP servers for? (Press to select) +❯◉ VS Code (GitHub Copilot) - writes .vscode/mcp.json + ◉ Cursor - writes .cursor/mcp.json + ◯ Generic (.mcp.json) - writes .mcp.json + ◯ Gemini CLI - writes .gemini/settings.json + ◯ JetBrains (AI Assistant) - writes .junie/mcp.json + ◯ None +``` + +Next, you are prompted to select which AI agents should receive skill files: + +```bash +? Which AI agents should receive skill files? (Press to select) +❯◉ GitHub Copilot (.agents/skills/) - copies skills to .agents/skills/ + ◉ Claude (.claude/skills/) - copies skills to .claude/skills/ + ◉ Cursor (.cursor/rules/) - copies skills to .cursor/rules/ + ◯ Codex (.codex/) - copies skills to .codex/ + ◯ Windsurf (.windsurfrules) - copies skills to .windsurfrules/ + ◯ Gemini CLI (.gemini/) - copies skills to .gemini/ + ◯ JetBrains Junie (.junie/) - copies skills to .junie/guidelines/ + ◯ None +``` + +Navigate through the options using the arrow keys, toggle selections with SPACE, and confirm with ENTER. + +#### Non-Interactive Mode + +Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files: + +```cmd +ig ai-config --assistants vscode --agents copilot +``` + +Target multiple assistants and agents in a single run: + +```cmd +ig ai-config --assistants generic vscode --agents claude copilot cursor +``` + +| Flag | Values | Default | +|:-----|:-------|:--------| +| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively | +| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively | + +#### Start the Servers + +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. + +**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**. For full setup instructions across all AI clients and Agent Skills wiring, see [Agent Skills](./ai/skills.md) and [Ignite UI CLI MCP](./ai/cli-mcp.md). @@ -306,5 +409,5 @@ A full list of available Ignite UI CLI commands is maintained on the [Ignite UI | [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | | ig upgrade-packages | | Upgrades Ignite UI packages in the project from Trial to Licensed. | | ig mcp | | Starts the built-in MCP server for connecting AI coding assistants to {ProductName} component documentation. | -| ig ai-config | | Copies {ProductName} Agent Skills into `.claude/skills/` and writes Ignite UI MCP server configuration to `.vscode/mcp.json`. Run once per project. | +| [ig ai-config](https://github.com/IgniteUI/igniteui-cli/wiki/ai-config) | | Configures MCP servers and copies Agent Skills into each agent's skills directory. Supports `--assistants` and `--agents` flags or interactive mode. | | ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | diff --git a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx index 76f6adaf47..0625f3d77c 100644 --- a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx +++ b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx @@ -85,6 +85,44 @@ Choose a theme for your application: - The **default** option includes a pre-compiled CSS file with the default {ProductName} theme. - The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.md). +### Configure AI Tooling + +After theming, the wizard prompts you to configure AI coding assistants. First, select which assistants should receive MCP server configuration: + +```bash +? Which AI coding assistants do you want to configure MCP servers for? (Press to select) +❯◉ VS Code (GitHub Copilot) + ◉ Cursor + ◯ Generic (.mcp.json) + ◯ Gemini CLI + ◯ JetBrains (AI Assistant) + ◯ None +``` + +Next, select which AI agents should receive skill files: + +```bash +? Which AI agents should receive skill files? (Press to select) +❯◉ GitHub Copilot (.agents/skills/) + ◉ Claude (.claude/skills/) + ◉ Cursor (.cursor/rules/) + ◯ Codex (.codex/) + ◯ Windsurf (.windsurfrules) + ◯ Gemini CLI (.gemini/) + ◯ JetBrains Junie (.junie/guidelines/) + ◯ None +``` + +Navigate through the options using the arrow keys, toggle selections with SPACE, and confirm with ENTER. Selecting **None** for both skips AI configuration entirely. + +To bypass these prompts in non-interactive mode, pass `--assistants` and `--agents` flags directly to `ig new`: + +```cmd +ig new my-app --framework=react --type=igr-ts --template=top-nav --assistants vscode --agents copilot claude +``` + +For more details on the available flag values, see [Ignite UI CLI Overview](general-cli-overview.md#ai-configuration-during-project-creation). + ### Complete or continue After completing the above steps, the project structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application. From 2f7457b2b8dbdcb8a6306ebeb423e8234c977f3f Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Tue, 19 May 2026 14:10:24 +0300 Subject: [PATCH 41/52] docs(layouts/splitter): drop bogus SplitterResizeEventArgs from EN API References The EN splitter API References ApiRef listed SplitterResizeEventArgs alongside Splitter, but: - the igniteui-xplat-docs source splitter.md API References lists only `Splitter`, - the JP splitter.mdx already lists only `Splitter`, - the real type is named SplitterResizeEventArgsDetail (per xplat's apiMap), and being passed with the default kind="class" it would have generated an incorrect /classes/IgcSplitterResizeEventArgs URL. Align EN with the source and the JP file - API References now lists just Splitter. --- docs/xplat/src/content/en/components/layouts/splitter.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/xplat/src/content/en/components/layouts/splitter.mdx b/docs/xplat/src/content/en/components/layouts/splitter.mdx index ee1012e349..6997763cdf 100644 --- a/docs/xplat/src/content/en/components/layouts/splitter.mdx +++ b/docs/xplat/src/content/en/components/layouts/splitter.mdx @@ -305,7 +305,7 @@ igc-splitter { ## API References - + - [`Styling & Themes`](../themes/overview.md) From 082241fad5eb9f750d5415664ed98fae0f5eab9c Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 20 May 2026 00:40:51 +0300 Subject: [PATCH 42/52] docs(charts): document RangeBarSeries, MarkerSize, and Checkmark marker type Port three GitHub Copilot coding-agent PRs that landed together: - PR #1999 (cb9ed33a) - RangeBarSeries - PR #2003 (06fe0add) - MarkerSize property - PR #2001 (b5270cd5) - Checkmark marker type RangeBarSeries (en): - chart-api.mdx: add RangeBarSeries to the Category Series table. - chart-axis-types.mdx: add RangeBarSeries to CategoryYAxis and NumericXAxis compatibility lists; mention it in the NumericXAxis paragraph alongside BarSeries/StackedBarSeries. - chart-performance.mdx: add Range Bar Chart entry to the Column Charts performance row. - types/bar-chart.mdx: add RangeBarSeries to frontmatter mentionedTypes, insert a new "Range Bar Chart" section with the standard Range prose + Sample at /charts/data-chart/range-bar-chart, and add RangeBarSeries to the API References ApiLink list. MarkerSize (en + jp chart-markers): - New "Chart Marker Size" section with Blazor/React/WebComponents code samples showing MarkerSize=30 on a ScatterLineSeries, a NaN-reset example, the scatter-marker-options Sample, and a DocsAside note that BubbleSeries radius is not affected by MarkerSize. - Expanded mentionedTypes/keywords to include MarkerSize and the new series base classes. Checkmark marker type (en + jp chart-markers, en + jp changelogs): - New "Chart Checkmark Marker Type" section explaining the new MarkerType.Checkmark enum value, MarkerAutomaticBehavior.Checkmark, and the SeriesViewer.CheckmarkMarkerTemplate customization hook. - Changelogs: new Enhancements/Charts entries under {PackageVerLatest} for all four platforms (en blazor / en react / en wc / en angular / the four JP variants). EN changelogs additionally got the matching RangeBarSeries enhancement entry. JP changelogs only got the Checkmark entry - no JP sync for RangeBarSeries this round. Conversions: HTML
->
in chart-api row; sample-backtick syntax -> ; > [!NOTE] -> (chart-markers); plain backticks kept for series/property references in the new sections (matches existing docs-template style). Ported from igniteui-xplat-docs PRs #1999, #2001, #2003. Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> --- .../en/components/charts/chart-api.mdx | 2 +- .../charts/features/chart-axis-types.mdx | 4 +- .../charts/features/chart-markers.mdx | 82 ++++++++++++++++++- .../charts/features/chart-performance.mdx | 2 +- .../en/components/charts/types/bar-chart.mdx | 18 +++- .../general-changelog-dv-blazor.mdx | 12 +++ .../components/general-changelog-dv-react.mdx | 12 +++ .../en/components/general-changelog-dv-wc.mdx | 12 +++ .../en/components/general-changelog-dv.mdx | 12 +++ .../charts/features/chart-markers.mdx | 82 ++++++++++++++++++- .../general-changelog-dv-blazor.mdx | 6 ++ .../components/general-changelog-dv-react.mdx | 6 ++ .../jp/components/general-changelog-dv-wc.mdx | 6 ++ .../jp/components/general-changelog-dv.mdx | 6 ++ 14 files changed, 254 insertions(+), 8 deletions(-) diff --git a/docs/xplat/src/content/en/components/charts/chart-api.mdx b/docs/xplat/src/content/en/components/charts/chart-api.mdx index f68beee510..f941eb3b85 100644 --- a/docs/xplat/src/content/en/components/charts/chart-api.mdx +++ b/docs/xplat/src/content/en/components/charts/chart-api.mdx @@ -39,7 +39,7 @@ The {Platform} `DataChart` can use the following type of series that inherit fro | Category Series | Stacked Series | |------------------|----------------| -| - `AreaSeries`
- `BarSeries`
- `ColumnSeries`
- `LineSeries`
- `PointSeries`
- `SplineSeries`
- `SplineAreaSeries`
- `StepLineSeries`
- `StepAreaSeries`
- `RangeAreaSeries`
- `RangeColumnSeries`
- `WaterfallSeries`
| - `StackedAreaSeries`
- `StackedBarSeries`
- `StackedColumnSeries`
- `StackedLineSeries`
- `StackedSplineSeries`
- `Stacked100AreaSeries`
- `Stacked100BarSeries`
- `Stacked100ColumnSeries`
- `Stacked100LineSeries`
- `Stacked100SplineSeries`


| +| - `AreaSeries`
- `BarSeries`
- `ColumnSeries`
- `LineSeries`
- `PointSeries`
- `SplineSeries`
- `SplineAreaSeries`
- `StepLineSeries`
- `StepAreaSeries`
- `RangeAreaSeries`
- `RangeColumnSeries`
- `RangeBarSeries`
- `WaterfallSeries`
| - `StackedAreaSeries`
- `StackedBarSeries`
- `StackedColumnSeries`
- `StackedLineSeries`
- `StackedSplineSeries`
- `Stacked100AreaSeries`
- `Stacked100BarSeries`
- `Stacked100ColumnSeries`
- `Stacked100LineSeries`
- `Stacked100SplineSeries`


| | Scatter Series | Financial Series | diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx index 6feed3edc7..b7ff5451ea 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx @@ -38,6 +38,7 @@ The `CategoryXAxis` requires you to provide a `DataSource` and a `Label` in orde The `CategoryYAxis` works very similarly to the `CategoryXAxis` described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a `Label` in order to plot data with it. The `CategoryYAxis` is generally used with the `NumericXAxis` to plot the following type of series: - `BarSeries` +- `RangeBarSeries` - `StackedBarSeries` - `Stacked100BarSeries` @@ -48,11 +49,12 @@ The `CategoryYAxis` works very similarly to the `CategoryXAxis` described above, ### Numeric X-Axis -The `NumericXAxis` treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the `NumericXAxis` labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a `NumericYAxis`. Alternatively, if combined with the `CategoryXAxis`, these labels will be placed corresponding to the `ValueMemberPath` of the `BarSeries`, `StackedBarSeries`, and `Stacked100BarSeries`. +The `NumericXAxis` treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the `NumericXAxis` labels depends on the `XMemberPath` property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a `NumericYAxis`. Alternatively, if combined with the `CategoryXAxis`, these labels will be placed corresponding to the `ValueMemberPath` of the `BarSeries`, `RangeBarSeries`, `StackedBarSeries`, and `Stacked100BarSeries`. The `NumericXAxis` is compatible with the following type of series: - `BarSeries` +- `RangeBarSeries` - `BubbleSeries` - `HighDensityScatterSeries` - `ScatterSeries` diff --git a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx index afda289778..0701af4087 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx @@ -1,13 +1,14 @@ --- title: {Platform} Chart Markers | Data Visualization | Infragistics _description: Infragistics' {Platform} Chart Markers -_keywords: {Platform} Charts, Markers, Infragistics +_keywords: {Platform} Charts, Markers, Marker Size, Infragistics _license: commercial - +mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"] namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; # {Platform} Chart Markers @@ -23,6 +24,83 @@ The colors of the markers are also managed by setting the +
+ +## {Platform} Chart Marker Size + +You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used. + +By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing. + +The `MarkerSize` property is available on all series types that derive from `MarkerSeries`, including `LineSeries`, `SplineSeries`, `AreaSeries`, `ColumnSeries`, `ScatterSeries`, `ScatterLineSeries`, `ScatterSplineSeries`, and polar/radial series types. + +The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control: + +```razor + + + +``` + +```tsx + + + +``` + +```html + + + + +``` + +To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup): + +```razor + +``` + +```tsx + +``` + +The following sample demonstrates `MarkerSize` on scatter series with an interactive editor: + + + + +For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration. + + +
+ +## {Platform} Chart Checkmark Marker Type + +The {ProductName} charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart. + +You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`. + +The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart. +
## {Platform} Chart Marker Templates diff --git a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx index 8d20611ca4..9b81ec0564 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx @@ -171,7 +171,7 @@ The following table lists chart types in order from the fastest performance to s | Pie Charts | - [Pie Chart](../types/pie-chart.md)
- [Donut Chart](../types/donut-chart.md)
- [Radial Pie Chart](../types/radial-chart.md#{PlatformLower}-radial-pie-chart) | | Line Charts | - [Category Line Chart](../types/line-chart.md#{PlatformLower}-line-chart-example)
- [Category Spline Chart](../types/spline-chart.md#{PlatformLower}-spline-chart-example)
- [Step Line Chart](../types/step-chart.md#{PlatformLower}-step-line-chart)
- [Radial Line Chart](../types/radial-chart.md#{PlatformLower}-radial-line-chart)
- [Polar Line Chart](../types/polar-chart.md#{PlatformLower}-polar-line-chart)
- [Scatter Line Chart](../types/scatter-chart.md#{PlatformLower}-scatter-line-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#{PlatformLower}-scatter-polyline-chart) (\*)
- [Scatter Contour Chart](../types/scatter-chart.md#{PlatformLower}-scatter-contour-chart)
- [Stacked Line Chart](../types/stacked-chart.md#{PlatformLower}-stacked-line-chart)
- [Stacked 100% Line Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-line-chart)
| | Area Charts | - [Category Area Chart](../types/area-chart.md#{PlatformLower}-area-chart-example)
- [Step Area Chart](../types/step-chart.md#{PlatformLower}-step-area-chart)
- [Range Area Chart](../types/area-chart.md#{PlatformLower}-range-area-chart)
- [Radial Area Chart](../types/radial-chart.md#{PlatformLower}-radial-area-chart)
- [Polar Area Chart](../types/polar-chart.md#{PlatformLower}-polar-area-chart)
- [Scatter Polygon Chart](../types/shape-chart.md#{PlatformLower}-scatter-polygon-chart) (\*)
- [Scatter Area Chart](../types/scatter-chart.md#{PlatformLower}-scatter-area-chart)
- [Stacked Area Chart](../types/stacked-chart.md#{PlatformLower}-stacked-area-chart)
- [Stacked 100% Area Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-area-chart)
| -| Column Charts | - [Column Chart](../types/column-chart.md#{PlatformLower}-column-chart-example)
- [Bar Chart](../types/bar-chart.md#{PlatformLower}-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#{PlatformLower}-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#{PlatformLower}-range-column-chart)
- [Radial Column Chart](../types/radial-chart.md#{PlatformLower}-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-bar-chart) | +| Column Charts | - [Column Chart](../types/column-chart.md#{PlatformLower}-column-chart-example)
- [Bar Chart](../types/bar-chart.md#{PlatformLower}-bar-chart-example)
- [Waterfall Chart](../types/column-chart.md#{PlatformLower}-waterfall-chart)
- [Range Column Chart](../types/column-chart.md#{PlatformLower}-range-column-chart)
- [Range Bar Chart](../types/bar-chart.md#{PlatformLower}-range-bar-chart)
- [Radial Column Chart](../types/radial-chart.md#{PlatformLower}-radial-column-chart)
- [Stacked Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-column-chart)
- [Stacked Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-bar-chart)
- [Stacked 100% Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-column-chart)
- [Stacked 100% Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-bar-chart) | | Spline Charts | - [Category Spline Chart](../types/spline-chart.md#{PlatformLower}-spline-chart-example)
- [Polar Spline Chart](../types/polar-chart.md#{PlatformLower}-polar-spline-chart)
- [Scatter Spline Chart](../types/scatter-chart.md#{PlatformLower}-scatter-spline-chart)
- [Stacked Spline Chart](../types/stacked-chart.md#{PlatformLower}-stacked-spline-chart)
- [Stacked 100% Spline Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-spline-chart)
| | Point Charts | - [Category Point Chart](../types/point-chart.md)
- [Scatter HD Chart](../types/scatter-chart.md#{PlatformLower}-scatter-high-density-chart)
- [Scatter Marker Chart](../types/scatter-chart.md#{PlatformLower}-scatter-marker-chart)
- [Scatter Bubble Chart](../types/bubble-chart.md)
- [Polar Marker Chart](../types/polar-chart.md#{PlatformLower}-polar-marker-chart)
| | Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md)
- [Stock Chart in Column Mode](../types/stock-chart.md)
- [Stock Chart in Bar Mode](../types/stock-chart.md)
- [Stock Chart in Candle Mode](../types/stock-chart.md)
- [Stock Chart with Overlays](../types/stock-chart.md)
- [Stock Chart with Zoom Pane](../types/stock-chart.md)
- [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane)
- [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane)
| diff --git a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx index 22173b8cc9..aa2c20945f 100644 --- a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx +++ b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx @@ -3,7 +3,7 @@ title: "{Platform} Bar Chart and Graph | {ProductName}" description: "{Platform} Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories. Try for FREE." keywords: "{Platform} Charts, Bar Chart, Bar Graph, Horizontal Chart, Infragistics" license: commercial -mentionedTypes: ["DataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "Series"] +mentionedTypes: ["DataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "RangeBarSeries", "Series"] namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -130,6 +130,21 @@ You can create this type of chart in the
+ +## {Platform} Range Bar Chart + +The {Platform} Range Bar Chart belongs to a group of range charts and is rendered using horizontal rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the left like the traditional [Category Bar Chart](bar-chart.md#{PlatformLower}-bar-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. + +Range values are represented on the X-Axis and categories are displayed on the Y-Axis. Because each bar visualizes both a low value and a high value, this chart is useful for scenarios such as showing daily temperature ranges, minimum and maximum prices, or any bounded measurements where a single value is not sufficient. + +The Range Bar Chart is identical to the [Range Column Chart](column-chart.md#{PlatformLower}-range-column-chart) in all aspects except that the ranges are represented as a set of horizontal bars rather than vertical columns. + +You can create this type of chart in the control by binding your data to a . The series reads low and high values from `LowMemberPath` and `HighMemberPath`, and it typically uses a `NumericXAxis` with a `CategoryYAxis`, as shown in the example below: + + + +
@@ -151,3 +166,4 @@ You can find more information about related chart types in these topics:


+
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx index 24d9c5269b..59ca0db80b 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx @@ -28,12 +28,24 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerLatest}** +### Enhancements + +#### {PackageCharts} + +- Added `Checkmark` option to the `MarkerType` enum. Use `MarkerType.Checkmark` on a series to display a V-shaped checkmark icon inside a circle. The new `MarkerAutomaticBehavior.Checkmark` enum value allows applying the checkmark shape to all series in the chart, and the `SeriesViewer.CheckmarkMarkerTemplate` property can be used to customize its template. + ### Bug Fixes | Bug Number | Control | Description | |------------|---------|-------------| | 3229 | Grids | Latest version of Blazor Grids shows Trial watermark for Licensed version | | 2754 | IgbTabs | Changing the check state for IgbSwitch inside the tab causes the tab content to disappear | +### Enhancements + +### {PackageCharts} + +- Added `RangeBarSeries` support for horizontal range rendering in `IgbDataChart`. + ## **{PackageVerChanges-25-2-MAR}** ### {PackageGrids} (Grids) diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx index f4791720c7..f28240ddd2 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx @@ -23,6 +23,12 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerLatest}** +### {PackageCharts} + +#### New Features + +- Added `Checkmark` option to the `MarkerType` enum. Use `MarkerType.Checkmark` on a series to display a V-shaped checkmark icon inside a circle. The new `MarkerAutomaticBehavior.Checkmark` enum value allows applying the checkmark shape to all series in the chart, and the `SeriesViewer.CheckmarkMarkerTemplate` property can be used to customize its template. + ### {PackageCommon} #### Changed @@ -52,6 +58,12 @@ All notable changes for each version of {ProductName} are documented on this pag | 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | | 41594 | IgrDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | +### Enhancements + +### {PackageCharts} + +- Added `RangeBarSeries` support for horizontal range rendering in `IgrDataChart`. + ## **{PackageVerChanges-26-2-FEB}** ### {PackageCommon} diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx index 2b0e637eea..67bb98b0da 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx @@ -24,6 +24,12 @@ All notable changes for each version of {ProductName} are documented on this pag ## **{PackageVerLatest}** +### Enhancements + +#### {PackageCharts} + +- Added `Checkmark` option to the `MarkerType` enum. Use `MarkerType.Checkmark` on a series to display a V-shaped checkmark icon inside a circle. The new `MarkerAutomaticBehavior.Checkmark` enum value allows applying the checkmark shape to all series in the chart, and the `SeriesViewer.CheckmarkMarkerTemplate` property can be used to customize its template. + ### {PackageCharts} #### Bug Fixes @@ -95,6 +101,12 @@ All notable changes for each version of {ProductName} are documented on this pag **Popover API** Dropdown menus and dialogs are now using HTML Popover API to provide better positioning and accessibility. +### Enhancements + +### {PackageCharts} + +- Added `RangeBarSeries` support for horizontal range rendering in `IgcDataChart`. + ## **{PackageVerChanges-25-2-DEC}** ### Enhancements diff --git a/docs/xplat/src/content/en/components/general-changelog-dv.mdx b/docs/xplat/src/content/en/components/general-changelog-dv.mdx index af94934c2c..23a3f8efbe 100644 --- a/docs/xplat/src/content/en/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/en/components/general-changelog-dv.mdx @@ -28,6 +28,12 @@ For changes specific to igniteui-angular components, please see CHANGELOG.MD. ## **{PackageVerLatest}** +### Enhancements + +#### {PackageCharts} + +- Added `Checkmark` option to the `MarkerType` enum. Use `MarkerType.Checkmark` on a series to display a V-shaped checkmark icon inside a circle. The new `MarkerAutomaticBehavior.Checkmark` enum value allows applying the checkmark shape to all series in the chart, and the `SeriesViewer.CheckmarkMarkerTemplate` property can be used to customize its template. + ### Bug Fixes | Bug Number | Control | Description | @@ -40,6 +46,12 @@ For changes specific to igniteui-angular components, please see CHANGELOG.MD. | 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. | | 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. | +### Enhancements + +### {PackageCharts} + +- Added `RangeBarSeries` support for horizontal range rendering in `IgxDataChart`. + ## **{PackageVerChanges-26-1-JAN}** ### Enhancements diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx index 3f1af2b196..3c4449db93 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx @@ -1,9 +1,9 @@ --- title: "{Platform} チャート マーカー | データ可視化 | インフラジスティックス" description: インフラジスティックスの {Platform} チャート マーカー -keywords: "{Platform} Charts, Markers, Infragistics, {Platform} チャート, マーカー, インフラジスティックス" +keywords: "{Platform} Charts, Markers, Marker Size, Infragistics, {Platform} チャート, マーカー, マーカー サイズ, インフラジスティックス" license: commercial -mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType"] +mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"] namespace: Infragistics.Controls.Charts _language: ja _description: Infragistics' {Platform} Chart Markers @@ -13,6 +13,7 @@ _license: commercial --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; @@ -29,6 +30,83 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +
+ +## {Platform} チャート マーカー サイズ + +`MarkerSize` プロパティをマーカーをサポートするシリーズに設定することで、データ ポイント マーカーのデバイス非依存ピクセル寸法を正確に制御できます。これにより、マーカー テンプレートやスタイルに関係なく、マーカーが画面上に表示される大きさを正確に制御できます。 + +デフォルトでは、マーカーのサイズはシリーズのマーカー テンプレートによって決まります。`MarkerSize` に特定の数値を設定すると、そのシリーズのすべてのマーカーがその正確なデバイス非依存ピクセルの幅と高さでレンダリングされます。`MarkerSize` を `NaN` に戻すと、デフォルトのテンプレート駆動のサイズ設定が復元されます。 + +`MarkerSize` プロパティは、`MarkerSeries` から派生するすべてのシリーズ タイプ (`LineSeries`、`SplineSeries`、`AreaSeries`、`ColumnSeries`、`ScatterSeries`、`ScatterLineSeries`、`ScatterSplineSeries`、極座標/放射状シリーズ タイプなど) で使用できます。 + +次のコード例は、`XamDataChart` コントロールの `ScatterLineSeries` で `MarkerSize` を 30 デバイス非依存ピクセルに設定する方法を示しています。 + +```razor + + + +``` + +```tsx + + + +``` + +```html + + + + +``` + +マーカーをデフォルトのテンプレート駆動サイズにリセットするには、`MarkerSize` を `NaN` に設定します (またはマークアップで属性を削除します)。 + +```razor + +``` + +```tsx + +``` + +次のサンプルは、インタラクティブなエディターを使用して散布図シリーズで `MarkerSize` を示しています。 + + + + +`BubbleSeries` の場合、`MarkerSize` プロパティはバブルの半径をオーバーライドしません。バブルの半径は、半径データ列と `RadiusScale` によって制御されます。バブルのサイズは、データとスケールの構成によって完全に決まります。 + + +
+ +## {Platform} チャート チェックマーク マーカー タイプ + +{ProductName} チャートは、`MarkerType` 列挙型に `Checkmark` オプションを含んでいます。このマーカーは、チャートのデータ ポイントに円の中に V 字型のチェックマーク アイコンを描画します。 + +`Checkmark` マーカー タイプを個々のシリーズに適用するには、シリーズの `MarkerType` プロパティを `MarkerType.Checkmark` に設定します。チャート内のすべてのシリーズに同時にチェックマーク形状を使用するには、チャートの `MarkerAutomaticBehavior` プロパティを `MarkerAutomaticBehavior.Checkmark` に設定します。 + +`SeriesViewer.CheckmarkMarkerTemplate` プロパティは、チェックマーク マーカー タイプを持つシリーズに使用されるマーカー テンプレートを定義し、チャート全体の外観をカスタマイズするために使用できます。 +
## {Platform} チャート マーカー テンプレート diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx index e86a0c3c84..75209a426d 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx @@ -30,6 +30,12 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; ## **{PackageVerLatest}** +### 機能拡張 + +#### {PackageCharts} + +- `MarkerType` 列挙型に `Checkmark` オプションが追加されました。シリーズで `MarkerType.Checkmark` を使用すると、円の中に V 字型のチェックマーク アイコンを表示できます。新しい `MarkerAutomaticBehavior.Checkmark` 列挙値でチャート内のすべてのシリーズにチェックマーク形状を適用でき、`SeriesViewer.CheckmarkMarkerTemplate` プロパティでテンプレートをカスタマイズできます。 + ### バグ修正 | バグ番号 | コントロール | 説明 | diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx index dd82c697c1..aa2b227595 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx @@ -25,6 +25,12 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; ## **{PackageVerLatest}** +### {PackageCharts} + +#### 新機能 + +- `MarkerType` 列挙型に `Checkmark` オプションが追加されました。シリーズで `MarkerType.Checkmark` を使用すると、円の中に V 字型のチェックマーク アイコンを表示できます。新しい `MarkerAutomaticBehavior.Checkmark` 列挙値でチャート内のすべてのシリーズにチェックマーク形状を適用でき、`SeriesViewer.CheckmarkMarkerTemplate` プロパティでテンプレートをカスタマイズできます。 + ### バグ修正 | バグ番号 | コントロール | 説明 | diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx index 2e807739f5..b09b811928 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx @@ -26,6 +26,12 @@ import chartdefaults4 from '@xplat-images/chartDefaults4.png'; ## **{PackageVerLatest}** +### 機能拡張 + +#### {PackageCharts} + +- `MarkerType` 列挙型に `Checkmark` オプションが追加されました。シリーズで `MarkerType.Checkmark` を使用すると、円の中に V 字型のチェックマーク アイコンを表示できます。新しい `MarkerAutomaticBehavior.Checkmark` 列挙値でチャート内のすべてのシリーズにチェックマーク形状を適用でき、`SeriesViewer.CheckmarkMarkerTemplate` プロパティでテンプレートをカスタマイズできます。 + #### バグ修正 | バグ番号 | コントロール | 説明 | diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx index bf46a89928..b62cd79c1e 100644 --- a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx +++ b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx @@ -30,6 +30,12 @@ igniteui-angular コンポーネントに固有の変更については CHANGELO ## **{PackageVerLatest}** +### 機能拡張 + +#### {PackageCharts} + +- `MarkerType` 列挙型に `Checkmark` オプションが追加されました。シリーズで `MarkerType.Checkmark` を使用すると、円の中に V 字型のチェックマーク アイコンを表示できます。新しい `MarkerAutomaticBehavior.Checkmark` 列挙値でチャート内のすべてのシリーズにチェックマーク形状を適用でき、`SeriesViewer.CheckmarkMarkerTemplate` プロパティでテンプレートをカスタマイズできます。 + ### バグ修正 | バグ番号 | コントロール | 説明 | From cde374fb2f1b07566609355ef54f984e9e6800bf Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 20 May 2026 00:41:04 +0300 Subject: [PATCH 43/52] docs(charts/stock-chart): correct FinancialChart property references FinancialChart does not expose a CategoryChart.ChartType property - it has a top-level ChartType. Rename the references in the topic body (the IgrApiLink label and the ZoomSliderType paragraph) and drop the duplicate FinancialChartType entry from the frontmatter mentionedTypes. Ported from igniteui-xplat-docs commit 602bed3b (fix(FinancialChart): Fixed wrong api links). Co-authored-by: Galina Edinakova --- .../src/content/en/components/charts/types/stock-chart.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx b/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx index 530b069a78..9f3a0d72af 100644 --- a/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx +++ b/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx @@ -3,7 +3,7 @@ title: "{Platform} Stock/Financial Charts | {ProductName}" description: The {ProductName} Stock Chart is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. Try for FREE. keywords: "{Platform} Charts, Stock Chart, Financial Chart, Candlestick Chart, OHLC Chart, Infragistics" license: commercial -mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series", "FinancialChartType"] +mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series"] namespace: Infragistics.Controls.Charts --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; @@ -15,7 +15,7 @@ The {ProductName} Stock Chart, sometimes referred to as {Platform} Financial Cha ## {Platform} Stock Chart Example -You can create Stock Chart using the control by binding your data and optionally setting property to `Line` value, as shown in the example below. +You can create Stock Chart using the control by binding your data and optionally setting property to `Line` value, as shown in the example below. @@ -137,7 +137,7 @@ Note that is recommended to use line chart type if plotting multiple data source ### Zoom Pane This pane controls the zoom of all the displayed panes. This pane is displayed by default. It can be turned off by setting the `ZoomSliderType` to `none` as demonstrated in the following code: -Note that you should set the `ZoomSliderType` option to the same value as the `CategoryChart.ChartType` option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this: +Note that you should set the `ZoomSliderType` option to the same value as the `ChartType` option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this: In this example, the stock chart is plotting revenue for United States. From 20ff7d2fb6f9618c17b31fdf34278900f418bf85 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 20 May 2026 00:41:17 +0300 Subject: [PATCH 44/52] docs(ai/maker-framework): fix Claude Desktop step list indentation Indent the bullet list and the json code fence in the Claude Desktop section so they nest under their parent ordered-list items (1. and 2.) instead of breaking the list visually. Ported from igniteui-xplat-docs commit 05a06b40 (chore(*): fixing code snippet indentation). Co-authored-by: Konstantin Dinev --- .../en/components/ai/maker-framework.mdx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/xplat/src/content/en/components/ai/maker-framework.mdx b/docs/xplat/src/content/en/components/ai/maker-framework.mdx index 9a7b61fa32..56187d2717 100644 --- a/docs/xplat/src/content/en/components/ai/maker-framework.mdx +++ b/docs/xplat/src/content/en/components/ai/maker-framework.mdx @@ -66,23 +66,23 @@ Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_ ### Claude Desktop 1. Open your Claude Desktop configuration file: - - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` - - Windows: `%APPDATA%\Claude\claude_desktop_config.json` + - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` + - Windows: `%APPDATA%\Claude\claude_desktop_config.json` 2. Add the `maker` entry to the `mcpServers` block: -```json -{ - "mcpServers": { - "maker": { - "command": "npx", - "args": ["-y", "@igniteui/maker-mcp", "--stdio"], - "env": { - "Executor__AIProviderKeys__Anthropic": "" + ```json + { + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } } } - } -} -``` + ``` 3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). From de58c36f2cf4d89ef0880ae14f54663203e46734 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 20 May 2026 00:41:34 +0300 Subject: [PATCH 45/52] docs(grids/_shared/column-hiding): document the toolbar-hiding prompt prop The IgxGridToolbarHiding equivalents on Web Components, React, and Blazor now expose a Prompt property alongside Title to set the filter-input placeholder inside the toolbar hiding dropdown. - Platform-gate the "Title only" prose paragraph to Angular and add a parallel React/Blazor/WebComponents paragraph that mentions both Title and Prompt with ApiLink references. - Add Prompt="Type here to search" (Blazor) / prompt="Type here to search" (WC + React) to every Grid/TreeGrid/HierarchicalGrid toolbar hiding snippet across the file (9 occurrences in total). HTML platform comments in the source were converted to . Ported from igniteui-xplat-docs commit 273dd74f (PR #1636 - docs: include 'prompt' prop in markdown and snippets). Co-authored-by: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com> Co-authored-by: Stamen Stoychev --- .../grids/_shared/column-hiding.mdx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx index 2fcb6f85dc..1af4f17095 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx @@ -400,9 +400,17 @@ For this purpose all we have to do is set both the The provides us with some useful properties when it comes to using the toolbar's column hiding UI. By using the property, we will set the title that is displayed inside the dropdown button in the toolbar. + + + +The provides us with some useful properties when it comes to using the toolbar's column hiding UI. + +By using the and properties, we will set the title and filter prompt that are displayed inside the dropdown in the toolbar. + @@ -422,7 +430,7 @@ By using the - + @@ -434,7 +442,7 @@ By using the - + @@ -446,7 +454,7 @@ By using the - + @@ -474,7 +482,7 @@ By using the - + @@ -489,7 +497,7 @@ By using the - + @@ -504,7 +512,7 @@ By using the - + @@ -532,7 +540,7 @@ By using the - + @@ -547,7 +555,7 @@ By using the - + @@ -562,7 +570,7 @@ By using the - + From 7211ecfc977776ba7156f3deaf78b6289f683137 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Wed, 20 May 2026 00:41:49 +0300 Subject: [PATCH 46/52] docs(interactivity/chat): refresh the ::part styling sample - Replace the quoted "" element reference with a backticked `` for consistency with the surrounding `