magic-mcp logo

magic-mcp就是 v0 的样子,但是放在你的 Cursor/WindSurf/Cline 里。21 世纪开发者 Magic MCP 服务器,用于与前端合作像 Magic 一样。

(0)
Daniel Nikulshyn审阅者 Daniel Nikulshyn·更新 2026年7月

概览

21st-dev Magic AI Agent Magic Component Platform(MCP)是一款强大的 AI 驱动工具,帮助开发者通过自然语言描述瞬间创建美观、现代的 UI 组件。它与流行的 IDE 无缝集成,为 UI 开发提供了高效的工作流程。 要使用 magic-mcp,用户必须登录才能更改项目的通知设置。开发者可以通过"Tell Agent What You Need"功能,用自然语言描述 UI 组件,Magic MCP 会即时构建一个借鉴 21st.dev 库的精美 UI 组件。 要在 IDE 中集成,开发者需要安装支持的客户端,例如 Cursor、Windsurf 或装有 Cline 插件的 VSCode。安装 MCP 可以通过三种方式:使用 'npx @21st-dev/cli@latest install' 命令的 CLI 安装;通过 IDE 的 MCP 配置文件手动配置;或在 VS Code 中点击安装按钮实现一键安装。该工具支持实时预览、TypeScript 等功能,并可访问庞大的专业品牌资产和标识库。

主要功能

  • AI-Powered UI Generation
  • Multi-IDE 支持
  • 现代组件库
  • 实时预览
  • TypeScript 支持
  • SVGL 集成

价格

模型
Free
评分
暂无评价

使用场景

快速 UI 开发

开发者可以快速通过自然语言描述创建 UI 组件,简化开发流程。

自定义组件创建

用户可以根据特定需求(如响应式设计)生成自定义 UI 组件并将其整合到项目中。

优点 & 缺点

优点

  • 通过 AI 驱动 UI 生成功能即可实现快速组件创建
  • 无缝集成流行的 IDE
  • 访问高达几百个可定制组件的庞大库

缺点

  • 需要 21 世纪开发者 Magic API 密钥才能使用
  • 一些功能,如组件增强,仍在开发中

评测

登录以留下评测。

暂无评测。来当第一个吧!

问答

Are there any limitations to using magic-mcp?

Yes, magic-mcp requires a 21st.dev Magic API key for use and some features are still in development.

Asked by Ahmed Saleh · Aug 16, 2025

How do I create UI components with magic-mcp?

You can create UI components by describing them in natural language using the 'Tell Agent What You Need' feature.

Asked by Kalinda Reddy · Jul 22, 2025

Which IDEs are supported by magic-mcp?

Magic-mcp supports popular IDEs, including those with Cursor, Windsurf, or VSCode with the Cline extension.

Asked by Ximenez Alvarado · Jul 22, 2025

What is the cost of using magic-mcp?

The provided details do not include pricing information for magic-mcp.

Asked by Ivana Novak · Jun 30, 2025

提问

服务配缩器 的替代品