2 variants

Prompt Composer

The box a run starts from: text that grows as you type, slash commands on the keyboard, attachment chips, and one button that is Send or Stop but never both.

Prompt composer

The box a run starts from: text that grows as you type, slash commands on the keyboard, attachment chips, and one button that is Send or Stop but never both.

usage-report.csv24 KB

Sonnet 4.60/2000

Enter to send, Shift + Enter for a new line

usage.tsx

import { PromptComposer } from "@/components/registry/prompt-composer";

export function Composer() {
  return (
    <PromptComposer
      model="Sonnet 4.6"
      commands={[
        { name: "explain", description: "Walk through the selection" },
        { name: "test", description: "Write tests for what changed" },
      ]}
      onSubmit={(text) => send(text)}
      onStop={() => abort()}
    />
  );
}

"use client";

import { ArrowUp, Paperclip, Square, X } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface PromptCommand {
  /** Written without the slash. Typing `/rev` matches `review`. */
  name: string;
  /** One line describing what the command does, shown beside the name. */

305 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/prompt-composer

Prompt bar

A single line pill for a landing page or an empty chat, with starting suggestions that fill the bar for editing instead of sending.

usage.tsx

import { PromptBar } from "@/components/registry/prompt-bar";

export function Ask() {
  return (
    <PromptBar
      suggestions={["A pricing page", "A changelog"]}
      onSubmit={(prompt) => startRun(prompt)}
    />
  );
}

"use client";

import { ArrowUp } from "lucide-react";
import { type FormEvent, useId, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface PromptBarProps {
  placeholder?: string;
  /** One-tap starting points under the bar. Picking one fills the bar rather than sending it. */
  suggestions?: string[];
  onSubmit?: (prompt: string) => void;
  /** Disables the bar while an answer is on its way. */

106 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/prompt-bar