.github
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
- License
- MIT
Explore
- 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
.githubCommand (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
From the repository
- Node.js: 24.0.1 or higher
- npm: 10.x or higher (comes with Node.js 24.0.1)
npm install @agentience/react-design-systems-mcp
npm install -g @agentience/react-design-systems-mcp
To use React Design Systems with Claude Desktop, you can configure it as an MCP server using the npm package. This allows Claude Desktop to automatically launch the server when needed.
Add the following configuration to your Claude Desktop MCP settings file:
Location:
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
Configuration:
{
"mcpServers": {
"react-design-systems": {
"command": "npx",
"args": [
"@agentience/react-design-systems-mcp"
]
}
}
}
If you have the package installed globally or locally:
{
"mcpServers": {
"react-design-systems": {
"command": "react-design-systems-mcp"
}
}
}
For development with a local build:
{
"mcpServers": {
"react-design-systems": {
"command": "node",
"args": [
"/path/to/react-design-systems-mcp/dist/server.js"
],
"cwd": "/path/to/react-design-systems-mcp"
}
}
}
This project can be deployed using Docker. For detailed instructions, see Docker Deployment Guide.
- get_component_usage - Get usage guidelines for a specific component with optional section filtering
- search_usage_guidelines - Search across component usage guidelines with query, section, and component filters
- cloudscape://usage/{componentId} - Direct access to component usage guidelines in markdown format
```bash
Resource: cloudscape://usage/button
search_usage_guidelines({"query": "primary button", "section": "Features"})
compare_components
Compare multiple components and their capabilities
generate_layout_code
Generate multi-component layouts
get_frontend_setup
Get setup instructions for frontend-code mode
get_link_resource
Resolve internal links from usage.md files to appropriate backend resources
npm install -g @agentience/react-design-systems-mcp
- compare_components - Compare multiple components and their capabilities
- generate_layout_code - Generate multi-component layouts
- get_frontend_setup - Get setup instructions for frontend-code mode
- get_link_resource - Resolve internal links from usage.md files to appropriate backend resources
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.mdFeatures
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 capabilitiesCode 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 configurationsAdvanced Functionality
- Usage Guidelines: Comprehensive access to component usage guidelines with hybrid resource/tool approach - Direct access viacloudscape://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
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
