使用说明
设计系统MCP服务器
此项目通过以下方式公开一个或多个设计系统 模型上下文协议（MCP）服务器MCP服务器允许基于LLM的工具：
- 了解哪些设计系统注册表可用
- 知道何时以及为什么使用给定的注册表
- 发现可用的UI组件
- 检索使用文档（Markdown）
- 检索实现示例（故事书故事）
- 提供安装和使用指导
项目设置
$ npm install
编译和运行项目
# development
$ npm run start
# watch mode
$ npm run start:dev
# production mode
$ npm run start:prod
配置
MCP服务器使用配置 config/registries.json 文件。此文件定义了将通过MCP服务器公开的设计系统（注册表）。
配置示例
这 config/registries.json 该文件包含一组注册表，每个注册表都有以下属性：
- 名字：设计系统的名称。
- installCommand：安装Design System软件包的命令。
- 描述：设计系统的简要说明。
- 用例：一系列用例（例如HTML、SCSS、Vue）。
- 组件：用于发现组件及其文档的配置。
组件配置
这 components object指定以下对象的路径和文件扩展名：
- Markdown文档：用于组件描述、使用指南和最佳实践。
- 故事书故事：用作代码示例和道具使用的权威来源。
例子：
{
"name": "Mozaic Design System",
"installCommand": "npm install @mozaic-ds/styles",
"description": "SCSS implementation of the Mozaic Design System.",
"useCases": ["HTML", "SCSS"],
"components": {
"basePath": "design-systems/mozaic-styles-main",
"componentDir": "packages/styles",
"componentSubDirs": ["components", "layouts"],
"componentFileExtensions": [".md"],
"storiesDir": "src/stories",
"storiesSubDirs": ["components", "layouts"],
"storiesFileExtensions": [".js"]
}
}
运作原理
- 注册表发现：MCP服务器读取
config/registries.json文件以发现可用的设计系统。 - 组件文档：对于每个注册表，服务器会扫描指定目录中的Markdown文件和故事书故事。
- 曝光工具：MCP服务器公开了允许基于LLM的应用程序执行以下操作的工具：
- 列出可用的注册表。
- 检索注册表详细信息（描述、安装说明）。
- 列出注册表的组件。
- 检索组件文档（Markdown）。
- 检索组件代码示例（故事书故事）。
用法
要使用MCP服务器，请确保：
- 这
config/registries.json文件已正确配置，其中包含设计系统文档和故事书故事的路径。 - Markdown文件和故事书故事在指定位置可用。
配置后，使用以下命令启动服务器：
$ npm run start:dev
MCP服务器将自动公开您的设计系统文档和故事书故事，使其可供基于LLM的工具使用。
