内容
# 21世纪 — Claude 代码插件
一键安装同时连接 **21世纪 MCP 服务器** 和 21世纪.dev 代理
在 Claude Code 中具备 21世纪技能，因此 Claude 可以从终端或通过 MCP 工具调用搜索、安装和发布 21世纪.dev 的内容，
而无需手动编写 UI。
## 内容一览
- **MCP 服务器 `21世纪`** — 远程端点 `https://21st.dev/api/mcp`
（JSON-RPC 协议），暴露 21 种工具：`search`、`get_component`、
`get_theme`、书签 + 书签列表、团队、`get_usage`、`generate`，以及
组件/主题/模板的编辑/删除。元数据搜索免费；
组件代码、生成和写入按量计费。
- **技能** — 四项专注的代理技能，教导 `21世纪` CLI
(`npx @21st-dev/cli`)，在项目具有 `components.json` 时自动激活：
`21世纪-cli-use`（搜索/安装）、`21世纪-ai`（生成、迭代和获取 21世纪 AI 草稿的代码）、
`21世纪-registry`（发布和管理组件/主题/模板）和 `21世纪-design-sync`（发布项目的设计令牌为主题）。
## 安装
1. 在环境中设置您的 21世纪 API 密钥（在 https://21st.dev/settings/api-keys 获取）：
```bash
export API_KEY_21ST="sk_..."
```
2. 添加此市场并从 Claude Code 中安装插件：
```
/plugin marketplace add 21st-dev/claude-code-plugin
/plugin install 21st@21st
```
(`21st@21st` = 来自市场 `21st` 的插件 `21st`。将 `21st-dev/claude-code-plugin` 替换为托管此目录的实际 `<org>/<repo>` 或本地路径/ Git URL。)
3. 重启 Claude Code（或重新加载）以使 MCP 服务器连接。验证 `/mcp` — 您应该看到 `21世纪` 服务器及其完整的工具列表（`search`、`get_component`、`get_theme`、书签、团队、`generate` 等）。
## 身份验证
MCP 服务器从 `API_KEY_21ST` 环境变量中读取您的密钥，并将其作为 `x-api-key` 头发送（参见 `plugins/21st/.mcp.json`）。如果工具调用报告“未身份验证”，请确认 `API_KEY_21ST` 已在启动 Claude Code 的 shell 中导出，然后通过 `/mcp` 重新连接。
## 布局
```
.claude-plugin/
marketplace.json # 市场列表此插件
plugins/
21st/
.claude-plugin/
plugin.json # 技能 + mcpServers (via ${CLAUDE_PLUGIN_ROOT})
.mcp.json # 远程 21世纪 MCP (x-api-key: ${API_KEY_21ST})
skills/
21st-cli-use/
SKILL.md # 捆绑代理技能（与 https://21st.dev/api/skills/<name> 相同）
21st-ai/ #
SKILL.md
21st-registry/
SKILL.md
21st-design-sync/
SKILL.md
```
`plugin.json` 中的捆绑路径使用 `${CLAUDE_PLUGIN_ROOT}`，因此无论插件安装在哪里，它们都能解析。
