🚀 Fluent UI MCP 服务器

一个全面的 模型上下文协议 (MCP) 服务器，为 Fluent UI React 组件开发提供智能辅助。此服务器作为您的 AI 助手，帮助您创建、验证和维护遵循 v9 设计系统模式的 Fluent UI 应用程序。

什么是 MCP？ 模型上下文协议使 AI 助手能够安全地访问外部数据源和工具。此服务器通过深入的 Fluent UI 知识扩展了 AI 的能力。

✨ 主要特性

🧠 智能组件知识

• 📚 包含 50 多个 Fluent UI v9 组件的综合数据库
• 🔍 智能组件搜索与发现
• 📖 完整的属性、插槽和使用文档
• 💡 实际案例和最佳实践
• 🎯 上下文感知推荐

🎨 设计系统掌握

• 🌈 跨越 6 类别（颜色、字体、间距、阴影、边框、动画）的 45 多个设计令牌
• ✅ 令牌验证和使用指南
• 🎭 符合可访问性的语义颜色系统
• 📏 一致的间距和字体比例
• 🎬 动画和运动指南

🛠️ 高级代码生成

• ⚡ 生成完整的 v9 组件实现
• 🪝 创建符合 Fluent UI 模式的自定义钩子
• 💅 使用 makeStyles 和设计令牌生成样式
• 📝 具有完整类型安全性的 TypeScript 接口
• 🏗️ 基于模板的常见模式构建

✅ 智能验证与分析

• 🔍 实时组件验证以符合设计规范
• ♿ 符合可访问性检查（WCAG 2.1）
• 📊 模式分析评分（0-100）
• 🚨 反模式检测和警告
• � 可操作的改进建议

🚀 快速开始

预备条件

• Node.js 18+
• npm 或 yarn
• 兼容 MCP 的客户端

安装与设置

# 克隆或下载服务器
cd fluentui-mcp-server

# 安装依赖
npm install

# 构建服务器
npm run build

# 测试服务器
npm run test

运行服务器

# 启动 MCP 服务器
npm start

# 或在开发模式中运行并启用热重载
npm run dev

🔧 可用工具

服务器提供了组织成 4 类别的 12 种强大工具：

📚 组件知识工具

get_component_info

获取关于任何 Fluent UI 组件的综合信息。

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

返回： 完整的组件文档，包括描述、属性、插槽、示例和可访问性指南。

search_components

根据功能、类别或关键词查找组件。

{
  "name": "search_components",
  "arguments": {
    "query": "表单输入",
    "category": "inputs",
    "limit": 5
  }
}

get_component_props

获取特定组件的详细属性信息。

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

get_component_examples

检索组件的使用示例。

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

🎨 设计系统工具

get_design_tokens

按类别访问设计令牌，并附带使用指南。

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

类别： colors, typography, spacing, shadows, borders, motion

validate_design_tokens

检查代码中的令牌使用情况并提出改进建议。

{
  "name": "validate_design_tokens",
  "arguments": {
    "code": "const styles = makeStyles({ color: '#0078d4' });"
  }
}

🛠️ 代码生成工具

generate_component

生成带有 TypeScript 的完整组件实现。

{
  "name": "generate_component",
  "arguments": {
    "componentName": "CustomCard",
    "componentType": "layout",
    "requirements": "用于用户资料的卡片组件，包含头像和简介"
  }
}

组件类型： form-input, layout, feedback, navigation

generate_component_hook

创建符合 Fluent UI 模式的自定义钩子。

{
  "name": "generate_component_hook",
  "arguments": {
    "componentName": "CustomButton",
    "hookType": "state-management"
  }
}

generate_component_styles

生成带有设计令牌的 makeStyles 实现。

{
  "name": "generate_component_styles",
  "arguments": {
    "componentName": "CustomCard",
    "slots": ["root", "header", "content", "footer"]
  }
}

✅ 验证与分析工具

validate_component_design

全面的设计验证并评分。

{
  "name": "validate_component_design",
  "arguments": {
    "componentCode": "const Button = () => { ... }",
    "componentName": "Button"
  }
}

返回： 验证分数（0-100），发现的问题和改进建议。

check_accessibility

