---
title: AI Answer
description: A multi-turn Q&A with streamed answers, numbered citations, and follow-ups.
category: TemplateAi
status: beta
since: 0.6.3
tags: [template, ai, answer, streaming, citation]
syncStatus: reviewed
verified: false
---

## Usage

### Multi-turn Q&A
:::TuffDemoWrapper{demo="TemplateAiAnswerDemo" code-lang="vue" description="Plays once in view and asks one follow-up; a click or key hands it to you. Sample data."}
---
code: |
  <script setup lang="ts">
  import { reactive } from 'vue'
  import TemplateFrame from './TemplateFrame.vue'

  // One turn = a question row + an answer row. New rows go in front of a
  // permanent tail, so a row mounts once; the session prefix changes on
  // every reset and also keys the stream
  const state = reactive({ session, turns: [], items: [{ id: `${session}-tail`, kind: 'tail' }] })

  // Stop generating: the source ends here, and the element reveals what arrived
  function stop() {
    lastTurn.value.live = false
  }
  </script>

  <template>
    <TemplateFrame title="Answer assistant" @enter="start">
      <TxConversationStream :key="state.session" :items="state.items" item-key="id" :streaming="answering">
        <template #item="{ item }">
          <TxChatMessage v-if="item.kind === 'ask'" :message="askMessage(item)" :markdown="false" />
          <TxStreamElement
            v-else-if="item.kind === 'reply'"
            :key="turnOf(item).gen"
            :content="turnOf(item).received"
            :streaming="turnOf(item).live"
            :sources="sources"
            @cite="onCite"
            @done="onDone"
          >
            <template #footer="{ done }">
              <div v-if="done">
                <TxMessageActions :copy-text="turnOf(item).received" regenerable @regenerate="regenerate" />
                <TxSources :sources="citedBy(item)" variant="stack" />
                <TxSuggestionChips :suggestions="followUpsOf(item)" layout="list" @select="onFollowUp" />
              </div>
            </template>
          </TxStreamElement>
        </template>
      </TxConversationStream>
      <TxButton v-if="sourcing" size="sm" @click="stop">Stop generating</TxButton>
      <TxPromptBar v-model="draft" :submitting="sourcing" @send="onSend" />
    </TemplateFrame>
  </template>
---
:::

## Overview

A multi-turn Q&A with traceable answers, each streamed by one TxStreamElement.

- It plays once in view and asks one follow-up about 1.6 seconds after the first answer; a click or key cancels the follow-up.
- The action row, sources, and follow-ups appear only once an answer is done; a follow-up adds a turn below.
- Stop generating ends the source at once; what has arrived is still revealed, and the answer can be regenerated.
- A numbered citation opens that turn's sources without leaving the page.
- The conversation follows the newest content and stops while you scroll up; the page never moves.
- In the docs column (640–959px) answers fill the column, and from 960px they are centered; narrow (< 640px) hides the status and avatars; reduced motion renders both turns complete.

## Customization

- To wire a real service, append tokens to `content` and keep `streaming` true until the source ends; stopping sets it to false.
- Citations follow the order of `sources`, so `[n]` is `sources[n - 1]`; copy and share the full text you hold, not the screen, which trails by up to `maxLagMs`.
- Keep row ids globally unique: take a new session prefix on every reset and use it as TxConversationStream's `key`.
- Insert new rows in front of a permanent tail, so each turn mounts once and a streaming answer is never interrupted.

## Related components

| Region | Components | Role |
|---|---|---|
| Header | [TxIconButton](/docs/dev/components/button) | The answer state and Start over |
| Conversation | [TxConversationStream](/docs/dev/components/conversation-stream), [TxChatMessage](/docs/dev/components/chat) | Multi-turn conversation and question bubbles |
| Answer | [TxStreamElement](/docs/dev/components/stream-element) | Word-by-word reveal and citation chips |
| After an answer | [TxMessageActions](/docs/dev/components/message-actions), [TxSources](/docs/dev/components/sources), [TxSuggestionChips](/docs/dev/components/suggestion-chips) | Actions, sources, and follow-ups when done |
| Input | [TxPromptBar](/docs/dev/components/prompt-bar), [TxButton](/docs/dev/components/button) | Questions and Stop generating |