AI Prompt Input Box

AI chats 1

About

AI prompt input box for app builders and chat products: a liquid-glass composer with a typing placeholder, platform chips, a keyboard-friendly model menu, file attachments and a breathing send button. Enter sends; an optional demo build log then morphs into a preview card. Wire onSubmit to your own generator.

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

Code

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

Usage.tsx

"use client"

import PromptComposer from "@/components/ui/prompt-composer"

export default function Demo() {
  return (
    <div
      style={{
        width: "100%",
        minHeight: "100svh",
        display: "grid",
        placeItems: "center",
        padding: "48px 20px",
        background:
          "radial-gradient(40% 35% at 30% 35%, rgba(95,178,242,.28), transparent 70%), radial-gradient(35% 30% at 72% 65%, rgba(196,140,255,.22), transparent 70%), #08080a",
      }}
    >
      <PromptComposer onSubmit={(s) => console.log("build", s)} />
    </div>
  )
}