{ "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. ```json { "name": "search_components", "arguments": { "query": "form input", "category": "inputs", "limit": 5 } } ``` #### `get_component_props` Get detailed property information for a specific component. ```json { "name": "get_component_props", "arguments": { "componentName": "Avatar", "propName": "size" } } ``` #### `get_component_examples` Retrieve usage examples for components. ```json { "name": "get_component_examples", "arguments": { "componentName": "Card", "exampleType": "advanced" } } ``` ### 🎨 Design System Tools #### `get_design_tokens` Access design tokens by category with usage guidance. ```json { "name": "get_design_tokens", "arguments": { "category": "colors", "includeUsage": true } } ``` **Categories:** `colors`, `typography`, `spacing`, `shadows`, `borders`, `motion` #### `validate_design_tokens` Check code for proper token usage and suggest improvements. ```json { "name": "validate_design_tokens", "arguments": { "code": "const styles = makeStyles({ color: '#0078d4' });" } } ``` ### 🛠️ Code Generation Tools #### `generate_component` Generate complete component implementations with TypeScript. ```json { "name": "generate_component", "arguments": { "componentName": "CustomCard", "componentType": "layout", "requirements": "A card component for user profiles with avatar and bio" } } ``` **Component Types:** `form-input`, `layout`, `feedback`, `navigation` #### `generate_component_hook` Create custom hooks following Fluent UI patterns. ```json { "name": "generate_component_hook", "arguments": { "componentName": "CustomButton", "hookType": "state-management" } } ``` #### `generate_component_styles` Generate `makeStyles` implementations with design tokens. ```json { "name": "generate_component_styles", "arguments": { "componentName": "CustomCard", "slots": ["root", "header", "content", "footer"] } } ``` ### ✅ Validation & Analysis Tools #### `validate_component_design` Comprehensive design validation with scoring. ```json { "name": "validate_component_design", "arguments": { "componentCode": "const Button = () => { ... }", "componentName": "Button" } } ``` **Returns:** Validation score (0-100), issues found, and improvement suggestions. #### `check_accessibility` Analyze components for accessibility compliance. ```json { "name": "check_accessibility", "arguments": { "componentCode": "const Component = () => { ... }" } } ``` #### `analyze_component_patterns` Detect patterns and anti-patterns in component code. ```json { "name": "analyze_component_patterns", "arguments": { "componentCode": "const Component = () => { ... }" } } ``` ## 📦 Component Database The server includes comprehensive knowledge for **50+ Fluent UI v9 components** across all categories:

🔤 Input Components (15+)

- **Button** (+ variants: CompoundButton, MenuButton, SplitButton, ToggleButton) - **Checkbox, Radio, Switch** - Selection controls - **Input, Textarea, SpinButton** - Text input components - **Combobox, Dropdown, Select** - Selection components - **Slider, Rating** - Value input components - **SearchBox, TagPicker** - Advanced input patterns

📊 Data Display Components (12+)

- **Avatar, AvatarGroup** - User representation - **Badge, CounterBadge, PresenceBadge** - Status indicators - **Text, Label** - Typography components - **Image, Skeleton** - Media and loading states - **List, DataGrid, Table** - Data presentation - **Tree, Accordion** - Hierarchical data

🏗️ Layout & Surface Components (8+)

- **Card** (+ variants: CardHeader, CardPreview, CardFooter) - **Divider, Drawer** - Space division - **Dialog, Modal** - Overlay components - **Field, FieldGroup** - Form layout

🧭 Navigation Components (8+)

- **Breadcrumb, Link** - Navigation aids - **Menu, MenuList** - Action menus - **Nav, TabList** - Primary navigation - **Toolbar, CommandBar** - Action toolbars

💬 Feedback Components (10+)

- **MessageBar, InfoBar** - System messages - **Toast, Notification** - Temporary feedback - **Popover, Tooltip** - Contextual information - **TeachingPopover** - Educational overlays - **ProgressBar, Spinner** - Loading states

## 🎨 Design Token System Access to the complete Fluent UI design token system with **45+ tokens** across 6 categories: ### 🌈 Colors (8 tokens) ```typescript colorNeutralForeground1; // #242424 - Primary text colorNeutralBackground1; // #ffffff - Default background colorBrandBackground; // #0078d4 - Primary brand colorStatusSuccessBackground1; // Success states colorStatusErrorBackground1; // Error states // ... and more ``` ### 📝 Typography (9 tokens) ```typescript fontFamilyBase; // 'Segoe UI', system fonts fontSizeBase100; // 10px fontSizeBase200; // 12px fontSizeBase300; // 14px fontWeightRegular; // 400 fontWeightSemibold; // 600 // ... complete scale ``` ### 📏 Spacing (11 tokens) ```typescript spacingHorizontalXS; // 2px spacingHorizontalS; // 4px spacingHorizontalM; // 8px spacingHorizontalL; // 12px spacingHorizontalXL; // 16px // ... full spacing scale ``` ### 🌫️ Shadows (4 tokens) ```typescript shadow2; // Subtle elevation shadow4; // Card elevation shadow8; // Dialog elevation shadow16; // Maximum elevation ``` ### 🔲 Borders (7 tokens) ```typescript borderRadiusNone; // 0px borderRadiusSmall; // 2px borderRadiusMedium; // 4px borderRadiusLarge; // 6px strokeWidthThin; // 1px strokeWidthThick; // 2px ``` ### 🎬 Motion (6 tokens) ```typescript durationUltraFast; // 50ms durationFaster; // 100ms durationFast; // 150ms durationNormal; // 200ms curveAccelerateMax; // Easing curves curveDecelerateMax; ``` ## 💡 Usage Examples ### Example 1: Getting Component Information ```bash echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "get_component_info", "arguments": {"componentName": "Button"}}}' | node dist/server.js ``` ### Example 2: Generating a Custom Component ```bash echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "generate_component", "arguments": {"componentName": "UserCard", "componentType": "layout", "requirements": "A card showing user avatar, name, and role"}}}' | node dist/server.js ``` ### Example 3: Validating Component Design ```bash echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "validate_component_design", "arguments": {"componentCode": "const Button = () => ", "componentName": "Button"}}}' | node dist/server.js ``` ## 🏗️ Architecture ### Server Structure ``` src/ ├── server.ts # Main MCP server implementation ├── types.ts # TypeScript interfaces └── tools/ ├── component-tools.ts # Component knowledge & search ├── design-tools.ts # Design tokens & validation ├── generation-tools.ts # Code generation templates └── validation-tools.ts # Design & accessibility validation data/ ├── components.json # Component database └── patterns.json # Design patterns & templates ``` ### Key Technologies - **MCP SDK**: Model Context Protocol implementation - **TypeScript**: Full type safety and IntelliSense - **Node.js**: Runtime environment - **JSON-RPC 2.0**: Communication protocol ## 🔧 Development ### Development Workflow ```bash # Install dependencies npm install # Development mode with hot reload npm run dev # Build for production npm run build # Run tests npm test # Lint code npm run lint # Type checking npm run type-check ``` ### Project Scripts - `npm start` - Start the MCP server - `npm run dev` - Development mode with tsx - `npm run build` - TypeScript compilation - `npm test` - Test server functionality - `npm run lint` - ESLint code checking ### Testing the Server ```bash # Test that server starts and lists tools npm run test # Manual testing with curl/echo echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | node dist/server.js ``` ## 🤝 Integration ### MCP Client Integration This server is compatible with any MCP client. Here's how to integrate: #### Claude Desktop Add to your `claude_desktop_config.json`: ```json { "mcpServers": { "fluentui": { "command": "npx", "args": ["-y", "fluentui-mcp-server"] } } }

fluentui-mcp-server

Installation