Back to cookbook
Recipe

Build a chat panel with GunjoUI

Build a support, assistant, or team chat interface using the system chat components.

Recommended:
Claude

Prompt

Use @gunjo/ui. Reference https://gunjo.dev/api/specs/overlay/chat-panel, https://gunjo.dev/api/specs/display/chat-message, and https://gunjo.dev/api/specs/inputs/chat-input.

Build a full-height chat panel:
- Header: title "Assistant" + Avatar + a settings button (variant=ghost, Settings icon)
- ScrollArea with ChatMessage entries (alternating roles user/assistant). Each message has role badge, text, timestamp.
- Input area at bottom: ChatInput with attachment button, multi-line textarea, send button (bg-primary).
- Empty state: when no messages, show a centered EmptyState with icon "Sparkles" + "Ask anything" + a few suggested prompts as Tag components (there is no Chip component in @gunjo/ui).

Stream responses by appending to the last assistant message.

Expected output

A working chat panel using ChatPanel, ChatInput, ChatMessage, ScrollArea, EmptyState, Avatar.

Components used

ChatPanel
ChatInput
ChatMessage
ScrollArea
EmptyState
Avatar