Magic Component Platform (MCP)
Official
by 21st-dev
# Magic MCP Server Installation Guide
This guide is specifically designed for AI agents like Cline to install and configure the Magic MCP server.
## Prerequisites
1. Node.js (Latest LTS version)
2. A valid TWENTY_FIRST_API_KEY from [21st.dev/magic](https://21st.dev/magic)
## Installation Steps
### 1. Configuration Setup
The Magic MCP server requires configuration based on the client type. Below are the setup instructions for each supported client:
#### For Windsurf
1. Create or modify the configuration file at `~/.codeium/windsurf/mcp_config.json`:
```json
{
"mcpServers": {
"magic": {
"command": "npx",
"args": [
"-y",
"@smithery/cli@latest",
"install",
"@21st-dev/magic-mcp",
"--client",
"windsurf"
],
"env": {
"TWENTY_FIRST_API_KEY": "<API_KEY>"
}
}
}
}
```
2. Replace `<API_KEY>` with the actual TWENTY_FIRST_API_KEY value.
#### For Cline
1. Create or modify the MCP configuration file:
```json
{
"mcpServers": {
"@21st-dev-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@smithery/cli@latest",
"run",
"@21st-dev/magic-mcp",
"--config",
"\"{\\\"TWENTY_FIRST_API_KEY\\\":\\\"<API_KEY>\\\"}\""
]
}
}
}
```
2. Replace `<API_KEY>` with the actual TWENTY_FIRST_API_KEY value.
### 2. Verification
To verify the installation:
1. The MCP server should appear in the list of available servers
2. Test the connection by sending a simple command:
```
/ui create a basic button
```
## Troubleshooting
Common issues and solutions:
1. If the server fails to start:
- Verify the API key is valid
- Check Node.js version (should be LTS)
- Ensure all dependencies are installed
2. If components fail to generate:
- Verify network connectivity
- Check API key permissions
- Ensure the command format is correct
## Environment Variables
Required environment variables:
- `TWENTY_FIRST_API_KEY`: Your Magic API key from 21st.dev
## Additional Notes
- The server automatically handles TypeScript and React components
- No additional configuration is needed for basic usage
- The server supports hot reloading for development
## Support
If you encounter any issues:
1. Check the [FAQ section](https://21st.dev/magic/docs/faq)
2. Join our [Discord community](https://discord.gg/Qx4rFunHfm)
3. Submit an issue on [GitHub](https://github.com/serafimcloud/21st)
---
This installation guide is maintained by the Magic team. For updates and more information, visit [21st.dev/magic](https://21st.dev/magic).