UI for AI agents

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.

Components you'll use

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

Install

Add every component above with the shadcn CLI. You own the source after install.

pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-chat-input.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-message-bubble.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-streaming-text.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-sidebar.json

Frequently asked

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.