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 logs

AI responding by using the MCP Server

资源

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

概念验证

检索设计系统信息

AI responding by using the MCP Server

使用视图

AI responding by using the MCP Server

混合两个注册表的响应

AI responding by using the MCP Server

AI responding by using the MCP Server