Fluentui MCP

FluentUI MCP服务器

](https://www.npmjs.com/package/fluentui-mcp)  ](https://nodejs.org/)

模型上下文协议（MCP）服务器 为AI助手提供智能、上下文高效的访问 Microsoft FluentUI文档。

使用FluentUI构建生产级React UI——由真正了解组件库的AI提供支持。

______________________________________________________________________

这是什么？

这是一个MCP服务器，它为AI助手（Claude、Cline、Cursor等）提供了对 微软FluentUI 组件库。而不是AI猜测组件API或 令人产生幻觉的道具，它质疑 真实文件 通过专门的工具。

问题

AI助手经常：

• ❌ 不存在的Hallucinate FluentUI组件道具
• ❌ 需要v9时使用过时的v8模式
• ❌ 加载整个文档集，浪费上下文窗口
• ❌ 缺少最佳实践、可访问性要求和模式

解决方案

此MCP服务器提供 12个专用工具 为AI助手提供：

• ✅ 准确、最新的组件文档
• ✅ 在100多个文档页面上进行智能搜索
• ✅ 按需提供引用、代码示例和模式
• ✅ 基于UI描述的组件建议
• ✅ 结合文档+模式+示例的实施指南
• ✅ ~与加载所有文档相比，上下文窗口减少了90%

______________________________________________________________________

快速开始

安装

npm install -g fluentui-mcp

配置Cline（VS代码）

添加到您的Cline MCP设置中：

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

设置文件位置：

• macOS：

~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

• 窗户： %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

配置Claude桌面

增添 claude_desktop_config.json:

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

就是这样！ 🎉

重新启动您的AI助手，您将可以访问所有FluentUI文档工具。

______________________________________________________________________

多版本支持

服务器支持多个FluentUI版本。将版本作为参数传递：

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

您甚至可以同时运行多个版本：

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

自定义文档路径

指向您自己的文档文件夹：

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

______________________________________________________________________

可用工具（12）

核心文档工具

情报工具

实用工具

______________________________________________________________________

运作原理

建筑

┌──────────────────────────────────────────────────┐
│               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 │
└──────────────────────────────────────────────────┘

指数化策略

1. 初创公司：服务器递归扫描docs文件夹（\<1秒）
2. 索引：使用TF-IDF评分构建内存搜索索引
3. 服务：从内存提供的所有工具调用（即时，无磁盘I/O）
4. 重新索引：The reindex 该工具可以按需刷新索引

文件覆盖范围

______________________________________________________________________

使用示例

AI工作流程：构建登录表单

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工作流：构建数据表

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

______________________________________________________________________

发展

设置

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

构建

yarn build          # Compile TypeScript
yarn watch          # Watch mode

测试

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

项目结构

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

______________________________________________________________________

配置

______________________________________________________________________

为新版本添加文档

要为新的FluentUI版本添加文档，请执行以下操作：

1. 创建新文件夹： docs/v10/ （或任何版本）
2. 遵循与以下相同的文件夹结构 docs/v9/:

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

1. 服务器自动发现并索引所有markdown文件
2. 使用 fluentui-mcp v10 为新版本服务

______________________________________________________________________

故障排除

服务器未加载

1. 验证安装： which fluentui-mcp
2. 手动测试： fluentui-mcp （应输出到stderr：“FluentUI MCP服务器在stdio上运行”）
3. 检查MCP设置JSON语法
4. 重新启动VS代码/AI助手

工具错误

1. “找不到文档路径”：检查版本是否存在于 docs/ 文件夹
2. “找不到组件”：试试 search_docs 用更宽泛的术语
3. 搜索未返回任何结果：试试 reindex 重建搜索索引

演出

• 第一个查询：\<100ms（启动索引后从内存中提供）
• 搜索查询：\<50ms（预构建TF-IDF索引）
• 启动索引：对于约100个markdown文件，\<1秒

______________________________________________________________________

贡献

欢迎投稿！特别是：

• FluentUI新版本的文档
• 附加工具和智能功能
• 搜索引擎改进
• Bug报告和修复

______________________________________________________________________

许可证

麻省理工学院——见 许可证 了解详情。

______________________________________________________________________

另见

• FluentUI反应组件 --正式文件
• 模型上下文协议 --MCP规范
• 克莱恩 --VS代码AI助手