Communicating with the Model

To communicate with the model, you can use two channels: passive context sync via data-llm and active messages via useSendFollowUpMessage.

Context Sync with data-llm

Describe what the user is seeing so the model understands questions like “Is this one available?”:

<div data-llm={selectedProduct
  ? `User viewing: ${selectedProduct.name} - $${selectedProduct.price}`
  : "User browsing product list"
}>
  {/* product list */}
</div>

See LLM Context Sync for details on nesting, best practices, and limitations.

Sending Messages with useSendFollowUpMessage

Let the user ask questions through the view:

import { useSendFollowUpMessage } from "@usefractal/frac/web";

function FlightView() {
  const sendMessage = useSendFollowUpMessage();
  const [selectedFlight, setSelectedFlight] = useState<Flight | null>(null);

  const askAboutBaggage = () => {
    if (!selectedFlight) return;
    sendMessage({
      prompt: `What's the baggage policy for ${selectedFlight.airline}?`
    });
  };

  const bookFlight = () => {
    if (!selectedFlight) return;
    sendMessage({
      prompt: `I'd like to book ${selectedFlight.name}. Please proceed with the booking.`
    });
  };

  return (
    <div>
      {selectedFlight && (
        <div>
          <h2>{selectedFlight.name}</h2>
          <button onClick={askAboutBaggage}>Ask about baggage</button>
          <button onClick={bookFlight}>Book this flight</button>
        </div>
      )}
    </div>
  );
}

The message appears in the conversation as if the user typed it, and the model responds naturally.

Use Cases

Quick questions:

<button onClick={() => sendMessage({ prompt: "What are the return policy terms?" })}>
  Ask about returns
</button>

Guided actions:

<button onClick={() => sendMessage({
  prompt: `Add ${selectedItem.name} to my order and confirm the total.`
})}>
  Add to Order
</button>

Help requests:

<button onClick={() => sendMessage({
  prompt: "I'm having trouble completing checkout. Can you help?"
})}>
  Get Help
</button>

Tips

• Be specific: Include relevant details in prompts (item name, current step, etc.)
• Let data-llm provide context: If data-llm says “User viewing: Nike Air Max”, you can just ask “Is this available in size 10?” without repeating the product name

Related

• LLM Context Sync concept
• data-llm API
• useSendFollowUpMessage API