OonkooUI
MODEL CONTEXT PROTOCOL

Your AI agent knows our catalog.

OonkooUI publishes a machine-readable index at /r/registry.json — every component, free and pro, with tiers and prices. Through the shadcn MCP server, agents like Claude Code, ChatGPT, OpenAI Codex, Google Gemini, GitHub Copilot, and Cursor can search it, install from it, and compose pages with it. Your credentials ride along automatically.

New to AI agents? Start with the AI overview — this page is the protocol deep-dive.
claude code
> "Add an animated border to the pricing card — something from @oonkoo"

⏺ Searching the @oonkoo registry…
 Found border-beam — An animated beam of light tracing the card edge.
⏺ Installing @oonkoo/border-beam
 Created components/oonkoo/border-beam.tsx
 Wired <BorderBeam /> into pricing-card.tsx

Setup

Two files — then every agent request can reach the registry.

01

Register @oonkoo in components.json

npx oonkoo init writes this for you. The Authorization header is only needed for pro components — the MCP server expands ${OONKOO_API_KEY} from your environment, so agents can install what you own without ever seeing the key in the conversation.

components.json
{
  "registries": {
    "@oonkoo": {
      "url": "https://ui.oonkoo.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${OONKOO_API_KEY}"
      }
    }
  }
}
02

Add the shadcn MCP server to your agent

The fast path: npx oonkoo mcp --write (add --cursor for Cursor) writes this for you. By hand: Claude Code .mcp.json in the project root:

.mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Cursor .cursor/mcp.json:

.cursor/mcp.json
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

What agents can do

Things to ask once it's wired up. Hover to copy.

discover
"What hero sections does @oonkoo have?"

Reads /r/registry.json and lists matching items with tiers and prices.

install
"Install @oonkoo/border-beam and use it on the pricing card"

Fetches the item, writes the files, and wires the import for you.

compose
"Build a landing page with @oonkoo — hero, features, footer"

Chains search + install across the catalog into a full page.

commerce
"Add @oonkoo/liquid-ether as the landing page background"

Pro item — installs if your key owns it, otherwise relays the unlock link.

Pro components work too — safely.

The registry enforces entitlement on every request: agents can discover paid items (name, price, unlock URL) but only install ones your key owns. An unowned pro install returns the same actionable message a human sees — including the store link — which agents will happily relay to you.

Next steps

Set up the CLI first if you haven't — MCP rides on the same components.json.