For coding agents

Give your agent a catalog it can search through a local MCP server (Model Context Protocol: how coding agents call local tools), a CLI it can install with, and skills that tell it when to reuse and when to build. Everything runs locally in your repository.

Ask, and see what comes back

Real answers from the shipping MCP server, recorded during verification.

You ask
“Add a data table with inline editing to the admin.”
The agent calls
recommend_patterns {"task":"data table with inline editing","limit":3}
top match: table-inline-editing (relevance 1.00)
Then runs
agentic-ui add table-inline-editing

Table Inline EditingOpen

You ask
“Build a screen that shows an agent run with its tool calls.”
The agent calls
recommend_patterns {"task":"trace of an AI agent run with tool calls","limit":3}
top match: ai-agent-run-trace (relevance 0.92)
Then runs
agentic-ui add ai-agent-run-trace

AI Agent Run TraceOpen

You ask
“Start a B2B SaaS back office with billing.”
The agent calls
recommend_blueprint {"project_type":"saas b2b backoffice","domains":["billing","saas"],"limit":1}
best: blueprint-saas-backoffice · 5 screens
Then runs
npx shadcn@4.17.0 add @agentic-ui/blueprint-saas-backoffice

SaaS BackofficeOpen

You ask
“Use the Corporate theme for this project before adding any UI.”
The agent calls
resolve_theme {"theme":"corporate","include_css":false}
Corporate · id 58b8b1922e90 · AA pass · agentic-ui theme apply aui1_…
Then runs
agentic-ui theme apply aui1_XVJBbhsxDPyK…

Corporate theme on a real appOpen

Set up your agent in two commands

1. Run setup
Registry and license key, config, Design DNA, an AGENTS.md block, the MCP entry in .mcp.json and the four skills (greenfield, rework, extend, audit) in .claude/skills.
In your project
```
agentic-ui setup --validate
```
2. Check the MCP entry
Your MCP client launches the server from .mcp.json when the agent needs it.
In your project
```
node "$AGENTIC_UI_KIT/bin/agentic-ui-mcp.mjs" check --project .
```

Every option: configure a coding agent.

Tested integrations

Integrations and their verification status
Integration	Status	What was checked
MCP over stdio	Verified	All 9 tools listed and called through the official MCP TypeScript SDK client; the server started from the .mcp.json entry that init writes.
Skills in .claude/skills	Verified	Installed with install-skills.mjs and run from the project, including the extend skill with the live MCP server.
AGENTS.md	File verified	init writes the block in every verification run. Whether an agent reads AGENTS.md depends on the agent.
Other MCP clients (editors and agents that launch stdio servers)	Not verified	Expected to work through the same .mcp.json entry; no session with a specific product has been recorded.

Reference

A local stdio server with an in-memory index over the catalog. Every tool is read-only; installing stays with the CLI.

understand_project: Reads the project profile, Design DNA and ui-kit.config.yaml. Call it first.
recommend_patterns: Top matches for a natural-language task, with score, suggested composition and availability.
find_reusable_ui: Search by intent and get a reuse / adapt / build-new decision against your reuse threshold.
compare_patterns: Side-by-side comparison of 2–8 components: data shape, density, effort, coupling and quality.
recommend_blueprint: Best multi-screen blueprint for a project type, with the role of each component.
plan_ui_rework: Per-screen modernization plan for conservative, balanced or transformative modes.
explain_pattern: What to preserve, what to replace and when to avoid a component.
resolve_theme: Checks a theme code, preset or spec and returns its summary, AA report and the exact apply command.
list_themes: The 26 curated theme presets with their share codes and apply commands.

Recorded calls and response excerpts

understand_project {}

{
  "project": "greenfield",
  "variant": "new-york",
  "mode": "greenfield",
  "motion": {
    "profile": "restrained",
    "respect_reduced_motion": true,
    "personality": "linear"
  },
  "rules": {
    "never_replace_business_logic": true,
    "never_introduce_second_design_system": true,
    "adapt_to_existing_architecture": true,
    "preserve_accessibility": true
  }
}

