AI answers

Answers with sources, citations, comparisons and feedback.

4 components · 18 variants

Switch category

Citations

Citations for AI answers in five forms. Source cards with how often each is cited, footnotes with jump and back, pills that preview the quoted passage, a source panel that follows the chosen sentence and a check of which claims a source backs.

Source cards
Footnotes
Hover preview
Source panel
Claim check

Props and details

Source cards

Sources as cards above the answer with type filter and citation count. Pressing a number in the text lights up its card and the other way round.

Open in Studio

Installv1.0.0

aiw add @ai-website/citations

Brings along utils, kit, icon, reveal, motion

Usage

<Citations variant="source-cards" question="…" answer={["Text with [1] and [2, 3]"]} sources={[{ id, title, site, date, kind, href }]} />

Source

Footnotes

Numbered references in the text jump to their note, the note shows the quoted passage and leads back to its place. Both flash briefly on arrival.

Open in Studio

Installv1.0.0

aiw add @ai-website/citations

Brings along utils, kit, icon, reveal, motion

Usage

<Citations variant="footnotes" answer={[…]} sources={[{ id, title, site, date, excerpt, href }]} />

Source

Hover preview

Citations as small pills inside the sentence. Hover, focus or tap opens a card with the source and the marked passage, Escape closes it.

Open in Studio

Installv1.0.0

aiw add @ai-website/citations

Brings along utils, kit, icon, reveal, motion

Usage

<Citations variant="hover-preview" answer={[…]} sources={[{ id, title, site, excerpt: "… ==marked== …" }]} />

Source

Source panel

Cited sentences are underlined. Choosing one opens its source in the panel beside the answer with the passage it relies on. Phones stack the panel below.

Open in Studio

Installv1.0.0

aiw add @ai-website/citations

Brings along utils, kit, icon, reveal, motion

Usage

<Citations variant="side-panel" answer={[…]} sources={[…]} />

Source

Claim check

Each claim of an answer with its evidence, marked as backed, partly backed or without a source, as a summary bar and as rows that open the quoted words.

Open in Studio

Installv1.0.0

aiw add @ai-website/citations

Brings along utils, kit, icon, reveal, motion

Usage

<Citations variant="claim-check" claims={[{ id, claim, source, quote, status, note }]} sources={[…]} />

Source

feedback-on-answer

Answer feedback

Feedback on AI answers in five forms. Thumbs with reasons and a comment, a correction with preview and source, ratings on several scales, a report dialog with a privacy choice and an insights view for the team.

Thumbs with reasons
Suggest a correction
Rating scales
Report dialog
Feedback insights

Props and details

Thumbs with reasons

Thumbs up or down under the answer. A rating opens reasons that fit it and an optional comment, the note says who reads it.

Open in Studio

Installv1.0.0

aiw add @ai-website/feedback-on-answer

Brings along utils, kit, icon, reveal, motion

Usage

<FeedbackOnAnswer variant="thumbs" answer={{ question, text, assistant }} reasons={[{ id, label }]} praise={[…]} onSubmit={…} />

Source

Suggest a correction

The wrong sentence is marked in the answer, the correction shows as a before and after preview and can carry a source.

Open in Studio

Installv1.0.0

aiw add @ai-website/feedback-on-answer

Brings along utils, kit, icon, reveal, motion

Usage

<FeedbackOnAnswer variant="correction" answer={…} wrong="…" onSubmit={({ before, after, source }) => …} />

Source

Rating scales

Several scales from 1 to 5 with words at both ends, arrow keys move, the overall value updates as you rate.

Open in Studio

Installv1.0.0

aiw add @ai-website/feedback-on-answer

Brings along utils, kit, icon, reveal, motion

Usage

<FeedbackOnAnswer variant="rating-scale" answer={…} dimensions={[{ id, label, low, high }]} />

Source

Report dialog

A dialog over the answer with the kind of problem, details and a choice to include the conversation. Focus stays inside, Escape closes.

Open in Studio

Installv1.0.0

aiw add @ai-website/feedback-on-answer

Brings along utils, kit, icon, reveal, motion

Usage

<FeedbackOnAnswer variant="report-dialog" answer={…} reasons={[{ id, label }]} onSubmit={…} />

Source

Feedback insights

An overview for the team with the helpful share with its trend, the most named problems as bars and the latest comments with filter.

