> ## 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.

# Citation - Web

> Citations attribute content to a source within agent responses.

> [!NOTE]
>
> For development, import `Citation` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

ai-kit-citation

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

```tsx lines theme={null}
import { Citation } from "@servicetitan/anvil2-ai-kit";

function App() {
  return <Citation href="https://example.com" text="Source" />;
}

export default App;
```

## Options

The Citation supports opening its destination in a new tab and can be placed on its own or inline within body text.

### Open in New

ai-kit-citation-open-in-new

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-citation-open-in-new?file=src/App.tsx)

```tsx lines theme={null}
import { Citation } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      {/* Opens in a new tab */}
      <Citation href="https://example.com" text="Source" target="_blank" />

      {/* Stays on the page */}
      <Citation href="#sources" text="On-page source" />
    </div>
  );
}

export default App;
```

Pass `target="_blank"` to open the citation in a new tab. That also renders a trailing external-link icon labeled "opens in a new tab" and sets `rel="noopener noreferrer"` unless you supply a `rel`. Omit `target` for on-page citations that scroll to a same-page sources list — the icon is omitted in that case.

### Inline

ai-kit-citation-inline

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

```tsx lines theme={null}
import { Citation, Text } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ maxWidth: "28rem" }}>
      <Text
        text={
          <>
            The customer's account is in good standing with no overdue balances{" "}
            <Citation href="https://example.com" text="Source" />.
          </>
        }
      />
    </div>
  );
}

export default App;
```

Citations sit inline within body text, immediately after the claim they support.

## Behavior

The Citation responds to hover and keyboard focus like any other link.

### Visual States

ai-kit-citation-visual-states

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

```tsx lines theme={null}
import { Citation } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      {/* Rest */}
      <Citation href="https://example.com" text="Source" />

      {/* Hover */}
      <Citation
        href="https://example.com"
        text="Source"
        data-interactive="hover"
      />

      {/* Focus */}
      <Citation
        href="https://example.com"
        text="Source"
        data-interactive="focus-visible"
      />
    </div>
  );
}

export default App;
```

Hover shifts the pill to the informative (blue) intent. Keyboard focus draws a ring around the whole pill.

## Usage Guidelines

### When to Use

Use the Citation when:

* **Attributing agent content to a source** – A claim in an agent response needs a visible source.
* **Citing inline** – Place the Citation immediately after the claim it supports.
* **Linking to an external source** – The original source opens in a new tab.
* **Pointing to a sources list on the same page** – The Citation scrolls to a sources list and stays in the current tab.

### When not to use

Avoid using the Citation for:

* **Navigating to a page or location that isn't a source** – Use the [Link](https://anvil.servicetitan.com/docs/components/link/ai-kit.md) instead.
* **Triggering an action** – Use the [Button](https://anvil.servicetitan.com/docs/components/button/ai-kit.md) instead.

## Keyboard Interaction

Users can navigate and activate the Citation using standard keyboard controls.

| Key | Description |
| - | - |
| Tab | Moves focus to the citation |
| Enter | Activates the focused citation's `href` |

## Code

**Implementation**

ai-kit-citation

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

```tsx lines expandable theme={null}
import { Citation } from "@servicetitan/anvil2-ai-kit";

function App() {
  return <Citation href="https://example.com" text="Source" />;
}

export default App;
```

## Common Examples

To use the `Citation`, import it from `@servicetitan/anvil2-ai-kit` and pass the required `href` and `text` props. Use an on-page anchor for a source list or an external URL for the original source.

```tsx theme={null}
import { Citation } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <Citation href="#sources" text="Source 1" />;
}
```

### New tab

Set `target="_blank"` for an external source. `Citation` appends an open-in-new icon, defaults `rel` to `"noopener noreferrer"` unless you pass `rel`, and announces "(opens in a new tab)" to assistive technology.

ai-kit-citation-open-in-new

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-citation-open-in-new?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Citation } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      {/* Opens in a new tab */}
      <Citation href="https://example.com" text="Source" target="_blank" />

      {/* Stays on the page */}
      <Citation href="#sources" text="On-page source" />
    </div>
  );
}

export default App;
```

### Inline in text

`Citation` renders inline and does not split across lines, so it can identify a source without interrupting the surrounding copy.

ai-kit-citation-inline

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

```tsx lines expandable theme={null}
import { Citation, Text } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <div style={{ maxWidth: "28rem" }}>
      <Text
        text={
          <>
            The customer's account is in good standing with no overdue balances{" "}
            <Citation href="https://example.com" text="Source" />.
          </>
        }
      />
    </div>
  );
}

export default App;
```

## Internationalization

`Citation` uses the `ai-kit.citation.opensInNewTab` message for the new-tab announcement. English is the default. Mount `AiKitIntlProvider` inside `CartoTheme` to switch locale or override the string.

```tsx theme={null}
import {
  AiKitIntlProvider,
  CartoTheme,
  Citation,
} from "@servicetitan/anvil2-ai-kit";

function Root() {
  return (
    <CartoTheme>
      <AiKitIntlProvider
        locale="fr-FR"
        messages={{
          "ai-kit.citation.opensInNewTab":
            "(s'ouvre dans un nouvel onglet)",
        }}
      >
        <Citation
          href="https://example.com/report"
          target="_blank"
          text="Source"
        />
      </AiKitIntlProvider>
    </CartoTheme>
  );
}
```

## React Accessibility

* `text` is the visible link text and accessible name.
* `target="_blank"` adds a localized new-tab announcement and a trailing icon.
* Users activate a focused citation with Enter.

**Citation Props**

```tsx theme={null}
<Citation href="#sources" text="Source 1" />
```

## `Citation` Props

The `Citation` accepts the following props. It also forwards remaining React Aria `Link` props except `children`, `className`, `style`, and `href`.

**href** `string` *required*

Destination. Use an on-page anchor or an external URL.

**text** `string` *required*

Visible link text and accessible name.

**className** `string`

Class merged onto the citation recipe class.

**rel** `string`

Link relationship. When `target="_blank"` and `rel` is omitted or
whitespace-only, `Citation` sets `"noopener noreferrer"`.

**target** `string`

Anchor target. `"_blank"` adds the external-link treatment and localized
announcement.


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