.github

by agentience

8 stars

327 downloads

Not rated

GitHub

Media

About

A Model Context Protocol (MCP) server that provides comprehensive information about React design systems, along with code generation capabilities for common UI patterns. Currently supports AWS Cloudscape Design System, with plans to add support for Material UI, Chakra UI, Ant Des

Details

Author: agentience
GitHub stars: 8
Downloads: 327
Categories: Media

- Search Cloudscape components with advanced filtering
- Get detailed component information including properties, events, and functions
- Access component usage guidelines via cloudscape://usage/{componentId} resources
- Generate component code with customization options
- Validate component props and configurations
- Support for code generation of UI patterns and multi-component layouts

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name .github

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

From the repository

Install globally with npm install -g @agentience/react-design-systems-mcp and run react-design-systems-mcp, or add it as a dependency. For Claude Desktop, configure it as an MCP server in the claude_desktop_config.json using npx @agentience/react-design-systems-mcp. The server supports --transport (stdio or sse), --port, and --bind parameters.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        ".github": {
            "react-design-systems-mcp": {
                "command": "docker",
                "args": [
                    "pull",
                    "ghcr.io/agentience/react-design-systems-mcp:latest"
                ]
            }
        }
    }
}

McpServers

{
    "react-design-systems-mcp": {
        "command": "docker",
        "args": [
            "pull",
            "ghcr.io/agentience/react-design-systems-mcp:latest"
        ]
    }
}

React Design Systems

React Design Systems is a Model Context Protocol (MCP) server that provides comprehensive information about design systems created for React. The current version focuses exclusively on the AWS Cloudscape Design System components, along with code generation capabilities. It's built using the FastMCP framework and TypeScript.

Future versions will expand to support additional popular React design systems including Material UI, Chakra UI, Ant Design, Blueprint, and Mantine.

Change Log

See CHANGELOG.md

Features

Component Information & Search

- Search for Cloudscape components with advanced filtering options - Get detailed information about components including properties, events, and functions - Access component usage guidelines and best practices - Search across component usage guidelines by content, section, or specific component - Get component examples with detailed code snippets - Compare components and their capabilities

Code Generation

- Generate code for components with customization options - Generate code for common UI patterns and layouts - Generate multi-component layouts and compositions - Validate component props and configurations

Advanced Functionality

- Usage Guidelines: Comprehensive access to component usage guidelines with hybrid resource/tool approach - Direct access via cloudscape://usage/{componentId} resource URIs - Advanced search capabilities across all usage content - Section-specific filtering (Features, General guidelines, etc.) - Cross-component content search - Events & Functions: Search and explore component events and function APIs - Pattern Library: Access to design patterns and architectural guidance - Setup Instructions: Get frontend-code mode setup and configuration guidance

Requirements

- Node.js: 24.0.1 or higher
- npm: 10.x or higher (comes with Node.js 24.0.1)

Installation

For Usage as a Dependency

```bash

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

React Design Systems

Change Log

Features

Component Information & Search

Code Generation

Advanced Functionality

Requirements

Installation

For Usage as a Dependency

Install

More like this

Google Maps

BlenderMCP

AWS MCP Servers

Figma Context (Framelink)

KiCAD-MCP-Server

DaVinci Resolve MCP Server