For AI agents

Agent skill

This skill supplements the normal beUI instructions with WorkspaceShell, WorkspaceSidebar and WorkspaceTabBar APIs and examples. Choose the components that fit your interface; official beUI components remain available throughout the application.

After the changes are merged into the default branch:

npx skills add asharca/ui --skill beui

Before merging, install from the selected local branch. A skill installation supplies documentation, not the complete component repository:

# Before the feature branch is merged, obtain the selected source.
git clone --single-branch --branch rebuild/beui-workspace https://github.com/asharca/ui.git asharca-ui-source

# In the consuming project; replace the absolute source path.
npx skills add /absolute/path/asharca-ui-source/skills/beui --skill beui

For a custom workspace component, export its local registry item, then review and install the JSON in the consuming project:

# In the selected asharca/ui source checkout
git rev-parse HEAD
bun install --frozen-lockfile
bun scripts/export-component.ts workspace-shell --out /absolute/new-directory/workspace-shell.json

# In the configured consuming project
npx shadcn@latest add /absolute/new-directory/workspace-shell.json --dry-run
npx shadcn@latest add /absolute/new-directory/workspace-shell.json --diff
npx shadcn@latest add /absolute/new-directory/workspace-shell.json

The bundled references/workspace.md contains the component APIs and a minimal composition. source-policy.json is the custom export inventory, not a selection rule. The exporter does not start a server. Review shared-file differences and preserve local edits during installation.

MCP server (optional)

The official beUI MCP provides discovery and source inspection for its hosted catalog. Connecting it is optional; the custom workspace examples and local export work independently. Hosted at https://mcp.beui.dev/mcp.

# Optional official beUI MCP connection
# 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.

{
  "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
• /r/index.jsonRegistry index

  JSON catalogue of every component.

  Open
• /r/{slug}/detail.jsonComponent 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}/raw.txtRaw source

  Plain text .tsx ready to drop in.

Agent flow

Explore official components with the catalog below. For the custom workspace, the bundled reference describes its APIs and local export. Compose either or both as needed.

// Optional official beUI component discovery
const idx = await fetch('https://beui.dev/r').then((r) => r.json());
const entry = await fetch(`https://beui.dev/r/${slug}`).then((r) => r.json());
// Inspect source files and dependencies before installing.
// Preserve the project's local changes, aliases and theme configuration.

shadcn flow

Official components retain their normal install commands. The local JSON above provides the additional workspace components. Review changes to shared helpers and retain the target app's theme.

# Official beUI component
npx shadcn@latest view @beui/animated-toast-stack
npx shadcn@latest add @beui/animated-toast-stack --dry-run
npx shadcn@latest add @beui/animated-toast-stack

# Official URL alternative
npx shadcn@latest add https://beui.dev/r/animated-toast-stack.json

Entry shape

Detail entries include source files and internal helpers. The export script produces a shadcn registry item with inline file contents, alias-aware targets and provenance, rather than this illustrative detail response.

{
  "slug": "animated-toast-stack",
  "name": "Animated Toast Stack",
  "category": "motion",
  "dependencies": ["motion", "lucide-react", "react"],
  "internal": ["@/lib/utils"],
  "files": [
    { "path": "components/motion/animated-toast-stack.tsx", "type": "component", "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.