> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Evidence Disclosure - Web

> Evidence disclosure is an agent's justification for its conclusion.

Evidence disclosure is a type of progressive disclosure. What's being presented with evidence disclosure is trust-making material: the evidence a user would want in order to verify the AI didn't make something up.

This is part of the [Reasoning](https://anvil.servicetitan.com/docs/kits/ai-kit/ai-ux/ux-and-the-five-parts-of-a-moment.md#2-reason) aspect of AI UX.

## Why evidence disclosure helps users

* Users report that seeing citations increases their confidence in an AI answer. However, users rarely actually click through to check them. The value of the disclosure is in the offer, not the click-through rate.

* Reasoning content is qualitatively different from output content—it may contain errors, false starts, or dead ends, and should be visually distinguished from the final answer rather than presented with the same confidence.

## Types of evidence disclosure

Evidence disclosure falls into two main categories:

* **Reasoning trace/extended thinking**—This typically appears above an agent response with a label like "Thought for \[x] seconds" and a chevron that allows the user to click into the reasoning that led the agent to the answer it gave. It always has different styling from the chat itself to make it clear it's categorically different from the styling of the agent responses themselves.
* **Citations**—These are pills that appear with an agent response that cite the agent's sources.

## Getting Started

Evidence Disclosure is composed from existing Carto components rather than a single dedicated component. Pick the building blocks that match what evidence you're disclosing.

| Component | When to Use |
| - | - |
| **[Citation](https://anvil.servicetitan.com/docs/components/citation/web.md)** | Attribute a specific claim in agent text to a source, inline or at the end of a response. |
| **[Action Log](https://anvil.servicetitan.com/docs/components/action-log/web.md)** | Shows the user how the agent arrived as its conclusion. |

## Dos and Don'ts

ai-kit-evidence-disclosure-response-first-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-evidence-disclosure-response-first-do?file=src/App.tsx)

```tsx lines theme={null}
import { useState } from "react";
import {
  CartoTheme,
  ChatLayout,
  PromptBar,
  AgentMessage,
  Text,
  ActionLog,
} from "@servicetitan/anvil2-ai-kit";
import "@servicetitan/anvil2-ai-kit/styles.css";

function App() {
  const [value, setValue] = useState("");

  return (
    <CartoTheme>
      <div
        style={{
          height: 420,
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          overflow: "hidden",
        }}
      >
        <ChatLayout
          conversation={
            <>
              <AgentMessage
                timestamp={new Date(2026, 3, 1, 16, 41)}
                content={
                  <>
                    <ActionLog
                      defaultExpanded={false}
                      steps={[
                        {
                          id: "a",
                          title: "Looked up the customer account",
                          status: "success",
                        },
                        {
                          id: "b",
                          title:
                            "Checked the last 20 invoices for overdue balances",
                          status: "success",
                        },
                      ]}
                    />
                    <Text text="Your account is in good standing—no overdue balances on the last 20 invoices." />
                  </>
                }
              />
            </>
          }
          prompt={
            <PromptBar
              value={value}
              onChange={setValue}
              placeholder="Ask anything…"
            />
          }
        />
      </div>
    </CartoTheme>
  );
}

export default App;
```

**Do**
Provide the agent response first, with reasoning one click away.

ai-kit-evidence-disclosure-response-first-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-evidence-disclosure-response-first-dont?file=src/App.tsx)

```tsx lines theme={null}
import { useState } from "react";
import {
  CartoTheme,
  ChatLayout,
  PromptBar,
  AgentMessage,
  Text,
  ActionLog,
} from "@servicetitan/anvil2-ai-kit";
import "@servicetitan/anvil2-ai-kit/styles.css";

function App() {
  const [value, setValue] = useState("");

  return (
    <CartoTheme>
      <div
        style={{
          height: 420,
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          overflow: "hidden",
        }}
      >
        <ChatLayout
          conversation={
            <>
              <AgentMessage
                timestamp={new Date(2026, 3, 1, 16, 41)}
                content={
                  <>
                    <Text text="Your account is in good standing—no overdue balances on the last 20 invoices." />
                    <ActionLog
                      defaultExpanded={false}
                      steps={[
                        {
                          id: "a",
                          title: "Looked up the customer account",
                          status: "success",
                        },
                        {
                          id: "b",
                          title:
                            "Checked the last 20 invoices for overdue balances",
                          status: "success",
                        },
                      ]}
                    />
                  </>
                }
              />
            </>
          }
          prompt={
            <PromptBar
              value={value}
              onChange={setValue}
              placeholder="Ask anything…"
            />
          }
        />
      </div>
    </CartoTheme>
  );
}

export default App;
```

**Don’t**
Put the reasoning trace or a source list at the end of the message.

ai-kit-evidence-disclosure-labeled-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-evidence-disclosure-labeled-do?file=src/App.tsx)