Response excerpt · 45 ms

recommend_patterns {"task":"usage meter with plan limits for a billing page","limit":3}

{
  "results": [
    {
      "id": "saas-starter-billing-center",
      "relevance": 0.6944,
      "quality": 8.5,
      "availability": "available"
    },
    {
      "id": "billing-usage-meter",
      "relevance": 0.6389,
      "quality": 9.2,
      "availability": "available"
    },
    {
      "id": "ai-usage-meter",
      "relevance": 0.5833,
      "quality": 9.2,
      "availability": "available"
    }
  ]
}

Response excerpt · 57 ms

recommend_patterns {"task":"trace of an AI agent run with tool calls","limit":3}

{
  "results": [
    {
      "id": "ai-agent-run-trace",
      "relevance": 0.9167,
      "quality": 8.7,
      "availability": "available"
    },
    {
      "id": "ai-tool-call-card",
      "relevance": 0.7778,
      "quality": 9.2,
      "availability": "available"
    },
    {
      "id": "ai-workspace-message-item",
      "relevance": 0.6944,
      "quality": 9.35,
      "availability": "available"
    }
  ]
}

Response excerpt · 37 ms

recommend_patterns {"task":"data table with inline editing","limit":3}

{
  "results": [
    {
      "id": "table-inline-editing",
      "relevance": 1,
      "quality": 9,
      "availability": "available"
    },
    {
      "id": "payments-invoice-list-dense",
      "relevance": 0.7083,
      "quality": 8.05,
      "availability": "available"
    },
    {
      "id": "payments-subscription-list-compact",
      "relevance": 0.7083,
      "quality": 7.8,
      "availability": "available"
    }
  ]
}

Response excerpt · 35 ms

find_reusable_ui {"intent":"seat usage with plan limits","filters":{"variant":"new-york"},"limit":3}

{
  "decision": {
    "action": "adapt",
    "best": "billing-usage-meter",
    "threshold": 0.72
  },
  "results": [
    {
      "id": "billing-usage-meter",
      "relevance": 0.625
    },
    {
      "id": "events-seat-map",
      "relevance": 0.625
    },
    {
      "id": "saas-starter-billing-center",
      "relevance": 0.4167
    }
  ]
}

Response excerpt · 26 ms

compare_patterns {"ids":["billing-usage-meter","ai-usage-meter"]}

{
  "best": "ai-usage-meter",
  "order": [
    "ai-usage-meter",
    "billing-usage-meter"
  ],
  "differs_in": []
}

Response excerpt · 1 ms

recommend_blueprint {"project_type":"saas b2b backoffice","domains":["billing","saas"],"limit":1}

{
  "best": "blueprint-saas-backoffice",
  "score": 0.784,
  "confidence": "high",
  "screens": [
    "Overview",
    "Users",
    "Billing",
    "Developers",
    "Workspace settings"
  ]
}

Response excerpt · 11 ms

plan_ui_rework {"mode":"balanced"}

{
  "mode": "balanced",
  "personality": "linear",
  "screens": [
    {
      "route": "/",
      "interventions": []
    }
  ]
}

Response excerpt · 13 ms

explain_pattern {"id":"billing-usage-meter"}

{
  "install": "@agentic-ui/billing-usage-meter",
  "preserve": [
    "meter-aria-contract",
    "threshold-status-color-logic",
    "billing-spend-budget-hierarchy",
    "resource-metric-breakdown-layout"
  ],
  "replace": [
    "billing-metrics-data",
    "currency-and-quota-formatting",
    "plan-tier-descriptions"
  ],
  "availability": "available"
}

Response excerpt · 1 ms

list_themes {}

