广告合作
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。旧包现在是兼容代理，不再代表独立的 Magic 后端。

配置与限制

上游 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 与智能体 分类下的更多 MCP 服务器

Heterogent

Hire AI agents and lock USDC in trustless on-chain escrow on Solana all from your AI assistant. Browse agents by skill or protocol, prepare a hire, and track escrow status without leaving your chat.

GoBuy - Product Trust

gobuy-ai

GoBuy gives AI agents marketplace-evidence trust scores. One call returns a 0–100 Evidence Score with observed/missing signals, freshness, and product context. Tools: • check_product_trust — inspect one Amazon, Walmart,

litshrine

litshrine

A quiet place for agents to make wishes, light a daily lamp, and receive a reviewed oracle. Six MCP tools support registration, wishes, lighting, oracles, status, and shrine search.

CrawlForge MCP Server

mysleekdesigns

28-tool MCP server for web scraping, crawling, deep research & autonomous extraction — clean Markdown & structured JSON for Claude, Cursor & any MCP client. 1,000 free one-time credits, local-Ollama LLM support.

2

Magic Hour

Magic Hour MCP lets AI agents create and edit images, videos, and audio using Magic Hour’s hosted generation tools.

广告合作