The UI design system for AI agents and AI-first apps.
Every AI product needs the same surfaces — a chat composer, message bubbles, streaming output, tool calls, citations, agent activity, and artifacts. VLLNT UI ships 15 of them as accessible React components you own after install, each also readable by AI coding agents as JSON.
The AI component family
Grouped by the job they do in an AI product. Mix and match — every component installs independently with the shadcn CLI.
Chat & assistant
The conversation surface — compose prompts, render turns, and embed an assistant anywhere.
AI Chat Input
React prompt composer for AI chat and agents: attachments, auto-expand, toolbar actions, and submit/streaming states. Accessible, install via the shadcn CLI.
View componentAI Message Bubble
Render assistant, user, tool, and system messages in React. Markdown-ready chat bubbles for LLM and agent apps. Accessible, install via the shadcn CLI.
View componentAI Sidebar
Drop an AI assistant into any app: a slide-out React panel with header, content, and footer slots plus a standalone trigger. Install via the shadcn CLI.
View component
Streaming & reasoning
Show output as it generates and make an agent's thinking transparent.
AI Streaming Text
Render streaming LLM output in React with a live cursor as tokens arrive. The generative-UI text primitive for AI apps. Install via the shadcn CLI.
View componentThinking Block
Collapsible React block that streams an AI's thinking/reasoning steps. Surface chain-of-thought without cluttering the final answer. Install via the shadcn CLI.
View component
Tools & agent actions
Render what an agent is doing — tool calls, function results, and multi-step runs.
AI Tool Call Display
Render an AI agent's tool/function calls in React: name, serialized input, status, and returned output. Built for agentic apps. Install via the shadcn CLI.
View componentAgent Activity
Visualize an AI agent's execution chain in React — steps, tools, decisions, and progress. The activity timeline for agentic apps. Install via the shadcn CLI.
View component
Sources & grounding
Attribute RAG answers so users can verify where they came from.
Artifacts & output
Give substantial generated content its own panel, and close out completed tasks.
AI Artifact
Rendered output panel for AI-generated content in React: toolbar with copy, edit, download, fullscreen, and version chips. The artifacts/canvas UI. Install via the shadcn CLI.
View componentCompletion Dialog
Signal the end of an AI task or workflow in React with a completion dialog covering loading, error, and success states. Install via the shadcn CLI.
View component
Prompts & evaluation
Ship a reusable prompt library and compare models head-to-head.
Prompt Templates
Searchable prompt template gallery in React: category filter, variable fill-in form, and onSelect. Ship a reusable prompt library. Install via the shadcn CLI.
View componentModel Comparison
Compare AI model responses side by side in React: optional blind mode, metadata stats, and a vote bar. Evaluate LLMs in your UI. Install via the shadcn CLI.
View component
Collaboration for AI-first teams
Shared, multiplayer surfaces for products where humans and agents work side by side.
Workspace Switcher
Segmented workspace picker for switching between canvas views and operational contexts.
View componentLive Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip.
View componentCanvas Shell
Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
View component
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.