21st.dev Magic + JetBrains AI Assistant: 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 JetBrains AI Assistant, 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 JetBrains AI Assistant, 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 JetBrains AI Assistant
• 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
• JetBrains AI Assistant 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 JetBrains AI Assistant

1. Locate your configuration file:

   • Windows: Settings > Tools > AI Assistant > Model Context Protocol (MCP)
   • macOS: Preferences > Tools > AI Assistant > Model Context Protocol (MCP)
   • Linux: Settings > Tools > AI Assistant > Model Context Protocol (MCP)

2. Add server configuration:

{
  "mcpServers": {
    "21stdev-magic": {
      "command": "npx",
      "args": ["-y", "21stdev-magic"],
      "env": {
        "API_KEY": "your-21st-dev-api-key"
      }
    }
  }
}

3. Restart JetBrains AI Assistant

Completely quit and restart JetBrains AI Assistant to load the new configuration.

Examples

Once configured, you can use 21st.dev Magic in JetBrains AI Assistant:

Create Navigation Bar

Generate a modern responsive navigation component

Ask JetBrains AI Assistant: "/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 JetBrains AI Assistant: "/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 JetBrains AI Assistant: "/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 JetBrains AI Assistant: "/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. Start a new conversation in JetBrains AI Assistant
2. Ask JetBrains AI Assistant to list available tools
3. Try using 21st.dev Magic functionality

Test prompts:

• "Type / and look for 21st.dev Magic tools in the command list"
• "Ask AI Assistant to use 21st.dev Magic for a specific task"
• "Check the MCP settings page for connection status indicator"

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

MCP Server Not Connecting

Symptoms: Server status shows disconnected, Tools not appearing in chat, Connection timeout

Cause: Server configuration incorrect or server not starting

Solution:

• Verify server command is correct and executable
• Check environment variables are set properly
• View MCP logs: Help > Show Log in Explorer > mcp folder
• Test server command in terminal manually

Remote Server Not Supported

Symptoms: HTTP server not connecting, SSE transport errors

Cause: AI Assistant only supports stdio transport for client connections

Solution:

• Use mcp-remote proxy for remote servers
• Configuration: npx -y mcp-remote@latest https://server-url/endpoint
• This wraps HTTP/SSE in stdio transport

Import from Claude Not Working

Symptoms: No servers imported, Configuration empty after import

Cause: Claude Desktop config file not found or in unexpected location

Solution:

• Verify Claude Desktop is installed
• Check config exists at ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)
• Or %APPDATA%/Claude/claude_desktop_config.json (Windows)
• Manually copy configuration if auto-import fails

External Client Cannot Connect to IDE Server

Symptoms: Client shows MCP server unavailable, Connection refused

Cause: IDE MCP server not enabled or client not configured

Solution:

• Enable MCP Server in Settings > Tools > MCP Server
• Use Auto-Configure for supported clients
• Restart both IDE and external client
• Check firewall allows local connections

Brave Mode Commands Not Running

Symptoms: Terminal commands require confirmation, Workflow interrupted by prompts

Cause: Brave mode not enabled

Solution:

• Enable in Settings > Tools > MCP Server
• Check "Run shell commands without confirmation (brave mode)"
• Use with caution - commands run without confirmation

21st.dev Magic not appearing in JetBrains AI Assistant

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check 21st.dev Magic installation
• Restart JetBrains AI Assistant
• Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with JetBrains AI Assistant:

• Explore all 21st.dev Magic capabilities through JetBrains AI Assistant
• Check out other MCP servers that work with JetBrains AI Assistant
• 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 JetBrains AI Assistant MCP guide
• Join the MCP community discussions