Modus UI

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.

Modus / Query Well

Installation

CLI

npx @modus-ui/cli add query-well

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/query-well.tsx.
  3. Paste the code.

Usage

tsx
import { QueryWell } from "@/components/ui/query-well";

export default function Example() {
  return <QueryWell />;
}

Props

PropTypeDefaultDescription
placeholderstring"Draft a request"-
sourcesanyDEFAULT_SOURCES-
commandsanyDEFAULT_COMMANDS-
modelsanyDEFAULT_MODELS-
defaultModelstring""-
effortsanyDEFAULT_EFFORTS-
defaultEffortstring""-
onEffortChangeany--
busybooleanfalse-
onSendany--
onStopany--
onAttachany--
onDictateany--
backgroundstring"hsl(var(--card))"-
colorstring"hsl(var(--foreground))"-
menuBackgroundstring"hsl(var(--popover))"-
sparkColorstring"hsl(var(--primary))"-
sparkBoostnumber1-
widthnumber440-
radiusnumber12-
maxRowsnumber5-
morphDurationnumber240-
squashnumber0.12-
tiltnumber8-
pressScalenumber0.96-

Comments

  • No comments yet.