Skip to main content
Glama
21st-dev

Magic Component Platform (MCP)

by 21st-dev

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.

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

Or 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

21st_magic_component_builder

generate

21st_magic_component_inspiration

get_inspiration

21st_magic_component_refiner

generate (new generation from the refinement prompt)

logo_search

search_logo (one query per call)

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.

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 tools
21st_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."

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesGenerate 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
absolutePathToCurrentFileYesAbsolute path to the current file to which we want to apply changes
absolutePathToProjectDirectoryYesAbsolute path to the project root directory
standaloneRequestQueryYesYou 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

A3.8/5.0
Behavior3/5

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.

Conciseness4/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines5/5

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."

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesSearch 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

B3.3/5.0
Behavior3/5

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.

Conciseness4/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose3/5

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.

Usage Guidelines4/5

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."

ParametersJSON Schema
NameRequiredDescriptionDefault
userMessageYesFull user's message about UI refinement
absolutePathToRefiningFileYesAbsolute path to the file that needs to be refined
contextYesExtract 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

A3.6/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines5/5

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.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 4 tool updatesv1.0.0
    • Added21st_magic_component_builder
    • Added21st_magic_component_inspiration
    • Added21st_magic_component_refiner
    • Addedlogo_search

TDQS

B3.4/5.0
Disambiguation3/5

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 Consistency2/5

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.

Tool Count4/5

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.

Completeness3/5

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

ActivitySlowing
ResponsivenessSyncing

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

Related MCP Servers

Latest Blog Posts

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