Chat Blocks
Copy-paste React sections for AI chat products: full chat interfaces, prompt inputs and playgrounds, streaming and cited responses, code-generation panels, multi-agent and persona chats, model comparisons, and landing-page hero sections built around a prompt input. Each block ships as plain, editable component code, not a runtime dependency.
rich-prompt-input-with-suggestions
Rich Prompt Input with Smart Suggestions
An AI prompt composer with attachment icons, a model selector, and a grid of clickable prompt suggestion cards.
ai-streaming-response-typewriter
AI Streaming Response with Live Typing
A single AI chat exchange with a skeleton loading state, a word-by-word typewriter reveal, and a stop-generating control.
ai-response-with-cited-sources
AI Response with Cited Sources
A Perplexity-style answer with inline numbered citation markers and an expandable source list below it.
code-generation-chat-with-syntax-highlighting
Code Generation Chat with Syntax Highlighting
A developer chat message with a file-name tab bar, a language badge, illustrative syntax coloring, and a real copy button.
prompt-starter-grid
AI Prompt Starter Grid
A tabbed grid of prompt template cards, filterable by category, each with an icon, title, and description.
ai-agent-profile-card
AI Agent Profile Card
A showcase card for an AI agent with avatar, capability badges, a sample chat preview, stats, and action buttons.
floating-chat-widget
Floating Chat Widget with Expandable Window
A corner chat bubble with a pulsing notification dot that expands into a mini chat window.
complete-ai-chat-interface
Complete AI Chat Interface
A full chatbot window with avatars, timestamps, a typing indicator, and a controlled composer.
conversational-thread-with-reactions
Conversational Thread with Reactions
A time-grouped message thread with hover-revealed copy and thumbs up/down actions on AI replies.
ai-reasoning-steps-collapsible
AI Reasoning Steps with Collapsible Thinking
A Claude-style collapsible "thinking" section with numbered, independently expandable reasoning steps and a final answer below.
side-by-side-ai-model-comparison
Side-by-Side AI Model Comparison
A shared prompt input feeding two side-by-side model response panels, each with its own thumbs up/down rating control.
chat-with-image-attachments
Chat with Image Attachments
A chat window with inline image attachment previews and decorative upload icons on the composer.
multi-agent-persona-chat
Multi-Agent Chat with Personas
A panel-discussion style log of multiple color-coded AI agent personas working through a task.
ai-search-hero
AI Search Hero
A centered hero with a large pill-shaped search input and a row of clickable suggestion pills below it.
ai-prompt-hero-with-stats
AI Prompt Hero with Stats
A landing hero with a prompt input, a trust stats bar, and a grid of popular prompt example cards.
ai-use-case-tabs
AI Use Case Tabs
A tabbed marketing section showing an example prompt and response preview for each AI assistant use case.
ai-prompt-playground-hero
AI Prompt Playground Hero
A split-screen hero pairing marketing copy with a live example-prompt playground that shows canned AI responses.
ai-capabilities-feature-grid
AI Capabilities Feature Grid
A feature-grid section where each card pairs an icon and description with a mini chat-bubble preview.
member-inbox-thread
Member Inbox And Thread
A two-pane inbox: a selectable conversation list with unread dots and the active member thread.