claude-code-plugin

KO | EN

gitlite — search

#video #git #nextjs #awesome-list #openai #machine-learning #redis #claude-code #ai-agents #cross-platform

claude-code-plugin

(★ 9)

21st.dev Claude Code plugin: bundles the 21st-cli skill + the remote 21st MCP server in one install.

File Explorer

ZIP Download

- marketplace.json
- - .mcp.json
LICENSE
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

One install wires up **both** the 21st MCP server and the 21st.dev Agent
Skills in Claude Code, so Claude searches, installs and publishes on 21st.dev
from the terminal or via MCP tool calls, instead of hand-writing UI.

## What's inside

- **MCP server `21st`** — the remote endpoint `https://21st.dev/api/mcp`
  (JSON-RPC over HTTP), exposing 21 tools: `search`, `get_component`,
  `get_theme`, bookmarks + bookmark lists, teams, `get_usage`, `generate`, and
  edit/delete for components/themes/templates. Metadata search is free;
  component code, generation and writes are metered.
- **Skills** — seven focused Agent Skills that teach the `21st` CLI
  (`npx @21st-dev/cli`), auto-activating when the project has a
  `components.json`: `21st-cli-use` (search / install), `21st-ai` (generate,
  iterate on, and grab code from 21st AI drafts), `21st-registry` (publish &
  manage components/themes/templates), and `21st-design-sync` (publish the
  project's design tokens as a theme), plus project-aware Build, Explore, and
  Review workflows.

## Install

1. Set your 21st API key in the environment (get one at
   https://21st.dev/settings/api-keys):

```bash
   export API_KEY_21ST="sk_..."
   ```

2. Add this marketplace and install the plugin from inside Claude Code:

```
   /plugin marketplace add 21st-dev/claude-code-plugin
   /plugin install 21st@21st
   ```

(`21st@21st` = plugin `21st` from marketplace `21st`. Replace
   `21st-dev/claude-code-plugin` with the actual `<org>/<repo>` that hosts this
   directory, or a local path / git URL.)

3. Restart Claude Code (or reload) so the MCP server connects. Verify with
   `/mcp` — you should see the `21st` server with its full tool list (`search`,
   `get_component`, `get_theme`, bookmarks, teams, `generate`, …).

## Auth

The MCP server reads your key from the `API_KEY_21ST` environment variable and
sends it as the `x-api-key` header (see `plugins/21st/.mcp.json`). If tool calls
report "Not authenticated," confirm `API_KEY_21ST` is exported in the shell that
launched Claude Code, then reconnect via `/mcp`.

## Layout

```
.claude-plugin/
  marketplace.json          # marketplace listing this plugin
plugins/
  21st/
    .claude-plugin/
      plugin.json           # skills + mcpServers (via ${CLAUDE_PLUGIN_ROOT})
    .mcp.json               # remote 21st MCP (x-api-key: ${API_KEY_21ST})
    skills/
      21st-cli-use/
        SKILL.md            # bundled Agent Skills (same source as
      21st-ai/              # https://21st.dev/api/skills/<name>)
        SKILL.md
      21st-registry/
        SKILL.md
      21st-design-sync/
        SKILL.md
```

Bundled paths in `plugin.json` use `${CLAUDE_PLUGIN_ROOT}` so they resolve
regardless of where the plugin is installed.

claude-code-plugin

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

claude-code-plugin

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README