> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# data-llm

> Narrate the view's state to the model

Between turns the model can't see what the user does in your [view](/build/view). The `data-llm` attribute narrates the view's current [state](/build/state) to the model, so on the next turn it can answer about what is on screen.

## Example

The carousel tells the model whether the shopper is browsing or looking at one product, so a follow-up like "is this one in stock?" resolves to the right item.

```tsx views/carousel.tsx highlight={5} theme={null}
function Carousel({ products }: { products: Product[] }) {
  const [selected, setSelected] = useState<Product | null>(null);

  return (
    <div data-llm={selected ? `Viewing ${selected.name}` : "Browsing the catalog"}>
      {selected ? (
        <ProductDetails product={selected} />
      ) : (
        <ProductGrid products={products} onSelect={setSelected} />
      )}
    </div>
  );
}
```

Put it on any element, with a static string or an expression recomputed on render.

## Behavior

* Only the content currently on screen is sent. It is recomputed on every render and dropped when the element unmounts.
* The text is model-visible, but not live: the host surfaces it to the model on the next turn, not mid-interaction.
* Nested attributes form an indented outline. This:

```tsx theme={null}
<div data-llm="Reviewing the cart">
  <div data-llm={`${items.length} items, ${total}`}>{/* ... */}</div>
</div>
```

reaches the model as:

```
- Reviewing the cart
  - 3 items, $240
```

`data-llm` rides the same view state as [`useViewState`](/api-reference/use-view-state), so its [lifecycle](/api-reference/use-view-state#lifecycle) governs when and where the model sees it.

<CardGroup cols={3}>
  <Card title="Manage State" icon="database" href="/build/state">
    What to narrate, and what to leave out
  </Card>

  <Card title="useViewState" icon="save" href="/api-reference/use-view-state">
    Persist structured state alongside the narration
  </Card>

  <Card title="useToolInfo" icon="database" href="/api-reference/use-tool-info">
    Read the tool result the view mounted with
  </Card>
</CardGroup>