VLLNT UI · Component family
AI components
Chat, agents, reasoning, tool calls, citations, and artifacts — the UI surfaces every AI product needs. Accessible React components you own after install, each also readable by AI coding agents as JSON.
Chat & Conversation
Message bubbles, threaded conversations, and assistant sidebars for building complete AI chat interfaces.
AI Message Bubble
Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.
3 storiesConversation Thread
Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering.
3 storiesAI Sidebar
Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger.
3 storiesChat Dock Section
Sidebar section that hosts a compact, scrollable chat thread alongside a spatial workspace — slotted into a dock or rail to keep an AI assistant in view.
1 storyPrompt Composition
Auto-growing prompt inputs, chat composers, and reusable prompt template galleries for capturing user instructions.
AI Chat Input
Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.
2 storiesPrompt Input
Auto-growing prompt textarea with a submit affordance and optional toolbar slot.
4 storiesPrompt Templates
Searchable prompt template gallery with category filter, variable fill-in form, and onSelect.
4 storiesStreaming & Reasoning
Live token streaming, chain-of-thought traces, and collapsible reasoning blocks that reveal how an AI model thinks.
AI Streaming Text
Readable text block for partial assistant output with an optional live cursor while tokens stream in.
2 storiesChain of Thought
Ordered, status-aware visualization of a model's chain of thought with per-step state.
3 storiesReasoning
Collapsible AI reasoning trace with streaming support and ordered or free-form steps.
3 storiesThinking Block
Collapsible block showing AI thinking/reasoning with streaming support.
1 storyAgent Tools & Citations
Agent activity chains, tool-call traces, and source citations that make AI agent execution transparent and verifiable.
Agent Activity
Visual display of an AI agent's execution chain — steps, tools, decisions, progress.
4 storiesAI Tool Call Display
Structured card for tool invocation traces, statuses, serialized input, and returned output.
2 storiesAI Source Citation
Compact source reference card for AI answers with a title, origin label, and optional excerpt.
1 storyArtifacts & Models
Rendered AI artifacts, model selectors, and side-by-side model comparison for generated outputs and model choice.
AI Artifact
Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips.
4 storiesModel Selector
Dropdown selector for choosing AI models.
1 storyModel Comparison
Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar.
4 storiesReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
Frequently asked
- What is an agent-first UI design system?
- An agent-first design system gives you the UI primitives that AI products actually need — chat input, message bubbles, streaming text, tool-call displays, source citations, agent activity timelines, and artifacts — and also ships every component as machine-readable JSON so AI coding agents can install it without scraping HTML. VLLNT UI is open source (MIT) and installs with the shadcn CLI.
- Which components do I need to build an AI chat app in React?
- At minimum: AI Chat Input for the composer, AI Message Bubble to render each turn, and AI Streaming Text for token-by-token output. Add AI Tool Call Display and Agent Activity for agentic flows, AI Source Citation for RAG, and AI Artifact for canvas-style output.
- How do AI agents consume VLLNT UI?
- Three surfaces: /llms.txt (a concise index per the llmstxt.org spec), /llms-full.txt (the full registry context in one fetch), and /r/[name].json (a machine-readable descriptor per component with props, accessibility schema, and examples). Coding agents like Claude, Cursor, Cline, and Continue read these directly.
- Is VLLNT UI free to use?
- Yes. VLLNT UI is open source under the MIT license. You own the source after install, with no backend and no tracking.