@assistant-ui/mcp-docs-server 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/.docs/organized/code-examples/waterfall.md +5 -3
  2. package/.docs/organized/code-examples/with-a2a.md +676 -0
  3. package/.docs/organized/code-examples/with-ag-ui.md +7 -8
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +28 -16
  5. package/.docs/organized/code-examples/with-artifacts.md +5 -5
  6. package/.docs/organized/code-examples/with-assistant-transport.md +3 -3
  7. package/.docs/organized/code-examples/with-chain-of-thought.md +34 -26
  8. package/.docs/organized/code-examples/with-cloud-standalone.md +10 -8
  9. package/.docs/organized/code-examples/with-cloud.md +5 -5
  10. package/.docs/organized/code-examples/with-custom-thread-list.md +7 -7
  11. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +8 -8
  12. package/.docs/organized/code-examples/with-expo.md +571 -539
  13. package/.docs/organized/code-examples/with-external-store.md +3 -4
  14. package/.docs/organized/code-examples/with-ffmpeg.md +5 -5
  15. package/.docs/organized/code-examples/with-google-adk.md +353 -0
  16. package/.docs/organized/code-examples/with-heat-graph.md +304 -0
  17. package/.docs/organized/code-examples/with-langgraph.md +25 -23
  18. package/.docs/organized/code-examples/with-parent-id-grouping.md +4 -4
  19. package/.docs/organized/code-examples/with-react-hook-form.md +6 -9
  20. package/.docs/organized/code-examples/with-react-ink.md +265 -0
  21. package/.docs/organized/code-examples/with-react-router.md +10 -11
  22. package/.docs/organized/code-examples/with-store.md +29 -18
  23. package/.docs/organized/code-examples/with-tanstack.md +7 -7
  24. package/.docs/organized/code-examples/with-tap-runtime.md +6 -4
  25. package/.docs/raw/blog/2025-01-31-changelog/index.mdx +1 -1
  26. package/.docs/raw/blog/2026-03-launch-week/index.mdx +227 -0
  27. package/.docs/raw/docs/(docs)/architecture.mdx +1 -1
  28. package/.docs/raw/docs/(docs)/cli.mdx +14 -9
  29. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +8 -3
  30. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +5 -1
  31. package/.docs/raw/docs/(docs)/copilots/{make-assistant-readable.mdx → make-assistant-visible.mdx} +14 -5
  32. package/.docs/raw/docs/(docs)/copilots/model-context.mdx +11 -11
  33. package/.docs/raw/docs/(docs)/copilots/motivation.mdx +2 -2
  34. package/.docs/raw/docs/(docs)/devtools.mdx +3 -2
  35. package/.docs/raw/docs/(docs)/guides/attachments.mdx +9 -11
  36. package/.docs/raw/docs/(docs)/guides/branching.mdx +11 -6
  37. package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx +18 -16
  38. package/.docs/raw/docs/(docs)/guides/context-api.mdx +81 -43
  39. package/.docs/raw/docs/(docs)/guides/dictation.mdx +5 -5
  40. package/.docs/raw/docs/(docs)/guides/editing.mdx +16 -7
  41. package/.docs/raw/docs/(docs)/guides/latex.mdx +3 -0
  42. package/.docs/raw/docs/(docs)/guides/message-timing.mdx +2 -1
  43. package/.docs/raw/docs/(docs)/guides/multi-agent.mdx +173 -0
  44. package/.docs/raw/docs/(docs)/guides/quoting.mdx +55 -206
  45. package/.docs/raw/docs/(docs)/guides/speech.mdx +1 -4
  46. package/.docs/raw/docs/(docs)/guides/suggestions.mdx +9 -15
  47. package/.docs/raw/docs/(docs)/guides/tool-ui.mdx +17 -7
  48. package/.docs/raw/docs/(docs)/guides/tools.mdx +24 -9
  49. package/.docs/raw/docs/(docs)/index.mdx +3 -3
  50. package/.docs/raw/docs/(docs)/installation.mdx +69 -46
  51. package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx +20 -6
  52. package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +24 -4
  53. package/.docs/raw/docs/(reference)/api-reference/integrations/react-hook-form.mdx +1 -1
  54. package/.docs/raw/docs/(reference)/api-reference/integrations/vercel-ai-sdk.mdx +20 -19
  55. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +28 -53
  56. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +4 -4
  57. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +7 -1
  58. package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +20 -14
  59. package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +1 -1
  60. package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +99 -45
  61. package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +52 -40
  62. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +343 -23
  63. package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +4 -6
  64. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +4 -2
  65. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +3 -5
  66. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +169 -22
  67. package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +14 -4
  68. package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +15 -26
  69. package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +39 -21
  70. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +33 -9
  71. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +48 -21
  72. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +36 -7
  73. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +30 -10
  74. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +12 -10
  75. package/.docs/raw/docs/(reference)/migrations/deprecation-policy.mdx +1 -1
  76. package/.docs/raw/docs/(reference)/migrations/react-langgraph-v0-7.mdx +9 -4
  77. package/.docs/raw/docs/(reference)/migrations/v0-11.mdx +7 -5
  78. package/.docs/raw/docs/(reference)/migrations/v0-12.mdx +9 -7
  79. package/.docs/raw/docs/(reference)/migrations/v0-14.mdx +159 -0
  80. package/.docs/raw/docs/(reference)/react-compatibility.mdx +5 -134
  81. package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +89 -7
  82. package/.docs/raw/docs/cloud/ai-sdk.mdx +19 -5
  83. package/.docs/raw/docs/cloud/langgraph.mdx +13 -3
  84. package/.docs/raw/docs/ink/adapters.mdx +41 -0
  85. package/.docs/raw/docs/ink/custom-backend.mdx +203 -0
  86. package/.docs/raw/docs/ink/hooks.mdx +448 -0
  87. package/.docs/raw/docs/ink/index.mdx +239 -0
  88. package/.docs/raw/docs/ink/migration.mdx +140 -0
  89. package/.docs/raw/docs/ink/primitives.mdx +699 -0
  90. package/.docs/raw/docs/react-native/adapters.mdx +63 -87
  91. package/.docs/raw/docs/react-native/custom-backend.mdx +11 -14
  92. package/.docs/raw/docs/react-native/hooks.mdx +214 -232
  93. package/.docs/raw/docs/react-native/index.mdx +118 -159
  94. package/.docs/raw/docs/react-native/migration.mdx +144 -0
  95. package/.docs/raw/docs/react-native/primitives.mdx +431 -302
  96. package/.docs/raw/docs/runtimes/a2a/index.mdx +294 -0
  97. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +9 -9
  98. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +14 -3
  99. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +53 -0
  100. package/.docs/raw/docs/runtimes/assistant-transport.mdx +59 -25
  101. package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx +13 -6
  102. package/.docs/raw/docs/runtimes/custom/external-store.mdx +138 -38
  103. package/.docs/raw/docs/runtimes/custom/local.mdx +184 -42
  104. package/.docs/raw/docs/runtimes/data-stream.mdx +92 -19
  105. package/.docs/raw/docs/runtimes/google-adk/index.mdx +624 -0
  106. package/.docs/raw/docs/runtimes/helicone.mdx +6 -6
  107. package/.docs/raw/docs/runtimes/langgraph/index.mdx +38 -27
  108. package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +1 -1
  109. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +15 -20
  110. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +7 -11
  111. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +8 -11
  112. package/.docs/raw/docs/runtimes/langserve.mdx +6 -7
  113. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +18 -3
  114. package/.docs/raw/docs/ui/context-display.mdx +147 -0
  115. package/.docs/raw/docs/ui/file.mdx +5 -4
  116. package/.docs/raw/docs/ui/image.mdx +5 -4
  117. package/.docs/raw/docs/ui/markdown.mdx +3 -1
  118. package/.docs/raw/docs/ui/model-selector.mdx +8 -8
  119. package/.docs/raw/docs/ui/part-grouping.mdx +7 -10
  120. package/.docs/raw/docs/ui/quote.mdx +210 -0
  121. package/.docs/raw/docs/ui/reasoning.mdx +12 -11
  122. package/.docs/raw/docs/ui/sources.mdx +88 -17
  123. package/.docs/raw/docs/ui/streamdown.mdx +16 -7
  124. package/.docs/raw/docs/ui/thread-list.mdx +11 -13
  125. package/.docs/raw/docs/ui/thread.mdx +28 -33
  126. package/.docs/raw/docs/ui/tool-fallback.mdx +5 -6
  127. package/.docs/raw/docs/ui/tool-group.mdx +9 -8
  128. package/.docs/raw/docs/utilities/heat-graph.mdx +236 -0
  129. package/.docs/raw/docs/utilities/tw-shimmer.mdx +211 -0
  130. package/package.json +4 -4
  131. package/.docs/raw/docs/(reference)/legacy/styled/assistant-modal.mdx +0 -77
  132. package/.docs/raw/docs/(reference)/legacy/styled/decomposition.mdx +0 -635
  133. package/.docs/raw/docs/(reference)/legacy/styled/markdown.mdx +0 -77
  134. package/.docs/raw/docs/(reference)/legacy/styled/scrollbar.mdx +0 -72
  135. package/.docs/raw/docs/(reference)/legacy/styled/thread-width.mdx +0 -22
  136. package/.docs/raw/docs/(reference)/legacy/styled/thread.mdx +0 -77
  137. /package/.docs/raw/docs/cloud/{overview.mdx → index.mdx} +0 -0
