Ask Claude Code, Codex or Cursor for "a hotel date picker with a price under each night" and you will get a calendar written from zero. It renders. It usually misses the details a mature component already handles: check-out on a night that is booked by the next guest, a minimum stay, the total under the selected range, keyboard navigation.

We built Clay UI so the agent looks in established component libraries first, then adapts real code to your project.

Demo videos and the site: https://clayui.behavio.one

What the agent does with it

Install the skill in a project:

npx @behavio1/clayui init

Then ask in plain words, in any language. The skill tells the agent to translate the request into a concrete English search and run the CLI:

clayui search "date range picker booking nightly price" --available-only --json

For that request the top three results are:

kokonut/stay-picker A date range picker for booking stays. Every night shows its price... kokonut/team-selector Seat picker with a scrubbable number, generated avatars and a price line shadcn/calendar Select a date or a range of dates (react-day-picker)

The agent shows you the options with preview links. You pick one, and it downloads the source:

clayui get kokonut/stay-picker --out .clayui-examples --json

The folder holds the component files exactly as the library publishes them, the usage notes from its docs, and a clayui.json. Here is part of the real one:

{ "id": "kokonut/stay-picker", "sourceUrl": "https://raw.githubusercontent.com/kokonut-labs/kokonutui/main/public/r/stay-picker.json", "sourceRef": "main", "license": "MIT", "dependencies": ["lucide-react", "motion"], "gaps": ["local-imports-missing"], "missingLocalImports": [ { "file": "components/kokonutui/stay-picker.tsx", "import": "@/lib/utils" } ], "files": ["components/kokonutui/stay-picker.tsx"] }

It also stores a SHA-256 for every file. The gap here is the usual cn helper from @/lib/utils, which most shadcn-style projects already have. The agent sees it and either reuses yours or adds it.

The agent then rewrites the example into your codebase: your tokens, your data, your naming. Clay UI never runs npm install and writes only into the examples folder.

Where the components come from

shadcn/ui, Radix, Base UI, Sonner, Vaul, cmdk, NumberFlow, Beautiful UI, RareUI, Magic UI, Aceternity UI, 21st.dev and Kokonut UI. The CLI keeps a local index of them and refreshes it from each library's registry or repository.

Two decisions that mattered

Be honest about what is missing. A component that imports ../utils/foo you did not get is not a working example. get resolves every relative and alias import against the delivered files and reports the ones that are missing as local-imports-missing. Paid or deleted items exit with code 3 instead of writing a half-empty folder. The agent reads those gaps before it starts adapting.

Search without a key, better with one. Out of the box the search is BM25 over names, descriptions and synonyms, with no account needed. Set a Gemini API key and it adds semantic search with gemini-embedding-001, which handles loose requests like "this checkout feels cheap" much better. Query embeddings are cached for 30 days.

Try it

The CLI is a small Rust binary, shipped through npm for macOS, Linux and Windows. If a search returns the wrong component for your request, open an issue with the query. That is the most useful feedback we can get.

Disclosure: this account belongs to Behavio One, the team that built Clay UI.