radix

Radix UI MCP Server provides programmatic access to Radix UI libraries including Themes, Primitives, Colors, and component source code. It is designed for AI assistants and tools to fetch semantic, up-to-date Radix UI assets and source snippets on demand. Typical usage is via npx, enabling you to query for component sources, color scales, or entire library data through predefined MCP tools such as themes_get_component_source, primitives_get_component_source, and colors_list_scales. You can also integrate the MCP server into editors or assistants (Claude Desktop, VS Code, Cursor, Continue.dev, etc.) by configuring a local or remote MCP server entry with the appropriate command and arguments. By default, the server runs with all libraries (themes, primitives, colors), and you can constrain it to a single library with the --library option. If you hit GitHub API rate limits, supply a personal access token to boost the limit.

Prerequisites:

• Node.js and npm (or npx available via npm install)
• Internet access to fetch the MCP server package from npm

Step-by-step:

1. Verify Node and npm are installed:

   • node -v
   • npm -v

2. Run the MCP server using npx (no local install required): npx @gianpieropuleo/radix-mcp-server@latest

3. (Optional) Restrict to a specific library (themes, primitives, colors, or all): npx @gianpieropuleo/radix-mcp-server@latest --library themes

4. (Optional) Provide a GitHub token to increase API rate limits:

   • Create a token on GitHub (no scopes needed for public access)
   • Run with token: npx @gianpieropuleo/radix-mcp-server@latest --github-api-key YOUR_TOKEN
   • Or set environment variable: export GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_TOKEN npx @gianpieropuleo/radix-mcp-server@latest

5. For integration, copy the generated mcpServers configuration into your editor or tool (Claude, VS Code, Cursor, etc.).

Tips and common considerations:

• Library options: themes, primitives, colors, or all (default is all).
• Environment variable GITHUB_PERSONAL_ACCESS_TOKEN can help with rate limits and reliability when making GitHub API requests.
• If you are embedding the MCP server in editors or automation tools, you can provide the exact command and arguments (and optionally an env block with the token) as shown in the README examples.
• The server returns tool-based requests, such as { tool: 'themes_get_component_source', arguments: { componentName: 'button' } }, which you can feed to your AI to retrieve component sources or color scales.
• When testing, start with a simple npx call and --help to understand available options and defaults.