MCP

@cfa/design-system-mcp is in beta

For help or to report issues, reach out in #designsystem on Slack.

@cfa/design-system-mcp is an MCP server that returns CFA Design System data to AI agents: React Core components, props, usage guidance, design tokens, and icons.

Install it through Get started with AI. Use it with the Cursor plugin.

Version alignment

The MCP bundles @cfa/react-core, @cfa/design-tokens-core, and @cfa/icons at the version published with that release. Tool responses match that version’s catalog, props, and docs. They do not track master or whatever happens to be open in your editor.

Install @cfa/design-system-mcp at the same version as @cfa/react-core in your application.

Your app uses	Install MCP at
@cfa/[email protected]	@cfa/[email protected]
@cfa/[email protected]	@cfa/[email protected]

Upgrade both packages in the same change. A mismatch can return props, components, or guidance your app does not ship.

npm

npm install --save-dev @cfa/design-system-mcp@<react-core-version>

Yarn

yarn add --dev @cfa/design-system-mcp@<react-core-version>

pnpm

pnpm add -D @cfa/design-system-mcp@<react-core-version>

Cursor configuration

Add the server to .cursor/mcp.json (project root) or Cursor Settings → MCP:

{
  "mcpServers": {
    "cfa-design-system": {
      "command": "node",
      "args": ["./node_modules/@cfa/design-system-mcp/dist/cli.js"]
    }
  }
}

This runs the package from your project’s node_modules. See Get started for install steps.

These docs cover Cursor. Other MCP clients can run the same cli.js entry point over stdio if they support it.

Available tools

Seven tools ship with the server. Agents get schemas over the MCP protocol. This table is for humans.

Tool	What it does
list_components	Find documented React Core components and recipes
get_component_guidance	Return usage guidance for one component
get_component_props	Return the published prop contract for one export
search_tokens	Find design tokens by name or role
suggest_token	Suggest a token for a CSS property or use case
search_icons	Find brand or system icons
get_icon	Return one icon’s published SVG

Changelog

See the @cfa/design-system-mcp changelog.