Skip to main content
Glama
21st-dev

Magic Component Platform (MCP)

by 21st-dev

21st.dev マジックAIエージェント

MCPバナー

Magic Component Platform(MCP)は、自然言語による記述を通じて、美しくモダンなUIコンポーネントを瞬時に作成できる、強力なAI駆動型ツールです。主要なIDEとシームレスに統合され、UI開発のための効率的なワークフローを提供します。

🌟 特徴

  • AIを活用したUI生成:自然言語で記述してUIコンポーネントを作成する

  • マルチIDEサポート:

  • モダン コンポーネント ライブラリ: 21st.devに触発された、事前に構築されたカスタマイズ可能なコンポーネントの膨大なコレクションにアクセスできます。

  • リアルタイムプレビュー: 作成したコンポーネントをすぐに確認できます

  • TypeScript サポート: 型安全な開発のための完全な TypeScript サポート

  • SVGL統合: プロフェッショナルなブランドアセットとロゴの膨大なコレクションへのアクセス

  • コンポーネントの強化: 高度な機能とアニメーションで既存のコンポーネントを改善します (近日公開)

Related MCP server: 21st.dev Magic AI Agent

🎯 仕組み

  1. エージェントに必要なことを伝える

    • AIエージェントのチャットで/uiと入力し、探しているコンポーネントを説明するだけです。

    • 例: /ui create a modern navigation bar with responsive design

  2. 魔法で創造しよう

    • IDEはMagicを使用するように促します

    • マジックは洗練されたUIコンポーネントを瞬時に構築します

    • コンポーネントは21st.devのライブラリからインスピレーションを得ています

  3. シームレスな統合

    • コンポーネントはプロジェクトに自動的に追加されます

    • 新しいUIコンポーネントをすぐに使い始めましょう

    • すべてのコンポーネントは完全にカスタマイズ可能

🚀 はじめに

前提条件

  • Node.js (最新の LTS バージョンを推奨)

  • サポートされている IDE の 1 つ:

    • カーソル

    • ウィンドサーフィン

    • VSCode(Cline拡張機能付き)

インストール

  1. APIキーを生成する

  2. インストール方法を選択

方法 1: CLI インストール (推奨)

IDE 用に MCP をインストールして構成するためのコマンドは 1 つだけです。

npx @21st-dev/cli@latest install <client> --api-key <key>

サポートされているクライアント: cursor、windsurf、cline、claude

方法2: 手動設定

手動で設定したい場合は、IDE の MCP 構成ファイルに以下を追加します。

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
    }
  }
}

設定ファイルの場所:

  • カーソル: ~/.cursor/mcp.json

  • ウィンドサーフィン: ~/.codeium/windsurf/mcp_config.json

  • クライン: ~/.cline/mcp_config.json

  • クロード: ~/.claude/mcp_config.json

方法3: VS Codeのインストール

ワンクリックでインストールするには、以下のいずれかのインストールボタンをクリックします。

VS CodeでNPXを使ってインストールする VS Code Insiders で NPX を使用してインストールする

VS Codeの手動セットアップ

まず、ワンクリックインストールの場合は上記のインストールボタンをご確認ください。手動インストールの場合は、以下の手順に従ってください。

VS Codeのユーザー設定(JSON)ファイルに、以下のJSONブロックを追加します。Ctrl Ctrl + Shift + Pを押してPreferences: Open User Settings (JSON)と入力することで実行できます。

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

オプションとして、ワークスペース内の.vscode/mcp.jsonというファイルに追加することもできます。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ よくある質問

Magic AI Agent はコードベースをどのように処理しますか?

Magic AI Agentは、生成するコンポーネントに関連するファイルのみを書き込みまたは変更します。プロジェクトのコードスタイルと構造に従い、アプリケーションの他の部分に影響を与えることなく、既存のコードベースとシームレスに統合されます。

生成されたコンポーネントをカスタマイズできますか?

はい!生成されたすべてのコンポーネントは完全に編集可能で、適切に構造化されたコードが付属しています。コードベース内の他のReactコンポーネントと同様に、スタイル、機能、動作を変更できます。

世代が足りなくなったらどうなりますか?

月間生成上限を超えた場合、プランのアップグレードを促すメッセージが表示されます。いつでもアップグレードして、コンポーネントの生成を継続できます。既存のコンポーネントは引き続き完全に機能します。

新しいコンポーネントはどれくらい早く 21st.dev のライブラリに追加されますか?

作者はいつでも21st.devにコンポーネントを公開でき、Magic Agentはすぐにそれらにアクセスできます。つまり、コミュニティから提供される最新のコンポーネントとデザインパターンに常にアクセスできるということです。

コンポーネントの複雑さに制限はありますか?

Magic AI Agentは、シンプルなボタンから複雑なインタラクティブフォームまで、さまざまな複雑さのコンポーネントを処理できます。ただし、最良の結果を得るには、非常に複雑なUIを、より小さく管理しやすいコンポーネントに分割することをお勧めします。

🛠️ 開発

プロジェクト構造

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

主要コンポーネント

  • IdeInstructions : さまざまな IDE のセットアップ手順

  • ApiKeySection : APIキー管理インターフェース

  • WelcomeOnboarding : 新規ユーザー向けのオンボーディングフロー

🤝 貢献する