```tsx lines theme={null}
import { useState } from "react";
import {
  CartoTheme,
  ChatLayout,
  PromptBar,
  AgentMessage,
  ActionLog,
  Text,
} from "@servicetitan/anvil2-ai-kit";
import "@servicetitan/anvil2-ai-kit/styles.css";

function App() {
  const [value, setValue] = useState("");

  return (
    <CartoTheme>
      <div
        style={{
          height: 420,
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          overflow: "hidden",
        }}
      >
        <ChatLayout
          conversation={
            <AgentMessage
              timestamp={new Date(2026, 3, 1, 16, 41)}
              content={
                <>
                  <ActionLog
                    defaultExpanded={false}
                    steps={[
                      {
                        id: "a",
                        title: "Looked up the customer account",
                        status: "success",
                      },
                      {
                        id: "b",
                        title:
                          "Checked the last 20 invoices for overdue balances",
                        status: "success",
                      },
                    ]}
                  />
                  <Text text="Your account is in good standing—no overdue balances on the last 20 invoices." />
                </>
              }
            />
          }
          prompt={
            <PromptBar
              value={value}
              onChange={setValue}
              placeholder="Ask anything…"
            />
          }
        />
      </div>
    </CartoTheme>
  );
}

export default App;
```

**Do**
Always provide some sort of label for an Evidence Disclosure marker. "View reasoning," "3 sources," "Thought for 12s," "Show steps"—something that tells the user what's behind it.

ai-kit-evidence-disclosure-labeled-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-evidence-disclosure-labeled-dont?file=src/App.tsx)

```tsx lines theme={null}
import { useState } from "react";
import {
  CartoTheme,
  ChatLayout,
  PromptBar,
  Text,
  AgentMessage,
} from "@servicetitan/anvil2-ai-kit";
import "@servicetitan/anvil2-ai-kit/styles.css";

function App() {
  const [value, setValue] = useState("");

  return (
    <CartoTheme>
      <div
        style={{
          height: 420,
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          overflow: "hidden",
        }}
      >
        <ChatLayout
          conversation={
            <AgentMessage
              timestamp={new Date(2026, 3, 1, 16, 41)}
              content={
                <>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 16,
                    }}
                  >
                    <button
                      type="button"
                      style={{
                        border: "none",
                        background: "none",
                        cursor: "pointer",
                        fontSize: 20,
                        lineHeight: 1,
                        padding: 4,
                      }}
                    >
                      ⋯
                    </button>
                  </div>
                  <Text text="Your account is in good standing—no overdue balances on the last 20 invoices." />
                </>
              }
            />
          }
          prompt={
            <PromptBar
              value={value}
              onChange={setValue}
              placeholder="Ask anything…"
            />
          }
        />
      </div>
    </CartoTheme>
  );
}

export default App;
```

**Don’t**
Use an icon or an ellipsis that gives no hint as to what's inside the dropdown or link.

ai-kit-evidence-disclosure-one-click-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-evidence-disclosure-one-click-do?file=src/App.tsx)

```tsx lines theme={null}
import { useState } from "react";
import {
  CartoTheme,
  ChatLayout,
  PromptBar,
  AgentMessage,
  ActionLog,
  Text,
} from "@servicetitan/anvil2-ai-kit";
import "@servicetitan/anvil2-ai-kit/styles.css";

function App() {
  const [value, setValue] = useState("");

  return (
    <CartoTheme>
      <div
        style={{
          height: 420,
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          overflow: "hidden",
        }}
      >
        <ChatLayout
          conversation={
            <AgentMessage
              timestamp={new Date(2026, 3, 1, 16, 41)}
              content={
                <>
                  <ActionLog
                    defaultExpanded={false}
                    steps={[
                      {
                        id: "a",
                        title: "Looked up the customer account",
                        status: "success",
                      },
                      {
                        id: "b",
                        title:
                          "Checked the last 20 invoices for overdue balances",
                        status: "success",
                      },
                    ]}
                  />
                  <Text text="Your account is in good standing—no overdue balances on the last 20 invoices." />
                </>
              }
            />
          }
          prompt={
            <PromptBar
              value={value}
              onChange={setValue}
              placeholder="Ask anything…"
            />
          }
        />
      </div>
    </CartoTheme>
  );
}

export default App;
```

**Do**
Provide one click to find the reasoning.

ai-kit-evidence-disclosure-one-click-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-evidence-disclosure-one-click-dont?file=src/App.tsx)

```tsx lines theme={null}
import { useState } from "react";
import {
  CartoTheme,
  ChatLayout,
  PromptBar,
  AgentMessage,
  Link,
  Text,
} from "@servicetitan/anvil2-ai-kit";
import "@servicetitan/anvil2-ai-kit/styles.css";

function App() {
  const [value, setValue] = useState("");

  return (
    <CartoTheme>
      <div
        style={{
          height: 420,
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          overflow: "hidden",
        }}
      >
        <ChatLayout
          conversation={
            <AgentMessage
              timestamp={new Date(2026, 3, 1, 16, 41)}
              content={
                <>
                  <Text text="Your account is in good standing—no overdue balances on the last 20 invoices." />
                  <Link href="#" text="See reasoning" />
                </>
              }
            />
          }
          prompt={
            <PromptBar
              value={value}
              onChange={setValue}
              placeholder="Ask anything…"
            />
          }
        />
      </div>
    </CartoTheme>
  );
}

export default App;
```

**Don’t**
Make reasoning a hunt. Evidence disclosure fails if the detail lives in a separate tab, settings screen, or requires a follow-up question to surface.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.