FluentUI MCP服务器
模型上下文协议（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）
核心文档工具
| 工具 | 说明 |
|---|---|
query_component | 获取特定组件的完整文档。支持模糊名称匹配。 |
search_docs | 搜索所有文档（组件、模式、企业）。返回排名结果。 |
list_by_category | 列出类别中的所有组件（按钮、窗体、导航等）。 |
get_foundation | 获取设置、主题、样式和架构文档。 |
get_pattern | 获取UI模式文档（表单、布局、导航、模态、状态管理）。 |
get_enterprise | 获取企业级模式（仪表板、管理UI、数据密集型应用程序、可访问性）。 |
情报工具
| 工具 | 说明 |
|---|---|
suggest_components | 给出UI描述，建议使用哪些FluentUI组件以及为什么使用。 |
get_implementation_guide | 将相关文档+模式+示例组合成一个分步实现指南。 |
get_component_examples | 仅从组件的文档中提取代码示例（尽量减少上下文使用）。 |
get_props_reference | 仅从组件的文档中提取props表（快速查找）。 |
实用工具
| 工具 | 说明 |
|---|---|
list_all_docs | 列出所有可用的文档及其说明。 |
reindex | 重新扫描文档文件夹并重建搜索索引。 |
______________________________________________________________________
运作原理
建筑
┌──────────────────────────────────────────────────┐
│ 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 │
└──────────────────────────────────────────────────┘指数化策略
- 初创公司：服务器递归扫描docs文件夹（\<1秒）
- 索引：使用TF-IDF评分构建内存搜索索引
- 服务：从内存提供的所有工具调用（即时，无磁盘I/O）
- 重新索引：The
reindex该工具可以按需刷新索引
文件覆盖范围
| 模块 | 内容 | 文件 |
|---|---|---|
| 基础 | 设置、主题、样式、架构、可访问性 | 7 |
| 组件 | 47+包含道具、示例和最佳实践的组件文档 | 50+ |
| 模式 | 表单模式、布局模式、导航、模态、状态管理 | 30+ |
| 企业 | 应用程序外壳、仪表板、管理UI、数据密集型应用程序、WCAG合规性 | 15+ |
______________________________________________________________________
使用示例
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 patternsAI工作流：构建数据表
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______________________________________________________________________
配置
| 来源 | 优先级 | 示例 |
|---|---|---|
| CLI参数 | 最高 | fluentui-mcp v9 |
FLUENTUI_VERSION env var | 中等 | FLUENTUI_VERSION=v9 |
FLUENTUI_DOCS_PATH env var | 最高（覆盖版本） | FLUENTUI_DOCS_PATH=/my/docs |
| 默认 | 最低 | 捆绑v9文档 |
______________________________________________________________________
为新版本添加文档
要为新的FluentUI版本添加文档，请执行以下操作：
- 创建新文件夹：
docs/v10/（或任何版本） - 遵循与以下相同的文件夹结构
docs/v9/:
docs/v10/
├── 00-overview.md
├── 01-foundation/
├── 02-components/
├── 03-patterns/
└── 04-enterprise/- 服务器自动发现并索引所有markdown文件
- 使用
fluentui-mcp v10为新版本服务
______________________________________________________________________
故障排除
服务器未加载
- 验证安装：
which fluentui-mcp - 手动测试：
fluentui-mcp（应输出到stderr：“FluentUI MCP服务器在stdio上运行”） - 检查MCP设置JSON语法
- 重新启动VS代码/AI助手
工具错误
- “找不到文档路径”：检查版本是否存在于
docs/文件夹 - “找不到组件”：试试
search_docs用更宽泛的术语 - 搜索未返回任何结果：试试
reindex重建搜索索引
演出
- 第一个查询：\<100ms（启动索引后从内存中提供）
- 搜索查询：\<50ms（预构建TF-IDF索引）
- 启动索引：对于约100个markdown文件，\<1秒
______________________________________________________________________
贡献
欢迎投稿！特别是：
- FluentUI新版本的文档
- 附加工具和智能功能
- 搜索引擎改进
- Bug报告和修复
______________________________________________________________________
许可证
麻省理工学院——见 许可证 了解详情。
______________________________________________________________________
另见
- FluentUI反应组件 --正式文件
- 模型上下文协议 --MCP规范
- 克莱恩 --VS代码AI助手