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.
# 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/mcpAny other client: add it manually to your MCP config.
{
"mcpServers": {
"beui": {
"type": "http",
"url": "https://mcp.beui.dev/mcp"
}
}
}Tools: list_components, search_components, get_component, get_install_command.
Endpoints
- Open
/llms.txtllms.txtMarkdown index in llmstxt.org format.
- Open
/rRegistry indexJSON catalogue of every component.
/r/{slug}Component detailJSON with files, deps, source.
- Open
/registry.jsonshadcn catalogDirectory-compatible registry catalog.
/r/{slug}.jsonshadcn itemInstall item with inline file content and shadcn semantic color classes.
/r/{slug}/rawRaw sourcePlain text .tsx ready to drop in.
Agent flow
Four calls, then install. Components are self-contained and own their files.
// 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.
# 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.jsonEntry shape
Internal helpers (e.g. @/lib/utils) ship inline as type: util so the agent does not have to chase imports.
{
"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": "..." }
]
}