Skip to content
Scrim UI

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.

Open full component page →

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-input

Follows the props below — change a control and the prompt changes with it, so an agent reproduces that configuration instead of the defaults.