Browse all tools
Component Playground
Every component in the library, with its props exposed. Change anything and the code below the preview changes with it — copy it straight into your project.
The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.
Presets
Props
Also takes onSubmit, onAttach, onRemoveAttachment, onVoice, onStop.
Agent promptClaude Code · Cursor · any agent
Add the Prompt Input component from the Scrim UI registry to this project and use it in the configuration described below.
Prompt Input — The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.
## 1. Install
```bash
npx shadcn@latest add @scrimui/prompt-input
```
This writes a single file to `components/ui/prompt-input.tsx`. It is plain React + Tailwind with no runtime dependencies — no Radix, no CVA, nothing to add to package.json. If this project does not use the shadcn CLI, copy the source from https://scrimui.dev/components/prompt-input to the same path by hand; nothing in the file depends on shadcn.
## 2. Use it
```tsx
import { PromptInput } from "@/components/ui/prompt-input";
<PromptInput
placeholder="Ask anything…"
defaultModel="nova"
showWebSearch
showTools
onSubmit={() => {}}
onAttach={() => {}}
onRemoveAttachment={() => {}}
onVoice={() => {}}
onStop={() => {}}
/>
```
## 3. The configuration that matters
This is the component's "Default" state — Enter to send, Shift+Enter for a newline; send activates once there is text.
Every prop is at its default value. Keep the call site minimal — do not write out default values.
## 4. Wire the handlers
`onSubmit`, `onAttach`, `onRemoveAttachment`, `onVoice`, `onStop` are stubs in the snippet above (`() => {}`). Connect them to this project's own state and data layer instead of shipping the empty functions.
Reference: https://scrimui.dev/components/prompt-inputFollows the props below — change a control and the prompt changes with it, so an agent reproduces that configuration instead of the defaults.