Prompt Composer

AI chats

About

An AI chat composer: slash-command palette, drag/paste file attachments with previews, model picker, and a send button that morphs into stop while a reply streams. Four variants.

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

"use client";

import { FileText, Globe } from "lucide-react";
import {
  PromptComposer,
  PromptComposerActions,
  PromptComposerAdd,
  PromptComposerAddItem,
  PromptComposerFileItem,
  PromptComposerInput,
  PromptComposerModelSelect,
  PromptComposerSubmit,
} from "@/components/ui/prompt-composer";

const models = [
  { id: "your-model", label: "Your model" },
  { id: "fast", label: "Fast" },
  { id: "precise", label: "Precise" },
] as const;

export default function PromptComposerDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">
      <div className="w-full max-w-[560px]">
        <PromptComposer variant="rounded">
          <PromptComposerAdd>
            <PromptComposerFileItem />
            <PromptComposerAddItem
              icon={<FileText className="size-4" strokeWidth={1.8} aria-hidden="true" />}
              description="Attach saved context"
            >
              Workspace notes
            </PromptComposerAddItem>
            <PromptComposerAddItem
              icon={<Globe className="size-4" strokeWidth={1.8} aria-hidden="true" />}
              description="Live results"
            >
              Web search
            </PromptComposerAddItem>
            <div className="mt-1 border-t border-border px-2 pt-[7px] pb-[5px] text-[11px] text-muted-foreground">
              Attach files or mention a source
            </div>
          </PromptComposerAdd>
          <PromptComposerInput placeholder="Write a message…" />
          <PromptComposerActions>
            <PromptComposerModelSelect models={models} />
            <PromptComposerSubmit />
          </PromptComposerActions>
        </PromptComposer>
      </div>
    </div>
  );
}