Getting started

Choose the integration that matches your app. The React + AI SDK setup below is one starting point; other adapters connect the same runtime to the lifecycle events your framework exposes.

Start with your existing React + AI SDK app

npm install @generative-a11y/react @generative-a11y/ai-sdk

Use this with an existing React + AI SDK app. Check the supported versions and peers before installing.

Follow the AI SDK integration guide to add the provider and hooks to your chat.

This adds paced live-region updates for supported lifecycle events without changing the visual UI or moving focus during ordinary streaming. Your host still owns semantic structure, keyboard controls, and accessible content. Retry detection is unavailable in the AI SDK adapter. Browser delivery does not prove what a real screen reader speaks.

For React without AI SDK, install @generative-a11y/react and supply confirmed lifecycle events from your app. See the React API. For other frameworks, choose an integration.

Advanced: custom browser integration

Use core and DOM directly when your app owns lifecycle reporting:

npm install @generative-a11y/core @generative-a11y/dom

Connect the runtime

Create one runtime and connect it to the browser. Send only the new text from each streaming update. Report when the response finishes, fails, or stops. Dispose both resources when the session ends.

import { createRuntime } from "@generative-a11y/core";
import { bindRuntime } from "@generative-a11y/dom";

const runtime = createRuntime();
const delivery = bindRuntime(runtime);

// Send these events from your existing response lifecycle callbacks.
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" });

// Call this when the chat is removed, not when a response finishes.
export function disposeChat() {
  delivery.dispose();
  runtime.dispose();
}

Keep the binding alive across responses. When the chat is removed, dispose browser delivery before the runtime.

Choose the package that matches your app

Use a framework adapter when your app already uses that framework. For a custom app, send events directly to the core runtime.

For adapter setup, see assistant-ui, AG-UI, or CopilotKit.