.github

Name: .github
Author: agentience

@agentience

.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

#react-design-systems #mcp #ui-patterns

基本情報

カテゴリ

メディアとデザイン

ライセンス

MIT

ランタイム

トランスポート

stdio

公開者

agentience

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

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.