Showing, not just saying

An agent that can only talk is doing half the job. Two things let it use the screen the customer is already looking at.

Pointing at something

"Tap Continue" is useless if the customer cannot find Continue.

import { useGraineHighlight } from "@graineai/inapp-react-native";
 
function ContinueButton() {
  const { highlighted } = useGraineHighlight("continue_button");
  return (
    <Pressable style={[styles.btn, highlighted && styles.glow]}>
      <Text>Continue</Text>
    </Pressable>
  );
}

That is the whole integration. Registering the name tells the agent the element exists and can be pointed at; the boolean tells you when it is being pointed at.

Highlights expire after six seconds. One still lit after the conversation moved on is worse than none: the customer keeps looking at the wrong thing.

Scoped to the component. Unmounting deregisters it, so the agent is never offered a target on a screen the customer has left.

The one dashboard step

Declare highlight_element on the agent, under Integrations & Tools, alongside your other actions:

{
  "name": "highlight_element",
  "description": "Draw the customer's attention to something on their screen. Use it when you tell them to tap or look at a specific control.",
  "parameters": {
    "type": "object",
    "properties": { "name": { "type": "string", "description": "The element to point at." } },
    "required": ["name"]
  }
}

You do not implement it. The SDK answers it: it checks the name against what is actually registered on the current screen and refuses with the real list when the agent invents one — so a wrong guess produces a useful sentence rather than a dead action.

Turning one on

Four things have to be true before a component can appear, and one of them fails silently if your agent is older.

Load the content from your API

Leave it blank and the component is static. Fill it in and it is called the moment the agent reaches for the component, and the JSON object it returns is merged over what you authored — so the layout stays yours and the items, prices, images or times are live.

{ "items": [
  { "id": "creta-sx", "title": "Creta SX(O)", "price": "₹19.2L",
    "imageUrl": "https://cdn.yours.com/creta.jpg",
    "facts": ["6 airbags", "Panoramic sunroof"] }
] }

Ask your API for what the customer said

A component was called the same fixed way whatever the customer said, so it could show a catalogue but never the right part of one. Write a placeholder into the URL, a query value or the body, and it becomes a parameter the model fills from the conversation:

https://api.yoursite.com/cars?max_price={budget}&type={body_type}

"I want a new SUV under twenty lakh" then reaches your API as max_price=2000000&type=SUV. The editor lists every parameter it found under the URL, so you can see what the model will be asked for.

Is it actually on the agent?

There are two copies of a component and only one is callable: the library in the dashboard, and the snapshot inside the agent's own config that the runtime reads. They used to look identical from outside. Embed & Widgets → On screen now reads the snapshot back and says one of three things:

• The agent can call … — it is on the agent; mention it in the prompt.
• Nothing — press Save selection to push. Until then the agent cannot show a component however it is asked, and will answer in words or reach for something else.
• No web-call variant — components are never written to a phone agent. Open the agent, save it once to create one, and come back.

Drawing components

Sometimes a card, a set of choices or a three-field form serves the customer better than another sentence. The agent decides that itself and sends one.

import { useGraineWidget } from "@graineai/inapp-react-native";
 
const { widget, submit, dismiss } = useGraineWidget();
 
if (widget?.kind === "choices") {
  return (
    <Choices
      options={widget.data.options}
      onPick={(o) => submit({ chosen: o.id }, `I'll go with ${o.label}.`)}
    />
  );
}

A product list, with pictures

Reading three cars and their prices out loud loses the customer by the second one. product_list is the same three as rows they can see and tap, and it is the kind most worth drawing in your app.

if (widget?.kind === "product_list") {
  const { title, prompt, items, selectLabel } = widget.data as any;
  return items.map((it) => (
    <Row key={it.id}
      image={it.imageUrl} title={it.title} subtitle={it.subtitle}
      facts={it.facts}        /* up to three short lines */
      price={it.price}        /* a string: "₹19.2L", "From ₹499/mo" */
      disabled={it.unavailable}
      buttonLabel={selectLabel ?? "Choose"}
      onPress={() => submit({ id: it.id, title: it.title, price: it.price },
                            `I'll take a look at ${it.title}.`)} />
  ));
}

The contents are authored in Embed & Widgets, not in your app, and may be filled at call time from your own API — so a catalogue that changes weekly needs no release. The same component reaches a website embed and a native app: one definition, both surfaces.

A new product list starts already filled, with sample rows and sample pictures, so you can see the shape before you replace it.

Pictures

imageUrl takes three forms, and all three work on both surfaces:

The middle one is the one that used to break. A path with no host is an ordinary image on a web page and nothing at all on a phone — React Native's Image renders an empty box and says nothing, which looks exactly like an author who forgot to set a picture. The SDK resolves it against the agent's origin on the way in, so what you author in the dashboard is what the app draws.

Keep them small and roughly 4:3. A row draws the picture at about 64pt, so a 2000px photograph costs the customer their data and buys nothing.

One library, chosen per agent

Components belong to the workspace, not to an agent: a lead form is the same lead form whichever agent shows it, and a copy per agent is how five slightly different versions of "Share your details" end up in production.

Which of them an agent may SHOW is per agent, under Agent → Embed & Widgets → On screen. Every component you give an agent becomes a tool it can call, so a car catalogue on a loan agent is not just clutter — it is a tool a model will eventually reach for, and tokens on every turn until it does.

Pick nothing and the agent gets every enabled component, including ones added later. That is the default and it is right for a workspace with one agent. Tick even one and the agent sees only what is ticked. Untick them all and the agent draws nothing and answers in words, which is a real choice and not the same as having picked nothing at all.

The selection is applied in both places it has to be: what the SDK is told, and what the runtime registers as tools. Saving stores it; Sync to agent config is what hands it to the runtime.

submit takes two things, and both matter

Send only the first and the customer taps a card, sees a tick, and the agent carries on as though nothing happened. The sentence is what moves the conversation.

Handle the kinds you know, fall back for the rest

widget.fallbackText is what the agent would have said instead. Render it for any kind you do not draw — a component you cannot show should still move the conversation forward, and a renderer that guesses produces something worse than words.

Dismissing

dismiss() is local only. A customer closing a card has not answered the question, so the agent is not told; it will ask again in words, which is right.

Next steps