KokonutUI Logo

Agents

Use Kokonut UI with Claude Code, Cursor, VS Code or Codex. Connect the shadcn MCP server, add a rules file, and give your agent the docs as Markdown.

Kokonut UI is a shadcn/ui registry, so any agent that can run the shadcn CLI can install its components. Ask for a component by name, or describe what you need, and the agent finds it, installs it with its dependencies, and edits it in your codebase like any other file.

Or by handFollow the stepsTwo commands and one line in components.json.

Add the registry

Agents install from the @kokonutui namespace, so add it to your components.json once. If you don't have one yet, run shadcn init first, as shown in Installation.

components.json
{
  "registries": {
    "@kokonutui": "https://kokonutui.com/r/{name}.json"
  }
}

Connect your editor

The shadcn MCP server lets your agent list, search and install components from any registry in components.json. One command sets it up for your editor:

Your editor
Or by hand in.mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Restart Claude Code, then run /mcp to check that shadcn is connected.

Any other client that speaks the Model Context Protocol works too: point it at npx shadcn@latest mcp.

Ask your agent

Restart your editor, then ask in plain language. Each prompt copies.

The agent installs a component's shadcn/ui primitives (like button or textarea) and npm packages (like motion or lucide-react) along with it, exactly as the CLI does.

Add a rules file

A short rules file tells your agent to check Kokonut UI before building a component from scratch, and to install rather than paste code. Save it in your project under the file name shown for your editor.

Your editor
CLAUDE.md
# Kokonut UI

This project installs components from Kokonut UI, a shadcn/ui registry.
The registry is set in components.json as "@kokonutui".

- Before building an animated or interactive component from scratch, check
  Kokonut UI: https://kokonutui.com/llms.txt lists every component with a
  one-line description.
- Install with the shadcn CLI, never by pasting code:
  npx shadcn@latest add @kokonutui/<name>
  It writes components/kokonutui/<name>.tsx and installs its dependencies.
- Installed components are project code. Edit them in place rather than
  wrapping them.
- Any docs page is available as Markdown, with the full source, by adding
  .md to its URL, e.g. https://kokonutui.com/docs/buttons/particle-button.md

Docs for agents

Every page on this site is also served as Markdown, so an agent can read the docs without a browser. Each component page includes its install command and full source.

At the top of every page, Copy Markdown copies the page for a chat, and Open sends it to ChatGPT, Claude or Cursor.

On this page