MCP Server

MCP Server

KokonutUI Pro works with the shadcn MCP server, so AI assistants like Claude Code, Cursor and VS Code Copilot can browse, search and install components for you using natural language.

1. Configure the registry

Add the KokonutUI Pro registry to your components.json (same setup as the installation guide):

{
    "registries": {
        "@kokonutui-pro": {
            "url": "https://kokonutui.pro/api/r/{name}",
            "headers": {
                "X-API-Key": "${KOKO_PRO_TOKEN}"
            }
        }
    }
}

Then make your token available. The shadcn CLI expands ${KOKO_PRO_TOKEN} from your environment, so add it to .env.local:

2. Add the MCP server

{
    "mcpServers": {
        "shadcn": {
            "command": "bunx",
            "args": ["shadcn@latest", "mcp"]
        }
    }
}

You can also run the shadcn setup helper, which configures the client for you:

bunx shadcn@latest mcp init --client claude

3. Use it

Ask your assistant things like:

• "Show me all components from the kokonutui-pro registry"
• "Install @kokonutui-pro/accordion-01"
• "Add a pricing section from @kokonutui-pro to my landing page"

The assistant browses the public registry index, then installs components through your API key — files land in your project exactly like a manual shadcn add.

Troubleshooting

• 401 errors on install — KOKO_PRO_TOKEN is missing or invalid. Check .env.local and grab your key above.
• Components not found — make sure the @kokonutui-pro registry block is in the components.json of the project you're working in.
• Server not showing up — restart your editor after adding the MCP config, and confirm the JSON file is at the right path for your client.