Server facts
21st.dev Magic AI Agent MCP Server
Project
- Author
- 21st-dev
- Repository
- github.com/21st-dev/magic-mcp
- Website
- 21st.dev/magic
- License
- Not specified
- Category
- Design & Creative
Tech
- Runtime / language
- nodeTypeScript
- Transports
- stdio
- Remote available
- No
- Authentication
- Not specified
Activity
- GitHub stars
- 6,063
- Last commit
- Data as of
Tags
- Brand Assets
- Ide Integration
- React
- Typescript
- Ui Generation
Overview
21st.dev Magic AI Agent focuses on building interface components from conversational requests. A developer uses the /ui instruction in an AI agent chat, describes the desired component, and lets the editor invoke Magic. The resulting component is added to the project and remains editable. The README describes inspiration from the 21st.dev component collection, real-time previews, TypeScript support, and access to logos and brand assets through SVGL. It also says the agent limits changes to files associated with generated components and follows the surrounding project's style and organization. The intended workflow is component creation within an existing development environment, not a replacement for the rest of the application.
Setup requires Node.js and a supported editor or client, plus an API key created in the Magic console. The README provides CLI installation guidance and manual npx configurations for MCP clients. Cursor, Windsurf, VS Code, and Cline appear among the supported development environments, with Cline integration marked beta. The document also labels Magic itself beta and marks enhancement of existing components with advanced features and animations as forthcoming. Generated components can be customized, and the FAQ advises splitting especially complex interfaces into smaller pieces. Monthly generation limits are mentioned, although exact allowances are not stated. Named MCP tool identifiers are not supplied in this input.
Install & configure
Requirements
- Node.js, with the latest LTS recommended
- A supported IDE or MCP client
- An API key from the Magic console
npx -y @21st-dev/magic@latestThis follows the README's manual VS Code server configuration. Other supported clients also have installation instructions. Named MCP tools are not stated in the README.
Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Use Settings → Developer → Edit Config when available. Do not assume a Linux configuration path; check the client documentation for your platform. Remote servers use the app’s connector flow when supported, not the local stdio file shown here. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest"
],
"env": {
"API_KEY": "<your 21st.dev Magic API key>"
}
}
}
}Config file · Project: .cursor/mcp.json
User: ~/.cursor/mcp.json
The project path is relative to the workspace root. The tilde denotes your user home directory. Use Cursor’s MCP settings to confirm which configuration and scope your installed version is reading. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest"
],
"env": {
"API_KEY": "<your 21st.dev Magic API key>"
}
}
}
}Config file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation. Merge this example with existing settings; do not overwrite unrelated servers.
{
"servers": {
"magic-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest"
],
"env": {
"API_KEY": "<your 21st.dev Magic API key>"
}
}
}
}Config file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json
Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
Open the MCP configuration through Windsurf’s settings when possible to confirm the active file. Paths can differ in managed or future releases; check the client documentation if this location is not present. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest"
],
"env": {
"API_KEY": "<your 21st.dev Magic API key>"
}
}
}
}Config file · Project scope: .mcp.json at the repository root
The project file uses mcpServers. For user scope, use claude mcp add --scope user rather than assuming .mcp.json in your home directory is the user configuration. Check the client documentation for managed settings and storage details. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"magic-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest"
],
"env": {
"API_KEY": "<your 21st.dev Magic API key>"
}
}
}
}Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Tools
No individual tool names were confirmed in the source material. Check the repository for its current tool list.
Names, permissions, and defaults can change. Check the current upstream documentation before granting access.
Use cases
- Generate a UI component from a description in an editor chat.
- Customize generated React component styling and behavior.
- Preview a component while iterating on its design.
- Use SVGL logos and brand assets in interface work.
Strengths
- Creates editable components directly in a project.
- Provides TypeScript support and real-time previews.
- Integrates component inspiration and brand asset access.
Limitations
- Requires an API key and a supported development environment.
- The README labels the product beta and some enhancement features as coming soon.
- Generation limits are mentioned without exact allowances.
Frequently asked questions
Independent listing, not an affiliation or security review. Grant the least access needed and verify the upstream instructions before running code.
