21st.dev Magic + Amp: 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 Amp, 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 Amp, 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 Amp
• 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
• Amp installed and configured
• Compatible operating system (macOS, Linux, Windows (WSL))

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 Amp

1. Locate your configuration file:

2. Add server configuration:

Configure MCP servers in VS Code/Cursor settings.json:

```json
{
  "amp.mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--headless", "--isolated"]
    },
    "semgrep": {
      "url": "https://mcp.semgrep.ai/mcp"
    },
    "sourcegraph": {
      "url": "${SRC_ENDPOINT}/.api/mcp/v1",
      "headers": {
        "Authorization": "token ${SRC_ACCESS_TOKEN}"
      }
    },
    "linear": {
      "command": "npx",
      "args": ["mcp-remote", "https://mcp.linear.app/sse"]
    }
  }
}

Or add servers via CLI:

# Add HTTP-based server
amp mcp add sourcegraph --header "Authorization=token your-token" https://sourcegraph.example.com/.api/mcp/v1

# Add SSE-based server
amp mcp add linear https://mcp.linear.app/sse

# OAuth login for authenticated servers
amp mcp oauth login my-server \
  --server-url https://example.com/.api/mcp/v1 \
  --client-id your-client-id \
  --client-secret your-client-secret \
  --scopes "openid,profile,email"

3. **Restart Amp**

Completely quit and restart Amp to load the new configuration.



## Examples

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

### Create Navigation Bar

Generate a modern responsive navigation component

**Ask Amp:** "/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 Amp:** "/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 Amp:** "/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 Amp:** "/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. Launch Amp
2. Verify 21st.dev Magic is available in the tools list
3. Test basic 21st.dev Magic functionality



## 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 not appearing in tools, Connection timeout, Authentication errors

**Cause:** Invalid configuration, missing credentials, or network issues

**Solution:**
- Verify server URL and command are correct
- Check environment variables are set properly
- For OAuth servers, run amp mcp oauth login
- Review amp logs for error messages

#### Tool Execution Fails

**Symptoms:** MCP tools available but not working, Error messages during execution

**Cause:** Server dependencies missing or permission issues

**Solution:**
- Verify required environment variables are configured
- Check amp.permissions settings for tool restrictions
- Test MCP server independently
- Review server-specific documentation

#### Permission Denied

**Symptoms:** Tool blocked by permission system, Ask prompts for every action

**Cause:** Permission rules restricting MCP tool usage

**Solution:**
- Review amp.permissions in settings.json
- Add allow rules for trusted MCP servers
- Use amp permissions edit to modify rules

#### 21st.dev Magic not appearing in Amp

**Symptoms:** Server not listed, Tools not available

**Cause:** Configuration or installation issue

**Solution:**
- Verify configuration syntax
- Check 21st.dev Magic installation
- Restart Amp
- Check logs for error messages



## Next Steps

Now that 21st.dev Magic is integrated with Amp:

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

## Need Help?

- Search for [21st.dev Magic documentation](https://www.mcpstack.org)
- Check the [Amp MCP guide](https://www.mcpstack.org/clients)
- Join the MCP community discussions