Set up your agent

Cursor and VS Code

The buttons at the top of this page install the server in one click. To share it with the team, commit the config instead:

Cursor

.cursor/mcp.json:

{  "mcpServers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "${workspaceFolder}"]    }  }}

VS Code (Copilot agent mode)

.vscode/mcp.json:

{  "servers": {    "design-system": {      "type": "stdio",      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "${workspaceFolder}"]    }  }}

A client that passes ${workspaceFolder} through unexpanded gets a warning on stderr, and the server falls back to the workspace roots the client reports or its working directory.

Other clients

Every client runs the same stdio command. Replace /absolute/path/to/app with the app's folder; the server also finds the project without --root when the client reports its workspace roots or starts the server in the project folder.

Claude Desktop

Settings → Developer → Edit Config opens claude_desktop_config.json (~/Library/Application Support/Claude/ on macOS, %APPDATA%\Claude\ on Windows):

{  "mcpServers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"]    }  }}

Restart Claude Desktop after saving.

Codex CLI

codex mcp add design-system -- npx -y @dgesteves/design-system-mcp --root /absolute/path/to/app

or in ~/.codex/config.toml:

[mcp_servers.design-system]command = "npx"args = ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"]

GitHub Copilot CLI

copilot mcp add design-system -- npx -y @dgesteves/design-system-mcp --root /absolute/path/to/app

That writes ~/.copilot/mcp-config.json:

{  "mcpServers": {    "design-system": {      "type": "local",      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"],      "tools": ["*"]    }  }}

In a session, /mcp show design-system lists its tools.

Windsurf (Devin Desktop)

Windsurf is now Devin Desktop, and its agent reads the Devin CLI's MCP config: ~/.config/devin/mcp_config.json (%APPDATA%\devin\mcp_config.json on Windows), or .devin/mcp_config.json in the repository to share it with the team:

{  "mcpServers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"]    }  }}

From the terminal, devin mcp add design-system -- npx -y @dgesteves/design-system-mcp --root /absolute/path/to/app adds the same entry.

JetBrains IDEs (AI Assistant and Junie)

For AI Assistant, open Settings → Tools → AI Assistant → Model Context Protocol (MCP), click Add, choose STDIO and paste:

{  "mcpServers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"]    }  }}

Set the server level to the project to run it only there. Junie reads the same format from .junie/mcp/mcp.json in the project, or ~/.junie/mcp/mcp.json for every project.

Zed

In Zed's settings.json:

{  "context_servers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"],      "env": {}    }  }}

Gemini CLI

.gemini/settings.json in the project, or ~/.gemini/settings.json for every project:

{  "mcpServers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"]    }  }}

Grok Build

grok mcp add design-system -- npx -y @dgesteves/design-system-mcp --root /absolute/path/to/app

or in ~/.grok/config.toml (--scope project writes .grok/config.toml in the repository instead):

[mcp_servers.design-system]command = "npx"args = ["-y", "@dgesteves/design-system-mcp", "--root", "/absolute/path/to/app"]

grok mcp doctor design-system starts it and lists its tools. Grok Build also reads a project's .mcp.json once you trust the folder.

Claude Code without the plugin

Use this instead of the plugin, not next to it: both register the same tools.

claude mcp add design-system -- npx -y @dgesteves/design-system-mcp

To share it with your team, add --scope project, which writes .mcp.json at the repository root:

{  "mcpServers": {    "design-system": {      "command": "npx",      "args": ["-y", "@dgesteves/design-system-mcp"]    }  }}

Any other MCP client: run npx -y @dgesteves/design-system-mcp --root /absolute/path/to/app as a stdio server. On native Windows, wrap it as cmd /c npx ....

The server sends usage instructions during the MCP handshake. Clients that ignore them benefit from one line in CLAUDE.md, AGENTS.md or .cursor/rules: "Before writing UI, use the design-system tools. Run check_ui on every file you change and fix all errors."