UX Components MCP Server

Connect AI assistants to UX Components data via the Model Context Protocol.

What is MCP?

The Model Context Protocol (MCP) is an open standard that lets AI assistants access external data and tools. This server exposes the UX Components dataset — 62 components, 68 design systems, and 1,900+ naming mappings — so AI tools can answer questions about component usage, compare design systems, and generate implementation guidance.

Endpoint

POST https://www.ux-components.com/api/mcp

Configuration

Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "ux-components": {
      "url": "https://www.ux-components.com/api/mcp"
    }
  }
}

Claude Code

Add to your project's .mcp.json:

{
  "mcpServers": {
    "ux-components": {
      "type": "url",
      "url": "https://www.ux-components.com/api/mcp"
    }
  }
}

Available Tools

·

lookup

Look up any component or design system. Understands natural language — ask about a component, its states, what it's called in a specific system, or browse by category.

Parameters: query (required) — component name, design system, or natural language question
Examples

Query examples

"button"                          → Full component profile
"toast states"                    → Just the interactive states
"what is toast called in Atlassian" → Cross-system naming
"Form components"                 → All components in a category
"Primer"                          → Design system profile with mappings
"modal"                           → Fuzzy search across names and aliases

Request

curl -X POST https://www.ux-components.com/api/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "lookup",
      "arguments": { "query": "button" }
    }
  }'

recommend

Describe a UI need and get expert component recommendations with reasoning, key states to implement, design system naming, and alternatives to consider.

Parameters: scenario (required) — plain language description of the UI need
Examples

Scenario examples

"user needs to confirm a deletion"     → Alert Dialog + reasoning
"show a list of filterable data"       → Data Table + alternatives
"let users pick multiple tags"         → Chip / Combobox comparison
"display loading while fetching"       → Spinner vs Skeleton vs Progress
"navigate between app sections"        → Tabs vs Navigation Menu

Request

curl -X POST https://www.ux-components.com/api/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "recommend",
      "arguments": { "scenario": "user needs to confirm a deletion" }
    }
  }'

compare

Compare components side by side or see how different design systems implement the same patterns. Returns a structured comparison with use cases, states, and naming differences.

Parameters: query (required) — items to compare, separated by "vs"
Examples

Comparison examples

"dialog vs sheet"                      → Component comparison table
"select vs combobox vs dropdown"       → Three-way comparison
"tabs vs accordion"                    → When to use which
"Material Design vs Atlassian"         → Design system comparison
"Bootstrap vs Ant Design"              → Naming differences

Request

curl -X POST https://www.ux-components.com/api/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "tools/call",
    "params": {
      "name": "compare",
      "arguments": { "query": "dialog vs sheet" }
    }
  }'

All tools accept an optional format parameter: "markdown" (default), "json", or "xml". Legacy tools (get_component, list_components, search_components, etc.) are still supported for backward compatibility.

Test Console

Select a tool, fill in the parameters, and click "Run Tool" to see results.

Response Format

All tools accept an optional format parameter in the arguments: "markdown" (default), "json", or "xml".

· ·
Markdown (default)

Returns human-readable markdown text inside the MCP content envelope.

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [{
      "type": "text",
      "text": "# Button\n**Category:** Action\n
        **Description:** The primary mechanism for
        user-initiated actions.\n\n
        ## When to Use\n
        - Submitting forms\n
        - Triggering dialogs, drawers, or modals\n\n
        ## When to Avoid\n
        - For navigation — use a Link instead\n\n
        ## States\n
        - **Default**: The resting state.\n
        - **Hover**: Background shift on hover.\n
        - **Disabled**: Non-interactive.\n\n
        ## Also Known As\n
        - **Button**: Ant Design, Fluent, Bootstrap...\n
        - **CTA**: Nucleus"
    }]
  }
}
JSON

Pass "format": "json" in the arguments to get structured JSON output.

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "content": [{
      "type": "text",
      "text": {
        "component": {
          "id": "button",
          "name": "Button",
          "category": "Action",
          "description": "The primary mechanism for
            user-initiated actions."
        },
        "when_to_use": [
          "Submitting forms",
          "Triggering dialogs, drawers, or modals",
          "Primary call-to-action on a page"
        ],
        "when_to_avoid": [
          "For navigation — use a Link instead",
          "Vague labels like 'Click here'"
        ],
        "states": [
          { "name": "Default", "description": "The resting state." },
          { "name": "Hover", "description": "Background shift." },
          { "name": "Disabled", "description": "Non-interactive." }
        ],
        "also_known_as": [
          { "term": "Button", "systems": ["Ant Design", "Fluent", "..."] },
          { "term": "CTA", "systems": ["Nucleus"] }
        ],
        "related": ["toggle", "dropdown-menu", "popover"],
        "icons": ["arrow-right", "plus", "check"]
      }
    }]
  }
}
XML

Pass "format": "xml" in the arguments to get XML output.

<?xml version="1.0" encoding="UTF-8"?>
<response tool="lookup">
  <component id="button" category="Action">
    <name>Button</name>
    <description>The primary mechanism for
      user-initiated actions.</description>
  </component>
  <when_to_use>
    <item>Submitting forms</item>
    <item>Triggering dialogs, drawers, or modals</item>
    <item>Primary call-to-action on a page</item>
  </when_to_use>
  <when_to_avoid>
    <item>For navigation — use a Link instead</item>
    <item>Vague labels like 'Click here'</item>
  </when_to_avoid>
  <states>
    <state name="Default">The resting state.</state>
    <state name="Hover">Background shift.</state>
    <state name="Disabled">Non-interactive.</state>
  </states>
  <also_known_as>
    <term name="Button">
      <system>Ant Design</system>
      <system>Fluent</system>
    </term>
    <term name="CTA">
      <system>Nucleus</system>
    </term>
  </also_known_as>
  <related>toggle, dropdown-menu, popover</related>
  <icons>arrow-right, plus, check</icons>
</response>