BUILD WITH AI

Build with AI. Ship OonkooUI components.

Your AI coding agent — Claude, ChatGPT, OpenAI Codex, Google Gemini, GitHub Copilot, Cursor, or Windsurf — can search, install, and compose OonkooUI React components for you. One command wires it up: npx oonkoo mcp --write.

MCP Deep Dive CLI Guide

Works with every major AI agent

If it speaks the Model Context Protocol, it can build with OonkooUI.

Claude

Claude Code & claude.ai

ChatGPT

OpenAI ChatGPT

Codex

OpenAI Codex CLI

Gemini

Google Gemini & Gemini CLI

Copilot

GitHub Copilot

Cursor

Cursor editor

Windsurf

Windsurf by Codeium

Grok

xAI Grok

Logos are trademarks of their respective owners and shown here to indicate compatibility. OonkooUI is not affiliated with Anthropic, OpenAI, Google, GitHub, Cursor, Codeium, or xAI.

One command: oonkoo mcp --write

Wires the shadcn MCP server into your agent — no JSON by hand.

Point your agent at the registry

oonkoo mcp --write writes the shadcn MCP server into .mcp.json (Claude Code, Codex, Gemini CLI) — or add --cursor for .cursor/mcp.json. Existing servers are preserved.

terminal

❯ npx oonkoo mcp --write
✔ Added the shadcn MCP server to .mcp.json
Agents read your components.json registries — @oonkoo included.

# for Cursor
❯ npx oonkoo mcp --write --cursor
✔ Added the shadcn MCP server to .cursor/mcp.json

Make sure @oonkoo is registered

The MCP server installs through your project's components.json. If you ran oonkoo init it's already there; the auth header lets agents install pro components you own without ever seeing your key.

components.json

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

Ask, and it builds

claude code

> "Add an animated border to the pricing card — use @oonkoo"

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

Prompts to try

Drop these into Claude, ChatGPT, Gemini, Copilot, or Cursor.

✦ "What hero sections does @oonkoo have?"

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

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

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

Agents can discover everything, install only what you own.

The registry enforces entitlement on every request. AI agents can see paid components (name, price, unlock link) but can only install ones your API key owns — an unowned pro install returns the same actionable message a human sees, which the agent relays to you. Your key never appears in the conversation.

Go deeper

The MCP page covers the protocol, per-agent config, and discovery in full.

MCP Guide CLI Guide Browse Components