useSendFollowUpMessage

Example

Tapping a product asks the model to tell the shopper more about it, while the carousel stays on screen.

import { useSendFollowUpMessage } from "skybridge/web";
import { useToolInfo } from "../helpers.js"; // generated, type-safe from server schema

function Carousel({ products }: { products: Product[] }) {
  const sendFollowUpMessage = useSendFollowUpMessage();

  return (
    <div className="carousel">
      {products.map((product) => (
        // scrollToBottom: false keeps the carousel in view on ChatGPT; ignored elsewhere
        <button
          key={product.id}
          onClick={() =>
            sendFollowUpMessage(`Tell me more about the ${product.name}`, {
              scrollToBottom: false,
            })
          }
        >
          {product.name}
        </button>
      ))}
    </div>
  );
}

Returns

useSendFollowUpMessage returns a single, memoized function, safe to pass to effects and handlers.

sendFollowUpMessage

sendFollowUpMessage(
  prompt: string,
  options?: { scrollToBottom?: boolean }
): Promise<void>;

Posts the message and returns the host’s promise. The promise carries no value: any model reply lands in the conversation, not back in the view.

prompt the text posted as a user turn, model-visible, as if the user had typed it. The view keeps running after the message is posted.

options scrollToBottom asks the host to scroll the conversation to the newest message after posting; omit it for the host default, or set false to keep the scroll position and the view on screen.

scrollToBottom is specific to ChatGPT.

useCallTool

Call a server tool without a conversation turn

useToolInfo

Read the tool result the view mounted with

DataLLM

Sync on-screen state to the model passively

​Example

​Returns

​sendFollowUpMessage

useCallTool

useToolInfo

DataLLM

Example

Returns

`sendFollowUpMessage`