# Let your coding agent start from a real component instead of writing one from scratch

> Source: <https://dev.to/behavio_ui_screen/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from-scratch-1lba>
> Published: 2026-11-15 18:12:39+00:00

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](https://clayui.behavio.one)

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.

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.

**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.

`npx @behavio1/clayui init`
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.*