21st.dev 是一个收录超过 10,000 个可用于生产环境的 React/Tailwind（兼容 shadcn）组件的市场，并提供 AI UI 生成能力。本技能用于驱动 21st MCP 服务器。
用途 当用户要求添加或构建 UI 元素（例如“加一个定价区块”“我需要一个好看的导航栏”“做一个用户评价模块”）时使用本技能。当用户希望在确定设计前查看多个选项或获取灵感时也可使用。此外，当用户需要 JSX/TSX 格式的公司 Logo（通过 search_logo），或希望根据描述生成全新 UI（通过 generate）时同样适用。
主要能力
- 搜索组件：使用简短的自然语言查询（例如“pricing table”“animated hero”）进行搜索，结果包含名称、描述、预览和安装 id。
- 获取组件：通过 get_component 获取所选组件的完整代码和元数据。
- 安装组件：按照结果指示的方式将组件安装到项目中（shadcn 风格的 registry 添加，或直接写入返回的文件），然后将其接入页面，并根据项目设计系统调整 token 和 props。
- 生成新 UI：在 AI 生成功能已启用且 generate 工具可用时，根据目的、布局、内容、风格和技术栈约束调用生成，消耗 AI 积分并返回预览 URL。
- 获取灵感：使用 get_inspiration 获取设计灵感。
- 搜索 Logo：search_logo 返回可直接粘贴的 JSX/TSX 格式品牌 Logo，每次调用一个品牌。
使用方式（安装现有组件的默认路径） 优先使用真实目录中的组件，而非从零编写 UI——这些组件自带依赖、演示，并支持响应式和暗色模式。首先用简短的自然语言查询进行搜索；选择最符合用户技术栈和风格的匹配项，如果选择不明显，向用户展示 1–3 个最佳候选；然后通过 get_component 获取所选项目的完整代码和元数据；最后按照结果指示的方式安装到项目中，接入页面并调整 token/props 以适配项目设计系统。集成时应匹配项目现有的约定（Tailwind 配置、cn 辅助函数、组件文件夹布局等）。
使用方式（生成新 UI） 当目录中没有合适组件，或用户明确要求自定义 UI 时：先检查 get_usage.aiGenerationEnabled 和当前的 tools/list。仅有付费组件访问权限并不等同于启用托管 AI。缺少状态或状态未知都不代表可以生成。当 AI 关闭时，使用 search 和 get_component，然后用自己的编码代理实现或调整 UI；不要调用生成工具、旧版 builder/refiner 别名，也不要通过 CLI 作为变通。当 AI 已启用且 generate 在工具列表中时，使用目的、布局、内容、风格和技术栈约束调用它；它会消耗 AI 积分并返回预览 URL，打开该 URL 查看生成结果。对于已有的草图草稿，使用 get_generation 和 get_take 读取其代码；这些读取操作在 AI 关闭时仍然可用。如果缓存的调用返回 ai_subscription_required，请停止生成尝试。启用 AI 后，刷新工具列表或重新连接后再试。授权标志不报告剩余积分余额。
适用场景
- 用户要求添加或构建 UI 元素：定价区块、英雄区、导航栏、仪表盘、表单、用户评价模块等。
- 用户希望在确定设计前查看多个选项或获取灵感。
- 用户需要 JSX/TSX 格式的公司 Logo。
- 用户希望根据描述生成全新 UI。
限制
- 免费层允许目录搜索和每天 2 次组件安装；付费组件需解锁后才能获取代码。
- 仅有付费组件访问权限并不启用托管 AI 生成；必须检查 aiGenerationEnabled 且 generate 工具在列表中。
- 缺少或未知的 AI 生成状态不代表允许生成。
- AI 生成会消耗 AI 积分；授权标志不报告剩余积分余额。
- 如果返回 ai_subscription_required，应停止生成尝试；启用 AI 后需刷新工具列表或重新连接。
设置与认证 服务器为 HTTP MCP，地址是 https://21st.dev/api/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。