Streaming Streaming API reference

Streaming API reference

Type signatures for @pretable/stream-adapter.

See the generated stream-adapter.api.md for complete declarations. Putting the pieces together — an explicit rowModel, a StreamConnection from connectElementStream, disposed on unmount:

Streaming chat grid

Turn a streaming LLM response into rows with connectElementStream and append them to the grid as they arrive.

.md

"use client";

import { connectElementStream } from "@pretable/stream-adapter";
import { PretableSurface, useDisposeOnUnmount } from "@pretable/react";
import { createLocalRowModel } from "@pretable/core";
import { useEffect, useMemo } from "react";

import { columns, type ChatRow } from "./columns";
import {
  responseEventsToChatRows,
  type ChatResponseEvent,
} from "./response-events-to-chat-rows";

export type OpenChatResponseEvents = (input: {
  readonly model: string;
  readonly prompt: string;
}) =>
  AsyncIterable<ChatResponseEvent> | Promise<AsyncIterable<ChatResponseEvent>>;

export function ChatGrid({
  prompt,
  openResponseEvents,
}: {
  prompt: string;
  openResponseEvents: OpenChatResponseEvents;
}) {
  const rowModel = useMemo(
    () => createLocalRowModel({ rows: [], columns, getRowId: (row) => row.id }),
    [],
  );

  useEffect(() => {
    let disposed = false;
    let connection: ReturnType<typeof connectElementStream> | undefined;
    void (async () => {
      const stream = await openResponseEvents({
        model: "gpt-5",
        prompt,
      });
      const rows: AsyncIterable<ChatRow> = responseEventsToChatRows(stream);
      connection = connectElementStream(rowModel, rows);
      if (disposed) connection.dispose();
    })();
    return () => {
      disposed = true;
      connection?.dispose();
    };
  }, [openResponseEvents, prompt, rowModel]);

  // NOT `useEffect(() => () => rowModel.dispose())`: StrictMode rehearses an
  // unmount in dev, `useMemo` hands the same model back to the remount, and the
  // grid then renders nothing at all. `useDisposeOnUnmount` defers the disposal
  // by a microtask so a remount can cancel it.
  useDisposeOnUnmount(rowModel);

  return (
    <PretableSurface
      ariaLabel="Streaming chat"
      model={rowModel}
      viewportHeight={320}
    />
  );
}

Types

Type	Purpose
`RowModelLike<TRow, TRowId>`	Structural atomic-transaction target with string or number IDs.
`StreamConnection`	`{ done: Promise<void>; dispose(): void }`.
`TransactionBatcher<TRow, TRowId>`	RAF-batched `add`, `{ id, changes }` update, remove, flush, dispose, plus `error` and `subscribeError`.
`PartialStreamOptions<TRow, TRowId>`	Fixed `rowId`, optional `onIssue`, and optional complete-row `createRow`.

`createBatcher(rowModel)`

const batcher = createBatcher(rowModel);
batcher.add([{ id: "1", role: "user", content: "Hello" }]);
batcher.update([{ id: "1", changes: { content: "Hello, world" } }]);
batcher.remove(["old-row"]);
batcher.flush();

Scheduled work coalesces into one transaction per animation frame. Calls are appended, not merged: two updates for the same row become two { id, changes } entries inside that one transaction, applied in call order.

batcher.error rejects with an asynchronous transaction failure. It is a promise, so it only ever reports the first failure; batcher.subscribeError(listener) delivers the same failure to a callback and returns an unsubscribe function. Subscribing after a failure invokes the listener immediately, so there is no race between wiring it up and the failure landing.

Connectors and parsers

Element streams — connectElementStream(rowModel, stream)
Partial streams — connectPartialStream(rowModel, stream, options)
Parsers — parseElementStream / parsePartialStream