{
  "presets": [
    "minimal · Minimal",
    "corporate · Corporate",
    "soft-rounded · Soft Rounded",
    "brutalist · Monochrome Brutalist",
    "neo-brutalist · Neo-Brutalist",
    "editorial-serif · Newsprint Editorial",
    "terminal-mono · Terminal Mono",
    "high-contrast · High Contrast Accessible",
    "playful · Playful",
    "luxury-dark · Luxury Dark",
    "pastel · Bento Pastel",
    "dense-data-ops · Dense Data Ops",
    "warm-earthy · Warm Earthy",
    "nordic-calm · Nordic Frost",
    "swiss-grid · Swiss Grid",
    "layered-depth · Layered Depth",
    "workstation · Workstation",
    "retro-desktop · Retro Desktop",
    "neon-night · Neon Night",
    "sunlit-code · Sunlit Code",
    "midnight-orchid · Midnight Orchid",
    "clinical-calm · Clinical Calm",
    "dev-dark · Dev Tool Dark",
    "paper-sketch · Paper Sketch",
    "glass-dark · Glass Dark",
    "spacious-marketing · Spacious Marketing"
  ]
}

Response excerpt · 2 ms

resolve_theme {"theme":"corporate","include_css":false}

{
  "valid": true,
  "id": "58b8b1922e90",
  "name": "Corporate",
  "summary": "Corporate: Trustworthy blue for finance and business apps: deep navy, sturdy serif headings, crisp outlined cards and compact tabular type. Changes color, modes, shape, density, typography, elevation, surface, focus, motion; everything else keeps the base tokens.",
  "apply": "agentic-ui theme apply aui1_XVJBbhsxDPyK…",
  "aa": true,
  "adjustments": 7
}

Response excerpt · 13 ms

Each skill loads the project context first and ends with an inspect step for tokens, accessibility, reduced motion and protected files.

agentic-ui-audit: Score the current UI and get a prioritized P0/P1/P2 plan. Read-only.
agentic-ui-extend: Add one feature, reusing the catalog before writing new UI.
agentic-ui-greenfield: Start a new app from a blueprint with your own Design DNA.
agentic-ui-rework: Modernize an existing UI without touching business logic or adding a second design system.

Skill scripts and a real output

Step 1 of every skill: load project context

node .claude/skills/agentic-ui-extend/scripts/context.mjs --json

Exit code 0 in verification.

Resolve the project theme (the step after context in every skill)

node .claude/skills/agentic-ui-extend/scripts/theme.mjs resolve --theme corporate --json

Exit code 0 in verification.

Plan a new feature with reuse first

node .claude/skills/agentic-ui-extend/scripts/plan-extend.mjs --feature "seat usage with plan limits" --provider mcp --json

Exit code 0 in verification.

Audit the current UI (read-only)

node .claude/skills/agentic-ui-audit/scripts/audit.mjs --json

Exit code 0 in verification.

Recorded output: extend skill decision

{
  "decision": {
    "action": "adapt",
    "best": "billing-usage-meter",
    "threshold": 0.72
  },
  "install": "agentic-ui add billing-usage-meter",
  "preserve": [
    "meter-aria-contract",
    "threshold-status-color-logic",
    "billing-spend-budget-hierarchy",
    "resource-metric-breakdown-layout"
  ]
}

A theme is one CSS file of variables on top of the base tokens: components are never edited. Hand your agent the code or prompt from the Theme Studio; every skill applies the theme before it adds UI.

The agent resolves it
Over MCP with resolve_theme, or with the theme step of the skills when no server is registered.
Skill theme step
```
node .claude/skills/agentic-ui-extend/scripts/theme.mjs resolve --theme corporate --json
```
Exit code 0 in verification.
The CLI applies it
Dry run first, then apply: agentic-ui-theme.css, one import line, recorded in ui-kit.config.yaml.
In your project
```
agentic-ui theme list
agentic-ui theme apply corporate --dry-run
agentic-ui theme apply corporate
agentic-ui theme show
```

Next: install and configure · recorded runs, step by step

For coding agents

Ask, and see what comes back

Set up your agent in two commands

1. Run setup

2. Check the MCP entry

Tested integrations

Reference

The agent resolves it

The CLI applies it