How to install React Design Systems MCP in Claude Desktop
To install React Design Systems MCP in Claude Desktop, open Settings, Developer, Edit Config, paste the "react-design-systems-mcp" block into mcpServers in claude_desktop_config.json, and restart the app.
Built from the published package · server updated 16 months ago
- 1
Open the config file
In Claude Desktop, go to Settings, then Developer, then Edit Config.
- 2
Add the server
Paste this into the file. If you already have servers, add the "react-design-systems-mcp" entry inside your existing mcpServers block.
{ "mcpServers": { "react-design-systems-mcp": { "command": "npx", "args": [ "-y", "@agentience/react-design-systems-mcp" ] } } } - 3
Restart Claude Desktop
Quit the app fully and open it again. The server appears under the tools icon in a new chat.
Config file: macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json
MCP servers run with your permissions. If React Design Systems MCP needs an API key, add it under env in the config. Check its README.
Install React Design Systems MCP in another app
Similar servers
Architecture diagrams, explanations and Mermaid source for public GitHub repositories.
Create draw.io diagrams in chat from Mermaid or XML, shown live and interactive. 10,000+ shapes.
Structured visual plans and PR recaps with diagrams, prototypes, annotations, and sharing
Questions
Does React Design Systems MCP work in Claude Desktop?
Yes. Claude Desktop supports local mcp servers through a config file, remote servers as connectors, and React Design Systems MCP installs with the steps above.
React Design Systems MCP does not show up in Claude Desktop. What now?
Restart Claude Desktop fully, check the JSON is valid, and make sure Node.js (for npx) is installed. See common MCP errors and fixes.
Is React Design Systems MCP safe?
It scores 39 of 100. Review the code before you install it, and only give it the access it needs. Grades and details.
