Skip to main content
Glama
Sign In
enesjakozh

Magic Component Platform (MCP)

by 21st-dev
npmGitHub
TypeScript
3,157
1,627
  • Linux
  • Apple
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

21st.dev 魔法 AI 代理

MCP 横幅

Magic Component Platform (MCP) 是一款强大的 AI 驱动工具，可帮助开发者通过自然语言描述即时创建美观、现代的 UI 组件。它与主流 IDE 无缝集成，并提供精简的 UI 开发工作流程。

🌟 功能

  • 人工智能驱动的 UI 生成：通过自然语言描述来创建 UI 组件
  • 多 IDE 支持：
  • 现代组件库：访问受21st.dev启发的大量预构建、可定制组件
  • 实时预览：创建组件时立即查看
  • TypeScript 支持：全面支持 TypeScript，实现类型安全开发
  • SVGL 集成：访问大量专业品牌资产和徽标
  • 组件增强：使用高级功能和动画改进现有组件（即将推出）

🎯 工作原理

  1. 告诉代理您需要什么
    • 在你的 AI Agent 聊天中，只需输入/ui并描述你正在寻找的组件
    • 示例： /ui create a modern navigation bar with responsive design
  2. 让魔法创造它
    • 你的 IDE 提示你使用 Magic
    • Magic 立即构建精美的 UI 组件
    • 组件灵感来自 21st.dev 的库
  3. 无缝集成
    • 组件会自动添加到您的项目中
    • 立即开始使用新的 UI 组件
    • 所有组件均可完全定制

🚀 入门

先决条件

  • Node.js（推荐使用最新 LTS 版本）
  • 受支持的 IDE 之一：
    • 光标
    • 风帆冲浪
    • VSCode（带有 Cline 扩展）

安装

  1. 生成 API 密钥
  2. 选择安装方法
方法一：CLI 安装（推荐）

一个命令即可为您的 IDE 安装和配置 MCP：

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

支持的客户端：cursor、windsurf、cline、claude

方法二：手动配置

如果您更喜欢手动设置，请将其添加到您的 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 设置

首先，点击上方的“安装”按钮，即可进行一键安装。手动安装：

将以下 JSON 块添加到 VS Code 中的“用户设置 (JSON)”文件中。您可以按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上获取。

👥 社区与支持

⚠️ Beta 版公告

Magic Agent 目前处于测试阶段。在此期间，所有功能均免费。感谢您的反馈和耐心，我们将持续改进平台。

📝 许可证

MIT 许可证

🙏 致谢

  • 感谢我们的 Beta 测试人员和社区成员
  • 特别感谢 Cursor、Windsurf 和 Cline 团队的合作
  • 与21st.dev集成以获取组件灵感
  • SVGL用于徽标和品牌资产整合

欲了解更多信息，请加入我们的Discord 社区或访问21st.dev/magic 。

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

一种由人工智能驱动的工具，可根据自然语言描述生成现代 UI 组件，并与流行的 IDE 集成以简化 UI 开发工作流程。

  1. 🌟 功能
    1. 🎯 工作原理
      1. 🚀 入门
        1. 先决条件
        2. 安装
      2. ❓ 常见问题解答
        1. Magic AI Agent 如何处理我的代码库？
        2. 我可以自定义生成的组件吗？
        3. 如果我用完了所有代数，会发生什么情况？
        4. 新组件多久会添加到 21st.dev 的库中？
        5. 组件复杂性有限制吗？
      3. 🛠️ 开发
        1. 项目结构
        2. 关键组件
      4. 🤝 贡献
        1. 👥 社区与支持
          1. ⚠️ Beta 版公告
            1. 📝 许可证
              1. 🙏 致谢

                Related Resources

                Related MCP Servers

                • AI Development Assistant MCP Server

                  kleneway
                  -
                  security
                  A
                  license
                  -
                  quality
                  An AI-powered development toolkit for Cursor providing intelligent coding assistance through advanced reasoning, UI screenshot analysis, and code review tools.
                  Last updated -
                  932
                  240
                  TypeScript
                  MIT License

                • Feature-Discussion MCP Server

                  squirrelogic
                  A
                  security
                  A
                  license
                  A
                  quality
                  Facilitates interactive feature discussions with AI guidance, maintaining context and providing intelligent recommendations for implementation, architecture, and best practices in software development.
                  Last updated -
                  2
                  1
                  JavaScript
                  MIT License
                  • Apple

                • Make MCP Server

                  integromat
                  A
                  security
                  A
                  license
                  A
                  quality
                  Transform your Make scenarios into callable tools for AI assistants. Leverage your existing automation workflows while enabling AI systems to trigger and interact with them seamlessly.
                  Last updated -
                  6
                  244
                  53
                  TypeScript
                  MIT License

                • SupaUI MCP Server

                  buoooou
                  A
                  security
                  F
                  license
                  A
                  quality
                  A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
                  Last updated -
                  3
                  19
                  4
                  TypeScript

                View all related MCP servers

                Appeared in Searches

                New MCP Servers

                MCP directory API

                We provide all the information about MCP servers via our MCP API.

                curl -X GET 'https://glama.ai/api/mcp/v1/servers/21st-dev/magic-mcp'

                If you have feedback or need assistance with the MCP directory API, please join our Discord server