Answer Card

Perplexity-style answer with sources. Pro · AI chat and agents › Answers and artifacts

A Perplexity-style answer: the question, a strip of sources, the streamed answer with citation chips, related images, follow-up suggestions and a field to keep asking.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add answer-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { AnswerCard } from 'valyro-ui-pro';

Props

Prop	Type	Default
`query` *	`string`		The question, shown as the heading.
`answer` *	`string`		Markdown answer with `[1]`-style citations; grows while streaming (unfinished markup is closed on the fly).
`streaming`	`boolean`	`false`	The answer is still being written.
`sources`	`CitationSource[]`	`[]`	Sources the citations point to, numbered from 1. Placeholder cards show while streaming without any.
`images`	`AnswerCardImage[]`	`[]`	Related image thumbnails in their own section; one with `href` opens it in a new tab.
`related`	`string[]`	`[]`	Suggested follow-up questions.
`onRelatedSelect`	`(question: string) => void`		Called with the question when a related suggestion is clicked. Suggestions are hidden while streaming.
`onFollowUp`	`(question: string) => void`		Shows a follow-up field; called with the question.
`onRegenerate`	`() => void`		Adds a Rewrite action.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5`	`2`	Heading level of the query (the section titles are one below). Default 2.
`mark`	`ReactNode`		The tile beside "Answer": the assistant's logo or avatar. Default: a monogram of `labels.assistant`.
`locale`	`string`		BCP 47 locale for source dates; defaults to the ThemeProvider's.
`labels`	`Partial<AnswerCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Sources — Sources and citations in an answer
Artifact Panel — Artifact panel next to the chat
Diff Review — Review AI edits hunk by hunk
AI Chat Window — AI chat window
Chat Message — Messages with streaming output
Message Branches — Message versions and a conversation branch tree
Streaming Text — Smooth token streaming
Markdown Preview — Rendered Markdown
Response Feedback — Answer rating and a rubric for reviewers
Prompt Composer — Prompt field with attachments
Inline Suggestion — Inline autocomplete suggestion
Model Selector — AI model picker

Previous: Sources · Next: Artifact Panel · All AI chat and agents