@scrimui

Every free Scrim UI component — 55 in total, from prompt inputs and streaming messages to tool calls and citations.

The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.

A chat input that accepts file uploads — attachment chips with upload progress, type icons, and one-click removal.

A chat input with the model picker built in — switch models inline, with badges for what each one can do.

A prompt template editor with {{variables}} highlighted as you type, a rendered preview, and a line diff against the previous version.

Render an AI reply token by token like ChatGPT's typing effect — blinking cursor, stop button, and no layout jump as the text grows.

The user's chat bubble — right-aligned, with hover actions to copy, edit the prompt, or regenerate the answer.

The action row under an AI reply — copy, regenerate, share and thumbs up/down feedback, revealed on hover.

What to show when a generation fails — a plain-English reason, a retry button, and a countdown for rate limits.

A rendered markdown reply — syntax-highlighted code blocks with copy buttons, plus tables, lists and safe links.

Markdown that renders correctly while it is still arriving — bold, code spans, links and tables settle without ever flashing raw syntax or reflowing.

The 1/3 pager after a regenerate — previous and next versions, branch markers, continue-from-here, and honest generating, failed and stopped states.

The chat-history sidebar every AI app rebuilds — search, inline rename, pin, and delete with undo, grouped by date, with loading and empty states.

The side panel for generated output — preview/code toggle, copy, download, version switching, and streaming, error and stale states.

A collapsible chain-of-thought panel — show the model's reasoning trace with elapsed time, folded away by default.

The loading state before the first token — bouncing dots, a blinking caret, or a labeled status line while the model thinks.

A multi-step reasoning trace — each step with its own status and timer, so a long think reads as progress, not a hang.

How to show a function call in chat — the arguments sent, the result returned, run status, and an expand toggle.

A web search the model ran — the query it chose, how many results came back, and previews of the sources it read.

A code interpreter run inside chat — the snippet, a running state, stdout as it streams, and errors that stay readable.

Render a React component from a tool result instead of text — a skeleton in the widget's own shape, and a text fallback when the client has no renderer.

The result card for AI-generated images, audio and video — queue and stage states, variants, download and regenerate, and a safety block that isn't an error.

A cited source as a card — favicon, page title, domain, and the snippet the answer actually drew from.

The passages retrieval actually returned, with similarity scores and a visible relevance floor — including the case where nothing cleared it.

Inline citation markers in generated text — numbered footnotes that reveal the source in a hover preview card.

A citation marker that shows the passage it came from — fixed positioning that survives a scrolling answer, touch and keyboard, and an honest state for a numbe…

Status for an AI agent working on its own — running, waiting on you, completed or failed, with what it did last.

The human-in-the-loop confirmation — what the agent wants to do, the exact details, and allow or deny before it acts.

The approval card as a lifecycle: a decision that survives a closed tab, is idempotent across two open ones, and says what happened when it lands after the req…

The checklist an agent writes for itself and then edits mid-run — steps added, skipped and re-ordered, without the list jumping under the reader.

One agent passing work to another — who asked, what was carried across, and what the receiving agent was not told.

The activity log for a long agent run — collapsible success clusters, retry-linked events, approval gates in place, and a follow that respects the reader.

Thumbs up and down that ask the one follow-up question worth asking — with a state for feedback that has been sent and cannot be taken back.

Fix the answer where it is wrong, in place — the edit becomes training data, so the component keeps the original alongside it rather than overwriting it.

Two answers, side by side, with the model names hidden until a winner is picked — because a visible label is the thing being measured.

Pass rates per test case across two runs, with the regressions surfaced first and a sample size honest enough to say when a delta means nothing.

A streamed AI edit as hunks you accept or reject one by one — id-keyed decisions, word-level marks, and buttons that stay disabled while a hunk is still arrivi…

A drag-and-drop upload zone — per-file progress bars, type icons, and error states for files too big or of the wrong type.

The files currently in the model's context — sizes, how many tokens each one costs, and removal without leaving the chat.

The @-mention menu for adding context to a prompt — files, web pages and knowledge bases with search, recent items, access states and token cost.

How much of the context window is gone and to what — system prompt, files, history — plus what gets dropped first when the next message does not fit.

The memory panel — every fact the assistant has saved about the user, with the ability to add one or make it forget.

The prompt an assistant shows before saving something about you — the fact it noticed, and your choice to keep or dismiss it.

A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo.

A standalone model picker — compare models in a dropdown with badges for speed, context length and what each supports.

A control for how hard the model should think — light, balanced or deep, with the tradeoff between speed and depth shown.

Switches for the tools a model may use — web search, code execution, file access — with unmistakable on and off states.

Live spend per message and per conversation — cached input priced apart from fresh, reasoning tokens shown without double-counting, and a visible ~ when a prov…

A microphone button that expands into a recording panel — live waveform, a running transcript, and cancel or send.

An animated audio waveform — distinct bar motion for listening, recording, and the assistant speaking back.

A voice conversation as it happens — who is speaking, the live transcript, and replay for any individual turn.

How to say no without ending the conversation — the refusal, a plain-language reason, and one redirect the reader can click.

What to show when the content filter fires — a stopped stream that keeps its partial text, or a blocked prompt, with a false-positive path.

An answer that says how sure it is — a warning badge only when there is something to warn about, and a hedge that names what to verify.

The chrome around a live voice call — an unmistakable mute toggle, a running call timer, and an end button that's always one tap away.

The 'Memory updated' receipt — shows the exact fact that was saved, with one-tap Undo and a quiet link to manage memories.

The canonical chat interface — sidebar, streaming messages, prompt input with model selector, and sources.

A research flow that shows search tool calls, reasoning, sources and a cited final answer.

A coding run with agent status, tool calls, diffs and a human-in-the-loop approval gate.

A voice-first conversation — live waveform states, a recording input, a spoken transcript and a typed fallback.

A preferences screen that picks the model, reasoning level and tools, and manages persistent memory.

Chat on the left, generated output on the right — artifacts open from the answer, stream, version, and fail without breaking the conversation.

Ask your own documents — upload and parse, cited answers with inspectable passages, an honest not-found state, and a visible context budget.

Upload a document, watch fields fill in, then review the flagged ones — per-field confidence, corrections that keep the original, export earned.

A one-screen generation studio — prompt composer and model picker beside a feed of queued, staged, blocked and ready image results with variants.

Watch a fleet of agents at once — parallel statuses, an inspectable handoff, a waiting approval, a failed child run, and per-run plus fleet cost.

Grounded reply drafts with citations, honest low-confidence answers, inline corrections, an approval gate on refunds, and a rating row on every draft.

The model assembles a dashboard from a controlled widget registry — streamed props, an unsupported-request fallback, and widget clicks that re-enter the chat.