MCP Tools Reference

Complete reference for all Matrix UI MCP tools available to AI agents.

matrix_list_components

List all available components in the library

Arguments

{
  // No arguments required
}

Response

{
  success: true,
  data: {
    components: ["Button", "Card", "Dialog", ...],
    total: 45,
    byCategory: {
      "ui": ["Button", "Badge", ...],
      "layout": ["Card", "Dialog", ...]
    },
    componentList: [
      {
        name: "Button",
        category: "ui",
        description: "Interactive button component",
        hasSubcomponents: false
      }
    ]
  }
}

matrix_search_components

Search components using natural language

Arguments

{
  query: string      // Natural language search query
  filters?: {
    category?: string
    hasAccessibility?: boolean
    supportsThemes?: boolean
  }
}

Example

matrix_search_components({
  query: "form input with validation",
  filters: {
    category: "forms",
    hasAccessibility: true
  }
})

matrix_get_component

Get detailed specification for a component

Arguments

{
  name: string       // Component name (e.g., "Button", "Card")
}

Response

{
  success: true,
  data: {
    component: {
      name: "Button",
      category: "ui",
      description: "Interactive button component",
      props: {
        variant: { type: "string", required: false },
        size: { type: "string", required: false }
      },
      variants: {
        variant: ["default", "secondary", "destructive", "outline", "ghost", "link"],
        size: ["sm", "default", "lg", "icon"]
      },
      subcomponents: [],
      accessibility: { "aria-label": "recommended" },
      capabilities: { responsive: true, themeable: true },
      examples: [{ name: "Basic", code: "..." }]
    }
  }
}

matrix_find_by_capability

Find components by specific capabilities

Arguments

{
  capability: "responsive" | "themeable" | "animated" | "interactive" | "dataFetching"
  value?: boolean         // Whether capability should be true/false (default: true)
  category?: string       // Filter by category
}

Available Capabilities

responsive

themeable

animated

interactive

dataFetching

Example

matrix_find_by_capability({
  capability: "interactive",
  value: true,
  category: "forms"
})

Common Patterns

Component Discovery Flow

// 1. Search for components
const results = await matrix_search_components({
  query: "user profile display"
})

// 2. Get details for best match
const details = await matrix_get_component({
  name: results.data.results[0].name
})

// 3. Generate implementation
const generated = await matrix_generate_component({
  component: details.data.component.name,
  config: { variant: "default" }
})

// 4. Validate the implementation
const validation = await matrix_validate_usage({
  component: details.data.component.name,
  code: generated.data.code
})

Theme Creation Flow

// 1. Generate theme from primary color
const theme = await matrix_generate_theme({
  name: "custom",
  primaryColor: "#0066cc",
  mode: "both"
})

// 2. Preview the theme using the generated CSS
const preview = await matrix_preview_theme({
  css: theme.data.css
})

// 3. Get specific tokens
const tokens = await matrix_get_design_tokens({
  category: "colors"
})

Validation Workflow

// 1. Validate component usage
const usage = await matrix_validate_usage({
  component: "Form",
  code: generatedCode
})

// 2. Check accessibility
const a11y = await matrix_check_accessibility({
  code: generatedCode
})

// 3. Verify theme compliance
const themeCheck = await matrix_check_theme_compliance({
  code: generatedCode
})

// 4. Get improvement suggestions
const suggestions = await matrix_suggest_improvements({
  component: "Form",
  code: generatedCode
})