AI Response Card

A self-contained card that displays an AI-generated response. Includes a header with optional model badge and timestamp, action buttons for copying and regenerating, and thumbs up/down feedback. Supports a streaming cursor when isStreaming is true.

gpt-4o

2:41 PM

React is a JavaScript library for building user interfaces. It allows you to create reusable UI components and manage application state efficiently.

import { AIResponseCard } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add ai-response-card

Import

import.tsx

import { AIResponseCard } from "@aetherstack/patterns"

Usage

ai-response-card.tsx

import { AIResponseCard } from "@aetherstack/patterns"

export function MyResponseCard() {
  return (
    <AIResponseCard
      content="React is a JavaScript library for building user interfaces."
      model="gpt-4o"
      timestamp="2:41 PM"
      onCopy={() => navigator.clipboard.writeText(content)}
      onRegenerate={() => regenerate()}
      feedbackProps={{
        onThumbsUp: () => submitFeedback("up"),
        onThumbsDown: () => submitFeedback("down"),
      }}
    />
  )
}

Props

Prop	Type	Default	Description
content*	string	—	The response text content rendered inside the card.
isStreaming	boolean	false	Shows an animated streaming cursor at the end of the content.
model	string	—	Model name shown as a badge in the card header.
timestamp	string	—	Timestamp string displayed in the card header.
onCopy	() => void	—	Callback for the copy button. When omitted, the button is not rendered.
onRegenerate	() => void	—	Callback for the regenerate button. When omitted, the button is not rendered.
feedbackProps	{ onThumbsUp?: () => void; onThumbsDown?: () => void }	—	Thumbs up/down feedback handlers. Buttons are rendered when handlers are provided.
className	string	—	Additional CSS classes applied to the card root.

* Required

Accessibility

→Copy and regenerate buttons include descriptive aria-label attributes.
→Feedback buttons use aria-pressed to convey toggled state to screen readers.
→The streaming cursor is hidden from assistive technology with aria-hidden.