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

{
  category?: string  // Filter by category (ui, forms, layout, etc.)
  limit?: number     // Maximum results (default: 50)
  offset?: number    // Pagination offset (default: 0)
}

Response

{
  success: true,
  data: {
    components: [
      {
        name: "Button",
        category: "ui",
        description: "Interactive button component",
        variants: ["default", "secondary", "destructive", "outline", "ghost", "link"],
        sizes: ["sm", "default", "lg"]
      }
    ],
    total: 45,
    hasMore: false
  }
}

matrix_search_components

Search components using natural language

Arguments

{
  query: string      // Natural language search query
  filters?: {
    category?: string
    hasAccessibility?: boolean
    supportsThemes?: boolean
    isInteractive?: 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")
  includeExamples?: boolean  // Include usage examples (default: true)
  includeProps?: boolean     // Include prop definitions (default: true)
}

Response

{
  success: true,
  data: {
    component: {
      name: "Button",
      props: [
        {
          name: "variant",
          type: "string",
          required: false,
          default: "default",
          options: ["default", "secondary", "destructive", "outline", "ghost", "link"]
        },
        {
          name: "size",
          type: "string",
          required: false,
          default: "default",
          options: ["sm", "default", "lg"]
        }
      ],
      examples: [...],
      accessibility: {
        wcagLevel: "AA",
        ariaAttributes: ["aria-label", "aria-pressed"],
        keyboardNav: true
      }
    }
  }
}

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.components[0].name
})

// 3. Generate implementation
const code = await matrix_generate_component({
  component: details.data.component.name,
  config: { /* ... */ }
})

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

Theme Creation Flow

// 1. Generate theme from brand colors
const theme = await matrix_generate_theme({
  name: "custom",
  colors: {
    primary: "#0066cc",
    secondary: "#6b7280"
  }
})

// 2. Preview the theme
const preview = await matrix_preview_theme({
  theme: theme.data.theme,
  components: ["Button", "Card", "Input"]
})

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

Validation Workflow

// 1. Validate component usage
const usage = await matrix_validate_usage({
  component: "Form",
  props: { onSubmit: handleSubmit },
  children: formFields
})

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

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

// 4. Get improvement suggestions
const suggestions = await matrix_suggest_improvements({
  code: generatedCode,
  focus: ["accessibility", "performance"]
})