Open in Studio

Installv1.0.0

aiw add @ai-website/feedback-on-answer

Brings along utils, kit, icon, reveal, motion

Usage

<FeedbackOnAnswer variant="insights" positive={1840} negative={312} trend={[…]} topReasons={[{ label, count }]} comments={[…]} />

Source

ai-search

AI search

AI search in four forms. Results with an AI overview on top whose citations jump to their result, a research run that turns into a report, an answer as a comparison table with a recommendation and caveats, and a thread of follow-up questions.

Results with AI overview
Research report
Answer as a table
Follow-up thread

Props and details

Results with AI overview

A short AI summary above classic results, folded to a few lines, with a clear note on how much the sources agree. A citation scrolls to its result and marks it.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-search

Brings along utils, kit, icon, reveal, motion

Usage

<AiSearch variant="overview" query="…" summary="Text with [1] and [2, 3]" results={[{ id, title, site, path, snippet, date }]} confidence="medium" />

Source

Research report

When it scrolls into view the research plays out. Searches are planned, sources counted and listed, then the report appears with contents, sections and sources.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-search

Brings along utils, kit, icon, reveal, motion

Usage

<AiSearch variant="research-report" query="…" queries={[{ id, query, found }]} sections={[{ id, heading, text }]} results={[…]} read={34} />

Source

Answer as a table

A comparison question answered as a table with a recommended column, citations in the cells that open their source below, and caveats. Phones switch between options.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-search

Brings along utils, kit, icon, reveal, motion

Usage

<AiSearch variant="structured-answer" query="…" summary="…" table={{ columns, rows: [{ label, cells }], pick: 1 }} caveats={[…]} results={[…]} />

Source

Follow-up thread

Questions and answers as a thread, earlier answers fold to their question, related questions add a new turn and the ask bar stays at hand.

Open in Studio

Installv1.0.1

aiw add @ai-website/ai-search

Brings along utils, kit, icon, reveal, motion

Usage

<AiSearch variant="follow-up-thread" turns={[{ id, question, answer, sources }]} related={[…]} results={[…]} />

Source

compare-outputs

Compare outputs

Comparing AI outputs in four forms. A blind vote between two answers that reveals the models afterwards, a word diff between two versions, several models side by side with time, length and cost, and an evaluation table.

Blind vote
Text diff
Models side by side
Evaluation table

Props and details

Blind vote

Two answers labeled A and B, four choices to vote, then the model names flip in and the chosen card carries a ring.

Open in Studio

Installv1.0.0

aiw add @ai-website/compare-outputs

Brings along utils, kit, icon, reveal, motion

Usage

<CompareOutputs variant="blind-vote" prompt="…" outputs={[{ id, model, text, time, tokens }, …]} onVote={(id) => …} />

Source

Text diff

Two versions compared word by word, added words fill in green, removed ones are struck through. Inline or side by side from tablet, changes only on request.

Open in Studio

Installv1.0.0

aiw add @ai-website/compare-outputs

Brings along utils, kit, icon, reveal, motion

Usage

<CompareOutputs variant="text-diff" before={{ label, text }} after={{ label, text }} />

Source

Models side by side

The same prompt answered by several models, each with time, length and cost. Mark the best, copy any. Phones swipe with dots.

Open in Studio

Installv1.0.0

aiw add @ai-website/compare-outputs

Brings along utils, kit, icon, reveal, motion

Usage

<CompareOutputs variant="model-grid" prompt="…" outputs={[{ id, model, text, time, tokens, cost }]} />

Source

Evaluation table

Test cases against models with pass or fail per cell, an average per model with bars and a filter for failing cases. Phones show one model at a time.

Open in Studio

Installv1.0.0

aiw add @ai-website/compare-outputs

Brings along utils, kit, icon, reveal, motion

Usage

<CompareOutputs variant="eval-table" models={[{ id, name }]} cases={[{ id, prompt, check, scores: { id: 0.9 } }]} passAt={0.7} />

Source

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to AI answers on a page.

On this page

Source cards

Footnotes

Hover preview

Source panel

Claim check

Thumbs with reasons

Suggest a correction

Rating scales

Report dialog

Feedback insights

Results with AI overview

Research report

Answer as a table

Follow-up thread

Blind vote

Text diff

Models side by side

Evaluation table

Similar components, Often combined with

Similar components

Often combined with