21st-dev/Magic-MCP | MCP服务器详情

01 / 服务器详情

服务器详情

Magic-MCP 是一个面向前端开发者的 MCP 插件，旨在将 21st.dev 社区的高质量 UI 组件库直接接入 AI 聊天界面。它解决了 AI 生成代码时经常出现的“样式简陋”或“不符合现代审美”的痛点。通过该协议，开发者无需在浏览器和 IDE 之间频繁切换，直接在 AI 对话中即可调用经过设计工程师优化过的 UI 组件片段。其上手门槛极低，只要配置好 MCP 环境，就能让 AI 具备快速构建高颜值、生产级界面的能力，是提升前端原型开发效率的利器。

一个提供 21st-dev/Magic-MCP 能力的模型上下文协议服务器，可被兼容 MCP 的 AI 客户端连接和调用。

能力标签GeneralMCP开源

协议Model Context Protocol

开发者生态开源生态

开源协议MIT / 以来源页为准

来源GitHub

收录合集

收录本 MCP 服务的合集

常用MCP2026.03.30已收录

我的MCP2026.03.31已收录

Genie2026.03.30已收录

02 / 工具测试

工具测试

可用工具

21st-dev-magic-mcp

可调用

调用 21st-dev/Magic-MCP 提供的 MCP 能力并返回结构化结果。

参数

input根据该 MCP 服务的工具 schema 传入参数。

提示：该工具可能会截断响应；使用 start_index 等分页参数可以分块读取较长内容。

03 / 服务配置

连接方式

Remote

{
  "mcpServers": {
    "21st-dev/Magic-MCP": {
      "url": "部署后由服务提供方生成 Remote 地址"
    }
  }
}

Remote 地址需要在部署后由服务提供方生成，页面不会伪造不可用的端点。

Stdio · mcp.json

当前记录没有 npm 包，请先打开来源仓库补充 command 和 args。

如果当前条目没有登记 npm 包，请以来源仓库的安装方式为准。

03 / 使用方法

如何使用

01
步骤 1
先检查服务器能力和权限范围。
02
步骤 2
复制安装命令或 JSON 配置。
03
步骤 3
在客户端中进行小范围连接测试。
04
步骤 4
确认数据访问和维护状态后再长期使用。

04 / 讨论

讨论与反馈

这里保留讨论入口，方便继续核对来源、使用体验和维护状态。

前往来源页面