New: 16 blocks, from agent runs to voice chat
Build better AI interfaces
Composable React components for chat and agent UIs. Copy them into your project with the shadcn CLI, own the code, ship faster.
npx shadcn@latest add https://ui.spencerwueste.com/r/prompt-input.jsonpandacoderz/ui
How can I help today?
Pick a suggestion or type your own question.
Responses are scripted for this demo. Plug in a transport to go live.
Live block. Responses are scripted; try “Astro islands”, “streaming”, or “tests”.
Components
17 primitives for the AI layer of your app.
- Prompt InputComposable chat input with an auto-resizing textarea and action slots.
- MessageChat message with streaming markdown, avatar, and an action bar.
- ThreadScroll container that stays pinned to the newest message while content streams in.
- SuggestionsPrompt suggestion chips and a dismissible suggestions panel.
- Model SelectorDropdown for choosing an AI model with search, groups, sub-menus, and locked items.
- ReasoningCollapsible thinking block that opens while streaming and reports elapsed time when done.
- ToolTool call card with a status badge and collapsible input and output payloads.
- Text ShimmerAnimated shimmer for loading and thinking states, with no dependencies.
- Feedback BarInline prompt asking whether a response was helpful, with action and close slots.
- StepsVertical timeline for agent plans and multi-step runs, with status indicators and collapsible details.
- Diff ViewUnified diff with line numbers, per-hunk actions, and accepted or rejected states for agent-proposed patches.
- CitationInline numbered citation chips with hover previews, plus source cards for answer-with-sources layouts.
- WaveformAudio-style bar visualizer for voice input and text-to-speech playback, animated in CSS.
- Usage MeterLabelled progress meter for context windows, rate limits, and budgets, with warning and danger thresholds.
- Command MenuCmd-K menu with search, groups, keyboard navigation, and an always-visible "Ask AI" escape hatch.
- Mini ChartDependency-free sparkline, bar chart, and stat tile for usage dashboards and inline metrics.
- File DropDrag-and-drop upload zone with an attachment list that shows progress, size, and errors.
You own the code
Nothing ships as a package. The CLI copies TSX files into your repo and you edit them like any other component.
Built for streaming
Markdown, reasoning, and tool cards all accept partial content and re-render smoothly as tokens arrive.
Agent-readable docs
Every page has a markdown mirror and the site publishes llms.txt, so your coding assistant can read it too.