@assistant-ui/mcp-docs-server 0.1.1
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/local-ollama.md +1135 -0
- package/.docs/organized/code-examples/search-agent-for-e-commerce.md +1721 -0
- package/.docs/organized/code-examples/with-ai-sdk.md +1081 -0
- package/.docs/organized/code-examples/with-cloud.md +1164 -0
- package/.docs/organized/code-examples/with-external-store.md +1064 -0
- package/.docs/organized/code-examples/with-ffmpeg.md +1305 -0
- package/.docs/organized/code-examples/with-langgraph.md +1819 -0
- package/.docs/organized/code-examples/with-openai-assistants.md +1175 -0
- package/.docs/organized/code-examples/with-react-hook-form.md +1727 -0
- package/.docs/organized/code-examples/with-vercel-ai-rsc.md +1157 -0
- package/.docs/raw/blog/2024-07-29-hello/index.mdx +65 -0
- package/.docs/raw/blog/2024-09-11/index.mdx +10 -0
- package/.docs/raw/blog/2024-12-15/index.mdx +10 -0
- package/.docs/raw/blog/2025-01-31-changelog/index.mdx +129 -0
- package/.docs/raw/docs/about-assistantui.mdx +44 -0
- package/.docs/raw/docs/api-reference/context-providers/AssistantRuntimeProvider.mdx +30 -0
- package/.docs/raw/docs/api-reference/context-providers/TextContentPartProvider.mdx +26 -0
- package/.docs/raw/docs/api-reference/integrations/react-hook-form.mdx +103 -0
- package/.docs/raw/docs/api-reference/integrations/vercel-ai-sdk.mdx +145 -0
- package/.docs/raw/docs/api-reference/overview.mdx +583 -0
- package/.docs/raw/docs/api-reference/primitives/ActionBar.mdx +264 -0
- package/.docs/raw/docs/api-reference/primitives/AssistantModal.mdx +129 -0
- package/.docs/raw/docs/api-reference/primitives/Attachment.mdx +96 -0
- package/.docs/raw/docs/api-reference/primitives/BranchPicker.mdx +87 -0
- package/.docs/raw/docs/api-reference/primitives/Composer.mdx +204 -0
- package/.docs/raw/docs/api-reference/primitives/ContentPart.mdx +173 -0
- package/.docs/raw/docs/api-reference/primitives/Error.mdx +70 -0
- package/.docs/raw/docs/api-reference/primitives/Message.mdx +181 -0
- package/.docs/raw/docs/api-reference/primitives/Thread.mdx +197 -0
- package/.docs/raw/docs/api-reference/primitives/composition.mdx +21 -0
- package/.docs/raw/docs/api-reference/runtimes/AssistantRuntime.mdx +33 -0
- package/.docs/raw/docs/api-reference/runtimes/AttachmentRuntime.mdx +46 -0
- package/.docs/raw/docs/api-reference/runtimes/ComposerRuntime.mdx +69 -0
- package/.docs/raw/docs/api-reference/runtimes/ContentPartRuntime.mdx +22 -0
- package/.docs/raw/docs/api-reference/runtimes/MessageRuntime.mdx +49 -0
- package/.docs/raw/docs/api-reference/runtimes/ThreadListItemRuntime.mdx +32 -0
- package/.docs/raw/docs/api-reference/runtimes/ThreadListRuntime.mdx +31 -0
- package/.docs/raw/docs/api-reference/runtimes/ThreadRuntime.mdx +48 -0
- package/.docs/raw/docs/architecture.mdx +92 -0
- package/.docs/raw/docs/cloud/authorization.mdx +152 -0
- package/.docs/raw/docs/cloud/overview.mdx +55 -0
- package/.docs/raw/docs/cloud/persistence/ai-sdk.mdx +54 -0
- package/.docs/raw/docs/cloud/persistence/langgraph.mdx +123 -0
- package/.docs/raw/docs/concepts/architecture.mdx +19 -0
- package/.docs/raw/docs/concepts/runtime-layer.mdx +163 -0
- package/.docs/raw/docs/concepts/why.mdx +9 -0
- package/.docs/raw/docs/copilots/make-assistant-readable.mdx +71 -0
- package/.docs/raw/docs/copilots/make-assistant-tool-ui.mdx +76 -0
- package/.docs/raw/docs/copilots/make-assistant-tool.mdx +117 -0
- package/.docs/raw/docs/copilots/model-context.mdx +135 -0
- package/.docs/raw/docs/copilots/motivation.mdx +191 -0
- package/.docs/raw/docs/copilots/use-assistant-instructions.mdx +62 -0
- package/.docs/raw/docs/getting-started.mdx +1133 -0
- package/.docs/raw/docs/guides/Attachments.mdx +640 -0
- package/.docs/raw/docs/guides/Branching.mdx +59 -0
- package/.docs/raw/docs/guides/Editing.mdx +56 -0
- package/.docs/raw/docs/guides/Speech.mdx +43 -0
- package/.docs/raw/docs/guides/ToolUI.mdx +663 -0
- package/.docs/raw/docs/guides/Tools.mdx +496 -0
- package/.docs/raw/docs/index.mdx +7 -0
- package/.docs/raw/docs/legacy/styled/AssistantModal.mdx +85 -0
- package/.docs/raw/docs/legacy/styled/Decomposition.mdx +633 -0
- package/.docs/raw/docs/legacy/styled/Markdown.mdx +86 -0
- package/.docs/raw/docs/legacy/styled/Scrollbar.mdx +71 -0
- package/.docs/raw/docs/legacy/styled/Thread.mdx +84 -0
- package/.docs/raw/docs/legacy/styled/ThreadWidth.mdx +21 -0
- package/.docs/raw/docs/mcp-docs-server.mdx +324 -0
- package/.docs/raw/docs/migrations/deprecation-policy.mdx +41 -0
- package/.docs/raw/docs/migrations/v0-7.mdx +188 -0
- package/.docs/raw/docs/migrations/v0-8.mdx +160 -0
- package/.docs/raw/docs/migrations/v0-9.mdx +75 -0
- package/.docs/raw/docs/react-compatibility.mdx +208 -0
- package/.docs/raw/docs/runtimes/ai-sdk/rsc.mdx +226 -0
- package/.docs/raw/docs/runtimes/ai-sdk/use-assistant-hook.mdx +195 -0
- package/.docs/raw/docs/runtimes/ai-sdk/use-chat-hook.mdx +138 -0
- package/.docs/raw/docs/runtimes/ai-sdk/use-chat.mdx +136 -0
- package/.docs/raw/docs/runtimes/custom/external-store.mdx +1624 -0
- package/.docs/raw/docs/runtimes/custom/local.mdx +1185 -0
- package/.docs/raw/docs/runtimes/helicone.mdx +60 -0
- package/.docs/raw/docs/runtimes/langgraph/index.mdx +320 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/index.mdx +11 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +28 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +120 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +336 -0
- package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +385 -0
- package/.docs/raw/docs/runtimes/langserve.mdx +126 -0
- package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx +218 -0
- package/.docs/raw/docs/runtimes/mastra/overview.mdx +17 -0
- package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx +196 -0
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +222 -0
- package/.docs/raw/docs/ui/AssistantModal.mdx +46 -0
- package/.docs/raw/docs/ui/AssistantSidebar.mdx +42 -0
- package/.docs/raw/docs/ui/Attachment.mdx +82 -0
- package/.docs/raw/docs/ui/Markdown.mdx +72 -0
- package/.docs/raw/docs/ui/Mermaid.mdx +79 -0
- package/.docs/raw/docs/ui/Scrollbar.mdx +59 -0
- package/.docs/raw/docs/ui/SyntaxHighlighting.mdx +253 -0
- package/.docs/raw/docs/ui/Thread.mdx +47 -0
- package/.docs/raw/docs/ui/ThreadList.mdx +49 -0
- package/.docs/raw/docs/ui/ToolFallback.mdx +64 -0
- package/.docs/raw/docs/ui/primitives/Thread.mdx +197 -0
- package/LICENSE +21 -0
- package/README.md +128 -0
- package/dist/chunk-C7O7EFKU.js +38 -0
- package/dist/chunk-CZCDQ3YH.js +420 -0
- package/dist/index.js +1 -0
- package/dist/prepare-docs/prepare.js +199 -0
- package/dist/stdio.js +8 -0
- package/package.json +43 -0
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Hello, assistant-ui
|
|
3
|
+
description: assistant-ui is an open-source AI chat component for React.
|
|
4
|
+
author: Simon Farshid
|
|
5
|
+
date: 2024-07-29T12:00:00
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
import Image from "next/image";
|
|
9
|
+
import { TestimonialContainer } from "@/components/testimonials/TestimonialContainer";
|
|
10
|
+
import { BLOG_TESTIMONIALS } from "@/components/testimonials/testimonials";
|
|
11
|
+
import npmDownloads from "./npm-downloads.png";
|
|
12
|
+
import assistantUi from "./assistant-ui-screenshot.png";
|
|
13
|
+
|
|
14
|
+
After spending the last two years building Gen-AI prototypes and products, I realized that all software will soon have a natural language interface. OpenAI's ChatGPT sets the quality bar high and I wanted to have a similar UX in my own apps. No solution on the market came anywhere close, so I built assistant-ui.
|
|
15
|
+
|
|
16
|
+
assistant-ui is an open-source, embeddable, customizable AI chat component for React web apps. You can use it to build GPT wrappers, in-app copilots, or agentic systems. It supports rich content (markdown, code highlighting, charts, tables), generative UI, message editing, ..., across all the major model providers.
|
|
17
|
+
|
|
18
|
+
<Image
|
|
19
|
+
src={assistantUi}
|
|
20
|
+
alt="screenshot of assistant-ui"
|
|
21
|
+
width={398}
|
|
22
|
+
height={498}
|
|
23
|
+
className="mx-auto rounded-xl border drop-shadow"
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
Earlier last month, I released the project to the world. The feedback from early adopters has been overwhelmingly positive:
|
|
27
|
+
|
|
28
|
+
<div className="not-prose mx-auto max-w-md">
|
|
29
|
+
<TestimonialContainer testimonials={BLOG_TESTIMONIALS} />
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
It didn't take long for developers to start building with assistant-ui. Here are some of my favorite products from the community:
|
|
33
|
+
|
|
34
|
+
- [Helicone](https://helicone.ai/) - open-source LLM observability platform
|
|
35
|
+
- [screenpipe](https://screenpi.pe/) - AI to remember everything you see, say or hear
|
|
36
|
+
- [myresume.guru](http://myresume.guru) - AI resume optimizer to land your dream job
|
|
37
|
+
- [Entelligence](https://entelligence.ai/) - AI mentor for software engineers
|
|
38
|
+
|
|
39
|
+
With 250+ stars on [GitHub](https://github.com/assistant-ui/assistant-ui) and over 1k [npm](https://www.npmjs.com/package/@assistant-ui/react) weekly downloads, we got a vibrant growing community of developers who care about the user experience.
|
|
40
|
+
|
|
41
|
+
<Image
|
|
42
|
+
src={npmDownloads}
|
|
43
|
+
alt="graph showing 1355 weekly npm downloads"
|
|
44
|
+
width={381}
|
|
45
|
+
height={94}
|
|
46
|
+
className="mx-auto dark:hue-rotate-180 dark:invert"
|
|
47
|
+
/>
|
|
48
|
+
|
|
49
|
+
I want to thank the following contributors who got the project to where it is today:
|
|
50
|
+
|
|
51
|
+
- [@m13v](https://github.com/m13v) for contributing two examples and several how-to videos
|
|
52
|
+
- [@okisdev](https://github.com/okisdev) for multiple bugfixes
|
|
53
|
+
- [@Rajaniraiyn](https://github.com/Rajaniraiyn) for improving streaming support for REST APIs
|
|
54
|
+
- @ccbkai for integrating Chrome's `window.ai` with assistant-ui
|
|
55
|
+
- [@stingfeng](https://github.com/stingfeng/dify-extensions) for building a [Dify](https://dify.ai) integration
|
|
56
|
+
- [@Ephibbs](https://github.com/Ephibbs/flowtoken) for building a Perplexity-style text streaming library ([Demo](https://assistant-ui-flowtoken-demo.vercel.app/))
|
|
57
|
+
- … and so many others
|
|
58
|
+
|
|
59
|
+
assistant-ui builds on top of [Radix UI](https://www.radix-ui.com/), [Tailwind](https://tailwindcss.com/), [shadcn/ui](https://ui.shadcn.com/), [Vercel AI SDK](https://sdk.vercel.ai/docs/introduction) and other amazing open-source projects.
|
|
60
|
+
|
|
61
|
+
Over the coming month, I'll be rolling out multimodal support, so you can use your voice and upload images. There's so much more in the pipeline that I can't wait to unveil!
|
|
62
|
+
|
|
63
|
+
Today, several companies like [Helicone (YC W23)](https://x.com/justinstorre/status/1816849882612904156) are using assistant-ui to power a core part of their product. If your company wants to do the same, please [get in touch](https://cal.com/simon-farshid/assistant-ui).
|
|
64
|
+
|
|
65
|
+
If you're building conversational AI, join us on [Discord](https://discord.gg/S9dwgCNEFs). If you're technical and want to shape how we interact with AIs of the future, [send me an email](mailto:simon@assistant-ui.com).
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: January 2025 Changelog
|
|
3
|
+
description: shadcn/ui, Thread Management, Improvements to AI SDK and LangGraph support
|
|
4
|
+
author: Simon Farshid
|
|
5
|
+
date: 2025-01-31T12:00:00
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
import { Callout } from "fumadocs-ui/components/callout";
|
|
9
|
+
|
|
10
|
+
<Callout emoji="🎉">
|
|
11
|
+
This is the first edition of our changelog. We post these updates on a monthly
|
|
12
|
+
basis. If you want more frequent updates about our new features, join our
|
|
13
|
+
Discord where we have a `#changelog` channel that is updated on a daily basis.
|
|
14
|
+
</Callout>
|
|
15
|
+
|
|
16
|
+
## Summary
|
|
17
|
+
|
|
18
|
+
In January, we shipped 36 new versions of our package `@assistant-ui/react`. We also crossed 10k weekly downloads on npm for the first time. 🎉
|
|
19
|
+
|
|
20
|
+
## shadcn/ui CLI support
|
|
21
|
+
|
|
22
|
+
You can now install all components using the shadcn CLI, e.g.
|
|
23
|
+
|
|
24
|
+
```sh
|
|
25
|
+
npx shadcn@latest add "https://r.assistant-ui.com/thread"
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
We began a migration towards distributing our components as unstyled primitives and using the shadcn CLI to drop styles in your project.
|
|
29
|
+
|
|
30
|
+
## Styled components moved to @assistant-ui/react-ui
|
|
31
|
+
|
|
32
|
+
All styled components (Thread, ThreadList, AssistantModal, makeMarkdownText, etc.) have been moved to a new package, `@assistant-ui/react-ui`.
|
|
33
|
+
|
|
34
|
+
To ease the migration, we added a migration codemod:
|
|
35
|
+
|
|
36
|
+
```sh
|
|
37
|
+
npx assistant-ui upgrade
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
This will update your codebase to use the new package. This new package remains supported, however, based on the learnings from existing users, we recommend all new projects to use our shadcn/ui CLI instead.
|
|
41
|
+
|
|
42
|
+
## Customizing the max-width of the Thread
|
|
43
|
+
|
|
44
|
+
You can now customize the max-width of the thread via `--aui-thread-max-width` CSS variable.
|
|
45
|
+
|
|
46
|
+
## Thread Management
|
|
47
|
+
|
|
48
|
+
One of our main focus areas in this month was on the new Thread Management API. The new ThreadList API is available under `runtime.threads`. It allows you to create, switch to, rename, archive, and delete threads.
|
|
49
|
+
|
|
50
|
+
We shipped a `<ThreadList />` component which gives the user the UI to manage their threads.
|
|
51
|
+
|
|
52
|
+
We also shipped a few hooks `useThreadListItem()`, `useThreadListItemRuntime()`, `useRemoteThreadListRuntime()` and `useCloudThreadListRuntime()`.
|
|
53
|
+
|
|
54
|
+
## Assistant Cloud
|
|
55
|
+
|
|
56
|
+
We rolled out the new Assistant Cloud service to early users. This is a managed service for persistence, chat history, and thread management.
|
|
57
|
+
Our runtimes are being upgraded to support Assistant Cloud natively by letting you pass a `cloud` object to the runtime hook.
|
|
58
|
+
|
|
59
|
+
Keep an eye out for the public announcement of Assistant Cloud in a few days.
|
|
60
|
+
|
|
61
|
+
## Improvements to our LangGraph Integration
|
|
62
|
+
|
|
63
|
+
- We now have full support for LangGraph's `interrupt()`/`Command` API. You can check out the new example repository [here](https://github.com/assistant-ui/assistant-ui-langgraph-interrupt).
|
|
64
|
+
- We now also support starting LangGraph runs without a user message (based on button input or other events).
|
|
65
|
+
- Cancellation of runs is now supported via an `abortSignal` being passed to the LangGraph runtime adapter.
|
|
66
|
+
|
|
67
|
+
## Improvements to our AI SDK Integration
|
|
68
|
+
|
|
69
|
+
We now give you access to annotations and data packets in the assistant message:
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
type AssistantMessage = {
|
|
73
|
+
metadata: {
|
|
74
|
+
unstable_annotations: [...],
|
|
75
|
+
unstable_data: [...],
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## AI SDK recommended for new projects
|
|
81
|
+
|
|
82
|
+
For new projects, we recommend using the AI SDK integration. Previously, we recommended our custom SDK called `useEdgeRuntime`.
|
|
83
|
+
With our improved AI SDK integration, we believe it is time to recommend AI SDK for new projects, giving you access to the AI SDK ecosystem.
|
|
84
|
+
|
|
85
|
+
The edge runtime remains maintained and supported for existing projects.
|
|
86
|
+
|
|
87
|
+
## Misc
|
|
88
|
+
|
|
89
|
+
- **Refactors & API Enhancements**:
|
|
90
|
+
|
|
91
|
+
- Renamed `ModelConfig` to `ModelContext`.
|
|
92
|
+
- Moved `switchToThread / switchToNewThread` under `runtime.threads`.
|
|
93
|
+
- Deprecated `UIContentPart`.
|
|
94
|
+
- `ToolCallContentPart.args` is now a `JSONObject`.
|
|
95
|
+
- `MessagePrimitive.tools.Override` introduced.
|
|
96
|
+
- Added `AppendMessage.sourceId` to provide better tracking.
|
|
97
|
+
- Reverse order of threads in `useRemoteThreadListRuntime` for better visibility.
|
|
98
|
+
- Added `threads.getById` and `threads.main` APIs.
|
|
99
|
+
- Introduced `AssistantCloudThreadHistoryAdapter` to handle cloud-based thread history.
|
|
100
|
+
- Auto-injection of history adapter in the local runtime.
|
|
101
|
+
- Tool call `id` + `args` are now optional in `ThreadMessageLike`.
|
|
102
|
+
- Added `ThreadListPrimitive.Root`.
|
|
103
|
+
- `ComposerRuntime.clearAttachments` API added.
|
|
104
|
+
- Improved input support for IME keyboards (e.g., Chinese, Japanese, Korean).
|
|
105
|
+
- Moved repository to a new GitHub organization (`assistant-ui/assistant-ui`).
|
|
106
|
+
|
|
107
|
+
- **External Store & Data Handling**:
|
|
108
|
+
|
|
109
|
+
- Enhanced `ExternalStoreAdapter` to support metadata and attachments.
|
|
110
|
+
- Renamed `getExternalStoreMessage` to `getExternalStoreMessages`.
|
|
111
|
+
- Tool call `args` streaming support in our Python SDK.
|
|
112
|
+
|
|
113
|
+
- **User Interface & Styling**:
|
|
114
|
+
|
|
115
|
+
- Styled UI assistant message footer.
|
|
116
|
+
- Improved attachment filename handling to prevent overflow.
|
|
117
|
+
- Renamed CSS class to `aui-thread-welcome-suggestions`.
|
|
118
|
+
|
|
119
|
+
- **Performance Optimizations**:
|
|
120
|
+
|
|
121
|
+
- Memoized `MessageRepository.getMessages()` for better efficiency.
|
|
122
|
+
- Marked `ChatAdapter` types as readonly.
|
|
123
|
+
|
|
124
|
+
- **Bug Fixes**:
|
|
125
|
+
|
|
126
|
+
- Fixed event subscription issues in thread lists.
|
|
127
|
+
- Fixed import errors in React server environments.
|
|
128
|
+
- Prevented excessive classes being included via TailwindCSS.
|
|
129
|
+
- Fixed AI SDK annotation packet errors.
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "About assistant-ui"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { Sparkles, PanelsTopLeft, Database, Terminal } from "lucide-react";
|
|
6
|
+
|
|
7
|
+
assistant-ui helps you create beautiful, enterprise-grade AI chat interfaces in minutes. Whether you're building a chatGPT clone, a customer support chatbot, an AI assistant, or a complex multi agent application, assistant-ui provides the frontend primative components and state management layers to focus on what makes your application unique.
|
|
8
|
+
|
|
9
|
+
## Key Features
|
|
10
|
+
|
|
11
|
+
<Cards>
|
|
12
|
+
|
|
13
|
+
<Card icon={<PanelsTopLeft className="text-purple-300" />} title='Instant Chat UI'>
|
|
14
|
+
|
|
15
|
+
Pre-built beautiful, customizable chat interfaces out of the box. Easy to quickly iterate on your idea.
|
|
16
|
+
|
|
17
|
+
</Card>
|
|
18
|
+
|
|
19
|
+
<Card icon={<PanelsTopLeft className="text-blue-300" />} title='Chat State Management'>
|
|
20
|
+
|
|
21
|
+
Powerful state management for chat interactions, optimized for streaming responses and efficient rendering.
|
|
22
|
+
|
|
23
|
+
</Card>
|
|
24
|
+
|
|
25
|
+
<Card icon={<Database className="text-green-300" />} title='High Performance'>
|
|
26
|
+
|
|
27
|
+
Optimized for speed and efficiency with minimal bundle size, ensuring your AI chat interfaces remain responsive.
|
|
28
|
+
|
|
29
|
+
</Card>
|
|
30
|
+
|
|
31
|
+
<Card icon={<Terminal className="text-orange-300" />} title='Framework Agnostic'>
|
|
32
|
+
|
|
33
|
+
Easily integrate with any backend system, whether using Vercel AI SDK, direct LLM connections, or custom solutions.
|
|
34
|
+
Works with any React-based framework.
|
|
35
|
+
|
|
36
|
+
</Card>
|
|
37
|
+
|
|
38
|
+
</Cards>
|
|
39
|
+
|
|
40
|
+
<Callout title="Want to try it out?">
|
|
41
|
+
[Get Started in 30 Seconds](/docs/getting-started).
|
|
42
|
+
</Callout>
|
|
43
|
+
|
|
44
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: <AssistantRuntimeProvider />
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { ParametersTable } from "@/components/docs";
|
|
6
|
+
import { AssistantRuntimeProvider } from "@/generated/typeDocs";
|
|
7
|
+
|
|
8
|
+
The `AssistantRuntimeProvider` provides data and APIs used by assistant-ui components.
|
|
9
|
+
|
|
10
|
+
Almost all components in assistant-ui require an `AssistantRuntimeProvider` around them to function properly.
|
|
11
|
+
|
|
12
|
+
You must either wrap your app in an `AssistantRuntimeProvider` or pass a `runtime` to the `<Thread />` component instead.
|
|
13
|
+
|
|
14
|
+
```tsx {1, 8, 10}
|
|
15
|
+
import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
16
|
+
|
|
17
|
+
const MyApp = () => {
|
|
18
|
+
const runtime = useChatRuntime({ api: "/api/chat" });
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<AssistantRuntimeProvider runtime={runtime}>
|
|
22
|
+
{/* your app */}
|
|
23
|
+
</AssistantRuntimeProvider>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
#### Properties
|
|
29
|
+
|
|
30
|
+
<ParametersTable {...AssistantRuntimeProvider} />
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: <TextContentPartProvider />
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { ParametersTable } from "@/components/docs";
|
|
6
|
+
import { AssistantRuntimeProvider } from "@/generated/typeDocs";
|
|
7
|
+
|
|
8
|
+
The `TextContentPartProvider` provides data and APIs for `TextContentPart` components.
|
|
9
|
+
|
|
10
|
+
This is useful if you want to reuse the same `Text` component outside of a message text, e.g. with the `@assistant-ui/react-markdown` package.
|
|
11
|
+
|
|
12
|
+
```tsx {1, 8, 10}
|
|
13
|
+
import { AssistantRuntimeProvider } from "@assistant-ui/react";
|
|
14
|
+
|
|
15
|
+
const MyApp = () => {
|
|
16
|
+
return (
|
|
17
|
+
<TextContentPartProvider text={"Hello!"}>
|
|
18
|
+
<MyMarkdownText />
|
|
19
|
+
</AssistantRuntimeProvider>
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
#### Properties
|
|
25
|
+
|
|
26
|
+
<ParametersTable {...AssistantRuntimeProvider} />
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "@assistant-ui/react-hook-form"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
A React Hook Form integration for @assistant-ui.
|
|
6
|
+
|
|
7
|
+
import { ParametersTable } from "@/components/docs";
|
|
8
|
+
|
|
9
|
+
## API Reference
|
|
10
|
+
|
|
11
|
+
### `useAssistantForm`
|
|
12
|
+
|
|
13
|
+
Drop-in replacement hook for `useForm` that adds support for `@assistant-ui/react`.
|
|
14
|
+
|
|
15
|
+
```diff
|
|
16
|
+
- import { useForm } from "react-hook-form";
|
|
17
|
+
+ import { useAssistantForm } from "@assistant-ui/react-hook-form";
|
|
18
|
+
|
|
19
|
+
- useForm({
|
|
20
|
+
+ useAssistantForm({
|
|
21
|
+
...
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
#### Properties
|
|
26
|
+
|
|
27
|
+
<ParametersTable
|
|
28
|
+
type="UseAssistantFormProps"
|
|
29
|
+
parameters={[
|
|
30
|
+
{
|
|
31
|
+
name: "assistant",
|
|
32
|
+
type: "object",
|
|
33
|
+
optional: true,
|
|
34
|
+
description: "Configuration for useAssistantForm",
|
|
35
|
+
children: [
|
|
36
|
+
{
|
|
37
|
+
parameters: [
|
|
38
|
+
{
|
|
39
|
+
name: "tools",
|
|
40
|
+
type: "object",
|
|
41
|
+
description: "Tools configuration for useAssistantForm",
|
|
42
|
+
children: [
|
|
43
|
+
{
|
|
44
|
+
parameters: [
|
|
45
|
+
{
|
|
46
|
+
name: "set_form_field",
|
|
47
|
+
type: "object",
|
|
48
|
+
description: "Configuration for the set_form_field tool",
|
|
49
|
+
children: [
|
|
50
|
+
{
|
|
51
|
+
parameters: [
|
|
52
|
+
{
|
|
53
|
+
name: "render",
|
|
54
|
+
type: "ToolCallContentPartComponent<{ name: string; value: string; }, {}>",
|
|
55
|
+
description:
|
|
56
|
+
"The component to render when set_form_field is called.",
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
],
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: "submit_form",
|
|
64
|
+
type: "object",
|
|
65
|
+
description: "Configuration for the submit_form tool",
|
|
66
|
+
children: [
|
|
67
|
+
{
|
|
68
|
+
parameters: [
|
|
69
|
+
{
|
|
70
|
+
name: "render",
|
|
71
|
+
type: "ToolCallContentPartComponent<{}, {}>",
|
|
72
|
+
description:
|
|
73
|
+
"The component to render when submit_form is called.",
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
},
|
|
77
|
+
],
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
},
|
|
87
|
+
]}
|
|
88
|
+
/>
|
|
89
|
+
|
|
90
|
+
### `formTools`
|
|
91
|
+
|
|
92
|
+
The set of tools to use with `useAssistantForm`, useful for runtimes that do not support client-side tool definitions (i.e. Vercel AI SDK).
|
|
93
|
+
|
|
94
|
+
```tsx {1, 5-7}
|
|
95
|
+
import { formTools } from "@assistant-ui/react-hook-form";
|
|
96
|
+
|
|
97
|
+
const result = streamText({
|
|
98
|
+
...
|
|
99
|
+
tools: {
|
|
100
|
+
...formTools,
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
```
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "@assistant-ui/react-ai-sdk"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
Vercel AI SDK integration for assistant-ui.
|
|
6
|
+
|
|
7
|
+
import { ParametersTable } from "@/components/docs";
|
|
8
|
+
|
|
9
|
+
## API Reference
|
|
10
|
+
|
|
11
|
+
### `useVercelUseChatRuntime`
|
|
12
|
+
|
|
13
|
+
Convert Vercel AI SDK chat helpers into a `AssistantRuntime`.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { useVercelUseChatRuntime } from "@assistant-ui/react-ai-sdk";
|
|
17
|
+
|
|
18
|
+
const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
|
|
19
|
+
const chat = useChat();
|
|
20
|
+
const runtime = useVercelUseChatRuntime(chat);
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<AssistantRuntimeProvider runtime={runtime}>
|
|
24
|
+
{children}
|
|
25
|
+
</AssistantRuntimeProvider>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
<ParametersTable
|
|
31
|
+
parameters={[
|
|
32
|
+
{
|
|
33
|
+
name: "chat",
|
|
34
|
+
type: "ReturnType<typeof useChat>",
|
|
35
|
+
description: "The UseChatHelpers from @ai-sdk/react.",
|
|
36
|
+
},
|
|
37
|
+
]}
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
### `useVercelUseAssistantRuntime`
|
|
41
|
+
|
|
42
|
+
Convert Vercel AI SDK assistant helpers into a `AssistantRuntime`.
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { useVercelUseAssistantRuntime } from "@assistant-ui/react-ai-sdk";
|
|
46
|
+
|
|
47
|
+
const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
|
|
48
|
+
const assistant = useAssistant();
|
|
49
|
+
const runtime = useVercelUseAssistantRuntime(assistant);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<AssistantRuntimeProvider runtime={runtime}>
|
|
53
|
+
{children}
|
|
54
|
+
</AssistantRuntimeProvider>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
<ParametersTable
|
|
60
|
+
parameters={[
|
|
61
|
+
{
|
|
62
|
+
name: "assistant",
|
|
63
|
+
type: "ReturnType<typeof useAssistant>",
|
|
64
|
+
description: "The UseAssistantHelpers from @ai-sdk/react.",
|
|
65
|
+
},
|
|
66
|
+
]}
|
|
67
|
+
/>
|
|
68
|
+
|
|
69
|
+
### `useVercelRSCRuntime`
|
|
70
|
+
|
|
71
|
+
Convert Vercel RSC runtime into a `AssistantRuntime`.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { useVercelRSCRuntime } from "@assistant-ui/react-ai-sdk";
|
|
75
|
+
|
|
76
|
+
const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
|
|
77
|
+
const [messages, setMessages] = useUIState<typeof AI>();
|
|
78
|
+
|
|
79
|
+
const onNew = async (m: AppendMessage) => {
|
|
80
|
+
if (m.content[0]?.type !== "text")
|
|
81
|
+
throw new Error("Only text messages are supported");
|
|
82
|
+
|
|
83
|
+
const input = m.content[0].text;
|
|
84
|
+
setMessages((currentConversation) => [
|
|
85
|
+
...currentConversation,
|
|
86
|
+
{ id: nanoid(), role: "user", display: input },
|
|
87
|
+
]);
|
|
88
|
+
|
|
89
|
+
const message = await continueConversation(input);
|
|
90
|
+
|
|
91
|
+
setMessages((currentConversation) => [...currentConversation, message]);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
const runtime = useVercelRSCRuntime({ messages, onNew });
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<AssistantRuntimeProvider runtime={runtime}>
|
|
98
|
+
{children}
|
|
99
|
+
</AssistantRuntimeProvider>
|
|
100
|
+
);
|
|
101
|
+
};
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
<ParametersTable
|
|
105
|
+
parameters={[
|
|
106
|
+
{
|
|
107
|
+
name: "adapter",
|
|
108
|
+
type: "VercelRSCAdapter<TMessage>",
|
|
109
|
+
description: "The Vercel RSC adapter to use.",
|
|
110
|
+
children: [
|
|
111
|
+
{
|
|
112
|
+
type: "VercelRSCAdapter<TMessage>",
|
|
113
|
+
parameters: [
|
|
114
|
+
{
|
|
115
|
+
name: "messages",
|
|
116
|
+
type: "readonly ThreadMessage[]",
|
|
117
|
+
description: "The messages in the thread.",
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
name: "onNew",
|
|
121
|
+
type: "(message: AppendMessage) => Promise<void>",
|
|
122
|
+
description: "A function to append a message to the thread.",
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
name: "onEdit",
|
|
126
|
+
type: "(message: AppendMessage) => Promise<void>",
|
|
127
|
+
description: "A function to edit a message.",
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
name: "onReload",
|
|
131
|
+
type: "(parentId: string | null) => Promise<void>",
|
|
132
|
+
description: "A function to reload a message.",
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
name: "convertMessage",
|
|
136
|
+
type: "(message: TMessage) => VercelRSCMessage",
|
|
137
|
+
description:
|
|
138
|
+
"A function to convert messages to the VercelRSCMessage format. Only required if your message objects are not already compatible with Vercel RSC.",
|
|
139
|
+
},
|
|
140
|
+
],
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
]}
|
|
145
|
+
/>
|