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

# Agent Thinking - Web

> The AgentThinking marks where the agent currently is with the Atlas logo and optional status copy.

> [!NOTE]
>
> For development, import `AgentThinking` 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).

**Implementation**

ai-kit-agent-thinking

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

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

function App() {
  return <AgentThinking label="Atlas is thinking…" />;
}

export default App;
```

## Common Examples

To use the `AgentThinking`, pass a caller-supplied `label` for the active step, or omit it to render the logo alone.

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

function ExampleComponent() {
  return <AgentThinking label="Atlas is thinking…" />;
}
```

The wording varies by step (thinking, searching, generating), so the kit does not own it. Localize `label` before passing it.

Omit `label` to trail the logo behind a response and mark where the agent currently is. The logo is static for now; an animated no-label thinking state is a planned follow-up.

ai-kit-agent-thinking-logo-only

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

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

function App() {
  return <AgentThinking />;
}

export default App;
```

## React Accessibility

* The logo is decorative and hidden from assistive tech.
* A present `label` is read in normal reading order.
* Announcing the thinking state is left to the host.

**AgentThinking Props**

```tsx theme={null}
<AgentThinking label="Atlas is thinking…" />
```

## `AgentThinking` Props

The `AgentThinking` accepts the following props.

**className** `string`

Class merged onto the root element.

**label** `string`

Optional status copy shown beside the Atlas logo. Omit for the logo
alone.


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