21st.dev Magic + Lutra AI: 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 Lutra AI, 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 Lutra AI, 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 Lutra AI
- 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
- Lutra AI installed and configured
- Compatible operating system (Web Platform, Mobile Web)
Installation
Step 1: Install 21st.dev Magic
Manual installation steps:
- Generate API key from 21st.dev Magic Console
- Add configuration to IDE-specific JSON config
- Restart IDE to load MCP server
Configuration
Step 2: Configure Lutra AI
- Open Lutra AI settings
- Navigate to MCP server configuration
- Add 21st.dev Magic server with appropriate settings
- Save and restart if needed
Examples
Once configured, you can use 21st.dev Magic in Lutra AI:
Create Navigation Bar
Generate a modern responsive navigation component
Ask Lutra AI: "/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 Lutra AI: "/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 Lutra AI: "/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 Lutra AI: "/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
- Start a new conversation in Lutra AI
- Ask Lutra AI to list available tools
- Try using 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 connections, Connection timeout, Unable to reach server
Cause: Invalid server URL or server not accessible
Solution:
- Verify MCP server URL is correct and accessible
- Check server is running and responding to requests
- Ensure server supports HTTP/SSE transport (Lutra requirement)
- Test server URL in browser or with curl to confirm accessibility
- Contact Lutra support if server should be compatible
Authentication Failures
Symptoms: OAuth errors, Permission denied, Unauthorized access
Cause: OAuth not configured or credentials expired
Solution:
- Complete OAuth authorization flow for connected apps
- Refresh expired credentials through connections panel
- Verify required permissions are granted for each app
- Disconnect and reconnect app if authentication persists
Lutra Not Understanding Tasks
Symptoms: Incorrect task execution, Lutra asks for clarification repeatedly, Wrong app or tool used
Cause: Ambiguous instructions or insufficient context
Solution:
- Provide clear, specific instructions with context
- Specify which app or MCP server to use if ambiguous
- Break complex tasks into smaller, clearer steps
- Use examples or reference previous successful tasks
Playbooks Not Working
Symptoms: Playbook execution fails, Different results than expected, Missing steps
Cause: Changed app configurations or unavailable resources
Solution:
- Review playbook steps to ensure they are still valid
- Update playbook if app configurations have changed
- Verify all connected apps and MCP servers are accessible
- Test playbook step-by-step to identify failure point
Workflow Automation Limits
Symptoms: Task quota exceeded, Automation disabled, Rate limiting
Cause: Plan limits reached or service rate limits
Solution:
- Check Lutra plan limits and current usage
- Upgrade plan if automation needs exceed current tier
- Optimize workflows to reduce unnecessary API calls
- Implement delays between rapid successive automations
21st.dev Magic not appearing in Lutra AI
Symptoms: Server not listed, Tools not available
Cause: Configuration or installation issue
Solution:
- Verify configuration syntax
- Check 21st.dev Magic installation
- Restart Lutra AI
- Check logs for error messages
Next Steps
Now that 21st.dev Magic is integrated with Lutra AI:
- Explore all 21st.dev Magic capabilities through Lutra AI
- Check out other MCP servers that work with Lutra AI
- 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 Lutra AI MCP guide
- Join the MCP community discussions