Prompt Composer

AI chats 18

About

A chat prompt input with file attachments, a model picker dropdown, character counter, and a generating/stop state for AI assistant interfaces.

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

Code

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

Usage.tsx

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

export default function PromptComposerDemo() {
  const models = [
    {
      id: "gpt-4o",
      name: "GPT-4o",
      description: "Great for most tasks",
      badge: "Fast",
    },
    {
      id: "gpt-4o-mini",
      name: "GPT-4o mini",
      description: "Cheaper and faster",
    },
    { id: "o1", name: "o1", description: "Advanced reasoning" },
  ];

  return (
    <div className="flex w-full items-center justify-center p-8">
      <PromptComposer
        placeholder="Ask anything…"
        models={models}
        defaultModelId="gpt-4o"
        onSend={(text, modelId) => console.log("send", text, modelId)}
      />
    </div>
  );
}