21st.dev Magic + MCPHub (mcp.nvim): 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 MCPHub (mcp.nvim), 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 MCPHub (mcp.nvim), 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 MCPHub (mcp.nvim)
• 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
• MCPHub (mcp.nvim) installed and configured
• Compatible operating system (Neovim 0.9+, 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 MCPHub (mcp.nvim)

1. Open MCPHub (mcp.nvim) 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 MCPHub (mcp.nvim):

Create Navigation Bar

Generate a modern responsive navigation component

Ask MCPHub (mcp.nvim): "/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 MCPHub (mcp.nvim): "/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 MCPHub (mcp.nvim): "/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 MCPHub (mcp.nvim): "/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 MCPHub (mcp.nvim)
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

Plugin Not Loading or Command Not Found

Symptoms: :MCPHub command not recognized, Plugin not appearing in :PlugStatus, No errors but plugin inactive

Cause: Plugin not properly installed or configuration error

Solution:

• Verify plugin is added to plugin manager configuration
• Run plugin manager install command (:PackerInstall, :PlugInstall, or Lazy auto-install)
• Check for errors in :messages after sourcing config
• Ensure dependencies (plenary.nvim, nui.nvim) are installed
• Restart Neovim completely

MCP Server Won't Start

Symptoms: Server status shows "Error", Red indicator on server, Server immediately stops after starting

Cause: Invalid server configuration or missing dependencies

Solution:

• Verify npx is installed and in PATH: npx --version
• Check MCP server package exists: npx -y @modelcontextprotocol/server-filesystem --help
• Review server configuration in setup() - verify command and args
• Check server logs in MCPHub interface for detailed error messages
• Ensure required environment variables are set (e.g., GITHUB_TOKEN)
• Test server manually in terminal: npx -y @modelcontextprotocol/server-filesystem /path

UI Not Displaying Correctly

Symptoms: Blank window, Garbled text, Layout issues, Missing borders

Cause: Terminal or Neovim rendering issues

Solution:

• Verify Neovim version is 0.9 or higher: nvim --version
• Try different border style in ui.border config ("single", "double", "rounded")
• Check terminal supports Unicode and 256 colors
• Update nui.nvim dependency to latest version
• Test with different colorscheme to rule out theme conflicts

Integration with Avante/CodeCompanion Not Working

Symptoms: AI assistant not seeing MCP tools, Tool calls failing, Integration not recognized

Cause: Integration not enabled or incompatible versions

Solution:

• Verify integration is enabled in config: integrations.avante = true
• Ensure Avante.nvim/CodeCompanion.nvim is installed and loaded
• Check versions are compatible - update both plugins to latest
• Restart Neovim after enabling integration
• Check :checkhealth for integration-specific warnings

Marketplace Not Loading

Symptoms: :MCPHubMarketplace shows empty list, Network error in marketplace, Timeout loading servers

Cause: Network connectivity issues or marketplace service unavailable

Solution:

• Verify internet connectivity
• Check firewall allows HTTPS connections
• Try again later if marketplace service is temporarily down
• Review proxy settings if behind corporate firewall
• Check :messages for detailed network error messages

Project-Local Config Not Loading

Symptoms: .mcphub.json ignored, Project servers not appearing, Only global config loaded

Cause: Config file location or format issues

Solution:

• Verify .mcphub.json is in project root (same directory as .git)
• Check JSON syntax is valid using jsonlint or similar tool
• Ensure file name is exactly .mcphub.json (case-sensitive)
• Restart Neovim after creating/modifying project config
• Check file permissions are readable

21st.dev Magic not appearing in MCPHub (mcp.nvim)

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check 21st.dev Magic installation
• Restart MCPHub (mcp.nvim)
• Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with MCPHub (mcp.nvim):

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