Search and install Magic UI components, such as animations, effects and backgrounds, from an AI editor.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add magic-ui -- npx -y @magicuidesign/mcp@latest~/.codex/config.toml
[mcp_servers.magic-ui]
command = "npx"
args = ["-y", "@magicuidesign/mcp@latest"]
# codex mcp add magic-ui -- npx -y @magicuidesign/mcp@latest~/.cursor/mcp.json
{
"mcpServers": {
"magic-ui": {
"command": "npx",
"args": [
"-y",
"@magicuidesign/mcp@latest"
]
}
}
}.vscode/mcp.json
{
"servers": {
"magic-ui": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@magicuidesign/mcp@latest"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"magic-ui": {
"command": "npx",
"args": [
"-y",
"@magicuidesign/mcp@latest"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"magic-ui": {
"command": "npx",
"args": [
"-y",
"@magicuidesign/mcp@latest"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"magic-ui": {
"command": "npx",
"args": [
"-y",
"@magicuidesign/mcp@latest"
]
}
}
}