21st-ui

21st.dev UI 技能

21st.dev 是一个拥有 10,000 多个生产就绪 React/Tailwind（兼容 shadcn）组件的市场，并提供 AI UI 生成。此技能用于驱动 21st MCP 服务。

适用场景

• 用户要求添加或构建 UI 元素：“添加一个定价版块”“我需要一个漂亮的导航栏”“制作一个客户评价区块”。
• 用户希望在确定设计前看看有哪些选项或获取灵感。
• 用户需要在 JSX/TSX 中使用公司徽标（search_logo）。
• 用户希望根据描述生成全新的 UI（generate）。

工作流：安装现有组件（默认路径）

优先使用目录中的真实组件，而不是从头编写 UI——这些组件自带依赖、演示，并支持响应式布局和深色模式。

1. 使用简短的自然语言查询执行 search（例如“定价表”“动态主视觉区”）。结果包含名称、描述、预览和安装 ID。
2. 选择最符合用户技术栈和风格的组件；如果难以决定，向用户展示 1–3 个最佳候选项。
3. 使用 get_component 获取所选组件的完整代码和元数据。
4. 按结果中的说明将组件安装到项目中（使用 shadcn 风格的注册表添加方式，或写入返回的文件），然后将其接入页面，并根据项目的设计系统调整设计令牌和属性。

注意：

• 免费层允许搜索目录，每天可安装 2 个组件；付费组件只有解锁后才会返回代码。
• 集成时遵循项目现有的约定（Tailwind 配置、cn 助手函数、组件目录布局）。

工作流：生成新 UI

如果目录中没有合适的组件，或用户明确要求定制 UI：

1. 检查 get_usage.aiGenerationEnabled 和当前的 tools/list。仅有付费组件访问权限并不代表已启用托管式 AI。状态缺失或未知不代表获得生成许可。
2. 如果 AI 已关闭，使用 search 和 get_component，然后用自己的编码 Agent 实现或调整 UI。不要调用生成工具、旧版 builder/refiner 别名，也不要通过 CLI 绕过限制。
3. 如果 AI 已启用且工具列表中有 generate，使用用途、布局、内容、风格和技术栈限制调用它。此操作会消耗 AI 点数并返回预览 URL；打开该 URL 查看生成结果。
4. 对于现有的草图草稿，使用 get_generation 和 get_take 查看其代码。AI 关闭时仍可读取这些内容。

如果缓存的调用返回 ai_subscription_required，请停止尝试生成。启用 AI 后，刷新工具列表或重新连接，然后再试。权限标志不会报告剩余点数。

徽标

search_logo 每次调用会返回一个品牌的现成 JSX/TSX 徽标，可直接粘贴使用。

设置与身份验证

该服务是运行在 https://21st.dev/api/mcp 上的 HTTP MCP 服务，通过 x-api-key 标头进行身份验证。可在 https://21st.dev/mcp 免费即时获取密钥。如果调用因身份验证错误而失败，告知用户在那里获取密钥，并在插件配置中设置该密钥（变量 API_KEY_21ST）。

旧版 Magic 工具名称（21st_magic_component_builder、logo_search 等）在服务端仍可用，但请优先使用当前名称：search、get_component、generate、get_inspiration、search_logo。