Prompt Input

AI chats 6

About

A chat-style message composer textarea that auto-grows with content, sends on Enter (Shift+Enter for a new line), and swaps its send button for a stop button while a reply is streaming.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Prompt Input to your project and fits it to your theme.

Code

How Prompt Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import PromptInput from "@/components/ui/prompt-input";

export default function PromptInputDemo() {
  const [sent, setSent] = React.useState<string | null>(null);
  const [status, setStatus] = React.useState<"ready" | "streaming">("ready");

  React.useEffect(() => {
    if (status !== "streaming") return;

    const timer = window.setTimeout(() => setStatus("ready"), 2600);
    return () => window.clearTimeout(timer);
  }, [status]);

  return (
    <div className="grid w-full max-w-xl gap-3">
      <PromptInput
        status={status}
        onSubmit={(value) => {
          setSent(value);
          setStatus("streaming");
        }}
        onStop={() => setStatus("ready")}
      />

      <p className="text-muted-foreground text-center text-xs">
        {status === "streaming"
          ? "Replying… press stop to cancel."
          : sent
            ? `Sent: ${sent}`
            : "Enter sends. Shift+Enter starts a new line."}
      </p>
    </div>
  );
}