Integrations

Custom applications

Connect a custom app by reporting its response, tool, and interaction events directly to generative-a11y.

Keep translation thin

Report events where your app knows what happened. Keep the original IDs and send only newly added text. Report how each response or tool ends, and provide translated labels for users.

typescript
import { createGenerativeA11y } from "@generative-a11y/core";
import { connectRuntimeToDOM } from "@generative-a11y/dom";

const runtime = createGenerativeA11y({});
const delivery = connectRuntimeToDOM(runtime);

runtime.dispatch({ type: "response.started", responseId: "response-1" });
runtime.dispatch({
  type: "response.text.delta",
  responseId: "response-1",
  delta: "A complete sentence.",
});
runtime.dispatch({ type: "response.completed", responseId: "response-1" });

delivery.dispose();
runtime.dispose();

How this code works

  1. 01
    Report events at the source

    Call dispatch from the transport or app callback that confirms what happened.

  2. 02
    Preserve stable IDs

    Use the response and tool IDs from your app instead of labels, array positions, or render counts.

  3. 03
    Connect browser delivery

    DOM adds announcements without changing visible rendering or app actions.

  4. 04
    Dispose by ownership

    Your adapter cleans up its subscriptions, then the application disposes resources it created.

Leave out events the framework cannot report

Do not treat streamed arguments as a completed tool, a repeated render as a retry, a ready state as an interruption, or a tool name as an approval. If the framework does not report an event, the adapter leaves it out.