npx shadcn@latest add https://elabs-ai.com/r/ai-chat-shell.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui registry block "AI Chat Shell" (ai-chat-shell) to this project. A block is copied into the app and becomes my code. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Find it and what it is built from: `npx -y @elabs-ai/components-cli search ai-chat-shell`. 3. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), plus the packages the block imports. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Copy the block in with `npx shadcn@latest add https://elabs-ai.com/r/ai-chat-shell.json`; if that url does not answer, copy its files from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks/ai-chat-shell instead. Then adapt it here: [the screen or file, and the real data it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Dependencies
Examples
Submits And Clears
**The submit contract, locked.** This is the behavioural-equivalence test for the port from a hand-assembled `PromptInput` footer to `<Composer>` (RM-007): the payload the block acts on, the attachment surface it offers, and the stop affordance it presents are all unchanged. - **Payload** — `Composer` forwards `PromptInput`'s `{ text, files }` message untouched, so the block's `message.text.trim()` still decides what is sent, an empty composer still submits nothing, and the field still clears itself. - **Attachments** — none, exactly as before: `showAttach={false}` means no attach control, so there is no affordance whose handler is missing. - **Stop** — the block passes no `onStop`, so the primary control is always the Send action and never presents a Stop the runtime could not honour.