Skip to main content
Glama
enesjakozh
oyasimi1209

Magic Component Platform

by oyasimi1209
OverviewSchemaSourceRelated ServersDiscussionsAdmin
Local

21st.dev 魔法 AI 代理

MCP 横幅

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

🌟 功能

  • 人工智能驱动的 UI 生成：通过自然语言描述来创建 UI 组件

  • 多 IDE 支持：

  • 现代组件库：访问受21st.dev启发的大量预构建、可定制组件

  • 实时预览：创建组件时立即查看

  • TypeScript 支持：全面支持 TypeScript，实现类型安全开发

  • SVGL 集成：访问大量专业品牌资产和徽标

  • 组件增强：使用高级功能和动画改进现有组件（即将推出）

Related MCP server: 21st.dev Magic AI Agent

🎯 工作原理

  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 密钥

    • 访问您的 Magic 仪表板

    • 导航至 API 部分

    • 生成新的 API 密钥

  2. IDE 设置

游标 IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

风帆冲浪

添加到~/.codeium/windsurf/mcp_config.json ：

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline（测试版）

添加到 Cline 的 MCP 配置：

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

❓ 常见问题解答

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 。

Available Tools

3 tools
21st_magic_component_builderA

"Use this tool when the user requests a new UI component—e.g., mentions /ui, /21 /21st, or asks for a button, input, dialog, table, form, banner, card, or other React component. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesGenerate a search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase

TDQS

A4.1/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It explains that the tool returns text snippets and requires manual integration afterward, which is useful context. However, it doesn't disclose important behavioral traits like whether this is a read-only operation, if it makes external API calls, potential rate limits, or error handling for invalid requests.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise and well-structured with only three sentences, each serving a distinct purpose: trigger conditions, tool limitation, and required follow-up actions. There's zero wasted text, and the most important information (when to use the tool) is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations and no output schema, the description provides adequate context for a simple tool but has gaps. It explains the tool's purpose and usage well but doesn't describe what the output looks like (format, structure, or content of returned snippets) or address potential limitations or error conditions that would help an agent use it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 100% schema description coverage, the baseline is 3. The description doesn't add any parameter-specific information beyond what's already in the schema (message and searchQuery parameters are fully documented in the schema). No additional syntax, format, or usage details for parameters are provided in the description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'returns the text snippet for that UI component' when users request new UI components. It specifies the exact trigger conditions (mentions of /ui, /21, /21st, or specific component types) and distinguishes it from sibling tools by focusing on returning component snippets rather than inspiration or logo searches.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit usage guidelines: 'Use this tool when the user requests a new UI component' with specific trigger examples, and distinguishes it from alternatives by stating 'This tool ONLY returns the text snippet' and requiring follow-up actions. It clearly defines when to use this tool versus other approaches.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

21st_magic_component_inspirationA

"Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."

ParametersJSON Schema
NameRequiredDescriptionDefault
messageYesFull users message
searchQueryYesSearch query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase

TDQS

A3.9/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the behavioral disclosure burden. It states that no code is generated, that only the text snippet is returned, and that the agent must edit or add files afterward. It does not cover authentication, limits, or exact return shape, but the key behavioral constraints are disclosed.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is short and front-loaded with the trigger conditions. There is some redundancy between 'returns the JSON data' and 'ONLY returns the text snippet', but the overall structure is efficient and the post-call instruction earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter fetch-like tool with a rich schema and no output schema, this description provides sufficient context: when to use it, what it returns, what it does not do, and what the agent must do afterward. It could be slightly richer on output formatting, but it is largely complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema already documents both required parameters with 100% coverage, so the description adds limited semantic value beyond the schema. The description clarifies that searchQuery is for finding a matching UI component, but this is also reflected in the schema's parameter description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly identifies the action as fetching component data and previews from 21st.dev, and it contrasts itself with code generation by stating it does not generate new code. It does not explicitly distinguish itself from the refiner sibling, so it stops short of full differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description opens with explicit trigger conditions: 'when the user wants to see component, get inspiration, or /21st'. It does not provide when-not guidance or name alternative tools, but the usage context is clear enough for an agent to select this tool appropriately.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 3 tool updatesv1.0.0
    • First observed21st_magic_component_builder
    • First observed21st_magic_component_inspiration
    • First observedlogo_search
Deploy Server
Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

TDQS

B3.1/5.0

Scored across 3 tools

Disambiguation2/5

The first two tools have significant overlap in purpose and confusing descriptions. Both '21st_magic_component_builder' and '21st_magic_component_inspiration' claim to return UI component snippets and require integration into the codebase, making it unclear when to use one versus the other. The third tool 'logo_search' is clearly distinct for logo handling, but the ambiguity between the first two tools is problematic.

Naming Consistency2/5

The naming is inconsistent with mixed conventions. The first two tools use a verbose '21st_magic_component_' prefix with different suffixes ('builder' vs 'inspiration'), while the third tool uses a simple 'logo_search' with underscore. There's no consistent verb_noun pattern, and the styles vary significantly across the set.

Tool Count3/5

With only 3 tools, the count feels thin for a 'Magic Component Platform' that seems to handle UI components and logos. While 3 tools isn't inherently wrong, it suggests limited scope or incomplete coverage for what the server name implies. It's borderline but leans toward under-scoped.

Completeness2/5

For a component platform, there are significant gaps. The tools cover component building/inspiration and logo search, but lack essential operations like updating existing components, deleting components, managing component libraries, or handling component state/props systematically. The surface feels incomplete for proper component lifecycle management.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

Appeared in Searches