Skip to directory

21st MCP (formerly Magic MCP)

21st.dev

Streamable HTTP (primary); stdio via legacy compatibility package6+ documented tools23

About 21st MCP (formerly Magic MCP)

The listing's Magic MCP has been replaced by 21st MCP, an authenticated design/code component server for searching components and logos, retrieving components, inspiration and account-dependent UI generation.

What you can use it for

  • Search and retrieve UI components, themes and templates
  • Find design inspiration and product logos
  • Generate UI/component code when the authenticated account is entitled to AI generation
Connection and setup
Hosting
Remote hosted Streamable HTTP; local stdio compatibility proxy for older clients
Transport
Streamable HTTP (primary); stdio via legacy compatibility package
Endpoint
https://21st.dev/api/mcp
Authentication
21st API key sent as x-api-key for hosted HTTP or API_KEY_21ST for the local compatibility proxy. Old Magic-console API keys were reset and do not work.

Requirements

  • 21st.dev account and newly generated API key from https://21st.dev/mcp
  • MCP client with remote HTTP, or Node/npm for legacy stdio proxy
  • Account entitlement for hosted AI generation; generation can be disabled while search/retrieval remains available

Setup steps

  1. Use the 21st MCP, not the retired standalone Magic install, by adding https://21st.dev/api/mcp and securely configuring x-api-key.
  2. Recommended official installer: npx @21st-dev/cli@latest init --client <cursor|claude|vscode|windsurf|codex>.
  3. If the client supports only stdio, use the compatibility proxy @21st-dev/magic with API_KEY_21ST; do not use a retired Magic key.
  4. Authenticate, reload tools and inspect account capability (get_usage.aiGenerationEnabled) before asking for generated code.
Tools 6+

These names are examples and compatibility aliases only. The current server exposes a larger account-dependent catalog; legacy Magic names are translated. Call tools/list for the connected account.

  • generate

    Generate UI/code with the currently authenticated 21st account, when AI generation is enabled.

    01
  • get_inspiration

    Retrieve component/design inspiration.

    02
  • search

    Search the 21st component/catalog surface.

    03
  • get_component

    Retrieve component details/code.

    04
  • search_logo

    Search logos.

    05
  • get_usage

    Check account usage and AI-generation availability.

    06

This server’s available tools can vary by account, permissions, or configuration. The list shown is not its full runtime catalog.

Limitations and notes
  • Magic MCP was replaced by unified 21st MCP; the legacy package is a compatibility proxy only.
  • Old Magic console keys were reset; generate a new API key at 21st.dev/mcp.
  • Available tools and AI-generation ability depend on the authenticated account; reconnect after entitlement changes.
  • Do not retry subscription-gated generation through legacy aliases.
Source discrepancies
  • The directory calls this Magic. The publisher says Magic MCP has been replaced by the unified 21st MCP. Record retains the supplied slug but uses the current implementation name and documents migration.
Original sources
  • official tool reference

    The maintainer says legacy names are translated, current tools exceed the old list, and tools/list is account-dependent; recorded names are examples only.

  • official documentation

    The maintainer says legacy names are translated, current tools exceed the old list, and tools/list is account-dependent; recorded names are examples only.

Documentation checked 2026-10-28T12:48:00.000Z. Connection has not been runtime tested.

Similar tools