AI导哈

React设计系统服务

React Design Systems是一个基于FastMCP框架和TypeScript构建的Model Context Protocol (MCP)服务器，提供关于React设计系统的全面信息，包括组件信息、代码生成和高级功能。

  • by agentience
  • D
  • 本地部署
  • 9 星标
  • 更新于
在 GitHub 查看 agentience/mcp-cloudscape-assistant

使用说明

React设计系统

React Design Systems是一个模型上下文协议（MCP）服务器，提供有关为React创建的设计系统的全面信息。当前版本仅关注AWS Cloudscape设计系统组件以及代码生成功能。它是使用FastMCP框架和TypeScript构建的。

未来的版本将扩展到支持其他流行的React设计系统，包括Material UI、Chakra UI、Ant design、Blueprint和Mantine。

更新日志

看 更改日志.md

特性

组件信息和搜索

  • 搜索具有高级过滤选项的Cloudscape组件
  • 获取有关组件的详细信息，包括属性、事件和函数
  • 访问组件使用指南和最佳实践
  • 按内容、部分或特定组件在组件使用指南中搜索
  • 获取包含详细代码片段的组件示例
  • 比较组件及其功能

代码生成

  • 为具有自定义选项的组件生成代码
  • 为常见的UI模式和布局生成代码
  • 生成多组件布局和组合
  • 验证组件道具和配置

高级功能

  • 使用指南：通过混合资源/工具方法全面获取组件使用指南
    • 通过以下方式直接访问 cloudscape://usage/{componentId} 资源URI
    • 跨所有使用内容的高级搜索功能
    • 特定章节过滤（功能、一般准则等）
    • 跨组件内容搜索
  • 活动与功能：搜索和探索组件事件和函数API
  • 图案库：获取设计模式和架构指导
  • 安装说明：获取前端代码模式设置和配置指南

需求

  • Node.js：24.0.1或更高
  • npm：10.x或更高版本（Node.js 24.0.1附带）

安装

用作依赖项

# Install from npm
npm install @agentience/react-design-systems-mcp

全球安装

# Install globally to use as a CLI tool
npm install -g @agentience/react-design-systems-mcp

# Then you can run it directly
react-design-systems-mcp

Claude桌面配置

要将React Design Systems与Claude Desktop结合使用，您可以使用npm包将其配置为MCP服务器。这允许Claude Desktop在需要时自动启动服务器。

配置文件

将以下配置添加到Claude Desktop MCP设置文件中：

地点：

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • 视窗: %APPDATA%\Claude\claude_desktop_config.json

配置：

{
  "mcpServers": {
    "react-design-systems": {
      "command": "npx",
      "args": [
        "@agentience/react-design-systems-mcp"
      ]
    }
  }
}

命令行参数

服务器支持以下命令行参数：

  • --transport <type> 或 -t <type>：运输类型(stdio 或 sse).违约： stdio
  • --port <number> 或 -p <number>：SSE运输港口。违约： 3001
  • --bind <address> 或 -b <address>：绑定SSE传输的地址。违约： 0.0.0.0

与克劳德一起使用

为了在Claude中使用此MCP服务器时获得最佳效果，请考虑使用专门的系统提示。我们提供了一个示例系统提示，将Claude配置为具有AWS Amplify Gen 2知识的Cloudscape专家开发人员。看 Claude Cloudscape&Amplify专家 了解详情。

高级配置示例

使用自定义参数

{
  "mcpServers": {
    "react-design-systems": {
      "command": "npx",
      "args": [
        "@agentience/react-design-systems-mcp",
        "--transport",
        "stdio"
      ]
    }
  }
}

使用本地安装

如果您在全局或本地安装了该软件包：

{
  "mcpServers": {
    "react-design-systems": {
      "command": "react-design-systems-mcp"
    }
  }
}

开发配置

对于本地构建的开发：

{
  "mcpServers": {
    "react-design-systems": {
      "command": "node",
      "args": [
        "/path/to/react-design-systems-mcp/dist/server.js"
      ],
      "cwd": "/path/to/react-design-systems-mcp"
    }
  }
}

验证

