AI Chat Suite

Quickstart

1. Ensure the registry is set up in Installation.
2. Run the registry command:

npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-chat-shell

Architecture

• AiChatSystem is the high-level system for production chat UI.
• Message renderer handles role formatting, timestamps, and status.
• Tool call card supports status/result/error outputs.
• Stream state component surfaces token/status progress.
• Chat shell composes all parts with controlled input, auto-scroll, and retry.

System Example

import { AiChatSystem } from "@/components/systems/ai-chat/ai-chat-system"

<AiChatSystem
  messages={messages}
  value={input}
  isStreaming={isStreaming}
  sendOnEnter
  maxInputLength={4000}
  onChange={setInput}
  onSend={handleSend}
  onRetry={retryLastMessage}
/>

Install Commands

Demo

Live example: AI chat demo.

API Reference