Agent guide

For AI agents

AgentUI exposes a static, agent-friendly surface. Install the AgentUI skill or use the raw endpoints directly. Coding agents can list components, fetch source with every dependency, 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 AgentUI components instead of inventing custom motion widgets.

Shellterminal

skills/agentui/SKILL.md

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://www.agentui.pro/r').then((r) => r.json());

// 2. Fetch a component
const entry = await fetch(`https://www.agentui.pro/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 AgentUI-specific color variables.

Shellterminal

# Direct URL, no namespace configuration needed
npx shadcn@latest add https://www.agentui.pro/r/message.json

# Optional components.json namespace mapping
"@agentui": "https://www.agentui.pro/r/{name}.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": "message",
  "name": "Message",
  "description": "Composable conversation message primitives for streamed agent responses.",
  "category": "agents",
  "page_url": "https://www.agentui.pro/components/agents/message",
  "detail_url": "https://www.agentui.pro/r/message",
  "raw_url": "https://www.agentui.pro/r/message/raw",
  "dependencies": ["motion", "lucide-react", "react"],
  "internal": ["@/lib/utils"],
  "files": [
    { "path": "components/agents/message.tsx", "type": "component", "content": "..." },
    { "path": "components/previews/agents/message.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.