Quickstart

Minimal API route and client setup with createAdkApiRoute.

This page sets up a working ADK chat in four steps. It assumes you have already installed the package and have ADK ready on the server side; if not, start at overview.

Create a backend API endpoint

Use createAdkApiRoute to create an API route. For React Native and Ink, host this route in a separate backend project and point the client runtime at its absolute URL.

app/api/chat/route.ts

import { createAdkApiRoute } from "@assistant-ui/react-google-adk/server";
import { InMemoryRunner, LlmAgent } from "@google/adk";

const agent = new LlmAgent({
  name: "my_agent",
  model: "gemini-3.8-flash",
  instruction: "You are a helpful assistant.",
});

const runner = new InMemoryRunner({ agent, appName: "my-app" });

export const POST = createAdkApiRoute({
  runner,
  userId: "local-user",
  sessionId: (_req, clientSessionId) => {
    if (!clientSessionId) throw new Error("Missing ADK session ID");
    return clientSessionId;
  },
});

createAdkStream sends the initialized assistant-ui thread ID as clientSessionId. When the runner exposes appName and sessionService, the route creates the corresponding ADK session before the first run. The static user above is suitable only for local, single-user development. Before deployment, resolve userId from your authentication system: the client-sent ID selects a conversation, but does not authorize access to it.

Set up the client runtime

Use createAdkStream to connect to your API route. It parses the SSE stream for you:

components/MyAssistant.tsx

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import {
  useAdkRuntime,
  createAdkStream,
} from "@assistant-ui/react-google-adk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export function MyAssistant() {
  const runtime = useAdkRuntime({
    stream: createAdkStream({ api: "/api/chat" }),
  });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

components/MyAssistant.tsx

import { AssistantRuntimeProvider } from "@assistant-ui/react-native";
import {
  useAdkRuntime,
  createAdkStream,
} from "@assistant-ui/react-google-adk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3000";

export function MyAssistant() {
  const runtime = useAdkRuntime({
    stream: createAdkStream({ api: `${API_URL}/api/chat` }),
  });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

components/MyAssistant.tsx

import { AssistantRuntimeProvider } from "@assistant-ui/react-ink";
import {
  useAdkRuntime,
  createAdkStream,
} from "@assistant-ui/react-google-adk";
import { Thread } from "./thread.js";

export function MyAssistant() {
  const runtime = useAdkRuntime({
    stream: createAdkStream({ api: "http://localhost:3000/api/chat" }),
  });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

Use the component

app/page.tsx

import { MyAssistant } from "@/components/MyAssistant";

export default function Home() {
  return (
    <main className="h-dvh">
      <MyAssistant />
    </main>
  );
}

app/index.tsx

import { View } from "react-native";
import { MyAssistant } from "@/components/MyAssistant";

export default function Home() {
  return (
    <View style={{ flex: 1 }}>
      <MyAssistant />
    </View>
  );
}

app.tsx

import { Box } from "ink";
import { MyAssistant } from "./components/MyAssistant.js";

export function App() {
  return (
    <Box flexDirection="column">
      <MyAssistant />
    </Box>
  );
}

Set up UI components

Follow the UI Components guide to wire up the Thread, composer, and supporting primitives.

Adding adapters

Attachment, speech, dictation, voice, and feedback adapters go in the adapters option. See adapters:

const runtime = useAdkRuntime({
  stream: createAdkStream({ api: "/api/chat" }),
  adapters: { attachments, speech, feedback },
});

For multi-thread, see threads.

API referencecreateAdkStream, server helpers, session adapter, threads, message editing.HooksTool confirmations, auth, input requests, artifacts, escalation, metadata.

Create a backend API endpoint

Set up the client runtime

Use the component

Set up UI components

Adding adapters

Next