Query Well
Web (React)
A composer for AI requests with sources, commands, model and effort menus.
It sits on the card surface with a hairline ring, and its send spark tints from the primary token.
Installation
CLI
npx @modus-ui/cli add query-wellManual
- Copy the code from the component tab.
- Create a file at
components/ui/query-well.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Draft a request" | - |
| sources | any | DEFAULT_SOURCES | - |
| commands | any | DEFAULT_COMMANDS | - |
| models | any | DEFAULT_MODELS | - |
| defaultModel | string | "" | - |
| efforts | any | DEFAULT_EFFORTS | - |
| defaultEffort | string | "" | - |
| onEffortChange | any | - | - |
| busy | boolean | false | - |
| onSend | any | - | - |
| onStop | any | - | - |
| onAttach | any | - | - |
| onDictate | any | - | - |
| background | string | "hsl(var(--card))" | - |
| color | string | "hsl(var(--foreground))" | - |
| menuBackground | string | "hsl(var(--popover))" | - |
| sparkColor | string | "hsl(var(--primary))" | - |
| sparkBoost | number | 1 | - |
| width | number | 440 | - |
| radius | number | 12 | - |
| maxRows | number | 5 | - |
| morphDuration | number | 240 | - |
| squash | number | 0.12 | - |
| tilt | number | 8 | - |
| pressScale | number | 0.96 | - |
Comments