Get Started with AI

@cfa/design-system-mcp is in beta

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

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

Prerequisites

Cursor installed
A project using @cfa/react-core (see Getting Started — Engineers)
Artifactory access for installing CFA npm packages

1. Install the Cursor plugin

Install design-system-core from the Cursor plugin marketplace. It adds the cfa-design-system and design-tokens skills.

See Cursor plugin for what each skill covers.

2. Install the MCP server

Open your app’s package.json and note the @cfa/react-core version. Install @cfa/design-system-mcp at that same version.

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

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

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

Replace <react-core-version> with your app’s @cfa/react-core version (for example 2.0.0-beta.5).

When you upgrade @cfa/react-core, upgrade @cfa/design-system-mcp in the same change.

3. Connect the MCP server in Cursor

Add the server to .cursor/mcp.json in the 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 copy installed in your project’s node_modules, so the MCP version matches what you installed in step 2.

Restart Cursor or reload the MCP server after changing the configuration.

4. Verify the setup

Open your project in Cursor and ask the agent to:

Pick a CFA pattern for a form layout (plugin skill)
Look up props for a React Core component (MCP tool)

If MCP tools do not show up, check Cursor Settings → MCP and confirm @cfa/design-system-mcp is installed at the expected version.

Package skills

With pnpm 12.11 or later, @cfa/react-core, @cfa/icons and @cfa/design-tokens-core ship agent skills that match the installed package version. After installing or upgrading these packages, approve the skills:

pnpm approve

pnpm then links the approved skills into your project’s agent skill directories. Skills cover:

Package	Skills
`@cfa/react-core`	`cfa-react-core`, `react-core-migrate-to-v2`
`@cfa/icons`	`cfa-icons`
`@cfa/design-tokens-core`	`cfa-design-tokens-core`

Because skills ship with each release, upgrading a package upgrades its skills.

Using npm, Yarn, or an older pnpm? Only pnpm 12.11 or later links skills for you. The skills are plain folders under node_modules/<package>/skills/. Copy or symlink them into your agent’s skill directory, and repeat after each upgrade so they stay matched to the installed version.