FluentUI MCP Server

Model Context Protocol (MCP) server providing AI assistants with intelligent, context-efficient access to Microsoft FluentUI documentation.

Build production-grade React UIs with FluentUI — powered by AI that actually knows the component library.

What is this?

This is an MCP server that gives AI assistants (Claude, Cline, Cursor, etc.) deep knowledge of the Microsoft FluentUI component library. Instead of the AI guessing at component APIs or hallucinating props, it queries real documentation through specialized tools.

The Problem

AI assistants often:

• ❌ Hallucinate FluentUI component props that don't exist
• ❌ Use outdated v8 patterns when you need v9
• ❌ Load entire documentation sets, wasting context window
• ❌ Miss best practices, accessibility requirements, and patterns

The Solution

This MCP server provides 12 specialized tools that give AI assistants:

• ✅ Accurate, up-to-date component documentation
• ✅ Smart search across 100+ documentation pages
• ✅ Props references, code examples, and patterns on demand
• ✅ Component suggestions based on UI descriptions
• ✅ Implementation guides combining docs + patterns + examples
• ✅ ~90% context window reduction vs loading all docs

Quick Start

Install

npm install -g fluentui-mcp

Configure Cline (VS Code)

Add to your Cline MCP settings:

{
    "mcpServers": {
        "fluentui-docs": {
            "command": "fluentui-mcp"
        }
    }
}

Settings file location:

• macOS: ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
• Windows: %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

Configure Claude Desktop

Add to claude_desktop_config.json:

{
    "mcpServers": {
        "fluentui-docs": {
            "command": "fluentui-mcp"
        }
    }
}

That's it! 🎉

Restart your AI assistant and you'll have access to all FluentUI documentation tools.

Multi-Version Support

The server supports multiple FluentUI versions. Pass the version as an argument:

{
    "mcpServers": {
        "fluentui-v9": {
            "command": "fluentui-mcp",
            "args": ["v9"]
        }
    }
}

You can even run multiple versions simultaneously:

{
    "mcpServers": {
        "fluentui-v9": {
            "command": "fluentui-mcp",
            "args": ["v9"]
        },
        "fluentui-v10": {
            "command": "fluentui-mcp",
            "args": ["v10"]
        }
    }
}

Custom Documentation Path

Point to your own documentation folder:

{
    "mcpServers": {
        "fluentui-docs": {
            "command": "fluentui-mcp",
            "env": {
                "FLUENTUI_DOCS_PATH": "/path/to/your/docs"
            }
        }
    }
}

Available Tools (12)

Core Documentation Tools

| Tool | Description | | ---------------------- | ------------------------------------------------------------------------------------------- | | query_component | Get complete documentation for a specific component. Supports fuzzy name matching. | | search_docs | Search across ALL documentation (components, patterns, enterprise). Returns ranked results. | | list_by_category | List all components in a category (buttons, forms, navigation, etc.). | | get_foundation | Get setup, theming, styling, and architecture documentation. | | get_pattern | Get UI pattern documentation (forms, layout, navigation, modals, state management). | | get_enterprise | Get enterprise-grade patterns (dashboards, admin UIs, data-heavy apps, accessibility). |

Intelligence Tools

| Tool | Description | | ------------------------------ | -------------------------------------------------------------------------------------- | | suggest_components | Given a UI description, suggests which FluentUI components to use and why. | | get_implementation_guide | Combines relevant docs + patterns + examples into a step-by-step implementation guide. | | get_component_examples | Extracts only code examples from a component's docs (minimal context usage). | | get_props_reference | Extracts only the props table from a component's docs (quick lookup). |

Utility Tools

| Tool | Description | | ------------------- | ---------------------------------------------------------------- | | list_all_docs | Lists all available documentation with descriptions. | | reindex | Re-scans the documentation folder and rebuilds the search index. |

How It Works

Architecture

┌──────────────────────────────────────────────────┐
│               MCP Server (stdio)                 │
│    Receives tool calls from AI assistants        │
├──────────────────────────────────────────────────┤
│            12 Specialized Tools                  │
│   query │ search │ suggest │ guide │ ...         │
├──────────────────────────────────────────────────┤
│         In-Memory Document Store                 │
│   ┌───────────┐ ┌────────────┐ ┌──────────┐      │
│   │ Documents │ │ Categories │ │  Search  │      │
│   │   Map     │ │   Index    │ │  Index   │      │
│   └───────────┘ └────────────┘ └──────────┘      │
├──────────────────────────────────────────────────┤
│   Scanner │ Metadata Extractor │ Search Engine   │
├──────────────────────────────────────────────────┤
│         Bundled Documentation (Markdown)         │
│  Foundation │ Components │ Patterns │ Enterprise │
└──────────────────────────────────────────────────┘

Indexing Strategy

1. Startup: Server scans the docs folder recursively (< 1 second)
2. Index: Builds in-memory search index with TF-IDF scoring
3. Serve: All tool calls served from memory (instant, no disk I/O)
4. Reindex: The reindex tool can refresh the index on demand