@@ -314,13 +314,12 @@ export default nextConfig;
314
314
  "start": "next start"
315
315
  },
316
316
  "dependencies": {
317
- "@ai-sdk/openai": "^3.0.33",
318
317
  "@assistant-ui/react": "workspace:*",
319
318
  "@assistant-ui/react-markdown": "workspace:*",
320
319
  "@assistant-ui/ui": "workspace:*",
321
320
  "class-variance-authority": "^0.7.1",
322
321
  "clsx": "^2.1.1",
323
- "lucide-react": "^0.575.0",
322
+ "lucide-react": "^0.577.0",
324
323
  "next": "^16.1.6",
325
324
  "react": "^19.2.4",
326
325
  "react-dom": "^19.2.4",
@@ -329,10 +328,10 @@ export default nextConfig;
329
328
  "devDependencies": {
330
329
  "@assistant-ui/x-buildutils": "workspace:*",
331
330
  "@tailwindcss/postcss": "^4.2.1",
332
- "@types/node": "^25.3.0",
331
+ "@types/node": "^25.5.0",
333
332
  "@types/react": "^19.2.14",
334
333
  "@types/react-dom": "^19.2.3",
335
- "postcss": "^8.5.6",
334
+ "postcss": "^8.5.8",
336
335
  "tailwindcss": "^4.2.1",
337
336
  "tw-animate-css": "^1.4.0",
338
337
  "typescript": "^5.9.3"
@@ -523,17 +523,17 @@ export default nextConfig;
523
523
  "start": "next start"
524
524
  },
525
525
  "dependencies": {
526
- "@ai-sdk/openai": "^3.0.33",
526
+ "@ai-sdk/openai": "^3.0.41",
527
527
  "@assistant-ui/react": "workspace:*",
528
528
  "@assistant-ui/react-ai-sdk": "workspace:*",
529
529
  "@assistant-ui/react-markdown": "workspace:*",
530
530
  "@assistant-ui/ui": "workspace:*",
531
531
  "@ffmpeg/ffmpeg": "^0.12.15",
532
532
  "@ffmpeg/util": "^0.12.2",
533
- "ai": "^6.0.98",
533
+ "ai": "^6.0.116",
534
534
  "class-variance-authority": "^0.7.1",
535
535
  "clsx": "^2.1.1",
536
- "lucide-react": "^0.575.0",
536
+ "lucide-react": "^0.577.0",
537
537
  "next": "^16.1.6",
538
538
  "react": "^19.2.4",
539
539
  "react-dom": "^19.2.4",
@@ -543,10 +543,10 @@ export default nextConfig;
543
543
  "devDependencies": {
544
544
  "@assistant-ui/x-buildutils": "workspace:*",
545
545
  "@tailwindcss/postcss": "^4.2.1",
546
- "@types/node": "^25.3.0",
546
+ "@types/node": "^25.5.0",
547
547
  "@types/react": "^19.2.14",
548
548
  "@types/react-dom": "^19.2.3",
549
- "postcss": "^8.5.6",
549
+ "postcss": "^8.5.8",
550
550
  "tailwindcss": "^4.2.1",
551
551
  "tw-animate-css": "^1.4.0",
552
552
  "typescript": "^5.9.3"
@@ -0,0 +1,353 @@
1
+ # Example: with-google-adk
2
+
3
+ ## app/api/chat/route.ts
4
+
5
+ ```typescript
6
+ import { createAdkApiRoute } from "@assistant-ui/react-google-adk/server";
7
+ import { InMemoryRunner, LlmAgent, FunctionTool } from "@google/adk";
8
+ import { z } from "zod";
9
+
10
+ const weatherTool = new FunctionTool({
11
+ name: "get_weather",
12
+ description: "Get the current weather for a city.",
13
+ parameters: z.object({
14
+ city: z.string().describe("The city name"),
15
+ }),
16
+ execute: async ({ city }) => {
17
+ return {
18
+ city,
19
+ temperature: Math.round(15 + Math.random() * 20),
20
+ condition: ["sunny", "cloudy", "rainy", "snowy"][
21
+ Math.floor(Math.random() * 4)
22
+ ],
23
+ };
24
+ },
25
+ });
26
+
27
+ const agent = new LlmAgent({
28
+ name: "assistant",
29
+ model: "gemini-2.5-flash",
30
+ instruction:
31
+ "You are a helpful assistant. You can check the weather for any city using the get_weather tool.",
32
+ tools: [weatherTool],
33
+ });
34
+
35
+ const runner = new InMemoryRunner({ agent, appName: "adk-example" });
36
+
37
+ const sessions = new Map<string, string>();
38
+
39
+ export const POST = createAdkApiRoute({
40
+ runner,
41
+ userId: "user_1",
42
+ sessionId: async () => {
43
+ const userId = "user_1";
44
+ let sessionId = sessions.get(userId);
45
+ if (!sessionId) {
46
+ const session = await runner.sessionService.createSession({
47
+ appName: "adk-example",
48
+ userId,
49
+ });
50
+ sessionId = session.id;
51
+ sessions.set(userId, sessionId);
52
+ }
53
+ return sessionId;
54
+ },
55
+ });
56
+
57
+ ```
58
+
59
+ ## app/globals.css
60
+
61
+ ```css
62
+ @import "tailwindcss";
63
+ @import "tw-animate-css";
64
+
65
+ @source "../../../packages/ui/src";
66
+
67
+ @custom-variant dark (&:is(.dark *));
68
+
69
+ @theme inline {
70
+ --radius-sm: calc(var(--radius) - 4px);
71
+ --radius-md: calc(var(--radius) - 2px);
72
+ --radius-lg: var(--radius);
73
+ --radius-xl: calc(var(--radius) + 4px);
74
+ --color-background: var(--background);
75
+ --color-foreground: var(--foreground);
76
+ --color-card: var(--card);
77
+ --color-card-foreground: var(--card-foreground);
78
+ --color-popover: var(--popover);
79
+ --color-popover-foreground: var(--popover-foreground);
80
+ --color-primary: var(--primary);
81
+ --color-primary-foreground: var(--primary-foreground);
82
+ --color-secondary: var(--secondary);
83
+ --color-secondary-foreground: var(--secondary-foreground);
84
+ --color-muted: var(--muted);
85
+ --color-muted-foreground: var(--muted-foreground);
86
+ --color-accent: var(--accent);
87
+ --color-accent-foreground: var(--accent-foreground);
88
+ --color-destructive: var(--destructive);
89
+ --color-border: var(--border);
90
+ --color-input: var(--input);
91
+ --color-ring: var(--ring);
92
+ --color-chart-1: var(--chart-1);
93
+ --color-chart-2: var(--chart-2);
94
+ --color-chart-3: var(--chart-3);
95
+ --color-chart-4: var(--chart-4);
96
+ --color-chart-5: var(--chart-5);
97
+ --color-sidebar: var(--sidebar);
98
+ --color-sidebar-foreground: var(--sidebar-foreground);
99
+ --color-sidebar-primary: var(--sidebar-primary);
100
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
101
+ --color-sidebar-accent: var(--sidebar-accent);
102
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
103
+ --color-sidebar-border: var(--sidebar-border);
104
+ --color-sidebar-ring: var(--sidebar-ring);
105
+ }
106
+
107
+ :root {
108
+ --radius: 0.625rem;
109
+ --background: oklch(1 0 0);
110
+ --foreground: oklch(0.141 0.005 285.823);
111
+ --card: oklch(1 0 0);
112
+ --card-foreground: oklch(0.141 0.005 285.823);
113
+ --popover: oklch(1 0 0);
114
+ --popover-foreground: oklch(0.141 0.005 285.823);
115
+ --primary: oklch(0.21 0.006 285.885);
116
+ --primary-foreground: oklch(0.985 0 0);
117
+ --secondary: oklch(0.967 0.001 286.375);
118
+ --secondary-foreground: oklch(0.21 0.006 285.885);
119
+ --muted: oklch(0.967 0.001 286.375);
120
+ --muted-foreground: oklch(0.552 0.016 285.938);
121
+ --accent: oklch(0.967 0.001 286.375);
122
+ --accent-foreground: oklch(0.21 0.006 285.885);
123
+ --destructive: oklch(0.577 0.245 27.325);
124
+ --border: oklch(0.92 0.004 286.32);
125
+ --input: oklch(0.92 0.004 286.32);
126
+ --ring: oklch(0.705 0.015 286.067);
127
+ --chart-1: oklch(0.646 0.222 41.116);
128
+ --chart-2: oklch(0.6 0.118 184.704);
129
+ --chart-3: oklch(0.398 0.07 227.392);
130
+ --chart-4: oklch(0.828 0.189 84.429);
131
+ --chart-5: oklch(0.769 0.188 70.08);
132
+ --sidebar: oklch(0.985 0 0);
133
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
134
+ --sidebar-primary: oklch(0.21 0.006 285.885);
135
+ --sidebar-primary-foreground: oklch(0.985 0 0);
136
+ --sidebar-accent: oklch(0.967 0.001 286.375);
137
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
138
+ --sidebar-border: oklch(0.92 0.004 286.32);
139
+ --sidebar-ring: oklch(0.705 0.015 286.067);
140
+ }
141
+
142
+ .dark {
143
+ --background: oklch(0.141 0.005 285.823);
144
+ --foreground: oklch(0.985 0 0);
145
+ --card: oklch(0.21 0.006 285.885);
146
+ --card-foreground: oklch(0.985 0 0);
147
+ --popover: oklch(0.21 0.006 285.885);
148
+ --popover-foreground: oklch(0.985 0 0);
149
+ --primary: oklch(0.92 0.004 286.32);
150
+ --primary-foreground: oklch(0.21 0.006 285.885);
151
+ --secondary: oklch(0.274 0.006 286.033);
152
+ --secondary-foreground: oklch(0.985 0 0);
153
+ --muted: oklch(0.274 0.006 286.033);
154
+ --muted-foreground: oklch(0.705 0.015 286.067);
155
+ --accent: oklch(0.274 0.006 286.033);
156
+ --accent-foreground: oklch(0.985 0 0);
157
+ --destructive: oklch(0.704 0.191 22.216);
158
+ --border: oklch(1 0 0 / 10%);
159
+ --input: oklch(1 0 0 / 15%);
160
+ --ring: oklch(0.552 0.016 285.938);
161
+ --chart-1: oklch(0.488 0.243 264.376);
162
+ --chart-2: oklch(0.696 0.17 162.48);
163
+ --chart-3: oklch(0.769 0.188 70.08);
164
+ --chart-4: oklch(0.627 0.265 303.9);
165
+ --chart-5: oklch(0.645 0.246 16.439);
166
+ --sidebar: oklch(0.21 0.006 285.885);
167
+ --sidebar-foreground: oklch(0.985 0 0);
168
+ --sidebar-primary: oklch(0.488 0.243 264.376);
169
+ --sidebar-primary-foreground: oklch(0.985 0 0);
170
+ --sidebar-accent: oklch(0.274 0.006 286.033);
171
+ --sidebar-accent-foreground: oklch(0.985 0 0);
172
+ --sidebar-border: oklch(1 0 0 / 10%);
173
+ --sidebar-ring: oklch(0.552 0.016 285.938);
174
+ }
175
+
176
+ @layer base {
177
+ * {
178
+ @apply border-border outline-ring/50;
179
+ }
180
+ body {
181
+ @apply bg-background text-foreground;
182
+ }
183
+ }
184
+
185
+ ```
186
+
187
+ ## app/layout.tsx
188
+
189
+ ```tsx
190
+ import type { Metadata } from "next";
191
+ import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
192
+ import "./globals.css";
193
+
194
+ export const metadata: Metadata = {
195
+ title: "Google ADK Example",
196
+ description: "Example using @assistant-ui/react with Google ADK",
197
+ };
198
+
199
+ export default function RootLayout({
200
+ children,
201
+ }: Readonly<{
202
+ children: React.ReactNode;
203
+ }>) {
204
+ return (
205
+ <html lang="en">
206
+ <body className="h-dvh">
207
+ <MyRuntimeProvider>{children}</MyRuntimeProvider>
208
+ </body>
209
+ </html>
210
+ );
211
+ }
212
+
213
+ ```
214
+
215
+ ## app/MyRuntimeProvider.tsx
216
+
217
+ ```tsx
218
+ "use client";
219
+
220
+ import { AssistantRuntimeProvider } from "@assistant-ui/react";
221
+ import { useAdkRuntime, createAdkStream } from "@assistant-ui/react-google-adk";
222
+
223
+ export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
224
+ const runtime = useAdkRuntime({
225
+ stream: createAdkStream({ api: "/api/chat" }),
226
+ });
227
+
228
+ return (
229
+ <AssistantRuntimeProvider runtime={runtime}>
230
+ {children}
231
+ </AssistantRuntimeProvider>
232
+ );
233
+ }
234
+
235
+ ```
236
+
237
+ ## app/page.tsx
238
+
239
+ ```tsx
240
+ "use client";
241
+
242
+ import { Thread } from "@/components/assistant-ui/thread";
243
+ import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
244
+
245
+ function ThreadWithSuggestions() {
246
+ const aui = useAui({
247
+ suggestions: Suggestions([
248
+ {
249
+ title: "What can you do",
250
+ label: "as a Gemini-powered agent?",
251
+ prompt: "What can you do?",
252
+ },
253
+ {
254
+ title: "Tell me about",
255
+ label: "the Google ADK framework",
256
+ prompt: "Tell me about Google ADK and what it enables.",
257
+ },
258
+ ]),
259
+ });
260
+ return (
261
+ <AuiProvider value={aui}>
262
+ <Thread />
263
+ </AuiProvider>
264
+ );
265
+ }
266
+
267
+ export default function Home() {
268
+ return (
269
+ <div className="h-dvh">
270
+ <ThreadWithSuggestions />
271
+ </div>
272
+ );
273
+ }
274
+
275
+ ```
276
+
277
+ ## next.config.js
278
+
279
+ ```javascript
280
+ /** @type {import('next').NextConfig} */
281
+ const nextConfig = {
282
+ transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-google-adk"],
283
+ };
284
+
285
+ export default nextConfig;
286
+
287
+ ```
288
+
289
+ ## package.json
290
+
291
+ ```json
292
+ {
293
+ "name": "with-google-adk",
294
+ "version": "0.0.0",
295
+ "private": true,
296
+ "type": "module",
297
+ "scripts": {
298
+ "dev": "next dev",
299
+ "build": "next build",
300
+ "start": "next start"
301
+ },
302
+ "dependencies": {
303
+ "@assistant-ui/react": "workspace:*",
304
+ "@assistant-ui/react-google-adk": "workspace:*",
305
+ "@assistant-ui/react-markdown": "workspace:*",
306
+ "@assistant-ui/ui": "workspace:*",
307
+ "@google/adk": "^0.5.0",
308
+ "class-variance-authority": "^0.7.1",
309
+ "clsx": "^2.1.1",
310
+ "lucide-react": "^0.577.0",
311
+ "next": "^16.1.6",
312
+ "react": "^19.2.4",
313
+ "react-dom": "^19.2.4",
314
+ "tailwind-merge": "^3.5.0",
315
+ "zod": "^4.3.6"
316
+ },
317
+ "devDependencies": {
318
+ "@assistant-ui/x-buildutils": "workspace:*",
319
+ "@tailwindcss/postcss": "^4.2.1",
320
+ "@types/node": "^25.5.0",
321
+ "@types/react": "^19.2.14",
322
+ "@types/react-dom": "^19.2.3",
323
+ "postcss": "^8.5.8",
324
+ "tailwindcss": "^4.2.1",
325
+ "tw-animate-css": "^1.4.0",
326
+ "typescript": "^5.9.3"
327
+ }
328
+ }
329
+
330
+ ```
331
+
332
+ ## tsconfig.json
333
+
334
+ ```json
335
+ {
336
+ "extends": "@assistant-ui/x-buildutils/ts/next",
337
+ "compilerOptions": {
338
+ "paths": {
339
+ "@/*": ["./*"],
340
+ "@/components/assistant-ui/*": [
341
+ "../../packages/ui/src/components/assistant-ui/*"
342
+ ],
343
+ "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
344
+ "@/lib/utils": ["../../packages/ui/src/lib/utils"],
345
+ "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
346
+ }
347
+ },
348
+ "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
349
+ "exclude": ["node_modules"]
350
+ }
351
+
352
+ ```
353
+