A Model Context Protocol (MCP) server that provides comprehensive information about React design systems, along with code generation capabilities for
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. The .github mcp server wraps that behind the Model Context Protocol, so an assistant can use it through 8 defined tools rather than through you.
Everything the assistant can do here goes through one of these:
get_component_usage — Get usage guidelines for a specific component with optional section filteringsearch_usage_guidelines — Search across component usage guidelines with query, section, and component filterscompare_components — Compare multiple components and their capabilitiesgenerate_layout_code — Generate multi-component layoutsget_frontend_setup — Get setup instructions for frontend-code modeget_link_resource — Resolve internal links from usage.md files to appropriate backend resourcescloudscape — //usage/{componentId} - Direct access to component usage guidelines in markdown formatVerification — 1. Restart Claude Desktop 2. Start a new conversation 3. The React Design Systems MCP server should be automatically available 4. You can use toolsInstallation goes through your MCP client rather than a global install: point it at @agentience/react-design-systems-mcp on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.
Plenty of developer tooling servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. .Github's toolset — get_component_usage, search_usage_guidelines, compare_components and 5 more — is a fair guide to whether it matches your workflow. It is maintained by agentience; worth a glance at recent repository activity before you build anything load-bearing on it.
SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.
| Tool | What it does |
|---|---|
| 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 |
| 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 |
| cloudscape | //usage/{componentId} - Direct access to component usage guidelines in markdown format |
| Verification | 1. Restart Claude Desktop 2. Start a new conversation 3. The React Design Systems MCP server should be automatically available 4. You can use tools like search_components to verify the connection |
{
"mcpServers": {
"react-design-systems": {
"command": "npx",
"args": [
"@agentience/react-design-systems-mcp"
]
}
}
}Configuration as documented by the project. Restart the client after saving.
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.