@coinbase/cds-mcp-server 8.35.1 → 8.36.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.36.0 (1/6/2026 PST)
+
+#### 🚀 Updates
+
+- Update MCP Serer setup script to follow latest Claude Code and Cursor guidelines.
+
 ## 8.35.1 ((1/5/2026, 03:28 PM PST))
 
 This is an artificial version bump with no new change.

package/esm/{cds.mdc → cds.md}

@@ -1,13 +1,7 @@
----
-description: 
-globs: *.tsx,*.jsx
-alwaysApply: false
----
-source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.mdc
-
 # CDS Component Priority Rules
 
 ## Component Usage Hierarchy
+
 - CDS is the primary design system for React and React Native in this project.
 - The JS package is `@coinbase/cds-web` for web React apps and `@coinbase/cds-mobile` for mobile React Native apps.
 - ALWAYS prioritize CDS components over ANY other UI components when a CDS equivalent exists. For React Native this includes React Native built-ins. For web this includes any HTML native elements.
@@ -15,11 +9,13 @@ source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.
 - ALWAYS use CDS components even if other local components or screens in the codebase are not currently using them - the goal is to standardize on CDS.
 
 ## Component Research Order
+
 1. FIRST check if there's a CDS component that satisfies the requirement - this is MANDATORY.
 2. ONLY if no suitable CDS component exists, then consider native React Native components.
 3. ONLY if neither CDS nor native components work, suggest custom implementations.
 
 ## Documentation Location
+
 - ALWAYS use the cds mcp server's list-cds-routes mcp tool to list all CDS routes before trying to use a component.
 - ALWAYS inspect the documentation for a component with the get-cds-route mcp tool before using it to understand how to import and how to use it.
 - ALWAYS check examples in the documentation before implementing.
@@ -27,16 +23,19 @@ source: https://github.com/coinbase/cds/blob/master/packages/mcp-server/src/cds.
 - CAREFULLY review the component APIs, props, and usage examples in the documentation.
 
 ## Implementation Guidelines
+
 - MAINTAIN consistent styling and behavior with existing CDS implementations in the codebase.
 - FOLLOW CDS-specific theming and styling patterns.
 - RESPECT CDS component hierarchy and composition patterns.
 - DO NOT mix CDS and non-CDS component styling approaches unless absolutely necessary.
 
 ## When Suggesting Code
+
 - ALWAYS import from @coinbase/cds-mobile for mobile or @coinbase/cds-web for web explicitly.
 - INCLUDE complete imports in your code examples.
 - DEMONSTRATE proper usage of CDS theming and styling.
 - SHOW prop usage according to CDS documentation.
 
 ## Lint Errors
+
 - If there's a lint error, do not discard other components that don't have lint errors.

package/esm/setup.js

@@ -68,21 +68,61 @@ const findRepoRoot = startPath => {
     throw new Error('Could not find repo root');
   }
 };