分析组件的可访问性合规性。

{
  "name": "check_accessibility",
  "arguments": {
    "componentCode": "const Component = () => { ... }"
  }
}

analyze_component_patterns

检测组件代码中的模式和反模式。

{
  "name": "analyze_component_patterns",
  "arguments": {
    "componentCode": "const Component = () => { ... }"
  }
}

📦 组件数据库

服务器包含了跨越所有类别的 50 多个 Fluent UI v9 组件的综合知识：

<details> <summary><strong>🔤 输入组件 (15+)</strong></summary>

• 按钮（+ 变体：复合按钮、菜单按钮、拆分按钮、切换按钮）
• 复选框、单选框、开关 - 选择控件
• 输入框、文本区域、旋钮 - 文本输入组件
• 组合框、下拉菜单、选择器 - 选择组件
• 滑块、评分 - 值输入组件
• 搜索框、标签选择器 - 高级输入模式

</details> <details> <summary><strong>📊 数据展示组件 (12+)</strong></summary>

• 头像、头像组 - 用户表示
• 徽章、计数徽章、状态徽章 - 状态指示器
• 文本、标签 - 字体组件
• 图像、骨架屏 - 媒体和加载状态
• 列表、数据网格、表格 - 数据展示
• 树、折叠面板 - 层次数据

</details> <details> <summary><strong>🏗️ 布局与表面组件 (8+)</strong></summary>

• 卡片（+ 变体：卡片头部、卡片预览、卡片底部）
• 分割线、抽屉 - 空间划分
• 对话框、模态框 - 覆盖层组件
• 字段、字段组 - 表单布局

</details> <details> <summary><strong>🧭 导航组件 (8+)</strong></summary>

• 面包屑、链接 - 导航辅助
• 菜单、菜单列表 - 动作菜单
• 导航、标签列表 - 主导航
• 工具栏、命令栏 - 动作工具栏

</details> <details> <summary><strong>💬 反馈组件 (10+)</strong></summary>

• 消息栏、信息栏 - 系统消息
• 弹出通知、临时反馈 - 临时反馈
• 气泡提示、工具提示 - 上下文信息
• 教学气泡 - 教育覆盖层
• 进度条、旋转加载 - 加载状态

</details>

🎨 设计令牌系统

访问完整的 Fluent UI 设计令牌系统，跨越 6 类别的 45 多个令牌：

🌈 颜色 (8 个令牌)

colorNeutralForeground1; // #242424 - 主要文本
colorNeutralBackground1; // #ffffff - 默认背景
colorBrandBackground; // #0078d4 - 主要品牌
colorStatusSuccessBackground1; // 成功状态
colorStatusErrorBackground1; // 错误状态
// ... 更多

📝 字体 (9 个令牌)

fontFamilyBase; // 'Segoe UI', 系统字体
fontSizeBase100; // 10px
fontSizeBase200; // 12px
fontSizeBase300; // 14px
fontWeightRegular; // 400
fontWeightSemibold; // 600
// ... 完整比例

📏 间距 (11 个令牌)

spacingHorizontalXS; // 2px
spacingHorizontalS; // 4px
spacingHorizontalM; // 8px
spacingHorizontalL; // 12px
spacingHorizontalXL; // 16px
// ... 完整间距比例

🌫️ 阴影 (4 个令牌)

shadow2; // 微弱的提升
shadow4; // 卡片提升
shadow8; // 对话框提升
shadow16; // 最大提升

🔲 边框 (7 个令牌)

borderRadiusNone; // 0px
borderRadiusSmall; // 2px
borderRadiusMedium; // 4px
borderRadiusLarge; // 6px
strokeWidthThin; // 1px
strokeWidthThick; // 2px

🎬 动画 (6 个令牌)

durationUltraFast; // 50ms
durationFaster; // 100ms
durationFast; // 150ms
durationNormal; // 200ms
curveAccelerateMax; // 缓入曲线
curveDecelerateMax;

💡 使用示例

示例 1：获取组件信息

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "get_component_info", "arguments": {"componentName": "Button"}}}' | node dist/server.js

示例 2：生成自定义组件

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "generate_component", "arguments": {"componentName": "UserCard", "componentType": "layout", "requirements": "显示用户头像、姓名和角色的卡片"}}}' | node dist/server.js

