MCP Cloudscape Assistant

React设计系统

](https://www.npmjs.com/package/@agentience/react-design-systems-mcp)

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 或 -t ：运输类型(stdio 或 sse).违约： stdio
• --port 或 -p ：SSE运输港口。违约： 3001
• --bind 或 -b ：绑定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快速入门

# 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容器注册表的信息，请参阅 .

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"})

文档

• 建筑
• 组件库
• FastMCP实施
• 前端代码模式
• MCP协议指南
• Roo集成指南
• 使用指南

系统提示

• Claude Cloudscape&Amplify专家 -使用AWS Amplify Gen 2将Claude用作Cloudscape专家开发人员的示例系统提示

路线图

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. 打开拉取请求

许可证

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

• React设计系统开发
• React设计系统v1.0.4