UX

You can deploy and use the UX MCP Server to access a broad library of UX knowledge bases and tools from any MCP-compatible client. It provides structured resources on accessibility, usability, design systems, performance, internationalization, and emerging technologies, enabling you to analyze, generate, and validate UX patterns directly within your workflow.

How to use

To use the UX MCP Server, start the server locally and connect your MCP client. Your client can then list available resources, read specific knowledge baselines, and call tools to analyze UI patterns, generate components, validate accessibility, and measure UX metrics. Each resource is addressed by a unique URI such as ux://accessibility/wcag or ux://patterns/ui-patterns. Once connected, you can execute actions like checking color contrast, generating a color palette, or running a usability audit. Your MCP client will expose the server’s capabilities as part of its workflow, enabling seamless integration with your development or design tooling.

How to install

Prerequisites: you need Node.js and npm installed on your machine. You may also run the server via npx for a zero-install option. Follow these steps to install and start the server.

# Install globally (recommended for quick access)
npm install -g @elsahafy/ux-mcp-server

# Or run directly with npx (no installation)
npx @elsahafy/ux-mcp-server

Additional setup notes

If you prefer to build from source, clone the repository, install dependencies, and build the project. After building, you can run the generated server binary or start script as described in the source section.

Security and environment considerations

Operate the server in a trusted environment and limit access to MCP clients that you control. No specific environment variables are required by default in the provided usage examples.

Troubleshooting tips

If the server fails to respond, verify that your MCP client is configured to connect to the running server. Check that the command used to launch the server matches the instructions below and that the client configuration points to the correct executable or process.

Available tools

analyze_accessibility

Check code for WCAG violations and accessibility issues across UI components.

review_usability

Evaluate interfaces against Nielsen's usability heuristics to identify usability issues.

suggest_pattern

Suggest appropriate UI patterns for given use cases based on UX guidelines.

generate_component_example

Create accessible HTML/CSS examples for UI components.

audit_design_system

Review the structure and consistency of a design system and its tokens.

check_contrast

Verify color contrast ratios to meet WCAG standards.

check_responsive

Analyze responsive and mobile-first design behavior across viewports.

suggest_error_message

Provide user-friendly error messages and guidance.

analyze_performance

Identify performance issues related to Core Web Vitals and loading patterns.

check_seo

Analyze HTML for SEO best practices, meta tags, and structured data.

suggest_animation

Recommend UI animations and transitions for interactions.

generate_color_palette

Create accessible color palettes from base colors.

generate_typography_scale

Generate scalable typography systems with modular ratios.

suggest_microcopy

Offer UX writing improvements for UI text and labels.

recommend_form_pattern

Suggest form layouts and validation patterns for usability and accessibility.

suggest_data_visualization

Recommend appropriate charts for data types and accessibility.

generate_accessibility_report

Produce comprehensive WCAG audit reports.

suggest_ab_variant

Propose A/B test variants for optimization.

analyze_information_architecture

Evaluate IA structure, navigation, and content organization.

detect_dark_patterns

Identify potentially deceptive or unethical UI practices.

calculate_ux_metrics

Compute SUS, NPS, CSAT, and task success metrics.

generate_wireframe

Create ASCII wireframes for pages or components.

suggest_microinteraction

Recommend microinteractions with timing and easing.