@assistant-ui/mcp-docs-server 0.1.30 → 0.1.31

package/.docs/raw/docs/runtimes/google-adk/overview.mdx

@@ -0,0 +1,69 @@
+---
+title: Overview
+description: Connect to Google ADK agents with streaming, tool calls, and multi-agent support.
+---
+
+`@assistant-ui/react-google-adk` integrates with [Google ADK JS](https://github.com/google/adk-js), Google's official agent framework for TypeScript, and works with ADK Python backends as well. It supports streaming text, tool calls, multi-agent orchestration, code execution, session state, tool confirmations, auth flows, and input requests.
+
+## When to use it
+
+Pick the Google ADK runtime when:
+
+- You are building agents with ADK JS (`LlmAgent`, sequential / parallel / loop agents) or ADK Python.
+- You want first-class support for ADK's HITL (human-in-the-loop) primitives: tool confirmations, auth credential flow, workflow input requests.
+- You need multi-agent author and branch tracking, agent transfer events, and grounding / citation metadata.
+
+## Architecture
+
+`@assistant-ui/react-google-adk` is layered on `ExternalStoreRuntime` (see [architecture](/docs/runtimes/concepts/architecture)). Features that ship as runtime adapters work the same way they do everywhere else; see [adapters](/docs/runtimes/concepts/adapters).
+
+The package automatically normalizes snake_case event fields from ADK Python backends to camelCase. No configuration is needed; connect to either ADK JS or ADK Python servers. All nested fields (`function_call` → `functionCall`, `requested_tool_confirmations` → `requestedToolConfirmations`) are handled.
+
+## Requirements
+
+- A Google ADK agent running on a server (ADK JS or ADK Python).
+- React 18 or 19.
+
+## Install
+
+<PlatformTabs>
+<Tab value="React">
+
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-google-adk", "@google/adk"]} />
+
+</Tab>
+<Tab value="React Native">
+
+<InstallCommand expo={["@assistant-ui/react-native", "@assistant-ui/react-google-adk"]} />
+
+</Tab>
+<Tab value="React Ink">
+
+<InstallCommand npm={["@assistant-ui/react-ink", "@assistant-ui/react-google-adk", "ink", "react"]} />
+
+</Tab>
+</PlatformTabs>
+
+<Callout type="info">
+`@google/adk` is only needed on the server side. The client-side runtime has no dependency on it.
+</Callout>
+
+## Next
+
+<Cards>
+  <Card
+    title="Quickstart"
+    description="Minimal API route + client setup with createAdkApiRoute."
+    href="/docs/runtimes/google-adk/quickstart"
+  />
+  <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>

package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx

@@ -0,0 +1,229 @@
+---
+title: Quickstart
+description: 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
+
+Use `createAdkApiRoute` to create an API route in one line:
+For React Native and Ink, host this route in a separate backend project and
+point the client runtime at its absolute URL.
+
+```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
+
+Use `createAdkStream` to connect to your API route. No manual SSE parsing needed:
+
+<PlatformTabs>
+<Tab value="React">
+
+```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>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Native">
+
+```tsx title="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/thread";
+
+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>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```tsx title="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>
+  );
+}
+```
+
+</Tab>
+</PlatformTabs>
+
+</Step>
+<Step>
+
+### Use the component
+
+<PlatformTabs>
+<Tab value="React">
+
+```tsx title="app/page.tsx"
+import { MyAssistant } from "@/components/MyAssistant";
+
+export default function Home() {
+  return (
+    <main className="h-dvh">
+      <MyAssistant />
+    </main>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Native">
+
+```tsx title="app/index.tsx"
+import { View } from "react-native";
+import { MyAssistant } from "@/components/MyAssistant";
+
+export default function Home() {
+  return (
+    <View style={{ flex: 1 }}>
+      <MyAssistant />
+    </View>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```tsx title="app.tsx"
+import { Box } from "ink";
+import { MyAssistant } from "./components/MyAssistant.js";
+
+export function App() {
+  return (
+    <Box flexDirection="column">
+      <MyAssistant />
+    </Box>
+  );
+}
+```
+
+</Tab>
+</PlatformTabs>
+
+</Step>
+<Step>
+
+### Set up UI components
+
+<PlatformTabs>
+<Tab value="React">
+
+Follow the [UI Components guide](/docs/ui/thread) to wire up the Thread, composer, and supporting primitives.
+
+</Tab>
+<Tab value="React Native">
+
+Follow the [React Native setup](/docs/react-native) to add a native Thread, composer, and supporting primitives.
+
+</Tab>
+<Tab value="React Ink">
+
+Follow the [Ink setup](/docs/ink) to add a terminal Thread, composer, and supporting primitives.
+
+</Tab>
+</PlatformTabs>
+
+</Step>
+</Steps>
+
+## 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
+
+<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>