21st.dev Magic + Claude Code: Complete MCP Integration

21st.dev Magic is a MCP server that Create crafted UI components inspired by the best 21st.dev design engineers..

When integrated with Claude Code, you can:

• Generate crafted UI components using AI design patterns
• Live preview of generated components
• Full TypeScript support for generated components

This guide provides step-by-step instructions to set up 21st.dev Magic in Claude Code, including configuration, examples, and troubleshooting.

What You'll Achieve

After completing this setup:

• 21st.dev Magic will be fully integrated and operational
• You can use 21st.dev Magic tools directly in Claude Code
• All 21st.dev Magic capabilities will be available for your workflows
• Access to 4 different tools

Prerequisites

Before starting, ensure you have:

• 21st.dev account
• API key
• 21st.dev Magic API key for authentication
• Claude Code installed and configured
• Compatible operating system (Windows, macOS, Linux)

Installation

Step 1: Install 21st.dev Magic

Manual installation steps:

1. Generate API key from 21st.dev Magic Console
2. Add configuration to IDE-specific JSON config
3. Restart IDE to load MCP server

Configuration

Step 2: Configure Claude Code

1. Install Claude Code

Download and install Claude Code from the official website

Visit: https://claude.ai/code

Note: Claude Code is available as a native application, not via npm

2. Navigate to Project

Open terminal in your project directory where you want to use the MCP server

3. Install MCP Server

Install the MCP server you want to use (e.g., via npm, pip, or other package manager)

4. Configure MCP Server

Add MCP server configuration to project CLAUDE.md file or use --mcp-config flag

Note: CLAUDE.md is preferred for project-specific configuration

5. Test Integration

Start Claude Code and verify MCP server is working

claude

Note: Use interactive mode to test MCP server functionality

Configuration Details

Add to your project's CLAUDE.md file:

## MCP Servers

### 21st.dev Magic
- **Installation**: 21st.dev magic
- **Configuration**: "API_KEY": "your-21st-dev-api-key"
- **Description**: Create crafted UI components inspired by the best 21st.dev design engineers.

Claude Code will automatically detect and load MCP servers from your project context.

Examples

Once configured, you can use 21st.dev Magic in Claude Code:

Create Navigation Bar

Generate a modern responsive navigation component

Ask Claude Code: "/ui create a modern navigation bar with responsive design"

Expected Result: Responsive navigation component with mobile menu, logo placement, and styling

Generate Dashboard Card

Create a dashboard card with metrics display

Ask Claude Code: "/ui design a dashboard card showing user analytics with charts"

Expected Result: Card component with chart integration, metrics display, and responsive layout

Build Form Component

Create a contact form with validation

Ask Claude Code: "/ui create a contact form with validation and modern styling"

Expected Result: Form component with input validation, error states, and submit handling

Design Landing Hero

Generate a landing page hero section

Ask Claude Code: "/ui build a hero section for a SaaS product with CTA buttons"

Expected Result: Hero component with headline, description, call-to-action buttons, and background

Testing Your Setup

1. Run claude in your project directory
2. Ask Claude to list available tools and verify 21st.dev Magic tools are present
3. Test 21st.dev Magic functionality by asking Claude to use specific tools

Test commands:

claude

claude --debug

Troubleshooting

Common Issues

API Key Invalid

Symptoms: Authentication errors, Access denied messages, Server connection failures

Cause: Invalid or expired API key

Solution:

• Generate new API key from 21st.dev Magic Console
• Update API_KEY in IDE configuration
• Restart IDE to reload configuration

IDE Not Detecting MCP Server

Symptoms: MCP commands not available, Server not listed in IDE

Cause: Incorrect configuration file or location

Solution:

• Verify config file is in correct location for your IDE
• Check JSON syntax in configuration file
• Restart IDE after configuration changes
• Use CLI installation for automatic setup

Component Generation Fails

Symptoms: Empty responses, Error messages during generation

Cause: Network issues or service limitations

Solution:

• Check internet connectivity
• Verify API key has sufficient quota
• Try simpler prompts initially
• Contact support if issues persist

TypeScript Errors in Generated Code

Symptoms: Type errors, Compilation failures

Cause: Missing dependencies or type definitions

Solution:

• Install required TypeScript dependencies
• Update @types packages
• Configure TypeScript strict mode properly
• Import necessary type definitions

Server Not Found

Symptoms: Command not found errors, Server tools unavailable

Cause: Server not installed or not in PATH

Solution:

• Verify server installation
• Check PATH environment variable
• Install server globally or in project

Configuration Not Loaded

Symptoms: CLAUDE.md changes not recognized, Old server config used

Cause: CLAUDE.md file not in correct location or format

Solution:

• Ensure CLAUDE.md is in project root
• Verify markdown syntax is correct
• Restart Claude Code session

21st.dev Magic not appearing in Claude Code

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check 21st.dev Magic installation
• Restart Claude Code
• Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with Claude Code:

• Explore all 21st.dev Magic capabilities through Claude Code
• Check out other MCP servers that work with Claude Code
• Join the MCP community for tips and support
• Consider contributing to 21st.dev Magic development

Need Help?

• Search for 21st.dev Magic documentation
• Check the Claude Code MCP guide
• Join the MCP community discussions