Agent Elements

MCP

The Agent Elements registry is fully compatible with shadcn's Model Context Protocol server. Point any MCP client (Cursor, Claude Code, Windsurf) at our registry URL and your assistant can browse, preview, and install components without leaving the editor.

What is MCP?

The Model Context Protocol is an open standard that lets AI assistants talk to external tools. The shadcn MCP server exposes any shadcn-compatible registry as a set of tools: list, search, view, and add. Because Agent Elements is just a registry, it plugs in for free.

Setup
Cursor

Add this to ~/.cursor/mcp.json (global) or .cursor/mcp.json (per project):

{
  "mcpServers": {
    "agent-elements": {
      "command": "npx",
      "args": ["-y", "shadcn@canary", "mcp"],
      "env": {
        "REGISTRY_URL": "https://agent-elements.21st.dev/r/index.json"
      }
    }
  }
}
Claude Code

Register the server with the Claude Code CLI:

claude mcp add agent-elements -- npx -y shadcn@canary mcp \
  --env REGISTRY_URL=https://agent-elements.21st.dev/r/index.json
Other clients

Any MCP-aware client (Windsurf, Zed, VS Code extensions) works with the same pattern: run shadcn@canary mcp with REGISTRY_URL pointing at https://agent-elements.21st.dev/r/index.json.

Usage

Once the server is connected, ask your assistant. Prompts like these just work:

  • Show me all available Agent Elements components.
  • Add the AgentChat component to my project and wire it to the Vercel AI SDK.
  • Show me the API reference and a preview of InputBar.
  • Build a chat app using AgentChat with BashTool and EditTool renderers, and an InputBar with ModeSelector in the leftActions slot.

The assistant reads component metadata, dependencies, and source code directly from the registry, then runs shadcn add for you.