Documentation Coverage

| Module | Content | Files | | -------------- | -------------------------------------------------------------------- | ----- | | Foundation | Setup, theming, styling, architecture, accessibility | 7 | | Components | 47+ component docs with props, examples, best practices | 50+ | | Patterns | Form patterns, layout patterns, navigation, modals, state management | 30+ | | Enterprise | App shells, dashboards, admin UIs, data-heavy apps, WCAG compliance | 15+ |

Usage Examples

AI Workflow: Building a Login Form

User: "Create a login form with email and password"

AI uses tools:
1. suggest_components({ uiDescription: "login form with email and password" })
   → Suggests: Input, Field, Button, Card

2. get_implementation_guide({ goal: "login form" })
   → Returns combined docs + form patterns + code examples

3. AI implements the form with accurate props and patterns

AI Workflow: Building a Data Table

User: "Create a sortable data table with selection"

AI uses tools:
1. search_docs({ query: "table sorting selection" })
   → Finds: Table, DataGrid, sorting patterns

2. query_component({ componentName: "DataGrid" })
   → Full DataGrid documentation

3. get_component_examples({ componentName: "DataGrid" })
   → Just the code examples for reference

4. AI implements with correct DataGrid API

Development

Setup

git clone https://github.com/blendsdk/fluentui-mcp.git
cd fluentui-mcp
yarn install

Build

yarn build          # Compile TypeScript
yarn watch          # Watch mode

Test

yarn test           # Run tests
yarn test:watch     # Watch mode
yarn test:coverage  # Coverage report

Project Structure

fluentui-mcp/
├── src/
│   ├── index.ts                # MCP server entry point
│   ├── config.ts               # Configuration resolver
│   ├── types/
│   │   └── index.ts            # TypeScript type definitions
│   ├── indexer/
│   │   ├── scanner.ts          # Recursive docs directory scanner
│   │   ├── metadata-extractor.ts # Markdown metadata extraction
│   │   ├── document-store.ts   # In-memory document store
│   │   ├── search-engine.ts    # TF-IDF search engine
│   │   └── index-builder.ts    # Orchestrates indexing at startup
│   ├── tools/
│   │   ├── query-component.ts
│   │   ├── search-docs.ts
│   │   ├── list-by-category.ts
│   │   ├── get-foundation.ts
│   │   ├── get-pattern.ts
│   │   ├── get-enterprise.ts
│   │   ├── suggest-components.ts
│   │   ├── get-implementation-guide.ts
│   │   ├── get-component-examples.ts
│   │   ├── get-props-reference.ts
│   │   ├── list-all-docs.ts
│   │   └── reindex.ts
│   └── __tests__/
│       ├── indexer/
│       ├── tools/
│       └── e2e/
├── docs/
│   └── v9/                     # Bundled FluentUI v9 documentation
│       ├── 00-overview.md
│       ├── 01-foundation/
│       ├── 02-components/
│       ├── 03-patterns/
│       └── 04-enterprise/
├── package.json
├── tsconfig.json
└── vitest.config.ts

Configuration

| Source | Priority | Example | | ---------------------------- | --------------------------- | ----------------------------- | | CLI argument | Highest | fluentui-mcp v9 | | FLUENTUI_VERSION env var | Medium | FLUENTUI_VERSION=v9 | | FLUENTUI_DOCS_PATH env var | Highest (overrides version) | FLUENTUI_DOCS_PATH=/my/docs | | Default | Lowest | Bundled v9 docs |

Adding Documentation for New Versions

To add documentation for a new FluentUI version:

1. Create a new folder: docs/v10/ (or whatever version)
2. Follow the same folder structure as docs/v9/:

   docs/v10/
   ├── 00-overview.md
   ├── 01-foundation/
   ├── 02-components/
   ├── 03-patterns/
   └── 04-enterprise/

3. The server automatically discovers and indexes all markdown files
4. Use fluentui-mcp v10 to serve the new version

Troubleshooting

Server Not Loading

1. Verify installation: which fluentui-mcp
2. Test manually: fluentui-mcp (should output to stderr: "FluentUI MCP Server running on stdio")
3. Check MCP settings JSON syntax
4. Restart VS Code / AI assistant

Tool Errors

1. "Documentation path not found": Check version exists in docs/ folder
2. "Component not found": Try search_docs with broader terms
3. Search returning no results: Try reindex to rebuild the search index

Performance

• First query: < 100ms (served from memory after startup indexing)
• Search queries: < 50ms (pre-built TF-IDF index)
• Startup indexing: < 1 second for ~100 markdown files

Contributing

Contributions welcome! Especially:

• Documentation for new FluentUI versions
• Additional tools and intelligence features
• Search engine improvements
• Bug reports and fixes

License

MIT — see LICENSE for details.

See Also

• FluentUI React Components — Official documentation
• Model Context Protocol — MCP specification
• Cline — VS Code AI assistant