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

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 MCPOmni-Connect

1. Open MCPOmni-Connect 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 MCPOmni-Connect:

Create Navigation Bar

Generate a modern responsive navigation component

Ask MCPOmni-Connect: "/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 MCPOmni-Connect: "/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 MCPOmni-Connect: "/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 MCPOmni-Connect: "/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 MCPOmni-Connect
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

Command Not Found

Symptoms: mcpomni-connect: command not found, CLI not accessible

Cause: Package not installed or not in PATH

Solution:

• Verify installation: pip show mcpomni-connect
• Ensure Python scripts directory is in PATH
• Try running with python -m: python -m mcpomni_connect
• Reinstall: pip install --upgrade mcpomni-connect

Configuration File Not Found

Symptoms: FileNotFoundError: mcp_config.yaml, Config not loading

Cause: Config file missing or incorrect path

Solution:

• Verify config file exists at specified path
• Use absolute path: --config /full/path/to/mcp_config.yaml
• Check file name is exactly mcp_config.yaml (case-sensitive)
• Validate YAML syntax with yamllint or online validator

MCP Server Connection Failures

Symptoms: Server not responding, Connection timeout, Transport error

Cause: Invalid server configuration or transport issues

Solution:

• Verify transport type matches server capabilities (stdio, sse, http, docker, npx)
• For stdio: ensure command and args are correct
• For SSE/HTTP: verify URL is accessible and server is running
• For Docker: ensure Docker daemon is running and image exists
• Check environment variables are set (e.g., GITHUB_TOKEN)
• Test server manually outside MCPOmni-Connect

Agent Mode Not Working

Symptoms: Agent fails to execute task, Reasoning loop errors, Tool calls failing

Cause: Insufficient LLM configuration or tool access issues

Solution:

• Ensure LLM API key is configured (OpenAI, Anthropic, etc.)
• Verify agent has access to necessary MCP server tools
• Check task description is clear and actionable
• Review agent logs for detailed error messages
• Try simpler task first to verify agent functionality

Orchestrator Mode Failures

Symptoms: Plan execution fails, Step coordination errors, Agent communication issues

Cause: Invalid plan structure or agent dependencies

Solution:

• Verify plan steps are clearly defined and sequential
• Ensure each step can be completed with available tools
• Check inter-agent communication is working
• Review orchestrator logs for step-by-step execution details
• Test individual plan steps in agent mode first

Docker Transport Errors

Symptoms: Container not starting, Docker connection refused, Port binding errors

Cause: Docker configuration or runtime issues

Solution:

• Verify Docker is installed and running: docker ps
• Check Docker image exists: docker images
• Ensure ports are not already in use
• Review container logs: docker logs <container_name>
• Verify network configuration allows container communication

FastAPI Integration Issues

Symptoms: Import errors, Async execution failures, Endpoint not responding

Cause: Incorrect async configuration or FastAPI version mismatch

Solution:

• Use run_agent_async() for async FastAPI endpoints
• Ensure FastAPI version is compatible (0.100.0+)
• Verify MCPOmniClient is initialized outside request handlers
• Check async event loop configuration
• Review FastAPI logs for detailed error messages

21st.dev Magic not appearing in MCPOmni-Connect

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

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

Next Steps

Now that 21st.dev Magic is integrated with MCPOmni-Connect:

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