MCP Server

The Axiom Model Context Protocol (MCP) server enables AI assistants like Claude Code and Cursor to access the Axiom Design System through real-time access to:

Component documentation and props
Design tokens for colors, spacing, typography, and more
Icon search capabilities
Setup guides and best practices

#
Installation

#
Claude Code

Add the MCP server to your workspace configuration file at .vscode/mcp.json:


{
  "servers": {
    "axiom": {
      "command": "npx",
      "args": ["-y", "@optiaxiom/mcp"]
    }
  }
}

#
Cursor

Add to your Cursor MCP configuration:


{
  "mcpServers": {
    "axiom": {
      "command": "npx",
      "args": ["-y", "@optiaxiom/mcp"]
    }
  }
}

#
Global installation (optional)

For faster startup times, you can install the package globally:


npm install -g @optiaxiom/mcp


pnpm add -g @optiaxiom/mcp


yarn global add @optiaxiom/mcp


bun add --global @optiaxiom/mcp

Then update your configuration to use the global installation:


{
  "servers": {
    "axiom": {
      "command": "axiom-mcp"
    }
  }
}

#
Usage

#
Natural language queries

Once configured, you can ask your AI assistant natural language questions about Axiom:

#
Component Discovery

“What components are available in Axiom?”
“Show me how to use the Badge component”
“Find navigation components”
“Create a form with Input and Button components”

#
Component Details

“What props does the DataTable component accept?”
“Show me examples of using the Alert component”
“How do I use the Tabs component?”

#
Design Tokens

“What color tokens are available?”
“Convert this Figma color #4F576E to an Axiom token”
“What spacing values can I use?”
“Show me font size tokens”

#
Icon Search

“Search for message icons”
“Find arrow icons”
“Show user-related icons”

#
Setup Guides

“Show me the getting started guide”
“How do I configure CSS imports?”
“Explain CSS layers setup”

#
Available Tools

#
Component tools

list_components - List all available Axiom components
get_component - Get detailed information about a specific component
search_components - Search for components by name or description

#
Design token tools

get_tokens - Get all design token mappings (colors, spacing, typography, etc.)

#
Icon tools

search_icons - Search for icons from the @optimizely/axiom-icons package

#
Features

#
Component metadata

The MCP server provides up-to-date component information extracted directly from the @optiaxiom/react package, including:

Component descriptions and usage guidelines
Complete prop definitions with types and defaults
Import statements
Code examples with screenshots
Versioning information

The AI assistant will automatically:

Use correct component names (validates against Figma/external sources)
Apply proper default props (Axiom components may differ from standard HTML/CSS)
Follow Axiom best practices (e.g., using DataTable instead of Table for data display)

#
Design token conversion

Convert Figma design values to Axiom semantic tokens:

Hex colors → fg.*, bg.* tokens
Pixel values → spacing, size tokens
Font specifications → typography tokens

The AI assistant will use semantic tokens instead of hardcoded values.

Search through 385+ licensed Font Awesome Pro icons by keyword or category. The search intelligently matches icon names (e.g., searching “message” finds IconMessages, IconMessageBot, IconMessageLines).