@assistant-ui/mcp-docs-server 0.1.25 → 0.1.27
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.
- package/.docs/organized/code-examples/waterfall.md +4 -4
- package/.docs/organized/code-examples/with-a2a.md +5 -5
- package/.docs/organized/code-examples/with-ag-ui.md +6 -6
- package/.docs/organized/code-examples/with-ai-sdk-v6.md +7 -7
- package/.docs/organized/code-examples/with-artifacts.md +7 -7
- package/.docs/organized/code-examples/with-assistant-transport.md +5 -5
- package/.docs/organized/code-examples/with-chain-of-thought.md +7 -7
- package/.docs/organized/code-examples/with-cloud-standalone.md +8 -8
- package/.docs/organized/code-examples/with-cloud.md +7 -7
- package/.docs/organized/code-examples/with-custom-thread-list.md +7 -7
- package/.docs/organized/code-examples/with-elevenlabs-conversational.md +511 -0
- package/.docs/organized/code-examples/with-elevenlabs-scribe.md +10 -10
- package/.docs/organized/code-examples/with-expo.md +18 -18
- package/.docs/organized/code-examples/with-external-store.md +5 -5
- package/.docs/organized/code-examples/with-ffmpeg.md +220 -66
- package/.docs/organized/code-examples/with-google-adk.md +6 -6
- package/.docs/organized/code-examples/with-heat-graph.md +4 -4
- package/.docs/organized/code-examples/with-interactables.md +836 -0
- package/.docs/organized/code-examples/with-langgraph.md +6 -6
- package/.docs/organized/code-examples/with-livekit.md +591 -0
- package/.docs/organized/code-examples/with-parent-id-grouping.md +6 -6
- package/.docs/organized/code-examples/with-react-hook-form.md +8 -8
- package/.docs/organized/code-examples/with-react-ink.md +3 -3
- package/.docs/organized/code-examples/with-react-router.md +11 -11
- package/.docs/organized/code-examples/with-store.md +11 -6
- package/.docs/organized/code-examples/with-tanstack.md +8 -8
- package/.docs/organized/code-examples/with-tap-runtime.md +8 -8
- package/.docs/raw/blog/2026-03-launch-week/index.mdx +31 -0
- package/.docs/raw/docs/(docs)/cli.mdx +60 -0
- package/.docs/raw/docs/(docs)/copilots/model-context.mdx +9 -1
- package/.docs/raw/docs/(docs)/guides/attachments.mdx +65 -4
- package/.docs/raw/docs/(docs)/guides/interactables.mdx +354 -0
- package/.docs/raw/docs/(docs)/guides/message-timing.mdx +3 -3
- package/.docs/raw/docs/(docs)/guides/multi-agent.mdx +1 -0
- package/.docs/raw/docs/(docs)/guides/tool-ui.mdx +29 -0
- package/.docs/raw/docs/(docs)/guides/voice.mdx +333 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +128 -0
- package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +23 -0
- package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +6 -0
- package/.docs/raw/docs/cloud/ai-sdk.mdx +81 -1
- package/.docs/raw/docs/ink/primitives.mdx +141 -0
- package/.docs/raw/docs/primitives/action-bar.mdx +351 -0
- package/.docs/raw/docs/primitives/assistant-modal.mdx +215 -0
- package/.docs/raw/docs/primitives/attachment.mdx +216 -0
- package/.docs/raw/docs/primitives/branch-picker.mdx +221 -0
- package/.docs/raw/docs/primitives/chain-of-thought.mdx +311 -0
- package/.docs/raw/docs/primitives/composer.mdx +526 -0
- package/.docs/raw/docs/primitives/error.mdx +141 -0
- package/.docs/raw/docs/primitives/index.mdx +98 -0
- package/.docs/raw/docs/primitives/message.mdx +524 -0
- package/.docs/raw/docs/primitives/selection-toolbar.mdx +165 -0
- package/.docs/raw/docs/primitives/suggestion.mdx +242 -0
- package/.docs/raw/docs/primitives/thread-list.mdx +404 -0
- package/.docs/raw/docs/primitives/thread.mdx +482 -0
- package/.docs/raw/docs/runtimes/a2a/index.mdx +4 -0
- package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +2 -2
- package/.docs/raw/docs/runtimes/assistant-transport.mdx +6 -2
- package/.docs/raw/docs/ui/context-display.mdx +2 -2
- package/.docs/raw/docs/ui/mention.mdx +168 -0
- package/.docs/raw/docs/ui/model-selector.mdx +1 -1
- package/.docs/raw/docs/ui/voice.mdx +172 -0
- package/package.json +3 -4
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
"@assistant-ui/react-ink": "workspace:*",
|
|
18
18
|
"@assistant-ui/react-ink-markdown": "workspace:*",
|
|
19
19
|
"ink": "^6.8.0",
|
|
20
|
-
"react": "^19.
|
|
20
|
+
"react": "^19.2.4"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@types/react": "^19.2.14",
|
|
24
|
-
"esbuild": "^0.
|
|
24
|
+
"esbuild": "^0.28.0",
|
|
25
25
|
"tsx": "^4.21.0",
|
|
26
|
-
"typescript": "
|
|
26
|
+
"typescript": "5.9.3"
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -772,30 +772,30 @@ export default function Home() {
|
|
|
772
772
|
"dependencies": {
|
|
773
773
|
"@assistant-ui/react": "workspace:*",
|
|
774
774
|
"@assistant-ui/react-markdown": "workspace:*",
|
|
775
|
-
"@react-router/node": "^7.
|
|
776
|
-
"@react-router/serve": "^7.
|
|
775
|
+
"@react-router/node": "^7.14.0",
|
|
776
|
+
"@react-router/serve": "^7.14.0",
|
|
777
777
|
"class-variance-authority": "^0.7.1",
|
|
778
778
|
"clsx": "^2.1.1",
|
|
779
779
|
"eventsource-parser": "^3.0.6",
|
|
780
|
-
"isbot": "^5.1.
|
|
781
|
-
"lucide-react": "^
|
|
782
|
-
"openai": "^6.
|
|
780
|
+
"isbot": "^5.1.37",
|
|
781
|
+
"lucide-react": "^1.7.0",
|
|
782
|
+
"openai": "^6.33.0",
|
|
783
783
|
"react": "^19.2.4",
|
|
784
784
|
"react-dom": "^19.2.4",
|
|
785
|
-
"react-router": "^7.
|
|
785
|
+
"react-router": "^7.14.0",
|
|
786
786
|
"remark-gfm": "^4.0.1",
|
|
787
787
|
"tailwind-merge": "^3.5.0"
|
|
788
788
|
},
|
|
789
789
|
"devDependencies": {
|
|
790
|
-
"@react-router/dev": "^7.
|
|
791
|
-
"@tailwindcss/vite": "^4.2.
|
|
790
|
+
"@react-router/dev": "^7.14.0",
|
|
791
|
+
"@tailwindcss/vite": "^4.2.2",
|
|
792
792
|
"@types/node": "^25.5.0",
|
|
793
793
|
"@types/react": "^19.2.14",
|
|
794
794
|
"@types/react-dom": "^19.2.3",
|
|
795
|
-
"tailwindcss": "^4.2.
|
|
795
|
+
"tailwindcss": "^4.2.2",
|
|
796
796
|
"tw-animate-css": "^1.4.0",
|
|
797
|
-
"typescript": "
|
|
798
|
-
"vite": "^8.0.
|
|
797
|
+
"typescript": "5.9.3",
|
|
798
|
+
"vite": "^8.0.3",
|
|
799
799
|
"vite-tsconfig-paths": "^6.1.1"
|
|
800
800
|
}
|
|
801
801
|
}
|
|
@@ -488,20 +488,20 @@ export default nextConfig;
|
|
|
488
488
|
"dependencies": {
|
|
489
489
|
"@assistant-ui/store": "workspace:*",
|
|
490
490
|
"@assistant-ui/tap": "workspace:*",
|
|
491
|
-
"next": "^16.
|
|
491
|
+
"next": "^16.2.2",
|
|
492
492
|
"react": "^19.2.4",
|
|
493
493
|
"react-dom": "^19.2.4"
|
|
494
494
|
},
|
|
495
495
|
"devDependencies": {
|
|
496
496
|
"@assistant-ui/x-buildutils": "workspace:*",
|
|
497
|
-
"@tailwindcss/postcss": "^4.2.
|
|
497
|
+
"@tailwindcss/postcss": "^4.2.2",
|
|
498
498
|
"@types/node": "^25.5.0",
|
|
499
499
|
"@types/react": "^19.2.14",
|
|
500
500
|
"@types/react-dom": "^19.2.3",
|
|
501
501
|
"postcss": "^8.5.8",
|
|
502
|
-
"tailwindcss": "^4.2.
|
|
502
|
+
"tailwindcss": "^4.2.2",
|
|
503
503
|
"tw-animate-css": "^1.4.0",
|
|
504
|
-
"typescript": "
|
|
504
|
+
"typescript": "5.9.3"
|
|
505
505
|
}
|
|
506
506
|
}
|
|
507
507
|
|
|
@@ -634,7 +634,7 @@ useAuiEvent("*", (data) => {
|
|
|
634
634
|
|
|
635
635
|
## Learn More
|
|
636
636
|
|
|
637
|
-
- [@assistant-ui/store Documentation](
|
|
637
|
+
- [@assistant-ui/store Documentation](https://github.com/assistant-ui/assistant-ui/tree/main/packages/store)
|
|
638
638
|
- [Next.js Documentation](https://nextjs.org/docs)
|
|
639
639
|
|
|
640
640
|
```
|
|
@@ -645,7 +645,12 @@ useAuiEvent("*", (data) => {
|
|
|
645
645
|
{
|
|
646
646
|
"extends": "@assistant-ui/x-buildutils/ts/next",
|
|
647
647
|
"compilerOptions": {
|
|
648
|
-
"paths": {
|
|
648
|
+
"paths": {
|
|
649
|
+
"@/*": ["./*"]
|
|
650
|
+
},
|
|
651
|
+
"allowJs": true,
|
|
652
|
+
"incremental": true,
|
|
653
|
+
"jsx": "preserve"
|
|
649
654
|
},
|
|
650
655
|
"include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
|
651
656
|
"exclude": ["node_modules"]
|
|
@@ -64,19 +64,19 @@
|
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@assistant-ui/react": "workspace:*",
|
|
66
66
|
"@assistant-ui/react-markdown": "workspace:*",
|
|
67
|
-
"@tailwindcss/vite": "^4.2.
|
|
68
|
-
"@tanstack/react-router": "^1.
|
|
69
|
-
"@tanstack/react-start": "^1.
|
|
67
|
+
"@tailwindcss/vite": "^4.2.2",
|
|
68
|
+
"@tanstack/react-router": "^1.168.10",
|
|
69
|
+
"@tanstack/react-start": "^1.167.16",
|
|
70
70
|
"class-variance-authority": "^0.7.1",
|
|
71
71
|
"clsx": "^2.1.1",
|
|
72
|
-
"lucide-react": "^
|
|
72
|
+
"lucide-react": "^1.7.0",
|
|
73
73
|
"nitro": "^3.0.1-alpha.2",
|
|
74
|
-
"openai": "^6.
|
|
74
|
+
"openai": "^6.33.0",
|
|
75
75
|
"react": "^19.2.4",
|
|
76
76
|
"react-dom": "^19.2.4",
|
|
77
77
|
"remark-gfm": "^4.0.1",
|
|
78
78
|
"tailwind-merge": "^3.5.0",
|
|
79
|
-
"tailwindcss": "^4.2.
|
|
79
|
+
"tailwindcss": "^4.2.2",
|
|
80
80
|
"vite-tsconfig-paths": "^6.1.1"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
"@types/react": "^19.2.14",
|
|
86
86
|
"@types/react-dom": "^19.2.3",
|
|
87
87
|
"@vitejs/plugin-react": "^6.0.1",
|
|
88
|
-
"typescript": "
|
|
89
|
-
"vite": "^8.0.
|
|
88
|
+
"typescript": "5.9.3",
|
|
89
|
+
"vite": "^8.0.3"
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -597,22 +597,22 @@ export default nextConfig;
|
|
|
597
597
|
"@assistant-ui/ui": "workspace:*",
|
|
598
598
|
"class-variance-authority": "^0.7.1",
|
|
599
599
|
"clsx": "^2.1.1",
|
|
600
|
-
"lucide-react": "^
|
|
601
|
-
"next": "^16.
|
|
600
|
+
"lucide-react": "^1.7.0",
|
|
601
|
+
"next": "^16.2.2",
|
|
602
602
|
"react": "^19.2.4",
|
|
603
603
|
"react-dom": "^19.2.4",
|
|
604
604
|
"tailwind-merge": "^3.5.0"
|
|
605
605
|
},
|
|
606
606
|
"devDependencies": {
|
|
607
607
|
"@assistant-ui/x-buildutils": "workspace:*",
|
|
608
|
-
"@tailwindcss/postcss": "^4.2.
|
|
608
|
+
"@tailwindcss/postcss": "^4.2.2",
|
|
609
609
|
"@types/node": "^25.5.0",
|
|
610
610
|
"@types/react": "^19.2.14",
|
|
611
611
|
"@types/react-dom": "^19.2.3",
|
|
612
612
|
"postcss": "^8.5.8",
|
|
613
|
-
"tailwindcss": "^4.2.
|
|
613
|
+
"tailwindcss": "^4.2.2",
|
|
614
614
|
"tw-animate-css": "^1.4.0",
|
|
615
|
-
"typescript": "
|
|
615
|
+
"typescript": "5.9.3"
|
|
616
616
|
}
|
|
617
617
|
}
|
|
618
618
|
|
|
@@ -763,9 +763,9 @@ You can extend this example to:
|
|
|
763
763
|
|
|
764
764
|
## Learn More
|
|
765
765
|
|
|
766
|
-
- [Tap Documentation](
|
|
767
|
-
- [Store Documentation](
|
|
768
|
-
- [Client Implementation](
|
|
766
|
+
- [Tap Documentation](https://github.com/assistant-ui/assistant-ui/tree/main/packages/tap)
|
|
767
|
+
- [Store Documentation](https://github.com/assistant-ui/assistant-ui/tree/main/packages/store)
|
|
768
|
+
- [Client Implementation](https://github.com/assistant-ui/assistant-ui/tree/main/packages/react/src/client)
|
|
769
769
|
- [Assistant UI Docs](https://assistant-ui.com)
|
|
770
770
|
|
|
771
771
|
```
|
|
@@ -53,6 +53,7 @@ Build rich, interactive AI chat interfaces that run in any terminal:
|
|
|
53
53
|
|
|
54
54
|
- **Composable primitives.** `ThreadRoot`, `ComposerInput`, `MessageContent` — the same component model, adapted for the terminal.
|
|
55
55
|
- **Markdown rendering.** Ship with `@assistant-ui/react-ink-markdown` for formatted headings, code blocks with syntax highlighting, tables, and lists — all in your terminal.
|
|
56
|
+
- **Code diff rendering.** Built-in `DiffView` component and composable `DiffPrimitive` components for displaying code diffs with syntax highlighting, line numbers, and context folding.
|
|
56
57
|
- **Tool calls with live feedback.** Built-in `ToolFallback` component shows spinners and formatted JSON output while tools execute.
|
|
57
58
|
- **Shared backend.** Same adapters, same runtime core. Switch platforms without touching your backend code.
|
|
58
59
|
|
|
@@ -214,6 +215,36 @@ npm install @assistant-ui/cloud-ai-sdk @ai-sdk/react ai
|
|
|
214
215
|
|
|
215
216
|
---
|
|
216
217
|
|
|
218
|
+
## Day 6 — Heat Graph
|
|
219
|
+
|
|
220
|
+
**GitHub-style activity heatmaps for React. Headless, composable, fully customizable.**
|
|
221
|
+
|
|
222
|
+
We're launching [`heat-graph`](https://www.npmjs.com/package/heat-graph) — a set of Radix-style compound components for building activity heatmap graphs. No styling opinions, no dependencies on charting libraries — just composable primitives you fully control.
|
|
223
|
+
|
|
224
|
+
- **Radix-style composable.** `Root`, `Grid`, `Cell`, `Legend`, `Tooltip` — pick the pieces you need and compose them however you want.
|
|
225
|
+
- **Fully headless.** Zero styling opinions. Every element is a plain div you can style with CSS, Tailwind, or any framework.
|
|
226
|
+
- **Tooltip built-in.** Hover tooltips powered by Radix Popper for pixel-perfect positioning, no extra deps.
|
|
227
|
+
- **Custom bucketing.** Plug in your own classification function to control how counts map to color levels.
|
|
228
|
+
- **Localizable.** Month and day labels expose raw values — format with the included English helpers or `Intl.DateTimeFormat` for any locale.
|
|
229
|
+
|
|
230
|
+
Install it:
|
|
231
|
+
|
|
232
|
+
```sh
|
|
233
|
+
npm install heat-graph
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
Or add it via shadcn:
|
|
237
|
+
|
|
238
|
+
```sh
|
|
239
|
+
npx shadcn@latest add https://r.assistant-ui.com/heat-graph
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
[See the interactive demo →](/heat-graph)
|
|
243
|
+
|
|
244
|
+
[Read the docs →](/docs/utilities/heat-graph)
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
217
248
|
## One runtime, every platform
|
|
218
249
|
|
|
219
250
|
The big picture: assistant-ui is now a **universal AI chat framework**. Web, mobile, terminal — one codebase for your backend, one set of adapters, one way to register tools. The only thing that changes is the UI layer.
|
|
@@ -340,6 +340,56 @@ Options:
|
|
|
340
340
|
-h, --help display help for command
|
|
341
341
|
```
|
|
342
342
|
|
|
343
|
+
## info
|
|
344
|
+
|
|
345
|
+
Use the `info` command to print your environment and package versions for bug reports.
|
|
346
|
+
|
|
347
|
+
```bash
|
|
348
|
+
npx assistant-ui@latest info
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
This command collects and prints:
|
|
352
|
+
- OS, Node.js version, package manager, and framework
|
|
353
|
+
- All installed `@assistant-ui/*` and `assistant-*` package versions
|
|
354
|
+
- Key ecosystem dependency versions (React, Next.js, AI SDK, etc.)
|
|
355
|
+
- Peer dependency warnings if any mismatches are detected
|
|
356
|
+
|
|
357
|
+
**Example output:**
|
|
358
|
+
|
|
359
|
+
```
|
|
360
|
+
Environment:
|
|
361
|
+
OS: macOS 15.3 (arm64)
|
|
362
|
+
Node.js: v22.14.0
|
|
363
|
+
Package Manager: pnpm 10.32.1
|
|
364
|
+
Framework: Next.js 15.3.1
|
|
365
|
+
|
|
366
|
+
Packages:
|
|
367
|
+
@assistant-ui/react 0.12.15
|
|
368
|
+
@assistant-ui/react-ai-sdk 1.3.12
|
|
369
|
+
@assistant-ui/react-markdown 0.3.8
|
|
370
|
+
assistant-stream 0.2.14
|
|
371
|
+
|
|
372
|
+
Ecosystem:
|
|
373
|
+
react 19.1.0
|
|
374
|
+
react-dom 19.1.0
|
|
375
|
+
next 15.3.1
|
|
376
|
+
ai 6.0.120
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
The output includes a copy-pasteable markdown block that you can paste directly into a [bug report](https://github.com/assistant-ui/assistant-ui/issues/new?template=bug_report.yml).
|
|
380
|
+
|
|
381
|
+
**Options**
|
|
382
|
+
|
|
383
|
+
```bash
|
|
384
|
+
Usage: assistant-ui info [options]
|
|
385
|
+
|
|
386
|
+
Print environment and package information for bug reports.
|
|
387
|
+
|
|
388
|
+
Options:
|
|
389
|
+
-c, --cwd <cwd> the working directory. defaults to the current directory.
|
|
390
|
+
-h, --help display help for command
|
|
391
|
+
```
|
|
392
|
+
|
|
343
393
|
## Common Workflows
|
|
344
394
|
|
|
345
395
|
### Starting a new project
|
|
@@ -426,6 +476,16 @@ sudo npx assistant-ui@latest init
|
|
|
426
476
|
|
|
427
477
|
Or fix npm permissions: https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
|
|
428
478
|
|
|
479
|
+
### Diagnosing issues
|
|
480
|
+
|
|
481
|
+
When filing a bug report, run `npx assistant-ui info` to collect environment details:
|
|
482
|
+
|
|
483
|
+
```bash
|
|
484
|
+
npx assistant-ui info
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
Paste the output into the "Environment info" field of the [bug report template](https://github.com/assistant-ui/assistant-ui/issues/new?template=bug_report.yml).
|
|
488
|
+
|
|
429
489
|
### Conflicting dependencies
|
|
430
490
|
|
|
431
491
|
If you see dependency conflicts:
|
|
@@ -14,17 +14,25 @@ System instructions define the base behavior and knowledge available to the assi
|
|
|
14
14
|
```tsx
|
|
15
15
|
import {
|
|
16
16
|
useAssistantInstructions,
|
|
17
|
+
useAssistantContext,
|
|
17
18
|
makeAssistantVisible,
|
|
18
19
|
} from "@assistant-ui/react";
|
|
19
20
|
|
|
20
|
-
//
|
|
21
|
+
// Static instructions
|
|
21
22
|
useAssistantInstructions("You are a helpful assistant...");
|
|
22
23
|
|
|
24
|
+
// Dynamic context — callback is evaluated lazily at send-time
|
|
25
|
+
useAssistantContext({
|
|
26
|
+
getContext: () => `Current page: ${window.location.href}`,
|
|
27
|
+
});
|
|
28
|
+
|
|
23
29
|
// Via makeAssistantVisible
|
|
24
30
|
const ReadableComponent = makeAssistantVisible(MyComponent);
|
|
25
31
|
// Automatically provides component HTML as system context
|
|
26
32
|
```
|
|
27
33
|
|
|
34
|
+
`useAssistantInstructions` takes a static string that re-registers when changed. `useAssistantContext` takes a callback that is evaluated fresh each time the model context is read, making it ideal for injecting frequently-changing application state without triggering re-registrations.
|
|
35
|
+
|
|
28
36
|
### Tools
|
|
29
37
|
|
|
30
38
|
Tools are functions that the assistant can use to interact with your application. They can be provided through various mechanisms:
|
|
@@ -94,14 +94,31 @@ const UserMessage = () => {
|
|
|
94
94
|
|
|
95
95
|
## Built-in Attachment Adapters
|
|
96
96
|
|
|
97
|
+
### AI SDK Runtime (Default)
|
|
98
|
+
|
|
99
|
+
When using `useChatRuntime`, the built-in adapter accepts all file types and converts them to base64 data URLs. This works well for images and small files.
|
|
100
|
+
|
|
101
|
+
<Callout type="warn">
|
|
102
|
+
Most models only support **image** attachments. Sending unsupported file types (audio, video, PDF, etc.) will result in an API error. Check your model provider's documentation for supported input types.
|
|
103
|
+
</Callout>
|
|
104
|
+
|
|
105
|
+
To restrict accepted file types, pass a custom adapter:
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
const runtime = useChatRuntime({
|
|
109
|
+
adapters: {
|
|
110
|
+
attachments: new SimpleImageAttachmentAdapter(), // only images
|
|
111
|
+
},
|
|
112
|
+
});
|
|
113
|
+
```
|
|
114
|
+
|
|
97
115
|
### SimpleImageAttachmentAdapter
|
|
98
116
|
|
|
99
|
-
Handles image files and converts them to data URLs for display in the chat UI.
|
|
117
|
+
Handles image files and converts them to data URLs for display in the chat UI.
|
|
100
118
|
|
|
101
119
|
```tsx
|
|
102
120
|
const imageAdapter = new SimpleImageAttachmentAdapter();
|
|
103
121
|
// Accepts: image/* (JPEG, PNG, GIF, etc.)
|
|
104
|
-
// Output: { type: "image", url: "data:image/..." }
|
|
105
122
|
```
|
|
106
123
|
|
|
107
124
|
### SimpleTextAttachmentAdapter
|
|
@@ -111,7 +128,6 @@ Processes text files and wraps content in formatted tags:
|
|
|
111
128
|
```tsx
|
|
112
129
|
const textAdapter = new SimpleTextAttachmentAdapter();
|
|
113
130
|
// Accepts: text/plain, text/html, text/markdown, etc.
|
|
114
|
-
// Output: Content wrapped in <attachment>...</attachment> tags
|
|
115
131
|
```
|
|
116
132
|
|
|
117
133
|
### CompositeAttachmentAdapter
|
|
@@ -122,7 +138,6 @@ Combines multiple adapters to support various file types:
|
|
|
122
138
|
const compositeAdapter = new CompositeAttachmentAdapter([
|
|
123
139
|
new SimpleImageAttachmentAdapter(),
|
|
124
140
|
new SimpleTextAttachmentAdapter(),
|
|
125
|
-
// Add more adapters as needed
|
|
126
141
|
]);
|
|
127
142
|
```
|
|
128
143
|
|
|
@@ -538,6 +553,52 @@ Attachments work with all assistant-ui runtimes:
|
|
|
538
553
|
processing logic to fit your specific needs.
|
|
539
554
|
</Callout>
|
|
540
555
|
|
|
556
|
+
## Large File Uploads
|
|
557
|
+
|
|
558
|
+
The built-in adapters convert files to base64 data URLs in memory. For large files (long audio, video, etc.), this can cause performance issues. Instead, upload to a server and pass the URL:
|
|
559
|
+
|
|
560
|
+
```tsx
|
|
561
|
+
class ServerUploadAdapter implements AttachmentAdapter {
|
|
562
|
+
accept = "*";
|
|
563
|
+
private urls = new Map<string, string>();
|
|
564
|
+
|
|
565
|
+
async *add({ file }: { file: File }) {
|
|
566
|
+
const id = crypto.randomUUID();
|
|
567
|
+
yield {
|
|
568
|
+
id, type: "file" as const, name: file.name, file,
|
|
569
|
+
contentType: file.type,
|
|
570
|
+
status: { type: "running" as const, reason: "uploading" as const, progress: 0 },
|
|
571
|
+
};
|
|
572
|
+
|
|
573
|
+
const form = new FormData();
|
|
574
|
+
form.append("file", file);
|
|
575
|
+
const { url } = await fetch("/api/upload", { method: "POST", body: form }).then(r => r.json());
|
|
576
|
+
this.urls.set(id, url);
|
|
577
|
+
|
|
578
|
+
yield {
|
|
579
|
+
id, type: "file" as const, name: file.name, file,
|
|
580
|
+
contentType: file.type,
|
|
581
|
+
status: { type: "requires-action" as const, reason: "composer-send" as const },
|
|
582
|
+
};
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
async send(attachment: PendingAttachment): Promise<CompleteAttachment> {
|
|
586
|
+
const url = this.urls.get(attachment.id)!;
|
|
587
|
+
this.urls.delete(attachment.id);
|
|
588
|
+
return {
|
|
589
|
+
...attachment, status: { type: "complete" },
|
|
590
|
+
content: [{ type: "file", data: url, mimeType: attachment.contentType ?? "", filename: attachment.name }],
|
|
591
|
+
};
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
async remove() {}
|
|
595
|
+
}
|
|
596
|
+
```
|
|
597
|
+
|
|
598
|
+
<Callout type="tip">
|
|
599
|
+
[assistant-ui Cloud](/docs/cloud/ai-sdk-assistant-ui) includes `CloudFileAttachmentAdapter` which handles large file uploads via presigned URLs out of the box.
|
|
600
|
+
</Callout>
|
|
601
|
+
|
|
541
602
|
## Best Practices
|
|
542
603
|
|
|
543
604
|
1. **File Size Limits**: Always validate file sizes to prevent memory issues
|