Agent guide

For AI agents

beUI exposes a static, agent-friendly surface. Install the beUI skill, 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.

Agent skill

The skill teaches coding agents to fetch the live registry first, pick the closest items[].name install slug, inspect it with shadcn, then install and compose from the generated source. Use it when you want agents to choose existing beUI components instead of inventing custom motion widgets.

Shellterminal

npx skills add starc007/ui-components --skill beui

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": "..." }
  ]
}

Generative UI

Want the model to compose these components into a live interface? Follow the OpenUI integration guide to register a custom component library, generate its system prompt, and render interactive OpenUI Lang as it streams.