Skip to main content
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 widget: 
import { useSendFollowUpMessage } from "skybridge/web";

function FlightWidget() {
  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 ChatGPT 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