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.
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.
{
"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:
{
"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.
# 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.
