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

$3

- 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

$3

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

$3

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

$3

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

$3

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

Installation

$3

First, install the MCP Fluent UI server globally:

``bash
npm install -g mcp-fluent-ui
`

$3

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

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

Windows users: Use npx.cmd instead of npx:
`json
{
"mcpServers": {
"fluent-ui": {
"command": "npx.cmd",
"args": ["mcp-fluent-ui"]
}
}
}
`

Restart Cursor IDE after adding the configuration.

$3

macOS: Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
`json
{
"mcpServers": {
"fluent-ui": {
"command": "npx",
"args": ["mcp-fluent-ui"]
}
}
}
`

Windows: Add to %APPDATA%\Claude\claude_desktop_config.json:
`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:

$3

`
"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"
`

$3

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

$3


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

$3

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

$3

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

$3

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

$3

`
"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:

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

Basic app setup:
`jsx
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

function App() {
return (

{/ Your generated components /}

);
}
`

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