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.

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.

Browse all components How agents consume the registry17 components

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. Install AI Message Bubble from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Conversation Thread

Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering. Install Conversation Thread from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

AI Sidebar

Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger. Install AI Sidebar from the VLLNT UI registry with the shadcn CLI.

Web

3 storiesView component

Chat 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. Install Chat Dock Section from the VLLNT UI registry with the shadcn CLI.

Web

1 storyView component

Prompt 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. Install AI Chat Input from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Prompt Input

Auto-growing prompt textarea with a submit affordance and optional toolbar slot. Install Prompt Input from the VLLNT UI registry with the shadcn CLI.

WebNative

4 storiesView component

Prompt Templates

Searchable prompt template gallery with category filter, variable fill-in form, and onSelect. Install Prompt Templates from the VLLNT UI registry with the shadcn CLI.

Web

4 storiesView component

Streaming & 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. Install AI Streaming Text from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Chain of Thought

Ordered, status-aware visualization of a model's chain of thought with per-step state. Install Chain of Thought from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Reasoning

Collapsible AI reasoning trace with streaming support and ordered or free-form steps. Install Reasoning from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Thinking Block

Collapsible block showing AI thinking/reasoning with streaming support. Install Thinking Block from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Agent 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. Install Agent Activity from the VLLNT UI registry with the shadcn CLI.

WebNative

4 storiesView component

AI Tool Call Display

Structured card for tool invocation traces, statuses, serialized input, and returned output. Install AI Tool Call Display from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

AI Source Citation

Compact source reference card for AI answers with a title, origin label, and optional excerpt. Install AI Source Citation from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Artifacts & 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. Install AI Artifact from the VLLNT UI registry with the shadcn CLI.

WebNative

4 storiesView component

Model Selector

Dropdown selector for choosing AI models. Install Model Selector from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Model Comparison

Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar. Install Model Comparison from the VLLNT UI registry with the shadcn CLI.

Web

4 storiesView component

Readable 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.

/llms.txt

Concise index per the llmstxt.org spec — sections, links, and descriptions.

/llms-full.txt

Full registry context in one fetch — docs plus every component descriptor.

/r/<name>.json

Per-component descriptor: props, accessibility schema, and usage examples.

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.