Skip to main content
Glama
21st-dev

Magic Component Platform (MCP)

by 21st-dev

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault
API_KEY_21STNoYour 21st API key (alternative)
TWENTY_FIRST_API_KEYNoYour 21st 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

Server capabilities have not been inspected yet.

Tools

Functions exposed to the LLM to take actions

NameDescription
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:

  1. When user types "/logo" command (e.g., "/logo GitHub")

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

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

NameDescription

No prompts

Resources

Contextual data attached and managed by the client

NameDescription

No resources

TDQS

B3.4/5.0

Scored across 4 tools

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

ActivityMaintained
ResponsivenessUnresponsive