Intro

For AI agents

beUI exposes a static, agent-friendly surface. Connect the MCP server below, or hit the raw endpoints directly. Coding agents (Claude, Codex, Cursor, Amp) can list components, fetch source with all deps, and drop files into the user's project.

MCP server

The fastest path: connect the beUI MCP server and your agent can list, search and install components directly. Hosted at https://mcp.beui.dev/mcp.

Shellterminal
# Claude Code
claude mcp add --transport http beui https://mcp.beui.dev/mcp

# Codex
codex mcp add beui --url https://mcp.beui.dev/mcp

# Amp
amp mcp add beui https://mcp.beui.dev/mcp

Any other client: add it manually to your MCP config.

JSONmcp.json
{
  "mcpServers": {
    "beui": {
      "type": "http",
      "url": "https://mcp.beui.dev/mcp"
    }
  }
}

Tools: list_components, search_components, get_component, get_install_command.

Endpoints

  • /llms.txtllms.txt

    Markdown index in llmstxt.org format.

    Open
  • /rRegistry index

    JSON catalogue of every component.

    Open
  • /r/{slug}Component detail

    JSON with files, deps, source.

  • /registry.jsonshadcn catalog

    Directory-compatible registry catalog.

    Open
  • /r/{slug}.jsonshadcn item

    Install item with inline file content and shadcn semantic color classes.

  • /r/{slug}/rawRaw source

    Plain text .tsx ready to drop in.

Agent flow

Four calls, then install. Components are self-contained and own their files.

TSagent.ts
// 1. Discover what exists
const idx = await fetch('https://beui.dev/r').then((r) => r.json());

// 2. Fetch a component
const entry = await fetch(`https://beui.dev/r/${slug}`).then((r) => r.json());

// 3. Write files into the user's project
for (const file of entry.files) {
  await writeFile(file.path, file.content);
}

// 4. Install external deps
await runShell(['bun', 'add', ...entry.dependencies]);

shadcn flow

The shadcn item installs source files and package dependencies. Components use shadcn semantic color utilities directly, so they inherit the target app's theme without beUI-specific color variables.

Shellterminal
# Official registry namespace (shadcn directory)
npx shadcn@latest add @beui/animated-toast-stack

# Direct URL, no namespace needed
npx shadcn@latest add https://beui.dev/r/animated-toast-stack.json

Entry shape

Internal helpers (e.g. @/lib/utils) ship inline as type: util so the agent does not have to chase imports.

JSONr/swap.json
{
  "slug": "swap",
  "name": "Multi-chain Swap",
  "description": "Cross-chain swap widget with chain + token selectors, animated flip and quote.",
  "category": "motion",
  "page_url": "https://beui.dev/components/motion/swap",
  "detail_url": "https://beui.dev/r/swap",
  "raw_url": "https://beui.dev/r/swap/raw",
  "dependencies": ["motion", "lucide-react", "react"],
  "internal": ["@/lib/utils"],
  "files": [
    { "path": "components/motion/swap.tsx", "type": "component", "content": "..." },
    { "path": "components/previews/motion/swap.preview.tsx", "type": "preview", "content": "..." },
    { "path": "lib/utils.ts", "type": "util", "content": "..." }
  ]
}