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.
"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>
);
}Part of Uai — browse the full library on 21st.dev.