# Claude Code Plugin

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

- **Type:** MCP server
- **Install:** `agentstack add mcp-21st-dev-claude-code-plugin`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [21st-dev](https://agentstack.voostack.com/s/21st-dev)
- **Installs:** 0
- **Category:** [Integrations](https://agentstack.voostack.com/c/integrations)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [21st-dev](https://github.com/21st-dev)
- **Source:** https://github.com/21st-dev/claude-code-plugin

## Install

```sh
agentstack add mcp-21st-dev-claude-code-plugin
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 21st — Claude Code plugin

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 `/` 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/)
        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.

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [21st-dev](https://github.com/21st-dev)
- **Source:** [21st-dev/claude-code-plugin](https://github.com/21st-dev/claude-code-plugin)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-21st-dev-claude-code-plugin
- Seller: https://agentstack.voostack.com/s/21st-dev
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.