Free, open-source React components and patterns for AI interfaces, including prompts, streaming messages, reasoning, tool calls, citations, agents, memory, voice, and safety.
One agent passing work to another — who asked, what was carried across, and what the receiving agent was not told.
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.
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.
Status for an AI agent working on its own — running, waiting on you, completed or failed, with what it did last.
The canonical chat interface — sidebar, streaming messages, prompt input with model selector, and sources.
A coding run with agent status, tool calls, diffs and a human-in-the-loop approval gate.
A research flow that shows search tool calls, reasoning, sources and a cited final answer.
A voice-first conversation — live waveform states, a recording input, a spoken transcript and a typed fallback.
Every free Scrim UI component — 55 in total, from prompt inputs and streaming messages to tool calls and citations.
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 request expired.
The human-in-the-loop confirmation — what the agent wants to do, the exact details, and allow or deny before it acts.
The side panel for generated output — preview/code toggle, copy, download, version switching, and streaming, error and stale states.
Chat on the left, generated output on the right — artifacts open from the answer, stream, version, and fail without breaking the conversation.
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 number the model invented.
Inline citation markers in generated text — numbered footnotes that reveal the source in a hover preview card.
A code interpreter run inside chat — the snippet, a running state, stdout as it streams, and errors that stay readable.
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 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 chat-history sidebar every AI app rebuilds — search, inline rename, pin, and delete with undo, grouped by date, with loading and empty 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 provider did not report enough to be sure.
Grounded reply drafts with citations, honest low-confidence answers, inline corrections, an approval gate on refunds, and a rating row on every draft.
Ask your own documents — upload and parse, cited answers with inspectable passages, an honest not-found state, and a visible context budget.
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 arriving.
What to show when a generation fails — a plain-English reason, a retry button, and a countdown for rate limits.
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 drag-and-drop upload zone — per-file progress bars, type icons, and error states for files too big or of the wrong type.
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.
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 model assembles a dashboard from a controlled widget registry — streamed props, an unsupported-request fallback, and widget clicks that re-enter the chat.
A one-screen generation studio — prompt composer and model picker beside a feed of queued, staged, blocked and ready image results with variants.
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.
A rendered markdown reply — syntax-highlighted code blocks with copy buttons, plus tables, lists and safe links.
A small inline chip confirming a fact was saved to memory — quiet enough to ignore, clear enough to undo.
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.
The 'Memory updated' receipt — shows the exact fact that was saved, with one-tap Undo and a quiet link to manage memories.
The action row under an AI reply — copy, regenerate, share and thumbs up/down feedback, revealed on hover.
A preferences screen that picks the model, reasoning level and tools, and manages persistent memory.
A standalone model picker — compare models in a dropdown with badges for speed, context length and what each supports.
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.
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.
Two answers, side by side, with the model names hidden until a winner is picked — because a visible label is the thing being measured.
A prompt template editor with {{variables}} highlighted as you type, a rendered preview, and a line diff against the previous version.
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.