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

# Embedded AI - Web

> Embedded AI is how we use the [AI Mark](/docs/components/ai-mark/design) within the product.

## Embedded AI vs Atlas

Atlas is our centralized conversational UI. Embedded AI is broadly about applying AI to in-app experiences and individual Anvil2 components. An experience may use one or both approaches depending on what is appropriate.

Within the app, use embedded AI patterns. Within the conversational interface, or with actions that immediately lead to it, use the [AI Kit](https://anvil.servicetitan.com/docs/building-agentic-experiences/getting-started#how-do-i-start). For where a user begins or resumes that conversation, see [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md).

## Embedded AI in Components

Anvil components are steadily gaining integrated AI labeling. When embedded AI elements are enabled, components receive a combination of visual and behavioral updates. See [AI Mark](https://anvil.servicetitan.com/docs/components/ai-mark/design) for more.

## User Awareness of AI

Make users aware when an interaction involves AI. The AI Mark alone is sufficient disclosure in most cases, but complex workflows can need additional disclosure.

### How should disclaimers be used?

The mark itself denotes AI. Skip additional tooltips or popovers explaining that AI touched an element when the accompanying [AI Mark](https://anvil.servicetitan.com/docs/components/ai-mark/design) is already present.

Use the AI Mark when AI generates new content that wasn't there before, or makes connections without the user necessarily being aware. Skip the mark on individual pieces of UI when the user is already aware that AI is crafting the data through the workflow that preceded the page they're on.

### How should the mark be used on labels and data?

When a label is available, use it to denote that the data below is AI-provided.

When a label isn't possible in the design, place the AI Mark next to the data itself.

embedded-ai-labelmark-do

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

```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <TextField
      label="Equipment Brand"
      defaultValue="Carrier"
      labelProps={{
        aiMark: {
          type: "tooltip",
          content: "Deduced from the equipment's model number.",
          triggerLabel: "How the equipment brand was deduced",
        },
      }}
    />
  );
}

export default App;
```

**Do**
Put the AI Mark on the field label when a label is available.

embedded-ai-valuemark-dont

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

```tsx lines theme={null}
import { AiMark, TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <TextField
      label="Equipment Brand"
      defaultValue="Carrier"
      suffix={<AiMark type="gradient" />}
    />
  );
}

export default App;
```

**Don’t**
Put the AI Mark next to the value when a label is available. Move it to the label instead.

### How should tooltip copy be written?

The AI Mark alone communicates that something was touched by AI. Tooltips on the mark should explain how that data was deduced—for example, noting that an equipment brand was deduced from the model number.

embedded-ai-tooltipdetail-do

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

```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <TextField
      label="Brand"
      defaultValue="Fisher"
      labelProps={{
        aiMark: {
          type: "tooltip",
          content: "Identified based on available equipment data.",
          triggerLabel: "How the brand was identified",
          props: { defaultOpen: true },
        },
      }}
    />
  );
}

export default App;
```

**Do**
Use tooltips to explain how the value was deduced.

embedded-ai-tooltipgeneric-dont

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

```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <TextField
      label="Brand"
      defaultValue="Fisher"
      labelProps={{
        aiMark: {
          type: "tooltip",
          content: "Enriched with AI.",
          triggerLabel: "AI information",
          props: { defaultOpen: true },
        },
      }}
    />
  );
}

export default App;
```

**Don’t**
Provide generic information, like 'produced by AI'.

### How long should the AI Mark stay?

Keep the AI Mark in place as long as the content remains untouched and AI-generated. Remove the mark the moment a user edits the content—edited content no longer reflects AI-generated output.

### How many AI marks are acceptable on one page?

We recommend a max of five per page. Favor marking the places where AI meaningfully changes the outcome, and avoid treating the mark as decoration—this means you should end up with fewer marks overall. If many items in a section are related to AI in some capacity, consider putting the mark on the section header instead. When multiple marks crowd the screen, reduce marks before shrinking copy or layout. Keep mark density tied to real AI involvement, not page real estate.

![AI mark to use](https://mintcdn.com/servicetitan/B7Bi80eYN7av3Csg/images/docs/web/patterns/embedded-ai/embedded-ai-do.png?fit=max\&auto=format\&n=B7Bi80eYN7av3Csg\&q=85\&s=73faf600086a8e63c10e27ab9a2a370d)

**Do**
Use the AI Mark on headings when multiple things have been touched in the group.

![Outdated or incorrect AI marks](https://mintcdn.com/servicetitan/B7Bi80eYN7av3Csg/images/docs/web/patterns/embedded-ai/embedded-ai-dont.png?fit=max\&auto=format\&n=B7Bi80eYN7av3Csg\&q=85\&s=a0ff41e2d25c6f7d4bdffb7af07ba1fb)

**Don’t**
Litter the UI with the AI Mark. Scope it to the things that needs attention and the one action to take.


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