21st.dev Magic + LibreChat: 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 LibreChat, 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 LibreChat, 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 LibreChat
• 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
• LibreChat installed and configured
• Compatible operating system (Docker (Recommended), Kubernetes, Local Installation, Cloud Platforms)

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 LibreChat

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

Create Navigation Bar

Generate a modern responsive navigation component

Ask LibreChat: "/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 LibreChat: "/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 LibreChat: "/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 LibreChat: "/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 LibreChat
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: Status shows "Disconnected" or "Error", Server not appearing in list, Connection timeout

Cause: Invalid configuration, missing dependencies, or server startup failure

Solution:

• Check librechat.yaml syntax is valid YAML
• Verify npx and Node.js are available (for stdio/command-based servers)
• Check server command and args are correct
• Review LibreChat logs for error messages: docker logs librechat
• Increase timeout value if server takes longer to initialize
• Ensure required ports are not blocked (for HTTP-based servers)

OAuth Authentication Failing

Symptoms: Status shows "OAuth Required", Redirect loop during auth, Token refresh errors

Cause: OAuth credentials not configured or redirect URLs incorrect

Solution:

• Verify OAuth clientId and clientSecret in librechat.yaml
• Check redirect URL is correctly set in OAuth provider settings
• Ensure authorizationUrl and tokenUrl are accessible
• Complete OAuth flow by clicking "Initialize" in MCP Settings panel
• Check browser console for OAuth-related errors

User Credentials Not Working

Symptoms: Prompts for credentials not appearing, Variables not substituted, Authentication errors

Cause: User credential variables incorrectly formatted or not entered

Solution:

• Use correct format: {{USER_VARIABLE_NAME}} in librechat.yaml
• Enter credentials through MCP Settings panel in UI
• Verify variable names match between config and UI
• Check credentials are saved per-user (not shared globally)

Tools Not Appearing in Chat

Symptoms: No tool dropdown available, MCP tools missing from interface, Server connected but tools unavailable

Cause: MCP server not properly integrated with chat endpoint or agent

Solution:

• Verify you are using an endpoint that supports MCP (not all models do)
• Check if Agent Builder is enabled and MCP tools are assigned to agent
• Restart chat session after adding new MCP servers
• Verify MCP server actually provides tools (some servers are resource-only)
• Check server logs to confirm tools are being discovered

Docker Deployment Problems

Symptoms: Container fails to start, Database connection errors, Port conflicts

Cause: Docker configuration issues or missing environment variables

Solution:

• Verify .env file is properly configured with all required variables
• Check MongoDB connection string is correct
• Ensure ports 3080 (frontend) and 3081 (backend) are available
• Run docker compose logs to view detailed error messages
• Verify Docker and Docker Compose versions meet minimum requirements

Performance Issues with MCP

Symptoms: Slow tool execution, Timeout errors, UI freezing during tool calls

Cause: Server timeout too short, inefficient MCP server, or network latency

Solution:

• Increase timeout values in librechat.yaml (both init and operation timeouts)
• Use HTTP transport instead of stdio for remote servers
• Monitor MCP server performance independently
• Consider caching for frequently accessed resources
• Use Streamable HTTP transport for production environments

21st.dev Magic not appearing in LibreChat

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

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

Next Steps

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

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