data-llm - Skybridge

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.

views/carousel.tsx

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:

<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, so its lifecycle governs when and where the model sees it.

Manage State

What to narrate, and what to leave out

useViewState

Persist structured state alongside the narration

useToolInfo

Read the tool result the view mounted with

​Example

​Behavior

Manage State

useViewState

useToolInfo

Example

Behavior