Magic Component Platform (MCP)
This server (Magic Component Platform/MCP) enables developers to:
Generate UI Components: Create React components (buttons, inputs, dialogs, tables, forms, banners, cards) using natural language descriptions via
/uicommandsSearch Logos: Find and integrate company logos in JSX, TSX, or SVG formats with support for multiple queries and light/dark themes
Find Component Inspiration: Fetch data and previews from the 21st.dev library without generating new code
Seamless Integration: Generated snippets are automatically integrated into the developer's codebase in customizable, developer-friendly formats with import instructions
Integration with Discord for accessing logo assets through the logo_search tool.
Integration with GitHub for accessing logo assets through the logo_search tool.
Requires Node.js as a runtime environment for the Magic AI Agent, supporting the component generation process.
Generates modern React UI components based on natural language descriptions, supporting customization and integration into existing React codebases.
Integration with SVG technology via SVGL for accessing and utilizing logo assets and brand icons in various formats including raw SVG markup.
Full TypeScript support for type-safe component development, with ability to generate TypeScript React components.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Magic Component Platform (MCP)create a responsive login form with dark mode toggle"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Magic MCP → 21st MCP
Magic MCP is now the 21st MCP. The Magic MCP server (
@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.
Install the 21st MCP (recommended)
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codexOr add it manually — it is a plain HTTP MCP server:
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}Get an API key at 21st.dev/mcp.
Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.
Related MCP server: 21st.dev Magic AI Agent
What this package does now (v0.2.0+)
npx -y @21st-dev/magic@latest API_KEY="..." still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing mcp.json entries that reference @21st-dev/magic keep functioning — but they now speak to the same server as the 21st CLI, with the full current toolset.
The API key is accepted in all the historical forms: positional API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., or the TWENTY_FIRST_API_KEY / API_KEY_21ST environment variables.
Old tool names → new tool names
The 21st MCP still accepts the legacy Magic tool names and translates them, so agents that remember the old names keep working. Prefer the new names:
Legacy Magic tool | 21st MCP tool |
|
|
|
|
|
|
|
|
The current server exposes much more than the old four tools: catalog search across components/themes/templates, paid code retrieval, bookmarks, team libraries, UI generation with variants, profile management, and more. Connect and call tools/list to see the full set.
Links
21st MCP setup & API keys: https://21st.dev/mcp
21st CLI on npm: https://www.npmjs.com/package/@21st-dev/cli
21st.dev — discover, publish, and generate UI components: https://21st.dev
FAQ
Why did my old Magic MCP stop working?
The Magic backend (magic.21st.dev) was superseded by the unified 21st MCP, and all old API keys were reset for security. Update to a fresh key from 21st.dev/mcp — your existing @21st-dev/magic config will then work again through this compatibility proxy, though we recommend switching to npx @21st-dev/cli@latest init.
Is /ui still a thing?
Use natural language: ask your agent to search 21st for components (search), or generate new UI (generate). The old /ui, /21 trigger phrases were a convention of the legacy tools' descriptions, not the protocol.
Available Tools
4 tools21st_magic_component_builderA
"Use this tool when the user requests a new UI component—e.g., mentions /ui, /21 /21st, or asks for a button, input, dialog, table, form, banner, card, or other React component. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Generate a search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase | |
| absolutePathToCurrentFile | Yes | Absolute path to the current file to which we want to apply changes | |
| absolutePathToProjectDirectory | Yes | Absolute path to the project root directory | |
| standaloneRequestQuery | Yes | You need to formulate what component user wants to create, based on his message, possbile chat histroy and a place where he makes the request.Extract additional context about what should be done to create a ui component/page based on the user's message, search query, and conversation history, files. Don't halucinate and be on point. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden. It discloses key behavioral traits: the tool returns text snippets (not files), and post-call actions are required (editing/adding files). However, it doesn't mention authentication needs, rate limits, error conditions, or what happens if parameters are invalid. For a 5-parameter tool with no annotations, this leaves significant behavioral gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately sized with three sentences that each serve distinct purposes: when to use, what the tool does, and post-call instructions. It's front-loaded with the primary usage scenario. While efficient, the third sentence about post-call actions could be slightly more integrated with the tool's purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given 5 parameters with 100% schema coverage but no annotations and no output schema, the description provides adequate context about when and how to use the tool. However, it doesn't explain what the return value looks like (only says 'text snippet' without format details) or address potential complexities like error handling. For a tool that generates code snippets, more output information would be helpful.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all 5 parameters thoroughly. The description adds no parameter-specific information beyond what's in the schema. According to scoring rules, when schema coverage is high (>80%), the baseline is 3 even with no param info in description, which applies here.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool 'returns the text snippet for that UI component' when users request new UI components, providing a specific verb (returns) and resource (text snippet for UI component). It distinguishes from siblings by specifying this tool only returns snippets, while siblings likely handle inspiration or refinement. However, it doesn't explicitly name the sibling tools for comparison.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit usage guidance: 'Use this tool when the user requests a new UI component' with concrete examples (mentions /ui, /21, /21st, or asks for specific components like button, input, etc.). It also specifies 'This tool ONLY returns the text snippet' and instructs what to do after calling ('you must edit or add files to integrate'), creating clear boundaries for when to use this tool versus other actions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
21st_magic_component_inspirationB
"Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses that the tool returns JSON data and text snippets, and it adds context about post-call actions: 'After calling this tool, you must edit or add files to integrate the snippet into the codebase.' This gives useful behavioral insight into workflow integration. However, it lacks details on permissions, rate limits, or error handling, which are gaps for a tool with no annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately sized and front-loaded, starting with usage context. Every sentence adds value: the first states when to use it, the second specifies the return type and limitation, and the third adds post-call instructions. There's minimal waste, though it could be slightly more structured for clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations, no output schema, and 2 parameters with full schema coverage, the description is moderately complete. It covers purpose, usage, and post-call actions, but lacks details on return format (beyond 'JSON data' and 'text snippet'), error cases, or integration specifics. For a tool with siblings and no structured output, it should do more to compensate for these gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters ('message' and 'searchQuery'). The description doesn't add any meaning beyond what the schema provides—it doesn't explain how parameters interact or their practical use. With high schema coverage, the baseline is 3, and the description doesn't compensate with extra insights.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool 'returns the JSON data of matching components' and 'returns the text snippet for that UI component', which clarifies it fetches and returns component data. However, it doesn't clearly distinguish from sibling tools like '21st_magic_component_builder' or '21st_magic_component_refiner'—it mentions 'without generating new code' but doesn't specify how this differs from those siblings in purpose.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use it: 'when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev'. It also implies an alternative by stating 'without generating new code', which hints at sibling tools that might generate code. However, it doesn't explicitly name alternatives or specify when not to use it, such as for editing or refining components.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
21st_magic_component_refinerA
"Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages). This tool improves UI of components and returns redesigned version of the component and instructions on how to implement it."
| Name | Required | Description | Default |
|---|---|---|---|
| userMessage | Yes | Full user's message about UI refinement | |
| absolutePathToRefiningFile | Yes | Absolute path to the file that needs to be refined | |
| context | Yes | Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It states the tool 'returns redesigned version of the component and instructions on how to implement it,' which gives some behavioral insight into outputs. However, it lacks details on permissions, side effects, error handling, or performance considerations. For a tool that modifies UI components, this is a significant gap in transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded, with two sentences that directly address usage and purpose. There is no wasted text, and it efficiently communicates key information. However, the first sentence is slightly long and could be split for better readability, preventing a perfect score.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations and no output schema, the description provides adequate context for usage and purpose but lacks details on behavioral aspects like error handling or output format. It compensates somewhat with clear guidelines, but for a tool that modifies UI components, more completeness on what 'redesigned version' entails would be beneficial. It meets minimum viability with clear gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all three parameters thoroughly. The description does not add any parameter-specific information beyond what's in the schema (e.g., it doesn't clarify how 'context' should be derived or examples of 'userMessage'). With high schema coverage, the baseline score of 3 is appropriate as the description doesn't compensate but doesn't detract either.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'improves UI of components and returns redesigned version of the component and instructions on how to implement it.' It specifies the action (improve/refine/redesign) and resource (UI components), though it doesn't explicitly differentiate from sibling tools like '21st_magic_component_builder' or '21st_magic_component_inspiration' beyond scope limitations.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit usage guidelines: 'Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages).' It specifies when to use (UI refinement requests, React components/molecules) and when not to use (big pages), offering clear context and exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
logo_searchA
Search and return logos in specified format (JSX, TSX, SVG). Supports single and multiple logo searches with category filtering. Can return logos in different themes (light/dark) if available.
When to use this tool:
When user types "/logo" command (e.g., "/logo GitHub")
When user asks to add a company logo that's not in the local project
Example queries:
Single company: ["discord"]
Multiple companies: ["discord", "github", "slack"]
Specific brand: ["microsoft office"]
Command style: "/logo GitHub" -> ["github"]
Request style: "Add Discord logo to the project" -> ["discord"]
Format options:
TSX: Returns TypeScript React component
JSX: Returns JavaScript React component
SVG: Returns raw SVG markup
Each result includes:
Component name (e.g., DiscordIcon)
Component code
Import instructions
| Name | Required | Description | Default |
|---|---|---|---|
| queries | Yes | List of company names to search for logos | |
| format | Yes | Output format |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure and does so effectively. It describes key behaviors: supporting single/multiple searches with category filtering, returning logos in different themes if available, and detailing what each result includes (component name, code, import instructions). However, it doesn't mention potential limitations like rate limits, authentication needs, or what happens when logos aren't found.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with clear sections (purpose, usage guidelines, examples, format options, result details) and front-loaded with the core functionality. While comprehensive, some sentences could be more concise (e.g., the example queries section is somewhat repetitive). Overall, it's efficiently organized with minimal wasted text.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no annotations and no output schema, the description provides substantial context: purpose, usage scenarios, examples, format details, and result structure. It adequately covers the tool's functionality given its complexity. The main gap is the lack of output schema, but the description compensates by detailing what results include, making it mostly complete for agent understanding.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description adds some value by explaining format options (TSX, JSX, SVG) and providing example queries that illustrate how to use the 'queries' parameter, but doesn't add significant semantic information beyond what's in the structured schema. This meets the baseline expectation for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with specific verbs ('search and return logos') and resources ('logos in specified format'), and distinguishes it from sibling tools by focusing on logo search functionality rather than component building, inspiration, or refinement. The opening sentence provides a complete, unambiguous statement of what the tool does.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit guidance with a dedicated 'When to use this tool' section, listing two specific scenarios: when users type '/logo' commands and when they request logos not in the local project. It also includes five concrete example queries that demonstrate both command-style and request-style usage patterns, giving clear context for application.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
4 tool updates
v1.0.0- Added
21st_magic_component_builder - Added
21st_magic_component_inspiration - Added
21st_magic_component_refiner - Added
logo_search
TDQS
The first three tools (builder, inspiration, refiner) have overlapping purposes focused on UI components, with unclear boundaries between generating new components and refining existing ones, which could cause misselection. The logo_search tool is distinct but adds to the confusion as it operates in a different domain (logos vs. general UI components), making the set feel disjointed rather than cohesive.
Naming is inconsistent: the first three tools use a verbose '21st_magic_component_' prefix with descriptive suffixes (builder, inspiration, refiner), while logo_search is a simple, unrelated snake_case name. This mixed pattern lacks a predictable convention, making the tool set harder to navigate and remember for agents.
With 4 tools, the count is reasonable and well-scoped for a platform focused on UI components and logos, avoiding bloat. However, the inclusion of logo_search alongside the component tools feels slightly mismatched, as it targets a specific niche (logos) rather than general UI components, slightly reducing appropriateness.
For UI components, there are notable gaps: the tools cover building, inspiration, and refining, but lack operations for updating, deleting, or managing component lifecycles (e.g., no update or delete tools). Logo_search is complete for its domain, but overall, the surface is incomplete for a comprehensive UI component platform, potentially causing agent workarounds.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Design systems, UI prompts, and layout variations for AI coding tools.
AI-powered design and management for Webflow Sites
Related MCP Servers
- FlicenseBqualityDmaintenanceAI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.32-
- -licenseAqualityNot gradedmaintenanceA powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.416,596-
- AlicenseBqualityCmaintenanceAn AI-powered Tailwind builder that helps developers create, inspire, and refactor UI components directly within their IDE, supporting popular frameworks like React, Next.js, Vue, and Svelte.66432MIT
- AlicenseBqualityDmaintenanceEnables developers to generate beautiful, modern UI components through natural language descriptions. Integrates with popular IDEs to instantly create and customize React components inspired by 21st.dev's component library.418ISC
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/21st-dev/magic-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server