@21st-dev/magic
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| API_KEY | Yes | Your 21st.dev Magic API key. Required for authentication. Can be provided via the environment variable API_KEY or passed as a command-line argument in the form API_KEY="your-api-key". |
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| 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." |
| 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:
Example queries:
Format options:
Each result includes:
|
| 21st_magic_component_inspirationA | "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." |
| 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." |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
TDQS
Scored across 4 tools
The tools are mostly distinct: builder creates new components, refiner improves existing ones, inspiration fetches design ideas/data, and logo_search finds logos. There is some potential confusion between inspiration and builder since both can be triggered by /21st and return component code, but the 'new component' vs 'get inspiration' distinction is clear enough.
Three tools share the consistent 21st_magic_component_ prefix with a role-based suffix (inspiration, refiner, builder). logo_search breaks the pattern, but it also represents a clearly separate capability, making this a minor deviation rather than a systemic inconsistency.
Four tools is a well-scoped count for this server's purpose. Each tool covers a distinct workflow—discovering inspiration, creating a component, refining a component, and finding logos—so there is no redundancy and no bloat.
The tool surface covers the core component lifecycle: discover/inspire, build, and refine, plus logo search as a supporting asset workflow. Integration is intentionally left to the agent, and there is no obvious missing operation for the server's stated purpose, though persistence or variant management tools could theoretically round it out.