Intro

Using karaUI from coding agents

You can ask an assistant like Claude Code, Codex, Cursor or Amp to add a karaUI component for you. There are three ways to wire that up, from least to most hands-on: a skill that tells the agent how to pick and install components, an MCP server it can query, and plain HTTP endpoints that return the catalog and the source.

Agent skill

With the skill installed, the agent starts by reading the current registry, matches your request to an items[].name install slug, checks that item through shadcn, and only then installs it and builds on the source it wrote. The point is to stop the agent from hand-rolling an animation that karaUI already has.

npx skills add kamisama-v0/Karaui --skill karaui

MCP server

If your client speaks MCP, this is the shortest setup. Once connected, the agent can browse the catalog, search it and get install commands without leaving the chat. The server lives at https://mcp-karaui.kamisama-v0.my.id/mcp.

# Claude Code
claude mcp add --transport http karaui https://mcp-karaui.kamisama-v0.my.id/mcp

# Codex
codex mcp add karaui --url https://mcp-karaui.kamisama-v0.my.id/mcp

# Amp
amp mcp add karaui https://mcp-karaui.kamisama-v0.my.id/mcp

For a client not listed above, put this entry in its MCP config file.

{
  "mcpServers": {
    "karaui": {
      "type": "http",
      "url": "https://mcp-karaui.kamisama-v0.my.id/mcp"
    }
  }
}

It exposes four tools: list_components, search_components, get_component, get_install_command.

Endpoints

• /llms.txtllms.txt

  Plain-text site map for models, following the llmstxt.org layout.

  Open
• /rRegistry index

  Every component and variant as one JSON list.

  Open
• /r/{slug}Component detail

  One component as JSON: its files, their source and the npm packages it needs.

• /registry.jsonshadcn catalog

  The catalog shadcn's registry directory reads.

  Open
• /r/{slug}.jsonshadcn item

  What `shadcn add` downloads: file contents inline, styled with shadcn color classes.

• /r/{slug}/rawRaw source

  The component's .tsx as plain text, nothing wrapped around it.

Agent flow

Writing your own integration? The whole loop is a handful of fetches. Each entry already includes every file it imports, so nothing else has to be resolved.

// 1. Read the catalog
const idx = await fetch('https://karaui.kamisama-v0.my.id/r').then((r) => r.json());

// 2. Load one entry by slug
const entry = await fetch(`https://karaui.kamisama-v0.my.id/r/${slug}`).then((r) => r.json());

// 3. Save every bundled file at its path
for (const file of entry.files) {
  await writeFile(file.path, file.content);
}

// 4. Add the npm packages it lists
await runShell(['bun', 'add', ...entry.dependencies]);

shadcn flow

Agents that already use the shadcn CLI can install by name. The CLI writes the files and adds the npm packages; since the markup only uses shadcn's color classes, the result follows the host app's theme with no extra karaUI variables.

# Namespace (listed in shadcn's registry directory, no setup)
npx shadcn@latest add @karaui/animated-toast-stack

# Or pass the item's full URL
npx shadcn@latest add https://karaui.kamisama-v0.my.id/r/animated-toast-stack.json

Entry shape

Shared helpers such as @/lib/utilsare bundled into the response as type: util entries, which saves the agent a round of import hunting.

{
  "slug": "swap",
  "name": "Multi-chain Swap",
  "description": "...",
  "category": "blocks",
  "page_url": "https://karaui.kamisama-v0.my.id/components/blocks/swap",
  "detail_url": "https://karaui.kamisama-v0.my.id/r/swap",
  "raw_url": "https://karaui.kamisama-v0.my.id/r/swap/raw",
  "dependencies": ["motion", "lucide-react", "react"],
  "internal": ["@/lib/utils"],
  "files": [
    { "path": "components/motion/swap.tsx", "type": "component", "content": "..." },
    { "path": "components/previews/blocks/swap.preview.tsx", "type": "preview", "content": "..." },
    { "path": "lib/utils.ts", "type": "util", "content": "..." }
  ]
}

Generative UI

To let a model build screens out of karaUI components at runtime, see the OpenUI integration guide It covers registering the components, producing the system prompt and rendering OpenUI Lang while it streams in.