21st.dev Magic + OpenCode: 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 OpenCode, 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 OpenCode, 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 OpenCode
- 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
- OpenCode installed and configured
- Compatible operating system (macOS, Linux, Windows)
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 OpenCode
-
Locate your configuration file:
-
Add server configuration:
Configure MCP servers in your `opencode.json` or `opencode.jsonc`:
```json
{
"mcp": {
"my-mcp": {
"type": "local",
"command": ["npx", "-y", "@modelcontextprotocol/server-everything"],
"environment": {
"API_KEY": "$API_KEY"
},
"timeout": 5000
},
"remote-server": {
"type": "remote",
"url": "https://mcp.example.com/sse",
"headers": {
"Authorization": "Bearer $API_TOKEN"
}
}
}
}
Disable a server temporarily:
{
"mcp": {
"my-mcp": {
"type": "local",
"command": ["npx", "-y", "mcp-server"],
"enabled": false
}
}
}
3. **Restart OpenCode**
Completely quit and restart OpenCode to load the new configuration.
## Examples
Once configured, you can use 21st.dev Magic in OpenCode:
### Create Navigation Bar
Generate a modern responsive navigation component
**Ask OpenCode:** "/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 OpenCode:** "/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 OpenCode:** "/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 OpenCode:** "/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. Run opencode in terminal
2. Add "use the mcp_name tool" to your prompts
3. Verify tool execution and response
## 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 Loading
**Symptoms:** Server not appearing in tools, Timeout errors, Command not found
**Cause:** Invalid configuration, missing dependencies, or timeout too short
**Solution:**
- Verify command array is correct in opencode.json
- Check environment variables are set properly
- Increase timeout value if server takes longer to start
- Test MCP server command independently in terminal
#### Context Limit Exceeded
**Symptoms:** Context too large errors, Slow responses, Truncated output
**Cause:** Too many MCP servers adding to context
**Solution:**
- Disable unused MCP servers with enabled: false
- Use per-agent tool configuration to limit active MCPs
- Avoid MCP servers that add many tokens (e.g., GitHub MCP)
#### Remote Server Connection Failed
**Symptoms:** Cannot connect to remote MCP, Authentication errors
**Cause:** Invalid URL, missing headers, or network issues
**Solution:**
- Verify remote server URL is correct
- Check authorization headers are properly configured
- Ensure environment variables for tokens are set
#### 21st.dev Magic not appearing in OpenCode
**Symptoms:** Server not listed, Tools not available
**Cause:** Configuration or installation issue
**Solution:**
- Verify configuration syntax
- Check 21st.dev Magic installation
- Restart OpenCode
- Check logs for error messages
## Next Steps
Now that 21st.dev Magic is integrated with OpenCode:
- Explore all 21st.dev Magic capabilities through OpenCode
- Check out other MCP servers that work with OpenCode
- Join the MCP community for tips and support
- Consider contributing to 21st.dev Magic development
## Need Help?
- Search for [21st.dev Magic documentation](https://www.mcpstack.org)
- Check the [OpenCode MCP guide](https://www.mcpstack.org/clients)
- Join the MCP community discussions