Design Context Server

设计系统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"]
  }
}

运作原理

1. 注册表发现：MCP服务器读取 config/registries.json 文件以发现可用的设计系统。
2. 组件文档：对于每个注册表，服务器会扫描指定目录中的Markdown文件和故事书故事。
3. 曝光工具：MCP服务器公开了允许基于LLM的应用程序执行以下操作的工具：

- 列出可用的注册表。 - 检索注册表详细信息（描述、安装说明）。 - 列出注册表的组件。 - 检索组件文档（Markdown）。 - 检索组件代码示例（故事书故事）。

用法

要使用MCP服务器，请确保：

1. 这 config/registries.json 文件已正确配置，其中包含设计系统文档和故事书故事的路径。
2. Markdown文件和故事书故事在指定位置可用。

配置后，使用以下命令启动服务器：

$ npm run start:dev

MCP服务器将自动公开您的设计系统文档和故事书故事，使其可供基于LLM的工具使用。

资源

• NestJS文档
• 模型上下文协议（MCP）SDK

概念验证

检索设计系统信息

使用视图

混合两个注册表的响应