Composer

Gemini's pill input with a model picker and a morphing send button.

import { Card } from "@/components/ui/card";

import { GeminiComposer } from "../components/gemini-composer";

export default function GeminiComposerExample() {
  return (
    <Card className="border-gemini-border bg-gemini-bg w-full min-w-0 overflow-hidden rounded-2xl border px-4 py-6 text-base ring-0">
      <GeminiComposer className="mx-auto max-w-3xl" />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/gemini-composer

GeminiComposer is a shadcn InputGroup inside a form: an InputGroupButton to add files, an InputGroupInput, and an end InputGroupAddon with the GeminiModelSelector and one round InputGroupButton. The button shows a mic while the input is empty, turns into a filled send arrow once you type, and becomes a stop square while busy. The icons crossfade.

Prop	Default	Description
`onSend`		Called with the trimmed text. The input clears when it’s set.
`onStop`		Called when the stop button is pressed.
`busy`	`false`	Shows the stop button and blocks sending.
`placeholder`	`Ask Gemini`	The input placeholder.
`model`, `defaultModel`, `onModelChange`	`pro`	Model state, controlled or uncontrolled.
`models`	`GEMINI_MODELS`	The options in the picker.
`disclaimer`	Gemini’s notice	The line under the input. Pass `null` to hide it.
`privacyLabel`, `privacyHref`	`Your privacy & Gemini`	The underlined text after the disclaimer. With `privacyHref` it’s a link.

Used in

Gemini

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.