🚀 Fluent UI MCP Server

A comprehensive Model Context Protocol (MCP) server that provides intelligent assistance for Fluent UI React component development. This server acts as your AI-powered companion for creating, validating, and maintaining Fluent UI applications following v9 design system patterns.

What is MCP? The Model Context Protocol enables AI assistants to securely access external data sources and tools. This server extends AI capabilities with deep Fluent UI knowledge.

✨ Key Features

🧠 Intelligent Component Knowledge

• 📚 Comprehensive database of 50+ Fluent UI v9 components
• 🔍 Smart component search and discovery
• 📖 Complete props, slots, and usage documentation
• 💡 Real-world examples and best practices
• 🎯 Context-aware recommendations

🎨 Design System Mastery

• 🌈 45+ design tokens across 6 categories (colors, typography, spacing, shadows, borders, motion)
• ✅ Token validation and usage guidance
• 🎭 Semantic color system with accessibility compliance
• 📏 Consistent spacing and typography scales
• 🎬 Motion and animation guidelines

🛠️ Advanced Code Generation

• ⚡ Generate complete v9 component implementations
• 🪝 Create custom hooks following Fluent UI patterns
• 💅 Generate styles using makeStyles and design tokens
• 📝 TypeScript interfaces with full type safety
• 🏗️ Template-based scaffolding for common patterns

✅ Smart Validation & Analysis

• 🔍 Real-time component validation against design specs
• ♿ Accessibility compliance checking (WCAG 2.1)
• 📊 Pattern analysis with scoring (0-100)
• 🚨 Anti-pattern detection and warnings
• � Actionable improvement suggestions

🚀 Quick Start

npx fluentui-mcp-server

Prerequisites

• Node.js 18+
• npm or yarn
• MCP-compatible client

Installation & Setup

# Clone or download the server
cd fluentui-mcp-server

# Install dependencies
npm install

# Build the server
npm run build

# Test the server
npm run test

Running the Server

# Start the MCP server
npm start

# Or run in development mode with hot reload
npm run dev

The published CLI executable points directly to dist/server.js.

🔧 Available Tools

The server provides 12 powerful tools organized into 4 categories:

📚 Component Knowledge Tools

get_component_info

Get comprehensive information about any Fluent UI component.

{
  "name": "get_component_info",
  "arguments": {
    "componentName": "Button"
  }
}

Returns: Complete component documentation including description, props, slots, examples, and accessibility guidelines.

search_components

Find components based on functionality, category, or keywords.

{
  "name": "search_components",
  "arguments": {
    "query": "form input",
    "category": "inputs",
    "limit": 5
  }
}

get_component_props

Get detailed property information for a specific component.

{
  "name": "get_component_props",
  "arguments": {
    "componentName": "Avatar",
    "propName": "size"
  }
}

get_component_examples

Retrieve usage examples for components.

{
  "name": "get_component_examples",
  "arguments": {
    "componentName": "Card",
    "exampleType": "advanced"
  }
}

🎨 Design System Tools

get_design_tokens

Access design tokens by category with usage guidance.

{
  "name": "get_design_tokens",
  "arguments": {
    "category": "colors",
    "includeUsage": true
  }
}

Categories: colors, typography, spacing, shadows, borders, motion

`

... View full README on GitHub