@commercetools/nimbus-mcp 3.2.0 → 3.3.0

package/data/docs/routes/components-navigation-tree.json

@@ -0,0 +1,445 @@
+{
+  "meta": {
+    "id": "Components-Tree",
+    "title": "Tree",
+    "exportName": "Tree",
+    "description": "A hierarchical list for navigating and managing nested data such as file trees, category hierarchies, and nested navigation structures.",
+    "lifecycleState": "Beta",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/tree/tree.mdx",
+    "menu": [
+      "Components",
+      "Navigation",
+      "Tree"
+    ],
+    "route": "components/navigation/tree",
+    "tags": [
+      "component",
+      "tree",
+      "treegrid",
+      "hierarchy",
+      "navigation",
+      "nested"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Key features",
+        "href": "#key-features",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Basic",
+        "href": "#basic",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Selection",
+        "href": "#selection",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "guidelines",
+        "title": "Guidelines",
+        "order": 2
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nTree presents hierarchical data as an expandable, keyboard-navigable list. It is\nbuilt on React Aria's accessible `treegrid` pattern, so arrow-key navigation,\ntype-ahead, expand/collapse, single and multiple selection, and opt-in\ndrag-and-drop all work out of the box.\n\nCompose it from four parts: `Tree.Root`, `Tree.Item`, `Tree.ItemContent`, and\n`Tree.Indicator`.\n\n> [!NOTE]\\\n> Tree is in **beta**. The API is stable and ready to use. There are no Figma\n> specs yet — its visual styling is derived from existing list and accordion\n> tokens, so spacing and visual details may still be refined in design review.\n\n### Key features\n\n- **Accessible by default:** ARIA `treegrid` semantics (`aria-level`,\n  `aria-expanded`, `aria-selected`) with WCAG 2.1 AA keyboard and screen-reader\n  support provided by React Aria.\n- **Static or dynamic data:** nest `Tree.Item`s by hand, or render from an\n  `items` array with a recursive render function.\n- **Selection:** `single` or `multiple` — multiple-selection mode renders a\n  selection checkbox per row automatically.\n- **Expand / collapse:** a chevron indicator that appears only for items with\n  children and rotates on expand.\n- **Opt-in drag-and-drop:** reorder, re-parent, and move items by pointer or\n  keyboard.\n- **Two sizes:** `sm` and `md` (default), scaling row height, font size, chevron\n  size, and indentation.\n\n### Resources\n\nDeep dive into the underlying accessibility pattern.\n\n[React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html)\n[ARIA treegrid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)\n\n## Variables\n\nGet familiar with the features.\n\n### Basic\n\nA tree of nested `Tree.Item` elements. `defaultExpandedKeys` controls which\nbranches start open.\n\n```jsx live\nconst App = () => (\n  <Tree.Root aria-label=\"Files\" defaultExpandedKeys={[\"documents\", \"project\"]}>\n    <Tree.Item id=\"documents\" textValue=\"Documents\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Documents\n      </Tree.ItemContent>\n      <Tree.Item id=\"project\" textValue=\"Project\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Project\n        </Tree.ItemContent>\n        <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n          <Tree.ItemContent>\n            <Tree.Indicator />\n            Weekly Report\n          </Tree.ItemContent>\n        </Tree.Item>\n      </Tree.Item>\n    </Tree.Item>\n    <Tree.Item id=\"photos\" textValue=\"Photos\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Photos\n      </Tree.ItemContent>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n### Selection\n\nSet `selectionMode` to `single` or `multiple`. In multiple-selection mode,\n`Tree.ItemContent` renders a selection checkbox per row automatically.\n\n```jsx live\nconst App = () => (\n  <Tree.Root\n    aria-label=\"Files\"\n    selectionMode=\"multiple\"\n    defaultExpandedKeys={[\"documents\"]}\n  >\n    <Tree.Item id=\"documents\" textValue=\"Documents\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Documents\n      </Tree.ItemContent>\n      <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Weekly Report\n        </Tree.ItemContent>\n      </Tree.Item>\n      <Tree.Item id=\"budget\" textValue=\"Budget\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Budget\n        </Tree.ItemContent>\n      </Tree.Item>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n### Size\n\n`Tree.Root` accepts a `size` prop (`sm` or `md`, default `md`) that scales row\nheight, font size, chevron size, and indentation step.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"row\" gap=\"800\" alignItems=\"flex-start\">\n    {[\"sm\", \"md\"].map((size) => (\n      <Stack key={size} gap=\"200\">\n        <Text fontWeight=\"700\">{size}</Text>\n        <Tree.Root\n          aria-label={`Files ${size}`}\n          size={size}\n          defaultExpandedKeys={[\"documents\"]}\n        >\n          <Tree.Item id=\"documents\" textValue=\"Documents\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Documents\n            </Tree.ItemContent>\n            <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n              <Tree.ItemContent>\n                <Tree.Indicator />\n                Weekly Report\n              </Tree.ItemContent>\n            </Tree.Item>\n          </Tree.Item>\n        </Tree.Root>\n      </Stack>\n    ))}\n  </Stack>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nTree presents hierarchical data as an expandable, keyboard-navigable list. It is\nbuilt on React Aria's accessible `treegrid` pattern, so arrow-key navigation,\ntype-ahead, expand/collapse, single and multiple selection, and opt-in\ndrag-and-drop all work out of the box.\n\nCompose it from four parts: `Tree.Root`, `Tree.Item`, `Tree.ItemContent`, and\n`Tree.Indicator`.\n\n> [!NOTE]\\\n> Tree is in **beta**. The API is stable and ready to use. There are no Figma\n> specs yet — its visual styling is derived from existing list and accordion\n> tokens, so spacing and visual details may still be refined in design review.\n\n### Key features\n\n- **Accessible by default:** ARIA `treegrid` semantics (`aria-level`,\n  `aria-expanded`, `aria-selected`) with WCAG 2.1 AA keyboard and screen-reader\n  support provided by React Aria.\n- **Static or dynamic data:** nest `Tree.Item`s by hand, or render from an\n  `items` array with a recursive render function.\n- **Selection:** `single` or `multiple` — multiple-selection mode renders a\n  selection checkbox per row automatically.\n- **Expand / collapse:** a chevron indicator that appears only for items with\n  children and rotates on expand.\n- **Opt-in drag-and-drop:** reorder, re-parent, and move items by pointer or\n  keyboard.\n- **Two sizes:** `sm` and `md` (default), scaling row height, font size, chevron\n  size, and indentation.\n\n### Resources\n\nDeep dive into the underlying accessibility pattern.\n\n[React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html)\n[ARIA treegrid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)\n\n## Variables\n\nGet familiar with the features.\n\n### Basic\n\nA tree of nested `Tree.Item` elements. `defaultExpandedKeys` controls which\nbranches start open.\n\n```jsx live\nconst App = () => (\n  <Tree.Root aria-label=\"Files\" defaultExpandedKeys={[\"documents\", \"project\"]}>\n    <Tree.Item id=\"documents\" textValue=\"Documents\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Documents\n      </Tree.ItemContent>\n      <Tree.Item id=\"project\" textValue=\"Project\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Project\n        </Tree.ItemContent>\n        <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n          <Tree.ItemContent>\n            <Tree.Indicator />\n            Weekly Report\n          </Tree.ItemContent>\n        </Tree.Item>\n      </Tree.Item>\n    </Tree.Item>\n    <Tree.Item id=\"photos\" textValue=\"Photos\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Photos\n      </Tree.ItemContent>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n### Selection\n\nSet `selectionMode` to `single` or `multiple`. In multiple-selection mode,\n`Tree.ItemContent` renders a selection checkbox per row automatically.\n\n```jsx live\nconst App = () => (\n  <Tree.Root\n    aria-label=\"Files\"\n    selectionMode=\"multiple\"\n    defaultExpandedKeys={[\"documents\"]}\n  >\n    <Tree.Item id=\"documents\" textValue=\"Documents\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Documents\n      </Tree.ItemContent>\n      <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Weekly Report\n        </Tree.ItemContent>\n      </Tree.Item>\n      <Tree.Item id=\"budget\" textValue=\"Budget\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Budget\n        </Tree.ItemContent>\n      </Tree.Item>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n### Size\n\n`Tree.Root` accepts a `size` prop (`sm` or `md`, default `md`) that scales row\nheight, font size, chevron size, and indentation step.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"row\" gap=\"800\" alignItems=\"flex-start\">\n    {[\"sm\", \"md\"].map((size) => (\n      <Stack key={size} gap=\"200\">\n        <Text fontWeight=\"700\">{size}</Text>\n        <Tree.Root\n          aria-label={`Files ${size}`}\n          size={size}\n          defaultExpandedKeys={[\"documents\"]}\n        >\n          <Tree.Item id=\"documents\" textValue=\"Documents\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Documents\n            </Tree.ItemContent>\n            <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n              <Tree.ItemContent>\n                <Tree.Indicator />\n                Weekly Report\n              </Tree.ItemContent>\n            </Tree.Item>\n          </Tree.Item>\n        </Tree.Root>\n      </Stack>\n    ))}\n  </Stack>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Key features",
+          "href": "#key-features",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic",
+          "href": "#basic",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Selection",
+          "href": "#selection",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\nTree is rendered as an ARIA `treegrid` — React Aria's screen-reader-tested\npattern for interactive trees that support selection and per-row actions.\n\n```jsx live\nconst App = () => (\n  <Tree.Root\n    aria-label=\"Files\"\n    selectionMode=\"multiple\"\n    defaultExpandedKeys={[\"documents\"]}\n  >\n    <Tree.Item id=\"documents\" textValue=\"Documents\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Documents\n      </Tree.ItemContent>\n      <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Weekly Report\n        </Tree.ItemContent>\n      </Tree.Item>\n    </Tree.Item>\n    <Tree.Item id=\"photos\" textValue=\"Photos\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Photos\n      </Tree.ItemContent>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n### Accessibility standards\n\n- **Roles:** the tree exposes `role=\"treegrid\"`, each item is a `role=\"row\"`\n  containing a `role=\"gridcell\"`. This pattern is announced reliably by screen\n  readers for interactive, selectable trees.\n- **aria-level:** every row exposes `aria-level` reflecting its 1-based depth so\n  assistive technology can communicate the hierarchy.\n- **aria-expanded:** rows with children expose `aria-expanded`, updated as the\n  item expands and collapses.\n- **aria-selected:** when selection is enabled, selectable rows expose\n  `aria-selected`.\n- **Accessible name:** always provide an accessible name on `Tree.Root` via\n  `aria-label` or `aria-labelledby`.\n- **Item text:** provide a meaningful `textValue` per `Tree.Item`. It supplies\n  the type-ahead target and accessible name when the label is not plain text.\n- **Keyboard navigation:** Up/Down move between visible rows, Right/Left\n  expand/collapse (or move to a child/parent), Home/End jump to the first/last\n  visible row, and typing performs type-ahead.\n- **Expand/collapse control:** the `Tree.Indicator` chevron is given a localized\n  accessible name by React Aria and is hidden for leaf rows.\n- **Drag and drop:** when drag-and-drop is enabled, `Tree.ItemContent`\n  automatically renders a `Button slot=\"drag\"` per row so reordering is operable\n  by keyboard and screen reader (pick up with `Enter`, move with arrow keys,\n  drop with `Enter`), not pointer-only. React Aria gives it a localized\n  accessible name; consumers don't author it.\n- **Focus visible:** rows and the tree container provide a clear focus ring for\n  keyboard users.\n- **Color contrast:** maintain sufficient contrast for row text and selection\n  states against their background colors.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\nThe `Tree` is a compound component for displaying hierarchical data such as file\ntrees and nested navigation structures. It wraps React Aria's `Tree` for\nkeyboard navigation, expand/collapse, selection, type-ahead and opt-in\ndrag-and-drop.\n\n### Import\n\nImport the Tree compound component and its TypeScript types:\n\n```tsx\nimport { Tree, type TreeRootProps } from \"@commercetools/nimbus\";\n```\n\n### Anatomy\n\n```tsx\n<Tree.Root>\n  <Tree.Item>\n    <Tree.ItemContent>\n      <Tree.Indicator />\n      {/* label */}\n    </Tree.ItemContent>\n    {/* nested <Tree.Item>s */}\n  </Tree.Item>\n</Tree.Root>\n```\n\n- **`Tree.Root`** — the tree container. Owns size variant, selection mode,\n  expanded keys and (optional) drag-and-drop. Requires an accessible name via\n  `aria-label` or `aria-labelledby`.\n- **`Tree.Item`** — a single node. Contains a `Tree.ItemContent` and,\n  optionally, nested `Tree.Item`s.\n- **`Tree.ItemContent`** — the node's content row. Renders the indicator, an\n  optional selection checkbox (in multiple-selection mode) and the label, and\n  applies level-based indentation.\n- **`Tree.Indicator`** — the expand/collapse chevron. Visible only for items\n  with children.\n\n### Basic usage\n\nCompose nested `Tree.Item` elements directly. Use `defaultExpandedKeys` to\ncontrol which branches start open.\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Tree.Root\n      aria-label=\"Files\"\n      defaultExpandedKeys={[\"documents\", \"project\"]}\n    >\n      <Tree.Item id=\"documents\" textValue=\"Documents\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Documents\n        </Tree.ItemContent>\n        <Tree.Item id=\"project\" textValue=\"Project\">\n          <Tree.ItemContent>\n            <Tree.Indicator />\n            Project\n          </Tree.ItemContent>\n          <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Weekly Report\n            </Tree.ItemContent>\n          </Tree.Item>\n        </Tree.Item>\n      </Tree.Item>\n      <Tree.Item id=\"photos\" textValue=\"Photos\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Photos\n        </Tree.ItemContent>\n      </Tree.Item>\n    </Tree.Root>\n  );\n};\n```\n\n## Usage examples\n\n### Selection\n\nSet `selectionMode` to `\"single\"` or `\"multiple\"`. In multiple-selection mode,\n`Tree.ItemContent` renders a selection checkbox automatically.\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Tree.Root\n      aria-label=\"Files\"\n      selectionMode=\"multiple\"\n      defaultExpandedKeys={[\"documents\"]}\n    >\n      <Tree.Item id=\"documents\" textValue=\"Documents\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Documents\n        </Tree.ItemContent>\n        <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n          <Tree.ItemContent>\n            <Tree.Indicator />\n            Weekly Report\n          </Tree.ItemContent>\n        </Tree.Item>\n      </Tree.Item>\n    </Tree.Root>\n  );\n};\n```\n\n### Sizes\n\n`Tree.Root` accepts a `size` prop (`\"sm\"` or `\"md\"`, default `\"md\"`) that scales\nrow height, font size, chevron size and indentation step.\n\n```jsx live-dev\nconst App = () => {\n  return (\n    <Tree.Root aria-label=\"Files\" size=\"sm\" defaultExpandedKeys={[\"documents\"]}>\n      <Tree.Item id=\"documents\" textValue=\"Documents\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Documents\n        </Tree.ItemContent>\n        <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n          <Tree.ItemContent>\n            <Tree.Indicator />\n            Weekly Report\n          </Tree.ItemContent>\n        </Tree.Item>\n      </Tree.Item>\n    </Tree.Root>\n  );\n};\n```\n\n## Drag and drop\n\nDrag-and-drop is opt-in and driven entirely through Nimbus — no\n`react-aria-components` or `react-stately` imports required. The `useTree` hook\nowns the hierarchical state and wires drag-and-drop for you: reorder between\nsiblings, and re-parent by dropping an item _onto_ a group. Spread its result\nonto `Tree.Root`.\n\nYou don't author the drag handle. When the tree allows dragging,\n`Tree.ItemContent` renders a keyboard- and screen-reader-operable drag handle\nautomatically (`Enter` to grab, arrow keys to move, `Enter` to drop), with a\nconsistent icon and a localized accessible name. Drop indicators for valid\npositions are provided automatically. Your render function is identical to a\nnon-draggable tree — enabling drag-and-drop is the only change.\n\n```tsx\nimport { Tree, useTree } from \"@commercetools/nimbus\";\n\nfunction DraggableTree() {\n  const tree = useTree({\n    initialItems: [\n      {\n        id: \"documents\",\n        title: \"Documents\",\n        children: [{ id: \"report\", title: \"Weekly Report\" }],\n      },\n      { id: \"photos\", title: \"Photos\", children: [] },\n    ],\n    getKey: (item) => item.id,\n    getChildren: (item) => item.children ?? [],\n    dragAndDrop: true,\n  });\n\n  const renderItem = (node) => (\n    <Tree.Item id={node.key} textValue={node.value.title}>\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        {node.value.title}\n      </Tree.ItemContent>\n      <Tree.SubTree items={node.children}>{renderItem}</Tree.SubTree>\n    </Tree.Item>\n  );\n\n  return (\n    <Tree.Root aria-label=\"Files\" {...tree}>\n      {renderItem}\n    </Tree.Root>\n  );\n}\n```\n\nFor custom drag data or accepted external drag types, pass an options object\ninstead of `true`: `dragAndDrop={{ getItems, acceptedDragTypes }}`. For\nprogrammatic edits, the same `tree` object exposes `insert`, `remove`, `move`,\n`update`, and more.\n\n## Accessibility\n\nThe Tree component is built with React Aria and follows the WAI-ARIA `treegrid`\npattern. It provides:\n\n**Roles:**\n\n- The root exposes `role=\"treegrid\"`; each item is a `role=\"row\"` containing a\n  `role=\"gridcell\"`.\n\n**Labeling:**\n\n- Each row exposes `aria-level` reflecting its depth, `aria-expanded` when it\n  has children, and `aria-selected` when selection is enabled.\n- Always provide an accessible name on `Tree.Root` via `aria-label` or\n  `aria-labelledby`.\n- Provide a meaningful `textValue` on each `Tree.Item` (used for type-ahead)\n  when the label is not a plain string.\n\n**Keyboard navigation:**\n\n- `Up` / `Down` — move between visible rows\n- `Right` / `Left` — expand/collapse, or move to a child/parent\n- `Home` / `End` — move to the first/last visible row\n- _type characters_ — type-ahead to the next matching row\n\nWhen drag-and-drop is enabled, `Tree.ItemContent` automatically renders a drag\nhandle per item so the reorder is operable by keyboard and screen reader, not\njust pointer — you don't need to add one.\n\n## API reference\n\n<PropsTable id=\"Tree\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Tree\nwithin your application. As the component's internal functionality is already\ntested by Nimbus, these patterns help you verify your integration and\napplication-specific logic.\n\n### Basic Rendering\n\nRender a tree with nested items and verify the treegrid structure\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Tree, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Tree - Basic rendering\", () => {\n  it(\"renders a treegrid with rows\", () => {\n    render(\n      <NimbusProvider>\n        <Tree.Root aria-label=\"Files\" defaultExpandedKeys={[\"documents\"]}>\n          <Tree.Item id=\"documents\" textValue=\"Documents\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Documents\n            </Tree.ItemContent>\n            <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n              <Tree.ItemContent>\n                <Tree.Indicator />\n                Weekly Report\n              </Tree.ItemContent>\n            </Tree.Item>\n          </Tree.Item>\n        </Tree.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"treegrid\", { name: \"Files\" })).toBeInTheDocument();\n    expect(screen.getByRole(\"row\", { name: /Documents/ })).toBeInTheDocument();\n    expect(\n      screen.getByRole(\"row\", { name: /Weekly Report/ })\n    ).toBeInTheDocument();\n  });\n\n  it(\"exposes aria-level reflecting depth\", () => {\n    render(\n      <NimbusProvider>\n        <Tree.Root aria-label=\"Files\" defaultExpandedKeys={[\"documents\"]}>\n          <Tree.Item id=\"documents\" textValue=\"Documents\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Documents\n            </Tree.ItemContent>\n            <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n              <Tree.ItemContent>\n                <Tree.Indicator />\n                Weekly Report\n              </Tree.ItemContent>\n            </Tree.Item>\n          </Tree.Item>\n        </Tree.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"row\", { name: /Documents/ })).toHaveAttribute(\n      \"aria-level\",\n      \"1\"\n    );\n    expect(screen.getByRole(\"row\", { name: /Weekly Report/ })).toHaveAttribute(\n      \"aria-level\",\n      \"2\"\n    );\n  });\n});\n```\n\n### Selection\n\nSingle and multiple selection behavior\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { Tree, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Tree - Selection\", () => {\n  it(\"selects a row in single-selection mode\", async () => {\n    const user = userEvent.setup();\n    render(\n      <NimbusProvider>\n        <Tree.Root aria-label=\"Files\" selectionMode=\"single\">\n          <Tree.Item id=\"documents\" textValue=\"Documents\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Documents\n            </Tree.ItemContent>\n          </Tree.Item>\n        </Tree.Root>\n      </NimbusProvider>\n    );\n\n    const row = screen.getByRole(\"row\", { name: /Documents/ });\n    await user.click(row);\n    expect(row).toHaveAttribute(\"aria-selected\", \"true\");\n  });\n\n  it(\"renders selection checkboxes in multiple-selection mode\", () => {\n    render(\n      <NimbusProvider>\n        <Tree.Root aria-label=\"Files\" selectionMode=\"multiple\">\n          <Tree.Item id=\"documents\" textValue=\"Documents\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Documents\n            </Tree.ItemContent>\n          </Tree.Item>\n        </Tree.Root>\n      </NimbusProvider>\n    );\n\n    expect(screen.getAllByRole(\"checkbox\").length).toBeGreaterThan(0);\n  });\n});\n```\n\n\n## Resources\n\n- [Tree Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-tree--docs)\n- [React Aria Tree Documentation](https://react-spectrum.adobe.com/react-aria/Tree.html)\n- [WAI-ARIA treegrid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Anatomy",
+          "href": "#anatomy",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Selection",
+          "href": "#selection",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Sizes",
+          "href": "#sizes",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Drag and drop",
+          "href": "#drag-and-drop",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Rendering",
+          "href": "#basic-rendering",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Selection",
+          "href": "#selection-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "guidelines": {
+      "mdx": "\n## Guidelines\n\nTree guidelines offer a set of standardized rules and recommendations that\nensure hierarchical data stays consistent, usable, and accessible.\n\n### Best practices\n\n- **Always label the tree:** provide an `aria-label` or `aria-labelledby` on\n  `Tree.Root` so assistive technology can announce its purpose.\n- **Give every item a `textValue`:** it powers type-ahead and the accessible\n  name, especially when the label is not a plain string.\n- **Include the indicator on every row:** place a `Tree.Indicator` in each\n  `Tree.ItemContent`. It hides itself for leaf rows automatically, which keeps\n  labels aligned across the column.\n- **Keep depth manageable:** deeply nested trees are hard to scan and navigate.\n  Prefer shallow hierarchies and meaningful grouping.\n- **Match selection to intent:** use `selectionMode` when users pick items, and\n  enable drag-and-drop via `useTree({ dragAndDrop: true })` when they reorder —\n  the drag handle is rendered for you. A reorder-only tree should leave\n  `selectionMode` at its default `none` so no checkboxes render.\n\n### Usage\n\nTree is best for data whose structure the user needs to see and traverse.\n\n> [!TIP]\\\n> When to use\n\n- **Hierarchical data:** file trees, category trees, nested settings, or\n  organizational structures.\n- **Nested navigation:** a sidebar or panel that drills into nested sections.\n- **Reorderable hierarchies:** a navigation-menu builder or content outline,\n  using opt-in drag-and-drop.\n\n> [!CAUTION]\\\n> When not to use\n\n- **A single level of collapsible sections:** use `Accordion` instead.\n- **A flat, single-level reorderable list:** use `DraggableList` instead.\n- **Tabular data with columns:** use `DataTable` instead.\n\n### Depth\n\nKeep the hierarchy shallow and well organized so users can predict where\ninformation lives.\n\n> [!TIP]\\\n> **Do**\n>\n> - Group related items under clear, descriptive parent labels.\n> - Expand the branches that matter on load with `defaultExpandedKeys`.\n\n```jsx live\nconst App = () => (\n  <Tree.Root aria-label=\"Catalog\" defaultExpandedKeys={[\"clothing\"]}>\n    <Tree.Item id=\"clothing\" textValue=\"Clothing\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Clothing\n      </Tree.ItemContent>\n      <Tree.Item id=\"tops\" textValue=\"Tops\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Tops\n        </Tree.ItemContent>\n      </Tree.Item>\n      <Tree.Item id=\"shoes\" textValue=\"Shoes\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Shoes\n        </Tree.ItemContent>\n      </Tree.Item>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't nest more levels than users need to complete their task; deep trees\n>   hide information and are hard to navigate.\n\n```jsx live\nconst App = () => (\n  <Tree.Root aria-label=\"Catalog\" defaultExpandedKeys={[\"a\", \"b\", \"c\", \"d\"]}>\n    <Tree.Item id=\"a\" textValue=\"Level 1\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Level 1\n      </Tree.ItemContent>\n      <Tree.Item id=\"b\" textValue=\"Level 2\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Level 2\n        </Tree.ItemContent>\n        <Tree.Item id=\"c\" textValue=\"Level 3\">\n          <Tree.ItemContent>\n            <Tree.Indicator />\n            Level 3\n          </Tree.ItemContent>\n          <Tree.Item id=\"d\" textValue=\"Level 4\">\n            <Tree.ItemContent>\n              <Tree.Indicator />\n              Level 4\n            </Tree.ItemContent>\n            <Tree.Item id=\"e\" textValue=\"Level 5\">\n              <Tree.ItemContent>\n                <Tree.Indicator />\n                Level 5\n              </Tree.ItemContent>\n            </Tree.Item>\n          </Tree.Item>\n        </Tree.Item>\n      </Tree.Item>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n### Selection and reordering\n\nMake it obvious what each interaction does, and don't mix affordances that serve\ndifferent goals.\n\n> [!TIP]\\\n> **Do**\n>\n> - Use multiple-selection mode when users act on several items at once — the\n>   selection checkboxes make the interaction discoverable.\n\n```jsx live\nconst App = () => (\n  <Tree.Root\n    aria-label=\"Files\"\n    selectionMode=\"multiple\"\n    defaultExpandedKeys={[\"documents\"]}\n  >\n    <Tree.Item id=\"documents\" textValue=\"Documents\">\n      <Tree.ItemContent>\n        <Tree.Indicator />\n        Documents\n      </Tree.ItemContent>\n      <Tree.Item id=\"report\" textValue=\"Weekly Report\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Weekly Report\n        </Tree.ItemContent>\n      </Tree.Item>\n      <Tree.Item id=\"budget\" textValue=\"Budget\">\n        <Tree.ItemContent>\n          <Tree.Indicator />\n          Budget\n        </Tree.ItemContent>\n      </Tree.Item>\n    </Tree.Item>\n  </Tree.Root>\n);\n```\n\n> [!CAUTION]\\\n> **Don't**\n>\n> - Don't enable selection on a tree whose only purpose is structural reordering\n>   — the checkboxes add noise. Leave `selectionMode` at `none`.\n",
+      "toc": [
+        {
+          "value": "Guidelines",
+          "href": "#guidelines",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Best practices",
+          "href": "#best-practices",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage",
+          "href": "#usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Depth",
+          "href": "#depth",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Selection and reordering",
+          "href": "#selection-and-reordering",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            4
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}

package/data/docs/routes/home-getting-started-mcp-server-overview.json

@@ -78,10 +78,10 @@
       }
     ]
   },
-  "mdx": "\n# MCP Server Overview\n\nIf you use an AI coding assistant (Claude, Copilot, Cursor, etc.), the Nimbus\nMCP server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nThe **Nimbus MCP Server** (`@commercetools/nimbus-mcp`) exposes component\ndocumentation, design tokens, and icons to AI assistants through the\n[Model Context Protocol (MCP)](https://modelcontextprotocol.io/), so they can\nproduce code that follows Nimbus conventions out of the box.\n\n## What Is MCP?\n\nThe **Model Context Protocol** is an open standard that lets AI assistants call\nexternal tools. It works like a simple request/response message format: an MCP\n_server_ advertises a set of tools, and an MCP _client_ (the AI assistant)\ndiscovers and invokes them as needed during a conversation.\n\nThe Nimbus MCP server runs locally on your machine as a subprocess of the AI\nassistant — no network deployment or API keys required.\n\n## What It Enables\n\nWith the MCP server running, an AI assistant can:\n\n- **Look up component APIs** — props, variants, slots, and usage examples for\n  any Nimbus component or pattern\n- **Query design tokens** — colors, spacing, typography, shadows, and other\n  token values by name or category\n- **Search documentation** — full-text search across all Nimbus docs including\n  guidelines and accessibility views\n- **Find icons** — fuzzy-search the icon catalog by name or keyword\n- **List components** — browse all available components filtered by category\n- **Migrate from UI Kit** — get migration mappings from `@commercetools-uikit`\n  components to their Nimbus equivalents\n\nThis means you can ask your AI assistant questions like _\"build a form with\nNimbus components\"_ or _\"what spacing tokens are available?\"_ and it will have\naccurate, up-to-date answers pulled directly from the design system.\n\n## Available Tools\n\nThe server exposes the following tools:\n\n| Tool               | Description                                                                    |\n| ------------------ | ------------------------------------------------------------------------------ |\n| `list_components`  | Returns Nimbus components, optionally filtered by subcategory or fuzzy search  |\n| `get_component`    | Returns detailed info about a component — metadata, props, styling config, and docs |\n| `get_tokens`       | Returns design tokens, optionally filtered by category or searched by name     |\n| `search_docs`      | Full-text search across all Nimbus documentation pages                         |\n| `search_icons`     | Fuzzy-search the icon catalog by name or keyword                               |\n| `migrate_from_uikit` | Returns migration mappings from UI Kit components to Nimbus equivalents       |\n\n## Supported AI Assistants\n\nThe Nimbus MCP server works with any MCP-compatible client. Tested assistants\ninclude:\n\n| Assistant           | Configuration file                               |\n| ------------------- | ------------------------------------------------ |\n| **Claude Code**     | `~/.claude/mcp.json` or project `.mcp.json`      |\n| **Claude Desktop**  | App settings or `claude_desktop_config.json`      |\n| **VS Code Copilot** | `.vscode/mcp.json` in workspace                  |\n| **Cursor**          | `.cursor/mcp.json` in workspace                  |\n| **Windsurf**        | `.windsurf/mcp.json` in workspace                |\n\n> See the [Setup guide](/home/getting-started/mcp-server-setup) for step-by-step\n> configuration instructions for each assistant.\n\n## Package Details\n\n- **Package name:** `@commercetools/nimbus-mcp`\n- **Source:** `packages/nimbus-mcp/` in the Nimbus monorepo\n",
+  "mdx": "\n# MCP Server Overview\n\nIf you use an AI coding assistant (Claude, Copilot, Cursor, etc.), the Nimbus\nMCP server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nThe **Nimbus MCP Server** (`@commercetools/nimbus-mcp`) exposes component\ndocumentation, design tokens, and icons to AI assistants through the\n[Model Context Protocol (MCP)](https://modelcontextprotocol.io/), so they can\nproduce code that follows Nimbus conventions out of the box.\n\n## What Is MCP?\n\nThe **Model Context Protocol** is an open standard that lets AI assistants call\nexternal tools. It works like a simple request/response message format: an MCP\n_server_ advertises a set of tools, and an MCP _client_ (the AI assistant)\ndiscovers and invokes them as needed during a conversation.\n\nThe Nimbus MCP server runs locally on your machine as a subprocess of the AI\nassistant — no network deployment or API keys required.\n\n## What It Enables\n\nWith the MCP server running, an AI assistant can:\n\n- **Look up component APIs** — props, variants, slots, and usage examples for\n  any Nimbus component or pattern\n- **Query design tokens** — colors, spacing, typography, shadows, and other\n  token values by name or category\n- **Search documentation** — full-text search across all Nimbus docs including\n  guidelines and accessibility views\n- **Find icons** — fuzzy-search the icon catalog by name or keyword\n- **List components** — browse all available components filtered by category\n- **Migrate from UI Kit** — get migration mappings from `@commercetools-uikit`\n  components to their Nimbus equivalents\n\nThis means you can ask your AI assistant questions like _\"build a form with\nNimbus components\"_ or _\"what spacing tokens are available?\"_ and it will have\naccurate, up-to-date answers pulled directly from the design system.\n\n## Available Tools\n\nThe server exposes the following tools:\n\n| Tool               | Description                                                                    |\n| ------------------ | ------------------------------------------------------------------------------ |\n| `list_components`  | Returns Nimbus components, optionally filtered by subcategory or fuzzy search  |\n| `get_component`    | Returns detailed info about a component — metadata, props, styling config, and docs |\n| `get_tokens`       | Returns design tokens, optionally filtered by category or searched by name     |\n| `search_docs`      | Full-text search across all Nimbus documentation pages                         |\n| `search_icons`     | Fuzzy-search the icon catalog by name or keyword                               |\n| `migrate_from_uikit` | Returns migration mappings from UI Kit components to Nimbus equivalents       |\n\n## Supported AI Assistants\n\nThe Nimbus MCP server works with any MCP-compatible client. Tested assistants\ninclude:\n\n| Assistant           | Configuration file                               |\n| ------------------- | ------------------------------------------------ |\n| **Claude Code**     | `~/.claude.json` or project `.mcp.json`           |\n| **Claude Desktop**  | App settings or `claude_desktop_config.json`      |\n| **VS Code Copilot** | `.vscode/mcp.json` in workspace                  |\n| **Cursor**          | `.cursor/mcp.json` in workspace                  |\n| **Windsurf**        | `.windsurf/mcp.json` in workspace                |\n\n> See the [Setup guide](/home/getting-started/mcp-server-setup) for step-by-step\n> configuration instructions for each assistant.\n\n## Package Details\n\n- **Package name:** `@commercetools/nimbus-mcp`\n- **Source:** `packages/nimbus-mcp/` in the Nimbus monorepo\n",
   "views": {
     "overview": {
-      "mdx": "\n# MCP Server Overview\n\nIf you use an AI coding assistant (Claude, Copilot, Cursor, etc.), the Nimbus\nMCP server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nThe **Nimbus MCP Server** (`@commercetools/nimbus-mcp`) exposes component\ndocumentation, design tokens, and icons to AI assistants through the\n[Model Context Protocol (MCP)](https://modelcontextprotocol.io/), so they can\nproduce code that follows Nimbus conventions out of the box.\n\n## What Is MCP?\n\nThe **Model Context Protocol** is an open standard that lets AI assistants call\nexternal tools. It works like a simple request/response message format: an MCP\n_server_ advertises a set of tools, and an MCP _client_ (the AI assistant)\ndiscovers and invokes them as needed during a conversation.\n\nThe Nimbus MCP server runs locally on your machine as a subprocess of the AI\nassistant — no network deployment or API keys required.\n\n## What It Enables\n\nWith the MCP server running, an AI assistant can:\n\n- **Look up component APIs** — props, variants, slots, and usage examples for\n  any Nimbus component or pattern\n- **Query design tokens** — colors, spacing, typography, shadows, and other\n  token values by name or category\n- **Search documentation** — full-text search across all Nimbus docs including\n  guidelines and accessibility views\n- **Find icons** — fuzzy-search the icon catalog by name or keyword\n- **List components** — browse all available components filtered by category\n- **Migrate from UI Kit** — get migration mappings from `@commercetools-uikit`\n  components to their Nimbus equivalents\n\nThis means you can ask your AI assistant questions like _\"build a form with\nNimbus components\"_ or _\"what spacing tokens are available?\"_ and it will have\naccurate, up-to-date answers pulled directly from the design system.\n\n## Available Tools\n\nThe server exposes the following tools:\n\n| Tool               | Description                                                                    |\n| ------------------ | ------------------------------------------------------------------------------ |\n| `list_components`  | Returns Nimbus components, optionally filtered by subcategory or fuzzy search  |\n| `get_component`    | Returns detailed info about a component — metadata, props, styling config, and docs |\n| `get_tokens`       | Returns design tokens, optionally filtered by category or searched by name     |\n| `search_docs`      | Full-text search across all Nimbus documentation pages                         |\n| `search_icons`     | Fuzzy-search the icon catalog by name or keyword                               |\n| `migrate_from_uikit` | Returns migration mappings from UI Kit components to Nimbus equivalents       |\n\n## Supported AI Assistants\n\nThe Nimbus MCP server works with any MCP-compatible client. Tested assistants\ninclude:\n\n| Assistant           | Configuration file                               |\n| ------------------- | ------------------------------------------------ |\n| **Claude Code**     | `~/.claude/mcp.json` or project `.mcp.json`      |\n| **Claude Desktop**  | App settings or `claude_desktop_config.json`      |\n| **VS Code Copilot** | `.vscode/mcp.json` in workspace                  |\n| **Cursor**          | `.cursor/mcp.json` in workspace                  |\n| **Windsurf**        | `.windsurf/mcp.json` in workspace                |\n\n> See the [Setup guide](/home/getting-started/mcp-server-setup) for step-by-step\n> configuration instructions for each assistant.\n\n## Package Details\n\n- **Package name:** `@commercetools/nimbus-mcp`\n- **Source:** `packages/nimbus-mcp/` in the Nimbus monorepo\n",
+      "mdx": "\n# MCP Server Overview\n\nIf you use an AI coding assistant (Claude, Copilot, Cursor, etc.), the Nimbus\nMCP server lets it understand the design system automatically — no more pasting\ndocs into every prompt.\n\nThe **Nimbus MCP Server** (`@commercetools/nimbus-mcp`) exposes component\ndocumentation, design tokens, and icons to AI assistants through the\n[Model Context Protocol (MCP)](https://modelcontextprotocol.io/), so they can\nproduce code that follows Nimbus conventions out of the box.\n\n## What Is MCP?\n\nThe **Model Context Protocol** is an open standard that lets AI assistants call\nexternal tools. It works like a simple request/response message format: an MCP\n_server_ advertises a set of tools, and an MCP _client_ (the AI assistant)\ndiscovers and invokes them as needed during a conversation.\n\nThe Nimbus MCP server runs locally on your machine as a subprocess of the AI\nassistant — no network deployment or API keys required.\n\n## What It Enables\n\nWith the MCP server running, an AI assistant can:\n\n- **Look up component APIs** — props, variants, slots, and usage examples for\n  any Nimbus component or pattern\n- **Query design tokens** — colors, spacing, typography, shadows, and other\n  token values by name or category\n- **Search documentation** — full-text search across all Nimbus docs including\n  guidelines and accessibility views\n- **Find icons** — fuzzy-search the icon catalog by name or keyword\n- **List components** — browse all available components filtered by category\n- **Migrate from UI Kit** — get migration mappings from `@commercetools-uikit`\n  components to their Nimbus equivalents\n\nThis means you can ask your AI assistant questions like _\"build a form with\nNimbus components\"_ or _\"what spacing tokens are available?\"_ and it will have\naccurate, up-to-date answers pulled directly from the design system.\n\n## Available Tools\n\nThe server exposes the following tools:\n\n| Tool               | Description                                                                    |\n| ------------------ | ------------------------------------------------------------------------------ |\n| `list_components`  | Returns Nimbus components, optionally filtered by subcategory or fuzzy search  |\n| `get_component`    | Returns detailed info about a component — metadata, props, styling config, and docs |\n| `get_tokens`       | Returns design tokens, optionally filtered by category or searched by name     |\n| `search_docs`      | Full-text search across all Nimbus documentation pages                         |\n| `search_icons`     | Fuzzy-search the icon catalog by name or keyword                               |\n| `migrate_from_uikit` | Returns migration mappings from UI Kit components to Nimbus equivalents       |\n\n## Supported AI Assistants\n\nThe Nimbus MCP server works with any MCP-compatible client. Tested assistants\ninclude:\n\n| Assistant           | Configuration file                               |\n| ------------------- | ------------------------------------------------ |\n| **Claude Code**     | `~/.claude.json` or project `.mcp.json`           |\n| **Claude Desktop**  | App settings or `claude_desktop_config.json`      |\n| **VS Code Copilot** | `.vscode/mcp.json` in workspace                  |\n| **Cursor**          | `.cursor/mcp.json` in workspace                  |\n| **Windsurf**        | `.windsurf/mcp.json` in workspace                |\n\n> See the [Setup guide](/home/getting-started/mcp-server-setup) for step-by-step\n> configuration instructions for each assistant.\n\n## Package Details\n\n- **Package name:** `@commercetools/nimbus-mcp`\n- **Source:** `packages/nimbus-mcp/` in the Nimbus monorepo\n",
       "toc": [
         {
           "value": "What Is MCP?",

package/data/docs/routes/home-getting-started-mcp-server-setup.json

@@ -167,10 +167,10 @@
       }
     ]
   },
-  "mdx": "\n# MCP Server Setup\n\nThis guide walks through installing the Nimbus MCP server and configuring it for\nyour AI assistant. Setup takes about two minutes.\n\n## Prerequisites\n\n- **Node.js** v18 or later (includes `npx`)\n- An AI assistant that supports MCP (see\n  [supported assistants](/home/getting-started/mcp-server-overview))\n\n## How It Works\n\nYou don't run the MCP server yourself. Instead, you add a small JSON config to\nyour AI assistant telling it _how_ to start the server. The assistant launches\nthe server automatically when a session begins and communicates with it behind\nthe scenes.\n\nAll of the configuration snippets below follow this pattern.\n\n## Installation\n\n### Quick Start (npx — recommended)\n\nThe simplest option. Your assistant runs `npx` to pull the latest published\nversion on each session start — no local install needed.\n\nThe `-y` flag in the snippets below tells npx to skip the install confirmation\nprompt so the server starts without user interaction.\n\n### Monorepo (contributors)\n\nIf you're developing inside the Nimbus monorepo, the MCP server is already\navailable as a workspace package. Build it once:\n\n```bash\npnpm --filter @commercetools/nimbus-mcp build\n```\n\nThen use this server entry in place of the npx snippets below:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"node\",\n      \"args\": [\"packages/nimbus-mcp/dist/index.js\"]\n    }\n  }\n}\n```\n\n## Configuration by Assistant\n\nEach AI assistant reads MCP server configuration from a JSON file. Add the\n`nimbus` entry to the appropriate file for your tool.\n\n### Claude Code\n\nAdd to your project's `.mcp.json` so every team member on the repo gets the\nserver automatically, or to `~/.claude/mcp.json` to enable it across all your\nprojects:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nClaude Code discovers the server automatically on the next session start.\n\n### Claude Desktop\n\nOpen **Settings → Developer → Edit Config**, or edit the config file directly:\n\n- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`\n- **Windows:** `%APPDATA%\\Claude\\claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### VS Code (Copilot)\n\nCreate or edit `.vscode/mcp.json` in your workspace root.\n\n> **Note:** VS Code uses `\"servers\"` as the top-level key, not `\"mcpServers\"`\n> like the other assistants.\n\n```json\n{\n  \"servers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nMCP support is built into VS Code 1.99+. Open the Copilot chat panel — if the\nserver is configured correctly, Copilot will discover it automatically.\n\n### Cursor\n\nCreate or edit `.cursor/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nCursor discovers the server on the next composer session.\n\n### Windsurf\n\nCreate or edit `.windsurf/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nWindsurf picks up new servers automatically.\n\n## Verify the Setup\n\nAfter saving the configuration, open a new chat session in your assistant and\nask:\n\n> _\"List all available Nimbus components\"_\n\nThe assistant should call the `list_components` tool and return a list of\ncomponent names and descriptions. If this works, the MCP server is connected\nand ready to use.\n\nYou can also try more specific queries:\n\n- _\"What props does the Button component accept?\"_\n- _\"What spacing tokens are available in Nimbus?\"_\n- _\"Find an icon for a shopping cart\"_\n- _\"How do I migrate PrimaryButton from UI Kit to Nimbus?\"_\n\n### Troubleshooting\n\n| Symptom                            | Likely cause                                  | Fix                                                          |\n| ---------------------------------- | --------------------------------------------- | ------------------------------------------------------------ |\n| Assistant doesn't see Nimbus tools | Config file not found or malformed JSON        | Check file path and validate JSON syntax                     |\n| `npx` command not found            | Node.js not on the assistant's PATH            | Ensure `node` (v18+) and `npx` are available in your shell   |\n| Tools return \"data not found\"      | Monorepo users: package not built              | Run `pnpm build` from the repo root (npx users are unaffected) |\n| Stale component data               | Using an older cached npx version              | Run `npx @commercetools/nimbus-mcp@latest` to clear cache    |\n",
+  "mdx": "\n# MCP Server Setup\n\nThis guide walks through installing the Nimbus MCP server and configuring it for\nyour AI assistant. Setup takes about two minutes.\n\n## Prerequisites\n\n- **Node.js** v18 or later (includes `npx`)\n- An AI assistant that supports MCP (see\n  [supported assistants](/home/getting-started/mcp-server-overview))\n\n## How It Works\n\nYou don't run the MCP server yourself. Instead, you add a small JSON config to\nyour AI assistant telling it _how_ to start the server. The assistant launches\nthe server automatically when a session begins and communicates with it behind\nthe scenes.\n\nAll of the configuration snippets below follow this pattern.\n\n## Installation\n\n### Quick Start (npx — recommended)\n\nThe simplest option. Your assistant runs `npx` to pull the latest published\nversion on each session start — no local install needed.\n\nThe `-y` flag in the snippets below tells npx to skip the install confirmation\nprompt so the server starts without user interaction.\n\n### Monorepo (contributors)\n\nIf you're developing inside the Nimbus monorepo, the MCP server is already\navailable as a workspace package. Build it once:\n\n```bash\npnpm --filter @commercetools/nimbus-mcp build\n```\n\nThen use this server entry in place of the npx snippets below:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"node\",\n      \"args\": [\"packages/nimbus-mcp/dist/index.js\"]\n    }\n  }\n}\n```\n\n## Configuration by Assistant\n\nEach AI assistant reads MCP server configuration from a JSON file. Add the\n`nimbus` entry to the appropriate file for your tool.\n\n### Claude Code\n\nThe recommended way to add the server for all your projects is via the CLI:\n\n```bash\nclaude mcp add -s user nimbus-mcp npx -- -y @commercetools/nimbus-mcp\n```\n\nThis writes the server config to `~/.claude.json` and makes it available in all\nsessions.\n\nAlternatively, add a `nimbus` entry to your project's `.mcp.json` so every team\nmember on the repo gets the server automatically:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nClaude Code discovers the server automatically on the next session start.\n\n### Claude Desktop\n\nOpen **Settings → Developer → Edit Config**, or edit the config file directly:\n\n- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`\n- **Windows:** `%APPDATA%\\Claude\\claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### VS Code (Copilot)\n\nCreate or edit `.vscode/mcp.json` in your workspace root.\n\n> **Note:** VS Code uses `\"servers\"` as the top-level key, not `\"mcpServers\"`\n> like the other assistants.\n\n```json\n{\n  \"servers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nMCP support is built into VS Code 1.99+. Open the Copilot chat panel — if the\nserver is configured correctly, Copilot will discover it automatically.\n\n### Cursor\n\nCreate or edit `.cursor/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nCursor discovers the server on the next composer session.\n\n### Windsurf\n\nCreate or edit `.windsurf/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nWindsurf picks up new servers automatically.\n\n## Verify the Setup\n\nAfter saving the configuration, open a new chat session in your assistant and\nask:\n\n> _\"List all available Nimbus components\"_\n\nThe assistant should call the `list_components` tool and return a list of\ncomponent names and descriptions. If this works, the MCP server is connected\nand ready to use.\n\nYou can also try more specific queries:\n\n- _\"What props does the Button component accept?\"_\n- _\"What spacing tokens are available in Nimbus?\"_\n- _\"Find an icon for a shopping cart\"_\n- _\"How do I migrate PrimaryButton from UI Kit to Nimbus?\"_\n\n### Troubleshooting\n\n| Symptom                            | Likely cause                                  | Fix                                                          |\n| ---------------------------------- | --------------------------------------------- | ------------------------------------------------------------ |\n| Assistant doesn't see Nimbus tools | Config file not found or malformed JSON        | Check file path and validate JSON syntax                     |\n| `npx` command not found            | Node.js not on the assistant's PATH            | Ensure `node` (v18+) and `npx` are available in your shell   |\n| Tools return \"data not found\"      | Monorepo users: package not built              | Run `pnpm build` from the repo root (npx users are unaffected) |\n| Stale component data               | Using an older cached npx version              | Run `npx @commercetools/nimbus-mcp@latest` to clear cache    |\n",
   "views": {
     "overview": {
-      "mdx": "\n# MCP Server Setup\n\nThis guide walks through installing the Nimbus MCP server and configuring it for\nyour AI assistant. Setup takes about two minutes.\n\n## Prerequisites\n\n- **Node.js** v18 or later (includes `npx`)\n- An AI assistant that supports MCP (see\n  [supported assistants](/home/getting-started/mcp-server-overview))\n\n## How It Works\n\nYou don't run the MCP server yourself. Instead, you add a small JSON config to\nyour AI assistant telling it _how_ to start the server. The assistant launches\nthe server automatically when a session begins and communicates with it behind\nthe scenes.\n\nAll of the configuration snippets below follow this pattern.\n\n## Installation\n\n### Quick Start (npx — recommended)\n\nThe simplest option. Your assistant runs `npx` to pull the latest published\nversion on each session start — no local install needed.\n\nThe `-y` flag in the snippets below tells npx to skip the install confirmation\nprompt so the server starts without user interaction.\n\n### Monorepo (contributors)\n\nIf you're developing inside the Nimbus monorepo, the MCP server is already\navailable as a workspace package. Build it once:\n\n```bash\npnpm --filter @commercetools/nimbus-mcp build\n```\n\nThen use this server entry in place of the npx snippets below:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"node\",\n      \"args\": [\"packages/nimbus-mcp/dist/index.js\"]\n    }\n  }\n}\n```\n\n## Configuration by Assistant\n\nEach AI assistant reads MCP server configuration from a JSON file. Add the\n`nimbus` entry to the appropriate file for your tool.\n\n### Claude Code\n\nAdd to your project's `.mcp.json` so every team member on the repo gets the\nserver automatically, or to `~/.claude/mcp.json` to enable it across all your\nprojects:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nClaude Code discovers the server automatically on the next session start.\n\n### Claude Desktop\n\nOpen **Settings → Developer → Edit Config**, or edit the config file directly:\n\n- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`\n- **Windows:** `%APPDATA%\\Claude\\claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### VS Code (Copilot)\n\nCreate or edit `.vscode/mcp.json` in your workspace root.\n\n> **Note:** VS Code uses `\"servers\"` as the top-level key, not `\"mcpServers\"`\n> like the other assistants.\n\n```json\n{\n  \"servers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nMCP support is built into VS Code 1.99+. Open the Copilot chat panel — if the\nserver is configured correctly, Copilot will discover it automatically.\n\n### Cursor\n\nCreate or edit `.cursor/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nCursor discovers the server on the next composer session.\n\n### Windsurf\n\nCreate or edit `.windsurf/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nWindsurf picks up new servers automatically.\n\n## Verify the Setup\n\nAfter saving the configuration, open a new chat session in your assistant and\nask:\n\n> _\"List all available Nimbus components\"_\n\nThe assistant should call the `list_components` tool and return a list of\ncomponent names and descriptions. If this works, the MCP server is connected\nand ready to use.\n\nYou can also try more specific queries:\n\n- _\"What props does the Button component accept?\"_\n- _\"What spacing tokens are available in Nimbus?\"_\n- _\"Find an icon for a shopping cart\"_\n- _\"How do I migrate PrimaryButton from UI Kit to Nimbus?\"_\n\n### Troubleshooting\n\n| Symptom                            | Likely cause                                  | Fix                                                          |\n| ---------------------------------- | --------------------------------------------- | ------------------------------------------------------------ |\n| Assistant doesn't see Nimbus tools | Config file not found or malformed JSON        | Check file path and validate JSON syntax                     |\n| `npx` command not found            | Node.js not on the assistant's PATH            | Ensure `node` (v18+) and `npx` are available in your shell   |\n| Tools return \"data not found\"      | Monorepo users: package not built              | Run `pnpm build` from the repo root (npx users are unaffected) |\n| Stale component data               | Using an older cached npx version              | Run `npx @commercetools/nimbus-mcp@latest` to clear cache    |\n",
+      "mdx": "\n# MCP Server Setup\n\nThis guide walks through installing the Nimbus MCP server and configuring it for\nyour AI assistant. Setup takes about two minutes.\n\n## Prerequisites\n\n- **Node.js** v18 or later (includes `npx`)\n- An AI assistant that supports MCP (see\n  [supported assistants](/home/getting-started/mcp-server-overview))\n\n## How It Works\n\nYou don't run the MCP server yourself. Instead, you add a small JSON config to\nyour AI assistant telling it _how_ to start the server. The assistant launches\nthe server automatically when a session begins and communicates with it behind\nthe scenes.\n\nAll of the configuration snippets below follow this pattern.\n\n## Installation\n\n### Quick Start (npx — recommended)\n\nThe simplest option. Your assistant runs `npx` to pull the latest published\nversion on each session start — no local install needed.\n\nThe `-y` flag in the snippets below tells npx to skip the install confirmation\nprompt so the server starts without user interaction.\n\n### Monorepo (contributors)\n\nIf you're developing inside the Nimbus monorepo, the MCP server is already\navailable as a workspace package. Build it once:\n\n```bash\npnpm --filter @commercetools/nimbus-mcp build\n```\n\nThen use this server entry in place of the npx snippets below:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"node\",\n      \"args\": [\"packages/nimbus-mcp/dist/index.js\"]\n    }\n  }\n}\n```\n\n## Configuration by Assistant\n\nEach AI assistant reads MCP server configuration from a JSON file. Add the\n`nimbus` entry to the appropriate file for your tool.\n\n### Claude Code\n\nThe recommended way to add the server for all your projects is via the CLI:\n\n```bash\nclaude mcp add -s user nimbus-mcp npx -- -y @commercetools/nimbus-mcp\n```\n\nThis writes the server config to `~/.claude.json` and makes it available in all\nsessions.\n\nAlternatively, add a `nimbus` entry to your project's `.mcp.json` so every team\nmember on the repo gets the server automatically:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nClaude Code discovers the server automatically on the next session start.\n\n### Claude Desktop\n\nOpen **Settings → Developer → Edit Config**, or edit the config file directly:\n\n- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`\n- **Windows:** `%APPDATA%\\Claude\\claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nRestart Claude Desktop after saving.\n\n### VS Code (Copilot)\n\nCreate or edit `.vscode/mcp.json` in your workspace root.\n\n> **Note:** VS Code uses `\"servers\"` as the top-level key, not `\"mcpServers\"`\n> like the other assistants.\n\n```json\n{\n  \"servers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nMCP support is built into VS Code 1.99+. Open the Copilot chat panel — if the\nserver is configured correctly, Copilot will discover it automatically.\n\n### Cursor\n\nCreate or edit `.cursor/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nCursor discovers the server on the next composer session.\n\n### Windsurf\n\nCreate or edit `.windsurf/mcp.json` in your workspace root:\n\n```json\n{\n  \"mcpServers\": {\n    \"nimbus\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@commercetools/nimbus-mcp\"]\n    }\n  }\n}\n```\n\nWindsurf picks up new servers automatically.\n\n## Verify the Setup\n\nAfter saving the configuration, open a new chat session in your assistant and\nask:\n\n> _\"List all available Nimbus components\"_\n\nThe assistant should call the `list_components` tool and return a list of\ncomponent names and descriptions. If this works, the MCP server is connected\nand ready to use.\n\nYou can also try more specific queries:\n\n- _\"What props does the Button component accept?\"_\n- _\"What spacing tokens are available in Nimbus?\"_\n- _\"Find an icon for a shopping cart\"_\n- _\"How do I migrate PrimaryButton from UI Kit to Nimbus?\"_\n\n### Troubleshooting\n\n| Symptom                            | Likely cause                                  | Fix                                                          |\n| ---------------------------------- | --------------------------------------------- | ------------------------------------------------------------ |\n| Assistant doesn't see Nimbus tools | Config file not found or malformed JSON        | Check file path and validate JSON syntax                     |\n| `npx` command not found            | Node.js not on the assistant's PATH            | Ensure `node` (v18+) and `npx` are available in your shell   |\n| Tools return \"data not found\"      | Monorepo users: package not built              | Run `pnpm build` from the repo root (npx users are unaffected) |\n| Stale component data               | Using an older cached npx version              | Run `npx @commercetools/nimbus-mcp@latest` to clear cache    |\n",
       "toc": [
         {
           "value": "Prerequisites",