Minimal runtime and Thread setup against an A2A server.
Three steps to a working chat against an A2A server. Assumes you have already installed the package and have an A2A v1.0 server reachable; if not, start at overview.
Wire up the runtime provider
"use client";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useA2ARuntime } from "@assistant-ui/react-a2a";
export function MyRuntimeProvider({
children,
}: {
children: React.ReactNode;
}) {
const runtime = useA2ARuntime({
baseUrl: "http://localhost:9999",
});
return (
<AssistantRuntimeProvider runtime={runtime}>
{children}
</AssistantRuntimeProvider>
);
}Render the Thread
import { Thread } from "@assistant-ui/react";
import { MyRuntimeProvider } from "./MyRuntimeProvider";
export default function Page() {
return (
<MyRuntimeProvider>
<Thread />
</MyRuntimeProvider>
);
}Set up UI components
Follow the UI Components guide to wire up the Thread, composer, and supporting primitives.
Once your A2A server is reachable, the runtime negotiates streaming vs non-streaming based on the agent card's capabilities.streaming flag and starts forwarding messages.
Auth and headers
Pass static or dynamic headers when your server expects auth:
const runtime = useA2ARuntime({
baseUrl: "http://localhost:9999",
headers: async () => ({
Authorization: `Bearer ${await getAccessToken()}`,
}),
});Adding adapters
Attachments, speech, feedback, history, and a custom thread list are all supported via the standard adapter slots. See adapters for the contracts; pass them on useA2ARuntime:
const runtime = useA2ARuntime({
baseUrl: "http://localhost:9999",
adapters: { attachments, history, speech, feedback },
});For multi-thread, see threads and pass adapters.threadList.