添加配置后：

  1. 重新启动克劳德桌面
  2. 开始新的对话
  3. React Design Systems MCP服务器应自动可用
  4. 你可以使用以下工具 search_components 验证连接

有关连接问题的故障排除，请参阅 MCP协议指南.

Docker部署

这个项目可以使用Docker进行部署。有关详细说明，请参阅 Docker部署指南.

Docker快速入门

# Pull the image from GitHub Container Registry
docker pull ghcr.io/agentience/react-design-systems-mcp:latest

# Run the container
docker run -d -p 3005:3005 --name react-design-systems-mcp ghcr.io/agentience/react-design-systems-mcp:latest

使用Docker Compose

# Clone the repository
git clone https://github.com/agentience/react-design-systems-mcp.git
cd react-design-systems-mcp

# Start with Docker Compose
docker-compose up -d

有关构建Docker镜像并将其发布到GitHub容器注册表的信息，请参阅 Docker发布指南.

FastMCP实施

该项目使用FastMCP框架来构建MCP服务器，以实现更结构化和类型安全的方法。有关FastMCP实现和开发设置的详细信息，请参阅 Developpent.md.

可用工具和资源

MCP工具

组件信息

  • search_components -搜索具有高级过滤功能的组件
  • get_component_details -获取详细的组件信息
  • get_component_properties -获取组件属性及其规格
  • get_component_events -获取组件事件和事件处理信息
  • get_component_functions -获取组件函数和方法API
  • get_component_examples -通过示例ID进行可选筛选，获取组件示例

使用指南

  • get_component_usage -通过可选的部分筛选获取特定组件的使用指南
  • search_usage_guidelines -使用查询、节和组件筛选器在组件使用指南中搜索

代码生成

  • generate_component_code -为具有自定义功能的组件生成代码
  • generate_pattern_code -为常见UI模式生成代码
  • validate_component_props -验证组件属性和配置

模式和搜索

  • search_patterns -搜索设计模式和架构指导
  • search_properties -搜索所有组件的组件属性
  • search_events -使用筛选选项搜索组件事件
  • search_functions -搜索组件函数和方法

实用工具

  • compare_components -比较多个组件及其功能
  • generate_layout_code -生成多组件布局
  • get_frontend_setup -获取前端代码模式的设置说明
  • get_link_resource -解析usage.md文件到相应后端资源的内部链接

MCP资源

组件使用指南

  • cloudscape://usage/{componentId} -直接访问markdown格式的组件使用指南

示例用法

# Search for button-related components
search_components({"query": "button", "category": "actions"})

# Get detailed information about a specific component
get_component_details({"componentId": "button"})

# Access usage guidelines directly
Resource: cloudscape://usage/button

# Search across usage guidelines
search_usage_guidelines({"query": "primary button", "section": "Features"})

# Generate component code
generate_component_code({"componentId": "button", "variant": "primary"})

文档

系统提示

路线图

React Design Systems目前支持AWS Cloudscape设计系统，但我们计划在未来将支持扩展到其他流行的React设计系统：

  • 材质UI：全面支持Google针对React的Material Design实现
  • 查克拉 UI：为可访问和可定制的Chakra UI库提供以组件为中心的支持
  • Ant Design：React应用程序的企业级UI系统
  • 蓝图：支持Palantir的web应用程序UI工具包
  • 巨翅飛魚：具有出色暗模式支持的现代React组件

如果您有兴趣为其他设计系统提供支持，请查看我们的 贡献 指导方针。

作为依赖使用

在项目中将此包用作依赖项时，可以按如下方式导入和使用它：

// CommonJS
const { createReactDesignSystemsServer } = require('@agentience/react-design-systems-mcp');

// ES Modules
import { createReactDesignSystemsServer } from '@agentience/react-design-systems-mcp';

// Create and configure the server
const server = createReactDesignSystemsServer({
  // Configuration options
});

// Start the server
server.start();

贡献

欢迎投稿！请随时提交拉取请求。

  1. 复刻仓库
  2. 创建功能分支(git checkout -b feature/amazing-feature)
  3. 提交您的更改(git commit -m 'Add some amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

许可证

麻省理工学院-参见 许可证 了解更多信息。##可用文档

相关 MCP