Templates

AI-related templates: reusable blocks and full-page layouts for chat, prompts, and assistants. Grouped by AI pattern.

Recipes

Predefined combinations of templates for full flows. Use these block slugs in order when building a chat screen or minimal chat.

Chat screen
Full chat UI: layout with sidebar, message rows, typing indicator, prompt input, and error retry. Compose these blocks in order for a complete chat screen.
chat-layout → chat-message-row → typing-indicator → prompt-input-bar → message-error-retry
AI chat (full playground)
Full-page-style AI chat with model selector, messages, code blocks, errors, typing indicator, suggested prompts, and prompt bar with attachments. Use ai-chat-playground template for all-in-one, or compose blocks for custom order.
ai-chat-playground
Minimal chat
Minimal chat: message rows + prompt input bar. Add typing-indicator and message-error-retry as needed.
chat-message-row → prompt-input-bar

By AI pattern

Chat — Block

Chat message row

A single message row for user or assistant with avatar and content.

AI response card

Card layout for displaying an AI-generated response with optional actions.

Agent avatar with status

Avatar for an AI agent with status badge (online, thinking, etc.).

Chat code block

Inline code block with copy button and optional language label for AI code responses.

Prompt input — Block

Prompt input bar

Input area with send button for AI prompts.

Suggested prompts

Row of quick-reply chips for empty or follow-up state.

Prompt with attachments

Prompt input bar with file/attachment chips (e.g. file.pdf with remove).

Streaming — Block

Typing indicator

Animated dots or skeleton line for “AI is thinking” state.

Response loading skeleton

Skeleton lines or placeholder for AI response before/while streaming.

Tool use — Block

Tool call display

Collapsible card showing “Calling tool…” and result (e.g. get_weather → result).

Errors & retry — Block

Message error with retry

Error state for a message (icon + message) with “Retry” and optional “Dismiss”.

Layout — Page

Chat layout

Full layout with sidebar and main chat thread area.

AI assistant panel

Floating panel layout for an AI assistant with header and content area.

AI chat playground

Full-page-style layout: header with model selector, message list (user, AI, code block, error, typing), suggested prompts, and prompt bar with attachments.