-const installRules = agentRoot => {
+const CURSOR_MDC_HEADER = "---\ndescription: Apply when working with React components, UI implementations, or Coinbase Design System usage. This rule ensures proper use of CDS components.\n---\n";
+const installCursorRules = agentRoot => {
   try {
-    const sourceFile = path.join(__dirname, 'cds.mdc');
+    const sourceFile = path.join(__dirname, 'cds.md');
     const outputDirectory = path.join(agentRoot, 'rules');
     const outputFile = path.join(outputDirectory, 'cds.mdc');
     if (!fs.existsSync(outputDirectory)) fs.mkdirSync(outputDirectory, {
       recursive: true
     });
+
+    // Read the plain markdown source and prepend the Cursor MDC header
+    const sourceContent = fs.readFileSync(sourceFile, 'utf8');
+    const mdcContent = CURSOR_MDC_HEADER + sourceContent;
+    fs.writeFileSync(outputFile, mdcContent);
+    console.log("\u2705 Copied CDS rules to ".concat(outputFile));
+  } catch (error) {
+    console.error('❌ Failed to copy CDS rules:', error instanceof Error ? error.message : String(error));
+  }
+};
+const installClaudeRules = (repoRoot, agentRoot) => {
+  try {
+    const sourceFile = path.join(__dirname, 'cds.md');
+    const outputDirectory = path.join(agentRoot, 'rules');
+    const outputFile = path.join(outputDirectory, 'cds.md');
+    if (!fs.existsSync(outputDirectory)) fs.mkdirSync(outputDirectory, {
+      recursive: true
+    });
+
+    // Simply copy the plain markdown file for Claude Code
     fs.cpSync(sourceFile, outputFile);
     console.log("\u2705 Copied CDS rules to ".concat(outputFile));
+
+    // Update or create CLAUDE.md with reference to the rules file
+    const claudeMdPath = path.join(repoRoot, 'CLAUDE.md');
+    const claudeRulesReference = '@.claude/rules/cds.md';
+    if (fs.existsSync(claudeMdPath)) {
+      const claudeMdContent = fs.readFileSync(claudeMdPath, 'utf8');
+      if (!claudeMdContent.includes(claudeRulesReference)) {
+        // Add the reference at the beginning of the file
+        const updatedContent = "".concat(claudeRulesReference, "\n\n").concat(claudeMdContent);
+        fs.writeFileSync(claudeMdPath, updatedContent);
+        console.log("\u2705 Added CDS rules reference to ".concat(claudeMdPath));
+      } else {
+        console.log("\u2705 CDS rules reference already exists in ".concat(claudeMdPath));
+      }
+    } else {
+      // Create CLAUDE.md with the reference
+      fs.writeFileSync(claudeMdPath, "".concat(claudeRulesReference, "\n"));
+      console.log("\u2705 Created ".concat(claudeMdPath, " with CDS rules reference"));
+    }
   } catch (error) {
     console.error('❌ Failed to copy CDS rules:', error instanceof Error ? error.message : String(error));
   }
 };
-const installMcpServer = (repoRoot, cursorRoot) => {
+const installCursorMcpServer = (repoRoot, cursorRoot) => {
   const mcpServerConfigPath = path.join(cursorRoot, 'mcp.json');
   let newMcpServerConfig = {
     mcpServers: {}
@@ -119,6 +159,34 @@ const installMcpServer = (repoRoot, cursorRoot) => {
   fs.writeFileSync(mcpServerConfigPath, JSON.stringify(newMcpServerConfig, null, 2));
   console.log("\u2705 Updated MCP server config in ".concat(mcpServerConfigPath));
 };
+const installClaudeMcpServer = repoRoot => {
+  const mcpServerConfigPath = path.join(repoRoot, '.mcp.json');
+  let newMcpServerConfig = {
+    mcpServers: {}
+  };
+
+  // Claude Code doesn't need --prefix args
+  const mcpServerArgs = ['-y', '@coinbase/cds-mcp-server'];
+  if (args.noTelemetry) mcpServerArgs.unshift('DISABLE_CDS_MCP_TELEMETRY=1');
+  const cdsMcpServerConfig = {
+    cds: {
+      command: 'npx',
+      args: mcpServerArgs
+    }
+  };
+  try {
+    const currentMcpServerConfig = JSON.parse(fs.readFileSync(mcpServerConfigPath, 'utf8'));
+    newMcpServerConfig = _objectSpread(_objectSpread({}, currentMcpServerConfig), {}, {
+      mcpServers: _objectSpread(_objectSpread({}, currentMcpServerConfig.mcpServers), cdsMcpServerConfig)
+    });
+  } catch (_unused3) {
+    newMcpServerConfig = {
+      mcpServers: cdsMcpServerConfig
+    };
+  }
+  fs.writeFileSync(mcpServerConfigPath, JSON.stringify(newMcpServerConfig, null, 2));
+  console.log("\u2705 Updated MCP server config in ".concat(mcpServerConfigPath));
+};
 for (const agentValue of selectedAgents) {
   const agent = agentOptions.find(agent => agent.value === agentValue);
   if (!agent) {
@@ -130,6 +198,11 @@ for (const agentValue of selectedAgents) {
   console.log('You can opt out by running setup with the --no-telemetry flag.');
   const repoRoot = findRepoRoot(process.cwd());
   const agentRoot = path.join(repoRoot, agent.directory);
-  installRules(agentRoot);
-  installMcpServer(repoRoot, agentRoot);
+  if (agent.value === 'cursor') {
+    installCursorRules(agentRoot);
+    installCursorMcpServer(repoRoot, agentRoot);
+  } else if (agent.value === 'claude') {
+    installClaudeRules(repoRoot, agentRoot);
+    installClaudeMcpServer(repoRoot);
+  }
 }

package/mcp-docs/web/components/AreaChart.txt

@@ -725,8 +725,8 @@ function XAxisGradient() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/BarChart.txt

@@ -1129,8 +1129,8 @@ function UpdatingChartValues() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/LineChart.txt

@@ -2052,8 +2052,8 @@ function ForecastAssetPrice() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { label?: string; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/XAxis.txt

@@ -672,6 +672,7 @@ function CustomTickLabelExample() {
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
 | `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
 | `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
 | `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |

package/mcp-docs/web/components/YAxis.txt

@@ -580,6 +580,7 @@ function CustomTickLabelExample() {
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
 | `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
 | `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
 | `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.35.1",
+  "version": "8.36.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
@@ -29,10 +29,6 @@
     "mcp-docs",
     "CHANGELOG"
   ],
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "dependencies": {
     "@inquirer/prompts": "^7.5.3",
     "@modelcontextprotocol/sdk": "^1.13.1",
@@ -41,7 +37,6 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1"
   }
 }