A2A Protocol

Quickstart

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

app/MyRuntimeProvider.tsx
"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

app/page.tsx
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.

Next