21st.dev Magic + GitHub Copilot (VS 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 GitHub Copilot (VS 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 GitHub Copilot (VS 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 GitHub Copilot (VS 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
• GitHub Copilot (VS 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 GitHub Copilot (VS Code)

1. Locate your configuration file:

   • Windows: .vscode\\mcp.json in your project directory
   • macOS: .vscode/mcp.json in your project directory
   • Linux: .vscode/mcp.json in your project directory

2. Add server configuration:

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

3. Restart GitHub Copilot (VS Code)

Completely quit and restart GitHub Copilot (VS Code) to load the new configuration.

Examples

Once configured, you can use 21st.dev Magic in GitHub Copilot (VS Code):

Create Navigation Bar

Generate a modern responsive navigation component

Ask GitHub Copilot (VS 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 GitHub Copilot (VS 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 GitHub Copilot (VS 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 GitHub Copilot (VS 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. Start a new conversation in GitHub Copilot (VS Code)
2. Ask GitHub Copilot (VS Code) to list available tools
3. Try using 21st.dev Magic functionality

Test prompts:

• "What MCP tools are available?"
• "Use 21st.dev Magic to help with my code"
• "Show me what 21st.dev Magic can do"

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 Configuration Not Loaded

Symptoms: MCP tools not appearing, Copilot does not recognize MCP server

Cause: Configuration file not in correct location or invalid JSON

Solution:

• Verify .vscode/mcp.json exists in project root directory
• Check JSON syntax is valid (no trailing commas, proper quotes)
• Reload VS Code window after making configuration changes
• Check VS Code Developer Tools (Help > Toggle Developer Tools) for errors

MCP Server Not Starting

Symptoms: Tools listed but not responding, Server connection errors

Cause: Server command path incorrect or dependencies missing

Solution:

• Test the MCP server command independently in terminal
• Verify all server prerequisites are installed
• Check that command path is correct (use absolute paths if needed)
• Ensure required environment variables are set in mcp.json
• Review VS Code Output panel for MCP server error messages

GitHub Copilot Subscription Required

Symptoms: Copilot features grayed out, Unable to access Copilot Chat

Cause: No active GitHub Copilot subscription

Solution:

• Sign up for GitHub Copilot subscription (Individual, Business, or Enterprise)
• Verify subscription is active in GitHub account settings
• Re-authenticate GitHub Copilot in VS Code
• Check that VS Code is using correct GitHub account

VS Code Version Too Old

Symptoms: MCP configuration ignored, No mcp.json recognition

Cause: VS Code version below 1.99 does not have native MCP support

Solution:

• Update VS Code to version 1.99 or later
• Check current version: Help > About
• Download latest version from code.visualstudio.com
• After updating, reload window and verify MCP support

{server_name} Tools Not Working

Symptoms: Server connected but tools fail, Error messages when invoking tools

Cause: Server-specific configuration or authentication issues

Solution:

• Verify all required environment variables for {server_name} are set
• Check {server_name} documentation for specific prerequisites
• Test {server_name} with another MCP client to isolate issue
• Review error messages in VS Code Output panel for specific failures

21st.dev Magic not appearing in GitHub Copilot (VS Code)

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check 21st.dev Magic installation
• Restart GitHub Copilot (VS Code)
• Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with GitHub Copilot (VS Code):

• Explore all 21st.dev Magic capabilities through GitHub Copilot (VS Code)
• Check out other MCP servers that work with GitHub Copilot (VS 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 GitHub Copilot (VS Code) MCP guide
• Join the MCP community discussions