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.
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
- 01Report events at the source
Call dispatch from the transport or app callback that confirms what happened.
- 02Preserve stable IDs
Use the response and tool IDs from your app instead of labels, array positions, or render counts.
- 03Connect browser delivery
DOM adds announcements without changing visible rendering or app actions.
- 04Dispose 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.