広告掲載
MCP.so
ログイン

21st.dev Magic AI Agent MCP Server注目

@21st-dev

リポジトリホームページ

基本情報

カテゴリ

AI とエージェント

トランスポート

stdio

作者

21st-dev

21st.dev Magic AI Agent MCP Server について

It's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic

接続前の確認

文書確認日：2026-10-25

適した用途

Magic MCP は統合版の 21st MCP に移行しました。旧パッケージは独立したバックエンドではなく互換プロキシです。

設定と制限

README によると旧 Magic API キーはリセットされています。21st.dev/mcp で新しいキーを取得し、現在の手順に従ってください。旧設定で認証に失敗する場合、まずキーの移行を確認します。

リンク先の文書を確認した内容です。認証済みの実接続テストを意味しません。確認手順はご自身の環境で実行してください。

上流ドキュメントを見る関連サーバーを比較

21st.dev Magic AI Agent MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "@21st-dev/cli@latest",
        "install",
        "<client>",
        "--api-key",
        "<key>"
      ]
    }
  }
}

21st.dev Magic AI Agent MCP Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

上のボタンで一時的なサンドボックスでこのサーバーを実行し、ツール一覧を取得できます。

概要

What is 21st.dev Magic AI Agent?

An AI-powered MCP server that creates modern UI components from natural language descriptions. It integrates with Cursor, Windsurf, and VSCode (including Cline) to generate polished, customizable React components in your IDE.

How to use 21st.dev Magic AI Agent?

Generate an API key at 21st.dev Magic Console, then install via one CLI command (npx @21st-dev/cli@latest install <client> --api-key <key>) or manually add an MCP config entry. In your AI Agent’s chat, type /ui followed by a description of the component you need.

Key features of 21st.dev Magic AI Agent

  • AI-powered UI generation from natural language descriptions.
  • Multiple IDE integrations (Cursor, Windsurf, VSCode, Cline).
  • Access to a library of pre-built, customizable components.
  • Real-time preview of components as you create them.
  • Full TypeScript support for type‑safe development.
  • SVGL integration for professional brand assets and logos.

Use cases of 21st.dev Magic AI Agent

  • Rapidly generate navigation bars, forms, or buttons by describing them.
  • Add modern UI patterns to an existing project without manual coding.
  • Prototype UI variations quickly inside your IDE.
  • Enhance existing components with advanced features (coming soon).

よくある質問

1

How does Magic AI Agent handle my codebase?

It only writes or modifies files related to the components it generates, following your project’s code style and structure without affecting other parts of your application.

2

Can I customize the generated components?

Yes, all generated components are fully editable with well‑structured code, just like any other React component in your project.

3

What happens if I run out of generations?

You will be prompted to upgrade your plan if you exceed your monthly limit. Existing components remain fully functional.

4

Is there a limit to component complexity?

Magic AI Agent can handle components of varying complexity, from simple buttons to complex interactive forms. For best results, break very complex UIs into smaller components.

5

What runtime or dependencies are required?

Node.js (latest LTS recommended) and one of the supported IDEs (Cursor, Windsurf, or VSCode with Cline). The server only requires an API key from 21st.dev.

コメント

「AI とエージェント」の他のコンテンツ

F

fhirHydrant

faulkj

Open-source Node.js FHIR MCP server with SMART Backend Services, metadata-aware search/CRUD tools, compact responses, FHIRPath filtering, safe pagination, audit events, and terminology lookup.

14

Rumoro

@Rumoro

Social listening for AI agents. Rumoro's remote MCP server lets Claude, Cursor, Codex and other MCP clients search and sort mentions of your product, your competitors and your topics on Reddit, X, Hacker News, GitHub, Yo

Gemina

Gemina Tech Ltd.

Extract, search and tag any document — invoices, receipts, contracts, forms, or your own templates. 13 tools, one sign-in (OAuth 2.1) or API key, free FileTag tier, data residency in the EU, US, Israel or Asia.

Hypnothera

La-Salida

Agent skill: turn what your AI assistant knows about you into a personalized hypnosis session on hypnothera.ai

SlopIt

SimbaStack

Instant blogs for AI agents: a publishing CMS with no dashboard. One signup call returns a blog, an API key and a live URL; then publish markdown posts and get public URLs back.

広告掲載