A Model Context Protocol (MCP) server that provides AI assistants with search access to Dialtone's design system: utility classes, design tokens, Vue components, and icons.

Automatically filters deprecated items, swaps discouraged patterns with recommended alternatives, and provides AI-optimized search results.

There are three ways to install the Dialtone MCP Server. Project-scoped installation takes priority over user-scoped when both exist.

Best for team collaboration - everyone uses the same version via version control.

npm install -D @dialpad/dialtone-mcp-server

Create or update .mcp.json in your project root:

{
  "mcpServers": {
    "dialtone": {
      "command": "dialtone-mcp-server"
    }
  }
}

Commit .mcp.json to version control. Restart Claude Code to connect.

Priority: Project-scoped beats user-scoped. The dialtone-mcp-server command resolves from node_modules/.bin/ first.

Available across all your projects. Choose one method:

Option A: Install locally in your user directory

# Install in a dedicated directory
mkdir -p ~/.mcp-servers
cd ~/.mcp-servers
npm install @dialpad/dialtone-mcp-server

# Add to Claude Code
claude mcp add dialtone --scope user dialtone-mcp-server

Option B: Install globally

npm install -g @dialpad/dialtone-mcp-server
claude mcp add dialtone --scope user dialtone-mcp-server

Option C: Use npx (no installation)

claude mcp add dialtone --scope user -- npx -y @dialpad/dialtone-mcp-server

This stores configuration in ~/.claude/mcp.json.

Version checking: When the server starts, you'll see the current version. If outdated, follow the instructions shown.

Project-scoped:

npm install -D @dialpad/dialtone-mcp-server@latest

User-scoped (local directory):

cd ~/.mcp-servers
npm update @dialpad/dialtone-mcp-server

User-scoped (global):

npm update -g @dialpad/dialtone-mcp-server

User-scoped (npx):

No action needed - npx always uses the latest version.

After updating, restart your Claude Code conversation to pick up the new version.

Find CSS utility classes for styling HTML elements.

Example queries:

• padding 8px → d-p8, d-pt8, d-pr8, d-pb8, d-pl8, d-px8, d-py8
• display flex → d-d-flex, d-d-inline-flex
• width 100% → d-w100p
• margin top auto → d-mt-auto
• text align center → d-ta-center

Search for design tokens (CSS variables).

Example queries:

• color foreground primary → --dt-color-foreground-primary
• space 400 → --dt-space-400, --dt-space-400-negative
• font family → --dt-font-family-body, --dt-font-family-expressive
• font weight bold → --dt-font-weight-bold

Discover Vue components with props, events, and slots.

Example queries:

• button → DtButton, DtButtonGroup, DtBanner (29 results)
• modal → DtModal, DtBanner, DtDropdown (6 results)
• checkbox → DtCheckbox, DtCheckboxGroup, DtRadio

Find icons from Dialtone's icon library.

Example queries:

• notification → bell, bell-ring, bell-off, bell-plus
• arrow up → arrow-up, arrow-up-down, arrow-up-left
• profile → user
• calendar → calendar, calendar-plus, calendar-event

Version check shows old version:

• Restart your Claude Code conversation after updating
• The server loads once at conversation start

MCP server not connecting:

For project-scoped:

1. Verify .mcp.json is in your project root with correct format
2. Check package is installed: npm list @dialpad/dialtone-mcp-server
3. Verify bin command exists: ls node_modules/.bin/dialtone-mcp-server
4. Restart Claude Code completely

For user-scoped:

1. List configured servers: claude mcp list
2. Check if dialtone is listed and enabled
3. Test the server: claude mcp get dialtone
4. Check configuration: cat ~/.claude/mcp.json

General:

• Check Claude Code logs for connection errors
• Remember: Project-scoped configuration overrides user-scoped

• MCP Documentation
• Dialtone Docs

For contributors working in the Dialtone monorepo.

From the monorepo root:

pnpm install
pnpm nx run dialtone-mcp-server:build

Try out search queries (must be run from the package directory):

cd packages/dialtone-mcp-server
pnpm run interactive

Or use tsx directly from anywhere:

npx tsx packages/dialtone-mcp-server/interactive-search.ts

Query Format: Use keywords only, not questions.

• ✓ Good: padding 8px, color primary, button
• ✗ Bad: how do I add padding?, what button component exists?

From the package directory:

cd packages/dialtone-mcp-server
pnpm run test

Or from monorepo root:

node packages/dialtone-mcp-server/test-search.js

Expected: Overall Success Rate: 100% (77/77 tests)

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (MacOS) or %APPDATA%/Claude/claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "dialtone": {
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/dialtone/packages/dialtone-mcp-server/build/index.js"
      ]
    }
  }
}

Important:

• Use the absolute path to your dialtone repo
• Restart Claude Desktop completely after updating the config
• Look for the 🔌 icon to confirm connection

Finding your absolute path:

cd /path/to/dialtone
pwd
# Use the output + /packages/dialtone-mcp-server/build/index.js

packages/dialtone-mcp-server/
├── src/
│   ├── index.ts              # MCP server setup
│   ├── types.ts              # TypeScript interfaces
│   ├── data.ts               # Data imports
│   ├── utils/filters.ts      # Smart filtering
│   └── tools/                # Search implementations
│       ├── utility-classes.ts
│       ├── tokens.ts
│       ├── components.ts
│       └── icons.ts
├── build/                    # Compiled output
├── test-search.js           # Automated tests
├── interactive-search.ts    # Interactive CLI tool
└── README.md

• Search Implementation Details
• Icon Search Summary