# Quickstart
URL: /docs/runtimes/google-adk/quickstart

Minimal API route and client setup with createAdkApiRoute.

Four steps to a working ADK chat. Assumes you have already installed the package and have ADK ready on the server side; if not, start at [overview](/docs/runtimes/google-adk).

<Steps>
  <Step>
    ### Create a backend API endpoint \[#create-a-backend-api-endpoint]

    Use `createAdkApiRoute` to create an API route in one line:

    ```ts title="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-2.5-flash",
      instruction: "You are a helpful assistant.",
    });

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

    export const POST = createAdkApiRoute({
      runner,
      userId: "user_1",
      sessionId: (req) =>
        new URL(req.url).searchParams.get("sessionId") ?? "default",
    });
    ```

    Both `userId` and `sessionId` accept either a static string or `(req: Request) => string` for dynamic resolution from cookies, headers, or query params.
  </Step>

  <Step>
    ### Set up the client runtime \[#set-up-the-client-runtime]

    Use `createAdkStream` to connect to your API route. No manual SSE parsing needed:

    ```tsx title="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/thread";

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

  <Step>
    ### Use the component \[#use-the-component]

    ```tsx title="app/page.tsx"
    import { MyAssistant } from "@/components/MyAssistant";

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

  <Step>
    ### Set up UI components \[#set-up-ui-components]

    Follow the [UI Components guide](/docs/ui/thread) to wire up the Thread, composer, and supporting primitives.
  </Step>
</Steps>

## Adding adapters \[#adding-adapters]

Attachments, speech, feedback, history, and a custom thread list are supported via the standard adapter slots. See [adapters](/docs/runtimes/concepts/adapters):

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

For multi-thread, see [threads](/docs/runtimes/concepts/threads).

## Next \[#next]

<Cards>
  <Card title="API reference" description="createAdkStream, server helpers, session adapter, threads, message editing." href="/docs/runtimes/google-adk/api" />

  <Card title="Hooks" description="Tool confirmations, auth, input requests, artifacts, escalation, metadata." href="/docs/runtimes/google-adk/hooks" />
</Cards>