AI Components
Free React components for AI apps: chat inputs with model pickers, tool approvals, citations, diff review, streaming states and more, built with Tailwind CSS.
Components for the parts of an AI product people actually touch: the prompt box, the model and effort pickers, tool calls waiting for approval, sources and citations, and the states in between while a reply streams in. Each one is a React component built with Tailwind CSS and Motion, installed with the shadcn CLI.
- AI-01AI Input SelectorUpdatedAI chat input with a model menu, a separate Effort control, file chips you can drop or paste, a / command menu, and Stop while replying.
- AI-02AI Input SearchUpdatedAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that stacks each source's avatar as it is read.
- AI-03AI State LoadingUpdatedAgent progress as a list of steps with a live log, elapsed time and a summary when done.
- AI-04AI Text LoadingUpdatedAI thinking text with a soft wave through the letters and words that swap letter by letter.
- AI-05AI VoiceUpdatedVoice input with a scrolling waveform, then a take you can play back, discard or send.
- AI-06AI Tool ApprovalNewApprove or deny an agent's tool calls. Destructive calls need a press and hold, and decided calls fold into a trace with their output.
- AI-07AI Context MeterNewHow full the context window is, as a ring in the prompt footer that opens a breakdown by source and compacts when it fills.
- AI-08AI Inline CitationsNewAn answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs.
- AI-09AI Diff ReviewNewA coding agent's edits streaming in file by file, then reviewed per file with accept, reject and undo.
- AI-10AI Model SelectorNewPick a model and how hard it thinks. Effort is a detent track that reshapes for each model and keeps your level when you switch.
- AI-11AI Token AlternativesNewAn answer where every unsure word shows what else the model weighed. Pick another word and the reply writes itself again from there.
- AI-12AI Conversation BranchesNewA chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump between them.
- AI-13AI Agent LanesNewA lead agent hands work to sub-agents that run side by side. Each gets a lane of tool calls, and you can scrub through the whole run.
- AI-14AI Inline EditNewSelect text in a document and ask AI to rewrite it. The edit streams in place as a word-level diff you accept, discard or try again.
- AI-15AI Message QueueNewKeep typing while the agent works. Follow-ups stack above the composer, where you can reorder, edit or send one now, and go in one by one when the run ends.
- AI-16AI RedactNewMasks names, emails, card numbers and keys as placeholders before a prompt is sent, then fills the real values back into the reply.
- AI-17AI MemoryNewAn assistant that saves what it learns about you into a memory list. New facts replace the ones they contradict, and you can edit or forget any of them.
- AI-18AI AutocompleteNewA text box that suggests how your sentence ends in grey after the caret. Tab takes it all, the right arrow takes one word, and typing the same letters keeps it.
