.github
@agentience
About .github
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
Config
Add this server to your MCP-compatible client using the configuration below.
{
"mcpServers": {
"react-design-systems-mcp": {
"command": "docker",
"args": [
"pull",
"ghcr.io/agentience/react-design-systems-mcp:latest"
]
}
}
}Tools
No tools detected
We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.
Overview
What is .github?
.github is a Model Context Protocol (MCP) server that provides comprehensive information about React design systems, currently focused exclusively on the AWS Cloudscape Design System. It includes component search, usage guidelines, code generation, and pattern libraries. It is built with FastMCP and TypeScript, targeting developers building React applications with design systems.
How to use .github?
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.
Key features of .github?
- 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
Use cases of .github
- Quickly find and compare Cloudscape components during development
- Generate boilerplate React code for AWS Cloudscape components
- Retrieve usage guidelines and best practices for Cloudscape components
- Validate component property configurations before implementation
- Integrate with Claude Desktop to accelerate frontend development workflows
FAQ from .github
What design systems does .github support?
Currently it only supports the AWS Cloudscape Design System. Future versions plan to add Material UI, Chakra UI, Ant Design, Blueprint, and Mantine.
What are the runtime requirements?
Node.js 24.0.1 or higher and npm 10.x or higher are required.
How can I deploy .github with Docker?
You can pull the image from GitHub Container Registry (ghcr.io/agentience/react-design-systems-mcp:latest) or use Docker Compose from the repository.
What transport types are available?
The server supports stdio (default) and sse (Server-Sent Events) transports, configurable via the --transport flag.
How do I configure .github with Claude Desktop?
Add a mcpServers entry in your Claude Desktop configuration file with the command npx @agentience/react-design-systems-mcp. Example configuration is provided in the README.
Frequently asked questions
What design systems does .github support?
Currently it only supports the AWS Cloudscape Design System. Future versions plan to add Material UI, Chakra UI, Ant Design, Blueprint, and Mantine.
What are the runtime requirements?
Node.js 24.0.1 or higher and npm 10.x or higher are required.
How can I deploy .github with Docker?
You can pull the image from GitHub Container Registry (`ghcr.io/agentience/react-design-systems-mcp:latest`) or use Docker Compose from the repository.
What transport types are available?
The server supports `stdio` (default) and `sse` (Server-Sent Events) transports, configurable via the `--transport` flag.
How do I configure .github with Claude Desktop?
Add a `mcpServers` entry in your Claude Desktop configuration file with the command `npx @agentience/react-design-systems-mcp`. Example configuration is provided in the README.
Basic information
More Media & Design MCP servers
SVGator
SVGatorDrive your SVGator account from any AI assistant. Prompt an animation, get an editable project back, and export it as SVG, Lottie, GIF, MP4, and more, then open it in the editor to finish by hand.
Figma MCP Server
JayArrowzFigma MCP Server with full API functionality
Video Editor MCP server
burningionMCP Interface for Video Jungle
Photoshop MCP Server
loonghaoA Model Context Protocol (MCP) server that interfaces with Adobe Photoshop's Python API. Enables LLMs to execute image editing operations, automate workflows, and manage Photoshop tasks through structured commands and context-aware interactions.
MiniMax MCP
MiniMax-AIOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
Comments