import { AssistantRuntimeProvider, AuiProvider } from "@/generated/typeDocs";

{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts /}
{/ Do not edit manually. */}

{/* api-reference /}
{/ AUTO-GENERATED by scripts/generate-api-reference.mts /}
{/ Do not edit this block manually. */}

API Reference#

AssistantRuntimeProvider#

{/* api-example:AssistantRuntimeProvider */}

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

const MyApp = () => {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({
      api: "/api/chat",
    }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your app */}
    </AssistantRuntimeProvider>
  );
};

{/* api-example:AssistantRuntimeProvider */}

<ParametersTable {...AssistantRuntimeProvider} />

AuiProvider#

Supplies an AssistantClient to the React tree.

Place near the root of any subtree that uses useAui or the
primitives built on it. Components rendered outside an AuiProvider
receive a default client whose scope accessors throw on use, so
missing-provider mistakes surface at the point of use.

config is required and must be built with AuiConfig. At the top
level, config alone creates this subtree's own client. Under a parent
provider, extends is mandatory: pass extends={aui} to extend the parent
client or extends={null} to isolate from it (enforced with a dev error).
Configs are identity-insensitive — a fresh object per render is safe.
A config whose scopes are all Derived keeps its scope set fixed
at mount (dev-enforced); configs with a root scope, and empty configs,
may grow and shrink scopes across renders. ref receives the resulting
client after mount.

When mounting a runtime built with one of the runtime hooks, use
AssistantRuntimeProvider — it installs an AuiProvider
internally — rather than wiring AuiProvider yourself.

function MessageScope({ index, children }) {
  const aui = useAui();
  const config = AuiConfig({
    message: Derived({
      source: "thread",
      query: { index },
      get: (aui) => aui.thread.message({ index }),
    }),
  });
  return (
    <AuiProvider extends={aui} config={config}>
      {children}
    </AuiProvider>
  );
}

<ParametersTable {...AuiProvider} />
{/* api-reference */}