Build an AI chat UI in React
Every AI chat app needs the same three surfaces: a composer to send prompts, bubbles to render the conversation, and streaming output as the model responds. These components give you all three — accessible, themeable, and ready to wire to any model or agent runtime.
Composants que vous utiliserez
- AI Chat InputReact prompt composer for AI chat and agents: attachments, auto-expand, toolbar actions, and submit/streaming states. Accessible, install via the shadcn CLI.
- AI Message BubbleRender assistant, user, tool, and system messages in React. Markdown-ready chat bubbles for LLM and agent apps. Accessible, install via the shadcn CLI.
- AI Streaming TextRender 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.
- AI SidebarDrop 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.
Installation
Ajoutez chaque composant ci-dessus avec la CLI shadcn. Vous possedez le source apres installation.
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-chat-input.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-message-bubble.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-streaming-text.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/ai-sidebar.jsonQuestions frequentes
- What components do I need for an AI chat UI?
- A composer (AI Chat Input), a way to render turns (AI Message Bubble), and streaming output (AI Streaming Text). AI Sidebar lets you embed the chat as a co-pilot beside an existing app.
- Does this work with the Vercel AI SDK or my own backend?
- Yes. The components are presentational — wire their callbacks and state to the Vercel AI SDK, LangChain, or any custom streaming endpoint.