项目简介 该项目是Lime Soda Web Components设计系统的一部分，提供了一个基于Model Context Protocol (MCP) 的上下文服务器。它的核心功能是向大型语言模型（LLM）客户端暴露Web组件的详细信息和设计系统中的设计令牌（Design Tokens），从而让LLM能够理解和利用这些UI构建块和样式定义。通过该服务器，LLM可以查询组件属性、CSS变量、设计令牌分类等，辅助进行UI开发、设计审查或自动化代码生成。

主要功能点

Web组件信息查询: 能够列出所有可用的Web组件，获取特定组件的详细信息（如属性、插槽、CSS部分），并支持按关键字搜索组件。
CSS属性获取: 获取特定组件支持的CSS自定义属性。
设计令牌管理: 列出设计令牌的分类，获取特定分类或所有设计令牌的详细数据。
CSS变量访问: 提供设计系统中所有CSS自定义属性及其值的列表。
令牌搜索: 支持按名称、值或描述搜索设计令牌。
LLM集成: 通过标准化的MCP协议，使LLM客户端能够安全、高效地访问这些设计系统数据和功能。

安装步骤 在您的开发环境中，按照以下步骤安装和准备Lime Soda MCP上下文服务器：

克隆仓库:

git clone https://github.com/lime-soda/web-components.git
cd web-components

安装依赖: 本项目使用pnpm作为包管理器。
```
pnpm install
```

构建Web组件清单和设计令牌: MCP服务器需要Web组件的自定义元素清单和设计令牌文件。请运行以下命令进行构建：

pnpm build
# 或者单独构建MCP服务器的清单和令牌
pnpm --filter @lime-soda/mcp-server build-manifests
cd support/tokens && pnpm build && cd ../..

服务器配置 (供MCP客户端使用) MCP客户端需要配置与该服务器连接。以下是推荐的JSON配置结构，客户端将使用这些信息来启动和通信：

{
  "name": "lime-soda-mcp-server",
  "command": "pnpm",
  "args": [
    "dev:mcp"
  ],
  "description": "连接到Lime Soda设计系统的Model Context Protocol服务器，用于获取Web组件信息和设计令牌。",
  "readme": "https://github.com/lime-soda/web-components#readme",
  "capabilities": {
    "tools": [
      {
        "name": "list-components",
        "description": "列出所有可用的Web组件及其名称、标签名和包名。"
      },
      {
        "name": "get-component-details",
        "description": "通过组件名称或标签名获取特定Web组件的详细信息，包括属性、插槽、CSS部分等。",
        "inputSchema": {
          "nameOrTag": "组件的名称或HTML标签名 (string)"
        }
      },
      {
        "name": "search-components",
        "description": "根据查询字符串搜索Web组件，匹配组件名称、描述、属性或CSS自定义属性。",
        "inputSchema": {
          "query": "用于搜索的关键词 (string)"
        }
      },
      {
        "name": "get-component-css-properties",
        "description": "获取特定Web组件的CSS自定义属性列表。",
        "inputSchema": {
          "nameOrTag": "组件的名称或HTML标签名 (string)"
        }
      },
      {
        "name": "list-token-categories",
        "description": "列出所有可用的设计令牌分类。"
      },
      {
        "name": "get-tokens",
        "description": "获取设计令牌，可选择按分类筛选。",
        "inputSchema": {
          "category": "可选：设计令牌的分类名称 (string)"
        }
      },
      {
        "name": "get-css-variables",
        "description": "获取设计系统中所有可用的CSS自定义属性及其值。"
      },
      {
        "name": "search-tokens",
        "description": "根据查询字符串搜索设计令牌，匹配令牌名称、值或描述。",
        "inputSchema": {
          "query": "用于搜索的关键词 (string)"
        }
      }
    ]
  }
}

基本使用方法 一旦服务器准备就绪，您可以启动它。服务器默认通过标准输入输出（Stdio）进行通信，通常由支持MCP协议的LLM客户端自动启动和管理。

启动MCP服务器 (由MCP客户端调用，或手动测试): 在项目根目录运行：
```
pnpm dev:mcp
```
服务器启动后会监听标准输入，等待MCP客户端的JSON-RPC请求。

与服务器交互 (示例 - 概念性): LLM客户端会发送JSON-RPC请求，例如调用'list-components'工具：

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tool_code/list-components",
  "params": {}
}

服务器将返回所有Web组件的列表作为JSON-RPC响应。其他工具的调用类似，根据其'inputSchema'提供相应的参数。