MCP Fluent UI Server

A comprehensive MCP (Model Context Protocol) server for Fluent UI v9 that provides extensive component generation, theming, and utility tools for React applications.

Features

🎨 Component Generators (20+ components)

• Inputs: Button, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker
• Display: Card, Badge, Avatar, Spinner, Progress, Toast, Tooltip
• Navigation: Tabs, Menu, Accordion, Dialog, Popover
• Data: Table with sorting/filtering/pagination
• Forms: Complete form patterns with validation

🎭 Theme Tools

• Theme Provider setup
• Dark mode toggle implementation
• Custom design tokens
• Responsive theme configuration

📐 Layout Generators

• Grid layouts (responsive)
• Flexbox layouts
• Sidebar navigation
• Header/navbar layouts
• Complete dashboard layouts

🔧 Pattern Generators

• Form patterns with validation
• Data table with advanced features
• Modal/dialog patterns
• Multi-step wizard/stepper

⚡ Utility Tools

• Custom hooks (useTheme, useBreakpoint, useToast, etc.)
• Accessibility utilities (focus trap, keyboard navigation)
• Performance optimizations (lazy loading, virtualization, memoization)
• Animation utilities
• Form validation utilities

Installation

Install from NPM

First, install the MCP Fluent UI server globally:

npm install -g mcp-fluent-ui

For Cursor IDE

Add to Cursor settings (~/.cursor/config.json):

{
  "mcpServers": {
    "fluent-ui": {
      "command": "npx",
      "args": ["mcp-fluent-ui"]
    }
  }
}

Windows users: Use npx.cmd instead of npx:

{
  "mcpServers": {
    "fluent-ui": {
      "command": "npx.cmd",
      "args": ["mcp-fluent-ui"]
    }
  }
}

Restart Cursor IDE after adding the configuration.

For Claude Desktop

macOS: Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "fluent-ui": {
      "command": "npx",
      "args": ["mcp-fluent-ui"]
    }
  }
}

Windows: Add to %APPDATA%\Claude\claude_desktop_config.json:

{
  "mcpServers": {
    "fluent-ui": {
      "command": "npx.cmd",
      "args": ["mcp-fluent-ui"]
    }
  }
}

Usage

Once installed, you can use natural language prompts to generate Fluent UI components and patterns:

Component Examples

"Generate a Fluent UI button with primary appearance and an icon"
"Create a form with email and password fields with validation"
"Build a data table with sorting and pagination"
"Create a responsive dashboard layout with metrics cards"

Available Tools

The server provides 50+ tools organized into categories:

Components

• fluent-button - Generate Button components
• fluent-input - Generate Input fields with validation
• fluent-card - Generate Card components
• fluent-select - Generate Select/Dropdown components
• fluent-checkbox - Generate Checkbox components
• fluent-radio - Generate RadioGroup components
• fluent-switch - Generate Switch components
• fluent-textarea - Generate Textarea components
• fluent-dialog - Generate Dialog/Modal components
• fluent-menu - Generate Menu components
• fluent-tabs - Generate Tabs components
• fluent-accordion - Generate Accordion components
• fluent-avatar - Generate Avatar components
• fluent-badge - Generate Badge components
• fluent-spinner - Generate Spinner components
• fluent-progress - Generate ProgressBar components
• fluent-tooltip - Generate Tooltip components
• fluent-toast - Generate Toast notifications
• fluent-popover - Generate Popover components
• fluent-datepicker - Generate DatePicker components
• fluent-timepicker - Generate TimePicker components
• fluent-slider - Generate Slider components
• fluent-rating - Generate Rating components

Themes

• fluent-theme-provider - Set up theme provider
• fluent-dark-mode-toggle - Implement dark mode
• fluent-custom-tokens - Create custom design tokens
• fluent-responsive-theme - Responsive theme configuration

Layouts

• fluent-grid-layout - Responsive grid layouts
• fluent-flex-layout - Flexbox layouts
• fluent-sidebar-layout - Sidebar navigation
• fluent-header-layout - Header/navbar layouts
• fluent-dashboard-layout - Complete dashboard

Patterns

• fluent-form-pattern - Forms with validation
• fluent-data-table-pattern - Advanced data tables
• fluent-modal-pattern - Modal/dialog patterns
• fluent-wizard-pattern - Multi-step wizards

Utilities

• fluent-hooks-custom - Custom React hooks
• fluent-accessibility - Accessibility utilities
• fluent-performance - Performance optimizations
• fluent-animations - Animation utilities
• fluent-validation - Form validation

Example Prompts

Basic Component

"Create a Fluent UI button that says 'Submit' with primary appearance"

Complex Form

"Generate a registration form with name, email, password fields and validation"

Dashboard Layout

"Create a dashboard with sidebar navigation, metrics cards, and a data table"

Theme Setup

"Set up Fluent UI with dark mode toggle and custom brand colors"

Data Table

"Build a data table with sorting, filtering, pagination, and row selection"

Project Setup in Your App

After generating components, install Fluent UI in your project:

npm install @fluentui/react-components @fluentui/react-icons

Basic app setup:

import { FluentProvider, webLightTheme } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      {/* Your generated components */}
    </FluentProvider>
  );
}

Development

To contribute or modify the server locally:

1. Install from NPM: npm install mcp-fluent-ui
2. For local development: npm link mcp-fluent-ui
3. Make changes and test locally
4. Submit feedback or issues via NPM package page

Package Information

• NPM Package: mcp-fluent-ui
• Version: 1.0.0
• License: MIT

Support

For issues, questions, or feature requests:

• NPM Package: mcp-fluent-ui
• GitHub Issues: Report issues here
• Repository: GitHub