Prompt-kit components for building AI-powered chat interfaces.
Powered by @repo/ui/ai — based on prompt-kit
Core building blocks for conversational interfaces
PromptInputAuto-sizing textarea with action buttons for user inputMessageMessage bubble with avatar, content, and action slotsChatContainerSSRScroll-aware container with sticky-to-bottom behaviorScrollButtonSSRScroll-to-bottom button for chat interfacesSystemMessageStyled system/info messages within a chatPromptSuggestionClickable suggestion chips for guiding user inputRender AI-generated content with rich formatting
MarkdownFull markdown renderer with syntax highlightingCodeBlockSSRSyntax-highlighted code with copy button and language badgeJSXPreviewLive JSX component preview rendererImageAI-generated image display componentStepsStep-by-step visualization with progress trackingComponents designed for AI interaction patterns
ResponseStreamStreaming text display with typewriter effectReasoningCollapsible reasoning/thinking process displayChainOfThoughtMulti-step reasoning visualizationThinkingBarAnimated thinking/processing indicatorTextShimmerShimmering text effect for loading statesToolTool invocation display with status and resultsSourceSource reference with expandable contentLoader13 variants: Dots, Classic, Pulse, PulseDot, Circular, Typing, Wave, Bars, Terminal, TextShimmer, TextDots, TextBlinkUser feedback collection and utility components
FeedbackBarThumbs up/down feedback with optional text inputFileUploadSSRDrag-and-drop file upload with previewReady-to-use chat interfaces powered by AI SDK
ChatbotFull chat interface using useChat from @ai-sdk/reactToolCallingChatbotChat with tool calling support and result display5 patches applied across 4 components to ensure Next.js App Router compatibility.
ChatContainerchat-container.tsx2 patchesDefers StickToBottom rendering until client mount (Root + Content)
Strategy: Conditional rendering with isMounted state
ScrollButtonscroll-button.tsxReturns null during SSR to avoid useStickToBottomContext errors
Strategy: Conditional rendering with isMounted state
FileUploadfile-upload.tsxGuards createPortal(document.body) until client hydration
Strategy: Mounted check before portal creation
CodeBlockcode-block.tsxDefers async syntax highlighting, renders plain code fallback during SSR
Strategy: Async deferred rendering via useEffect
Auto-sizing textarea with action buttons
Clickable suggestion chips to guide user input
Chat messages with avatar, content, and actions
System-level messages within chat
Streaming text with typewriter effect
Shimmering text effect for loading states
Animated thinking/processing indicator
Collect user feedback on AI responses
13 loader variants for AI processing states
DotsLoaderClassicLoaderPulseLoaderPulseDotLoaderCircularLoaderTypingLoaderWaveLoaderBarsLoaderTerminalLoaderTextShimmerLoaderTextDotsLoaderTextBlinkLoader// Import AI components from the shared UI package
import {
PromptInput,
PromptInputTextarea,
PromptInputActions,
PromptInputAction,
Message,
MessageAvatar,
MessageContent,
ResponseStream,
ThinkingBar,
DotsLoader,
FeedbackBar,
// ... and more
} from "@repo/ui/ai"