Glama
Sign In

Magic Component Platform (MCP)

Official
by 21st-dev
GitHub
TypeScript
340
RedditDiscord
OverviewInspectSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault
TWENTY_FIRST_API_KEYYesYour API key generated from the Magic dashboard

Schema

Prompts

Interactive templates invoked by user choice

NameDescription

No prompts

Resources

Contextual data attached and managed by the client

NameDescription

No resources

Tools

Functions exposed to the LLM to take actions

NameDescription
21st_magic_component_builder

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

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_inspiration

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