Composer

The pill-shaped "Ask anything" input with model picker and send button.

"use client";

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

import { ChatgptComposer } from "../components/chatgpt-composer";

export default function ChatgptComposerExample() {
  return (
    <Card className="border-chatgpt-border bg-chatgpt-bg font-chatgpt text-chatgpt-fg flex w-full min-w-0 flex-col gap-4 rounded-2xl border px-4 pt-32 pb-6 text-base ring-0">
      <ChatgptComposer />
      <ChatgptComposer busy />
    </Card>
  );
}

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

ChatgptComposer is a form around a shadcn InputGroup, with an InputGroupInput and InputGroupButtons in inline addons. Send stays disabled until there’s text, and Enter submits. While busy, the send button turns into a stop button. The model and effort work controlled or uncontrolled.

Prop	Default	Description
`onSend`		Called with the trimmed text. The input clears when you pass it.
`onStop`		Called by the stop button.
`busy`	`false`	Shows the stop button and blocks sending.
`placeholder`	`Ask anything`	The input placeholder.
`model`, `defaultModel`, `onModelChange`	`sol`	The selected model.
`effort`, `defaultEffort`, `onEffortChange`	`medium`	The selected effort.
`models`, `efforts`		Replace the options in the picker.

Used in

ChatGPT

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker.