Skip to content

README.md

Latest commit

 

History

History
74 lines (59 loc) · 2.67 KB

README.md

File metadata and controls

74 lines (59 loc) · 2.67 KB
Raw

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 — four 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).

Install

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

    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.