21st.dev Magic AI Agent
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| API_KEY | Yes | Your 21st.dev Magic API key (generate at https://21st.dev/magic/console) |
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
Server capabilities have not been inspected yet.
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 first three tools have significant overlap and unclear boundaries. 'component_builder' and 'component_inspiration' both mention returning text snippets for UI components, while 'component_refiner' also deals with UI components but focuses on redesign. The descriptions create confusion about when to use each, especially between builder and inspiration. Only 'logo_search' stands clearly apart.
Three tools follow a consistent '21st_magic_component_*' pattern with descriptive suffixes (builder, inspiration, refiner), which is good. However, 'logo_search' breaks this pattern entirely with a different naming convention, creating inconsistency across the set. The naming within the component group is consistent but not across all tools.
Four tools is a reasonable count for a UI/component-focused server, allowing focused functionality without being overwhelming. It covers component creation, inspiration, refinement, and logo handling, which aligns well with the apparent scope of React component development assistance. The count is appropriate though slightly lean.
For a UI component development server, there are notable gaps. While it covers component creation, inspiration, refinement, and logo integration, it lacks tools for component testing, deployment, or management (e.g., listing existing components, deleting components). The surface supports basic workflows but leaves agents without complete lifecycle coverage for the domain.