快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx fluentui-mcp-server

详细介绍

🚀 流畅的UI MCP服务器

![TypeScript](https://www.typescriptlang.org/) ](https://nodejs.org/) ![MCP](https://modelcontextprotocol.io/) ![Fluent UI](https://react.fluentui.dev/)

全面 模型上下文协议（MCP）服务器 为Fluent UI React组件开发提供智能辅助。此服务器充当您的AI驱动伙伴，用于按照v9设计系统模式创建、验证和维护Fluent UI应用程序。

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

✨ 主要特点

🧠 智能元件知识

📚 综合数据库 50+流畅的UI v9组件
🔍 智能组件搜索和发现
📖 完整的道具、插槽和使用文档
💡 真实世界的例子和最佳实践
🎯 情境感知建议

🎨 设计系统掌握

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

🛠️ 高级代码生成

⚡ 生成完整的v9组件实现
🪝 按照Fluent UI模式创建自定义挂钩
💅 使用生成样式 makeStyles 以及设计代币
📝 具有完全类型安全的TypeScript接口
🏗️ 基于模板的常见图案脚手架

✅ 智能验证与分析

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

🚀 快速开始

npx fluentui-mcp-server

先决条件

Node.js 18+
npm或纱线
MCP兼容客户端

安装和设置

# Clone or download the server
cd fluentui-mcp-server

# Install dependencies
npm install

# Build the server
npm run build

# Test the server
npm run test

运行服务器

# Start the MCP server
npm start

# Or run in development mode with hot reload
npm run dev

已发布的CLI可执行文件直接指向 dist/server.js.

🔧 可用工具

服务器提供 12个强大的工具 分为4类：

📚 组件知识工具

`get_component_info`

获取有关任何Fluent UI组件的全面信息。

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

退货： 完整的组件文档，包括描述、道具、插槽、示例和可访问性指南。

`search_components`

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

{
  "name": "search_components",
  "arguments": {
    "query": "form input",
    "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": "A card component for user profiles with avatar and bio"
  }
}

组件类型： 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+流畅的UI v9组件 在所有类别中：

🔤 Input Components (15+)

按钮（+变体：复合按钮、菜单按钮、拼接按钮、切换按钮）
复选框、收音机、开关 -选择控件
输入、文本区域、旋转按钮 -文本输入组件
组合框、下拉菜单、选择 -选择组件
滑块，评级 -值输入组件
搜索框、标记选择器 -高级输入模式

📊 Data Display Components (12+)

Avatar，AvatarGroup -用户表示
徽章，计数器徽章，PresenceBadge -状态指示器
文本、标签 -排版组件
图像，骨架 -介质和加载状态
列表、DataGrid、表 -数据展示
树，手风琴 -分层数据

🏗️ Layout & Surface Components (8+)

卡（+变体：CardHeader、CardPreview、CardFooter）
抽屉分隔器 -空间划分
对话框，模态 -叠加组件
字段，字段组 -表单布局

🧭 Navigation Components (8+)

面包屑，链接 -助航设备
菜单，菜单列表 -操作菜单
导航，选项卡列表 -主导航
工具栏、命令栏 -操作工具栏

💬 Feedback Components (10+)

消息栏、信息栏 -系统消息
祝酒词、通知 -临时反馈
Popover，工具提示 -背景信息
教学海报 -教育覆盖
ProgressBar，Spinner -加载状态

🎨 设计令牌系统

通过以下方式访问完整的Fluent UI设计令牌系统 45+代币 分为6类：

🌈 颜色（8个标记）

colorNeutralForeground1; // #242424 - Primary text
colorNeutralBackground1; // #ffffff - Default background
colorBrandBackground; // #0078d4 - Primary brand
colorStatusSuccessBackground1; // Success states
colorStatusErrorBackground1; // Error states
// ... and more

📝 排版（9个标记）

fontFamilyBase; // 'Segoe UI', system fonts
fontSizeBase100; // 10px
fontSizeBase200; // 12px
fontSizeBase300; // 14px
fontWeightRegular; // 400
fontWeightSemibold; // 600
// ... complete scale

📏 间距（11个标记）

spacingHorizontalXS; // 2px
spacingHorizontalS; // 4px
spacingHorizontalM; // 8px
spacingHorizontalL; // 12px
spacingHorizontalXL; // 16px
// ... full spacing scale

🌫️ 阴影（4个标记）

shadow2; // Subtle elevation
shadow4; // Card elevation
shadow8; // Dialog elevation
shadow16; // Maximum elevation

🔲 边框（7个标记）

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

🎬 运动（6个代币）

durationUltraFast; // 50ms
durationFaster; // 100ms
durationFast; // 150ms
durationNormal; // 200ms
curveAccelerateMax; // Easing curves
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": "A card showing user avatar, name, and role"}}}' | node dist/server.js

示例3：验证组件设计

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

🏗️ 建筑

服务器结构

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

关键技术

MCP-SDK：模型上下文协议实现
TypeScript：全类型安全和智能感知
Node.js：运行时环境
JSON-RPC 2.0：通信协议

🔧 发展

开发工作流程

# 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

项目脚本

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

测试服务器

# 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

🤝 整合

MCP客户端集成

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

克劳德桌面版

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "fluentui": {
      "command": "npx",
      "args": ["-y", "fluentui-mcp-server"]
    }
  }
}

自定义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: "npx",
  args: ["-y", "fluentui-mcp-server"],
});

await client.connect(transport);

📋 验证规则

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

设计验证

✅ 正确使用设计令牌
✅ 一致的间距和排版
✅ 颜色对比度合规性
✅ 组件组成模式

可访问性验证

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

代码质量验证

✅ TypeScript类型安全
✅ 流畅的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许可证-请参阅许可证文件以获取详细信息。

🔗 相关资源

📚 流畅的UI反应组件 -正式文件
🎨 设计标记 -代币系统指南
🏗️ 组件实施指南 -发展模式
🔄 迁移指南 -v8到v9迁移
🔌 模型上下文协议 -MCP规范
🤖 克劳德桌面版 -MCP兼容AI助手

______________________________________________________________________

建于❤️ Fluent UI社区

由以下材料制成模型上下文协议 • 流畅的用户界面v9 • TypeScript

目录标签

代码生成TypeScriptClaudeReact组件开发本地部署设计系统验证UI开发辅助FluentUI

支持客户端

Claude

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

none

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

fluentui-mcp-server

工具数量（toolCount，工具数）

12

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdionone部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/3a3c7c1cd90cf3d5f809245d570c51d9

一个基于模型上下文协议(MCP)的智能服务器，为Fluent UI React组件开发提供知识库、代码生成和设计验证等功能。

继续浏览同类 MCP

更多开发工具 MCP（20,396）返回 MCP 目录

上一个 MCP

Fluentui MCP

为AI助手提供微软FluentUI组件库的智能文档查询服务，通过12种专用工具实现高效准确的组件文档检索与建议。

下一个 MCP

fluidmcp (Fluid AI)

The package manager for fluidmcp to quickly spin up mcp servers behind fastapi

Fluentui MCP Server