貢献を歓迎します! Discordコミュニティに参加してフィードバックを提供し、Magic Agentの改善にご協力ください。ソースコードはGitHubで公開されています。

👥 コミュニティとサポート

⚠️ ベータ版のお知らせ

Magic Agentは現在ベータ版です。期間中はすべての機能を無料でご利用いただけます。プラットフォームの改善にご協力いただき、皆様からのフィードバックに感謝いたします。

📝 ライセンス

MITライセンス

🙏 謝辞

  • ベータテスターとコミュニティメンバーに感謝します

  • Cursor、Windsurf、Clineチームの協力に感謝します。

  • コンポーネントのインスピレーションを得るための21st.devとの統合

  • ロゴとブランド資産の統合のためのSVGL


詳細については、 Discord コミュニティに参加するか、 21st.dev/magicにアクセスしてください。

Available Tools

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

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesGenerate a search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase
absolutePathToCurrentFileYesAbsolute path to the current file to which we want to apply changes
absolutePathToProjectDirectoryYesAbsolute path to the project root directory
standaloneRequestQueryYesYou need to formulate what component user wants to create, based on his message, possbile chat histroy and a place where he makes the request.Extract additional context about what should be done to create a ui component/page based on the user's message, search query, and conversation history, files. Don't halucinate and be on point.

TDQS

A4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden and does useful work: it discloses that the tool ONLY returns a text snippet and requires the agent to edit or add files afterward. This is important behavioral context beyond the schema.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three short sentences: trigger, output scope, and follow-up action. Each sentence earns its place and the most decision-relevant information is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple builder with no output schema or annotations, it explains what the tool returns and the required integration step. It lacks explicit sibling exclusions and return-shape detail, but the schema covers parameters and the trigger guidance is sufficient for selection.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all five parameters. The description does not repeat parameter details but also does not add meaning beyond the schema, which is the expected baseline.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description names a clear verb+resource: building new UI components, with concrete examples such as button, input, dialog, and form. It is clear about what the tool does but does not explicitly differentiate it from sibling tools like 21st_magic_component_inspiration or 21st_magic_component_refiner.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It gives an explicit 'use this tool when' trigger and lists example request patterns. It does not spell out when to prefer the inspiration or refiner siblings, so it stops short of full when/when-not guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesSearch query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase

TDQS

A3.9/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the behavioral disclosure burden. It states that no code is generated, that only the text snippet is returned, and that the agent must edit or add files afterward. It does not cover authentication, limits, or exact return shape, but the key behavioral constraints are disclosed.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is short and front-loaded with the trigger conditions. There is some redundancy between 'returns the JSON data' and 'ONLY returns the text snippet', but the overall structure is efficient and the post-call instruction earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter fetch-like tool with a rich schema and no output schema, this description provides sufficient context: when to use it, what it returns, what it does not do, and what the agent must do afterward. It could be slightly richer on output formatting, but it is largely complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already documents both required parameters with 100% coverage, so the description adds limited semantic value beyond the schema. The description clarifies that searchQuery is for finding a matching UI component, but this is also reflected in the schema's parameter description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly identifies the action as fetching component data and previews from 21st.dev, and it contrasts itself with code generation by stating it does not generate new code. It does not explicitly distinguish itself from the refiner sibling, so it stops short of full differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description opens with explicit trigger conditions: 'when the user wants to see component, get inspiration, or /21st'. It does not provide when-not guidance or name alternative tools, but the usage context is clear enough for an agent to select this tool appropriately.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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

ParametersJSON Schema
NameRequiredDescriptionDefault
userMessageYesFull user's message about UI refinement
absolutePathToRefiningFileYesAbsolute path to the file that needs to be refined
contextYesExtract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string.

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full disclosure burden. It does state the core outcome—'returns redesigned version of the component and instructions on how to implement it'—which implies a read/return behavior rather than a direct write. However, it never says whether the file at absolutePathToRefiningFile is modified, what happens on failure, or any prerequisites, leaving the side-effect profile unclear for a mutating-looking tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two compact sentences with the trigger condition front-loaded in the opening clause ('Use this tool when...'). There is minor redundancy—'improves UI' appears in both sentences—but no filler or irrelevant content.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The definition covers what the tool does, when to use it, and the outcome, and the schema fully documents parameters. But with no output schema and no annotations, the concrete return format of the 'redesigned version and instructions' is unspecified, and side effects on the target file are unstated, leaving the full invocation contract incomplete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, and the schema already documents all three parameters in detail—'context' even includes extraction rules and the 'return an empty string' fallback. The description text adds no parameter-level meaning beyond the schema, so the baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states specific verbs ('re-design/refine/improve') and a clear resource ('current UI component', 'React component or molecule'), and scopes the tool by excluding big pages. The outcome is also specified: it 'returns redesigned version of the component and instructions on how to implement it.' It does not explicitly distinguish itself from sibling tools (inspiration, builder), so differentiation is inferable rather than stated.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicit trigger conditions are given ('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') plus a clear exclusion ('NOT for big pages'). It stops short of naming alternatives—an agent is not told to use builder for new components or inspiration for ideas—so the when-not guidance is partial.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updatesv1.0.0
    • Added21st_magic_component_builder
    • Added21st_magic_component_inspiration
    • Added21st_magic_component_refiner
    • Addedlogo_search

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

Related MCP Connectors

Related MCP Servers