VLLNT UI · Famille de composants
Composants AI
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
Bulle de discussion pour les messages assistant, utilisateur, outil et systeme utilisant les surfaces du systeme de design actuel. Installez AI Message Bubble depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesConversation Thread
Famille de composants composee pour les interfaces de chat IA qui orchestre le defilement automatique, les indicateurs de streaming, les etats vides et le rendu des messages. Installez Conversation Thread depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesAI Sidebar
Panneau d'assistant IA coulissant avec fournisseur, emplacements en-tete / contenu / pied de page et un declencheur autonome. Installez AI Sidebar depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesChat Dock Section
Section de barre laterale qui heberge un fil de discussion compact et defilable a cote d'un espace de travail spatial, integre dans un dock ou un rail pour garder un assistant IA visible. Installez Chat Dock Section depuis le registre VLLNT UI avec la CLI shadcn.
1 storyPrompt Composition
Auto-growing prompt inputs, chat composers, and reusable prompt template galleries for capturing user instructions.
AI Chat Input
Compositeur d'invite pour interfaces conversationnelles avec texte d'aide, actions de barre d'outils et etats d'envoi. Installez AI Chat Input depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesPrompt Input
Zone de texte de prompt a croissance automatique avec un bouton d'envoi et un emplacement de barre d'outils optionnel. Installez Prompt Input depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesPrompt Templates
Galerie de modeles de prompts consultable avec filtre par categorie, formulaire de remplissage de variables et onSelect. Installez Prompt Templates depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesStreaming & Reasoning
Live token streaming, chain-of-thought traces, and collapsible reasoning blocks that reveal how an AI model thinks.
AI Streaming Text
Bloc de texte lisible pour la sortie partielle de l'assistant avec un curseur en direct optionnel pendant que les jetons arrivent en flux. Installez AI Streaming Text depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesChain of Thought
Visualisation ordonnee et sensible au statut de la chaine de pensee d'un modele avec un etat par etape. Installez Chain of Thought depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesReasoning
Trace de raisonnement IA repliable avec prise en charge du streaming et etapes ordonnees ou libres. Installez Reasoning depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesThinking Block
Bloc repliable affichant le raisonnement de l'IA avec prise en charge du streaming. Installez Thinking Block depuis le registre VLLNT UI avec la CLI shadcn.
1 storyAgent Tools & Citations
Agent activity chains, tool-call traces, and source citations that make AI agent execution transparent and verifiable.
Agent Activity
Affichage visuel de la chaine d'execution d'un agent IA — etapes, outils, decisions, progression. Installez Agent Activity depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesAI Tool Call Display
Carte structuree pour les traces d'invocation d'outils, les statuts, l'entree serialisee et la sortie retournee. Installez AI Tool Call Display depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesAI Source Citation
Carte de reference de source compacte pour les reponses IA avec un titre, une etiquette d'origine et un extrait optionnel. Installez AI Source Citation depuis le registre VLLNT UI avec la CLI shadcn.
1 storyArtifacts & Models
Rendered AI artifacts, model selectors, and side-by-side model comparison for generated outputs and model choice.
AI Artifact
Zone de sortie rendue pour le contenu genere par IA avec barre d'outils, actions copier/editer/telecharger/plein ecran et puces de version. Installez AI Artifact depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesModel Selector
Selecteur deroulant pour choisir des modeles IA. Installez Model Selector depuis le registre VLLNT UI avec la CLI shadcn.
1 storyModel Comparison
Comparaison cote a cote des reponses de modeles IA avec mode aveugle optionnel, statistiques de metadonnees et une barre de vote. Installez Model Comparison depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesLisible par les agents
Votre agent IA peut aussi les installer.
Le registre est expose comme donnees structurees, afin que les agents de code choisissent le bon composant sans scraper le HTML.
Questions frequentes
- 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.