UX AI MCP Server

A Model Context Protocol (MCP) server for design system parsing and AI-powered component generation. This package provides tools for creating and managing UI prototypes with integrated design system support.

Features

• 🎨 Design System Integration: Parse and utilize popular design systems (Radix UI, etc.)
• 🚀 Prototype Management: Create, list, and manage UI prototypes
• 🌐 Web Interface: Built-in web server for interactive prototype development
• 📦 Component Generation: AI-powered component creation with design system context
• 🔄 Real-time Sync: Live updates and hot reloading for prototypes

Usage

As an MCP Server

Add to your MCP client configuration:

{
  "mcpServers": {
    "ux-ai": {
      "command": "npx",
      "args": ["-y", "@uxai/mcp-server"]
    }
  }
}

Available MCP Tools

• initialize_project - Set up UX AI project structure
• create_prototype - Create new prototypes (component, page, layout)
• list_prototypes - List all available prototypes
• open_web_interface - Launch the web interface
• read_design_system_components - Parse design system components
• get_component_data - Get detailed component information
• get_user_context - Get current user context from web UI

Command Line Usage

# Start the MCP server
ux-ai-mcp

# The server will be available for MCP client connections

Project Structure

When initialized, creates the following structure:

your-project/
├── prototypes/
│   ├── components/
│   ├── pages/
│   └── layouts/
├── design-systems/
└── uxai.json

Web Interface

The package includes a built-in web application

• Live preview of prototypes
• Component browser
• Design system integration

Requirements

• Node.js 18+
• Modern MCP client (like Claude Desktop, Cursor, etc.)

License

MIT

Contributing

This package is part of the UX AI ecosystem. For issues and contributions, please visit the main repository.