MCP Server

Give AI coding agents direct access to Deepgram's design system — component names, BEM classes, rendered HTML examples, and design tokens — via the Model Context Protocol.

Overview

The @deepgram/styles package includes a built-in MCP server that exposes the full design system to any MCP-compatible AI agent. Instead of copying docs manually, your AI assistant can query components, look up BEM classes, and get copy-pasteable HTML examples on demand.

list_components

List all components with metadata, tags, and variant/example counts. Filter by category.

get_component

Full component details: BEM classes, variants, and rendered HTML examples ready to paste.

get_design_tokens

Design tokens — colors, spacing, fonts, shadows, and border-radius values.

search_components

Keyword search across component names, titles, tags, descriptions, and categories.

Installation

The MCP server ships with the package. Install @deepgram/styles if you haven't already, then configure your AI tool to use it.

npm install @deepgram/styles

Claude Code

Add the MCP server to your project's .mcp.json in the repository root. Claude Code will detect it automatically.

Via CLI

claude mcp add deepgram-styles --scope project -- npx -y -p @deepgram/styles mcp

Or manually

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

{
  "mcpServers": {
    "deepgram-styles": {
      "command": "npx",
      "args": ["-y", "-p", "@deepgram/styles", "mcp"]
    }
  }
}

Claude Desktop

Open Settings → Developer → Edit Config and add the server to claude_desktop_config.json:

{
  "mcpServers": {
    "deepgram-styles": {
      "command": "npx",
      "args": ["-y", "-p", "@deepgram/styles", "mcp"]
    }
  }
}

Restart Claude Desktop after saving. The Deepgram design system tools will appear in the tools menu.

Cursor

Open Settings → MCP and add a new server, or create .cursor/mcp.json in your project:

{
  "mcpServers": {
    "deepgram-styles": {
      "command": "npx",
      "args": ["-y", "-p", "@deepgram/styles", "mcp"]
    }
  }
}

Windsurf

Open Settings → Cascade → MCP and add the server, or create .windsurf/mcp.json in your project:

{
  "mcpServers": {
    "deepgram-styles": {
      "command": "npx",
      "args": ["-y", "-p", "@deepgram/styles", "mcp"]
    }
  }
}

Custom YAML Path

By default, the server reads the design-system.yaml bundled with the package. To use a custom or modified YAML file, pass the --yaml flag:

{
  "mcpServers": {
    "deepgram-styles": {
      "command": "npx",
      "args": ["-y", "-p", "@deepgram/styles", "mcp", "--yaml", "./path/to/design-system.yaml"]
    }
  }
}

Usage Examples

Once configured, ask your AI agent things like:

"What button variants are available in the Deepgram design system?"

The agent will call get_component with name btn and return all variant classes and HTML examples.

"Build me a card layout using Deepgram styles"

The agent will search for card components, get the BEM classes and HTML structure, and generate correct markup.

"What are the Deepgram brand colors?"

The agent will call get_design_tokens with group colors and return all color tokens with values.

Testing with MCP Inspector

Use the official MCP Inspector to test the server interactively before configuring your AI tool:

npx @modelcontextprotocol/inspector npx -y -p @deepgram/styles mcp

This opens a web UI where you can call each tool, inspect inputs/outputs, and verify the server is returning the data you expect.