示例 3：验证组件设计

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "validate_component_design", "arguments": {"componentCode": "const Button = () => <button>点击</button>", "componentName": "Button"}}}' | node dist/server.js

🏗️ 架构

服务器结构

src/
├── server.ts              # 主 MCP 服务器实现
├── types.ts              # TypeScript 接口
└── tools/
    ├── component-tools.ts    # 组件知识与搜索
    ├── design-tools.ts       # 设计令牌与验证
    ├── generation-tools.ts   # 代码生成模板
    └── validation-tools.ts   # 设计与可访问性验证
data/
├── components.json       # 组件数据库
└── patterns.json        # 设计模式与模板

关键技术

• MCP SDK：模型上下文协议实现
• TypeScript：完整的类型安全性和 IntelliSense
• Node.js：运行环境
• JSON-RPC 2.0：通信协议

🔧 开发

开发流程

# 安装依赖
npm install

# 开发模式并启用热重载
npm run dev

# 为生产构建
npm run build

# 运行测试
npm test

# 代码检查
npm run lint

# 类型检查
npm run type-check

项目脚本

• npm start - 启动 MCP 服务器
• npm run dev - 开发模式并使用 tsx
• npm run build - TypeScript 编译
• npm test - 测试服务器功能
• npm run lint - ESLint 代码检查

测试服务器

# 测试服务器启动并列出工具
npm run test

# 手动测试使用 curl/echo
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | node dist/server.js

🤝 集成

MCP 客户端集成

此服务器兼容任何 MCP 客户端。以下是集成方法：

Claude Desktop

添加到您的 claude_desktop_config.json：

{
  "mcpServers": {
    "fluentui": {
      "command": "node",
      "args": ["/path/to/fluentui-mcp-server/dist/server.js"]
    }
  }
}

自定义 MCP 客户端

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const client = new Client(
  {
    name: "my-app",
    version: "1.0.0",
  },
  {
    capabilities: {},
  }
);

const transport = new StdioClientTransport({
  command: "node",
  args: ["./dist/server.js"],
});

await client.connect(transport);

📋 验证规则

服务器实现了全面的验证规则：

设计验证

• ✅ 正确使用设计令牌
• ✅ 一致的间距和字体
• ✅ 颜色对比度合规
• ✅ 组件组合模式

可访问性验证

• ✅ ARIA 属性和角色
• ✅ 键盘导航支持
• ✅ 焦点管理
• ✅ 屏幕阅读器兼容性
• ✅ 颜色对比度比率（WCAG 2.1）

代码质量验证

• ✅ TypeScript 类型安全性
• ✅ Fluent UI v9 模式
• ✅ 性能最佳实践
• ✅ 组件组合

🚀 贡献

我们欢迎贡献！以下是开始的方法：

1. 分叉并克隆

git clone https://github.com/yourusername/fluentui-mcp-server.git
cd fluentui-mcp-server

2. 创建功能分支

git checkout -b feature/new-component-support

3. 修改

• 在 data/components.json 中添加新组件
• 在 src/tools/ 中实现新工具
• 为新功能添加测试
• 更新文档

4. 测试修改

npm run build
npm test
npm run lint

5. 提交拉取请求

• 确保所有测试通过
• 为新功能添加文档
• 遵循现有的代码风格

贡献领域

• 🆕 新组件：增加更多的 Fluent UI 组件
• 🛠️ 增强工具：改进现有工具的能力
• 📊 更好的验证：增加更多的验证规则
• 🎨 设计模式：扩展模式库
• 📖 文档：改善指南和示例

📄 许可

MIT 许可证 - 详情见 LICENSE 文件。

🔗 相关资源

• 📚 Fluent UI React 组件 - 官方文档
• 🎨 设计令牌 - 令牌系统指南
• 🏗️ 组件实现指南 - 开发模式
• 🔄 迁移指南 - v8 到 v9 迁移
• 🔌 模型上下文协议 - MCP 规范
• 🤖 Claude Desktop - 兼容 MCP 的 AI 助手

---

<div align="center">

为 Fluent UI 社区打造的 ❤️

使用 [