intermediate⏱️ 22-32 minutes📅 Updated August 2026

Step-by-step guide to integrate 21st.dev Magic MCP server with mcp-agent. Includes ai-powered ui generation and real-time component preview.

21st.dev Magic + mcp-agent: 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 mcp-agent, 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 mcp-agent, 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 mcp-agent
  • 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
  • mcp-agent installed and configured
  • Compatible operating system (Python 3.9+, pip Installation, uv Installation, Temporal (Optional))

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 mcp-agent

  1. Open mcp-agent settings
  2. Navigate to MCP server configuration
  3. Add 21st.dev Magic server with appropriate settings
  4. Save and restart if needed

Examples

Once configured, you can use 21st.dev Magic in mcp-agent:

Create Navigation Bar

Generate a modern responsive navigation component

Ask mcp-agent: "/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 mcp-agent: "/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 mcp-agent: "/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 mcp-agent: "/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 mcp-agent
  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

Import Error - Module Not Found

Symptoms: ModuleNotFoundError: No module named mcp_agent, Import fails

Cause: mcp-agent not installed or wrong Python environment

Solution:

  • Verify installation: pip show mcp-agent
  • Ensure using correct Python environment/virtualenv
  • Reinstall: pip install --upgrade mcp-agent
  • Check Python version is 3.9 or higher

MCP Server Connection Failures

Symptoms: Server not starting, Connection timeout, Tool execution errors

Cause: Invalid MCP server configuration or missing dependencies

Solution:

  • Verify npx is installed and accessible (required for stdio servers)
  • Check MCP server package name and arguments are correct
  • Test server independently: npx -y @modelcontextprotocol/server-filesystem /path
  • Review agent logs for detailed error messages
  • Ensure required environment variables are set

LLM API Authentication Errors

Symptoms: 401 Unauthorized, API key invalid, Provider authentication failed

Cause: Missing or incorrect API keys for LLM provider

Solution:

  • Set environment variables: ANTHROPIC_API_KEY, OPENAI_API_KEY, etc.
  • Verify API key is valid and has correct permissions
  • Check API key format matches provider requirements
  • Pass api_key parameter explicitly in Agent initialization

Workflow Execution Failures

Symptoms: Workflow hangs, Timeout errors, Incomplete results

Cause: Workflow pattern misconfiguration or task complexity

Solution:

  • Increase timeout values for long-running tasks
  • Break complex workflows into smaller steps
  • Verify all workflow dependencies are available
  • Check Temporal backend is running (for production deployments)
  • Review workflow logs for specific error messages

Temporal Backend Connection Issues

Symptoms: Cannot connect to Temporal, Workflow registration fails, Worker errors

Cause: Temporal server not running or misconfigured

Solution:

  • Verify Temporal server is running: temporal server health
  • Check Temporal connection settings (host, port, namespace)
  • Ensure Temporal workers are registered correctly
  • Review Temporal server logs for connection errors
  • Start local Temporal dev server: temporal server start-dev

Performance Issues with Large Workflows

Symptoms: Slow execution, High memory usage, Timeout errors

Cause: Inefficient workflow design or resource constraints

Solution:

  • Use map-reduce pattern for parallelizable tasks
  • Implement batching for large data processing
  • Enable Temporal backend for better resource management
  • Monitor agent memory usage and optimize task size
  • Consider streaming responses for large outputs

21st.dev Magic not appearing in mcp-agent

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

  • Verify configuration syntax
  • Check 21st.dev Magic installation
  • Restart mcp-agent
  • Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with mcp-agent:

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

Need Help?

Related Resources

More Integrations

Explore other MCP servers that work with mcp-agent

Need Help?

Join the MCP community for support and discussions

21st.dev Magic + mcp-agent: MCP Setup Guide (2026)