{"slug": "let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from", "title": "Let your coding agent start from a real component instead of writing one from scratch", "summary": "Behavio One built Clay UI, a skill and Rust-based CLI that directs coding agents like Claude Code, Codex and Cursor to search established component libraries (shadcn/ui, Radix, Kokonut UI and others) and adapt real source code instead of generating components from scratch. The tool runs BM25 search by default, adds Gemini-embedding semantic search with an API key, and reports missing local imports via a local-imports-missing gap flag so agents know when an example is incomplete. It installs via npx @behavio1/clayui init and writes only into an examples folder without running npm install.", "body_md": "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.\n\nWe built Clay UI so the agent looks in established component libraries first, then adapts real code to your project.\n\nDemo videos and the site: [https://clayui.behavio.one](https://clayui.behavio.one)\n\nInstall the skill in a project:\n\n```\nnpx @behavio1/clayui init\n```\n\nThen 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:\n\n```\nclayui search \"date range picker booking nightly price\" --available-only --json\n```\n\nFor that request the top three results are:\n\n```\nkokonut/stay-picker     A date range picker for booking stays. Every night shows its price...\nkokonut/team-selector   Seat picker with a scrubbable number, generated avatars and a price line\nshadcn/calendar         Select a date or a range of dates (react-day-picker)\n```\n\nThe agent shows you the options with preview links. You pick one, and it downloads the source:\n\n```\nclayui get kokonut/stay-picker --out .clayui-examples --json\n```\n\nThe 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:\n\n```\n{\n  \"id\": \"kokonut/stay-picker\",\n  \"sourceUrl\": \"https://raw.githubusercontent.com/kokonut-labs/kokonutui/main/public/r/stay-picker.json\",\n  \"sourceRef\": \"main\",\n  \"license\": \"MIT\",\n  \"dependencies\": [\"lucide-react\", \"motion\"],\n  \"gaps\": [\"local-imports-missing\"],\n  \"missingLocalImports\": [\n    { \"file\": \"components/kokonutui/stay-picker.tsx\", \"import\": \"@/lib/utils\" }\n  ],\n  \"files\": [\"components/kokonutui/stay-picker.tsx\"]\n}\n```\n\nIt 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.\n\nThe 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.\n\nshadcn/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.\n\n**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.\n\n**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.\n\n`npx @behavio1/clayui init`\nThe 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.\n\n*Disclosure: this account belongs to Behavio One, the team that built Clay UI.*", "url": "https://wpnews.pro/news/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from", "canonical_source": "https://dev.to/behavio_ui_screen/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from-scratch-1lba", "published_at": "2026-11-15 18:12:39+00:00", "updated_at": "2026-11-15 18:21:01.178916+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "ai-products"], "entities": ["Behavio One", "Clay UI", "Claude Code", "Codex", "Cursor", "Kokonut UI", "shadcn/ui", "Gemini"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from", "markdown": "https://wpnews.pro/news/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from.md", "text": "https://wpnews.pro/news/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from.txt", "jsonld": "https://wpnews.pro/news/let-your-coding-agent-start-from-a-real-component-instead-of-writing-one-from.jsonld"}}