@assistant-ui/mcp-docs-server 0.1.7 → 0.1.9
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/with-ai-sdk-v5.md +24 -15
- package/.docs/organized/code-examples/with-assistant-transport.md +1599 -0
- package/.docs/organized/code-examples/with-cloud.md +12 -10
- package/.docs/organized/code-examples/with-external-store.md +10 -8
- package/.docs/organized/code-examples/with-ffmpeg.md +17 -14
- package/.docs/organized/code-examples/with-langgraph.md +83 -47
- package/.docs/organized/code-examples/with-parent-id-grouping.md +10 -8
- package/.docs/organized/code-examples/with-react-hook-form.md +17 -14
- package/.docs/raw/docs/api-reference/integrations/react-data-stream.mdx +194 -0
- package/.docs/raw/docs/api-reference/overview.mdx +6 -0
- package/.docs/raw/docs/api-reference/primitives/Composer.mdx +31 -0
- package/.docs/raw/docs/api-reference/primitives/Message.mdx +108 -3
- package/.docs/raw/docs/api-reference/primitives/Thread.mdx +59 -0
- package/.docs/raw/docs/api-reference/primitives/ThreadList.mdx +128 -0
- package/.docs/raw/docs/api-reference/primitives/ThreadListItem.mdx +160 -0
- package/.docs/raw/docs/api-reference/runtimes/AssistantRuntime.mdx +0 -11
- package/.docs/raw/docs/api-reference/runtimes/ComposerRuntime.mdx +3 -3
- package/.docs/raw/docs/copilots/assistant-frame.mdx +399 -0
- package/.docs/raw/docs/devtools.mdx +51 -0
- package/.docs/raw/docs/getting-started.mdx +20 -19
- package/.docs/raw/docs/guides/Attachments.mdx +6 -13
- package/.docs/raw/docs/guides/Tools.mdx +56 -13
- package/.docs/raw/docs/guides/context-api.mdx +574 -0
- package/.docs/raw/docs/migrations/v0-12.mdx +125 -0
- package/.docs/raw/docs/runtimes/ai-sdk/use-chat.mdx +2 -2
- package/.docs/raw/docs/runtimes/custom/local.mdx +17 -4
- package/.docs/raw/docs/runtimes/data-stream.mdx +287 -0
- package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx +6 -5
- package/.docs/raw/docs/runtimes/mastra/overview.mdx +3 -3
- package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx +13 -13
- package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +5 -0
- package/.docs/raw/docs/ui/ThreadList.mdx +54 -16
- package/dist/{chunk-L4K23SWI.js → chunk-NVNFQ5ZO.js} +4 -1
- package/dist/index.js +1 -1
- package/dist/prepare-docs/prepare.js +1 -1
- package/dist/stdio.js +1 -1
- package/package.json +7 -7
- package/.docs/raw/docs/concepts/architecture.mdx +0 -19
- package/.docs/raw/docs/concepts/runtime-layer.mdx +0 -163
- package/.docs/raw/docs/concepts/why.mdx +0 -9
|
@@ -3,6 +3,8 @@ title: ThreadList
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
import { Steps, Step } from "fumadocs-ui/components/steps";
|
|
6
|
+
import { Callout } from "fumadocs-ui/components/callout";
|
|
7
|
+
import { Tabs, Tab } from "fumadocs-ui/components/tabs";
|
|
6
8
|
import { ThreadListSample } from "../../../components/samples/threadlist-sample";
|
|
7
9
|
|
|
8
10
|
## Overview
|
|
@@ -11,37 +13,73 @@ The ThreadList component lets the user switch between threads.
|
|
|
11
13
|
|
|
12
14
|
<ThreadListSample />
|
|
13
15
|
|
|
16
|
+
<Callout>
|
|
17
|
+
This demo uses **ThreadListSidebar**, which includes `thread-list` as a dependency and provides a complete sidebar layout. For custom implementations, you can use `thread-list` directly.
|
|
18
|
+
</Callout>
|
|
19
|
+
|
|
14
20
|
## Getting Started
|
|
15
21
|
|
|
16
22
|
<Steps>
|
|
17
23
|
<Step>
|
|
18
24
|
|
|
19
|
-
### Add
|
|
25
|
+
### Add the component
|
|
20
26
|
|
|
21
27
|
```sh
|
|
28
|
+
# Complete thread-list sidebar layout
|
|
29
|
+
npx shadcn@latest add "https://r.assistant-ui.com/threadlist-sidebar"
|
|
30
|
+
|
|
31
|
+
# Just the thread-list for custom layouts
|
|
22
32
|
npx shadcn@latest add "https://r.assistant-ui.com/thread-list"
|
|
23
33
|
```
|
|
24
34
|
|
|
25
|
-
This adds a `/components/assistant-ui/thread-list.tsx` file to your project, which you can adjust as needed.
|
|
26
|
-
|
|
27
35
|
</Step>
|
|
28
36
|
<Step>
|
|
29
37
|
|
|
30
38
|
### Use in your application
|
|
31
39
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
<Tabs items={["With Sidebar", "Without Sidebar"]}>
|
|
41
|
+
<Tab value="With Sidebar">
|
|
42
|
+
```tsx title="/app/assistant.tsx"
|
|
43
|
+
import { Thread } from "@/components/assistant-ui/thread";
|
|
44
|
+
import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar";
|
|
45
|
+
import {
|
|
46
|
+
SidebarProvider,
|
|
47
|
+
SidebarInset,
|
|
48
|
+
SidebarTrigger
|
|
49
|
+
} from "@/components/ui/sidebar";
|
|
50
|
+
|
|
51
|
+
export default function Assistant() {
|
|
52
|
+
return (
|
|
53
|
+
<SidebarProvider>
|
|
54
|
+
<div className="flex h-dvh w-full">
|
|
55
|
+
<ThreadListSidebar />
|
|
56
|
+
<SidebarInset>
|
|
57
|
+
{/* Add sidebar trigger, location can be customized */}
|
|
58
|
+
<SidebarTrigger className="absolute top-4 left-4" />
|
|
59
|
+
<Thread />
|
|
60
|
+
</SidebarInset>
|
|
61
|
+
</div>
|
|
62
|
+
</SidebarProvider>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
</Tab>
|
|
67
|
+
<Tab value="Without Sidebar">
|
|
68
|
+
```tsx title="/app/assistant.tsx"
|
|
69
|
+
import { Thread } from "@/components/assistant-ui/thread";
|
|
70
|
+
import { ThreadList } from "@/components/assistant-ui/thread-list";
|
|
71
|
+
|
|
72
|
+
export default function Assistant() {
|
|
73
|
+
return (
|
|
74
|
+
<div className="grid h-full grid-cols-[200px_1fr]">
|
|
75
|
+
<ThreadList />
|
|
76
|
+
<Thread />
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
</Tab>
|
|
82
|
+
</Tabs>
|
|
45
83
|
|
|
46
84
|
</Step>
|
|
47
85
|
</Steps>
|
|
@@ -109,6 +109,9 @@ function sanitizePath(userPath) {
|
|
|
109
109
|
if (!userPath || typeof userPath !== "string") {
|
|
110
110
|
throw new Error("Invalid path: Path must be a non-empty string");
|
|
111
111
|
}
|
|
112
|
+
if (userPath.includes("../") || userPath.includes("..\\")) {
|
|
113
|
+
throw new Error("Invalid path: Directory traversal attempt detected");
|
|
114
|
+
}
|
|
112
115
|
const normalized = normalize(userPath);
|
|
113
116
|
if (path.isAbsolute(normalized)) {
|
|
114
117
|
throw new Error("Invalid path: Absolute paths are not allowed");
|
|
@@ -138,7 +141,7 @@ function sanitizePath(userPath) {
|
|
|
138
141
|
throw new Error("Invalid path: Hidden files are not allowed");
|
|
139
142
|
}
|
|
140
143
|
}
|
|
141
|
-
return relativePath;
|
|
144
|
+
return relativePath.replace(/\\/g, "/");
|
|
142
145
|
}
|
|
143
146
|
|
|
144
147
|
// src/tools/docs.ts
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { runServer, server } from './chunk-
|
|
1
|
+
export { runServer, server } from './chunk-NVNFQ5ZO.js';
|
package/dist/stdio.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@assistant-ui/mcp-docs-server",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "MCP server for assistant-ui documentation and examples",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -8,18 +8,18 @@
|
|
|
8
8
|
"assistant-ui-mcp": "./dist/stdio.js"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@modelcontextprotocol/sdk": "^1.
|
|
12
|
-
"zod": "^4.
|
|
11
|
+
"@modelcontextprotocol/sdk": "^1.18.2",
|
|
12
|
+
"zod": "^4.1.11",
|
|
13
13
|
"gray-matter": "^4.0.3",
|
|
14
14
|
"cross-env": "^10.0.0"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
|
-
"@types/node": "^24.
|
|
17
|
+
"@types/node": "^24.5.2",
|
|
18
18
|
"tsup": "^8.5.0",
|
|
19
|
-
"tsx": "^4.20.
|
|
19
|
+
"tsx": "^4.20.6",
|
|
20
20
|
"typescript": "^5.9.2",
|
|
21
21
|
"vitest": "^3.2.4",
|
|
22
|
-
"eslint": "^9.
|
|
22
|
+
"eslint": "^9.36.0"
|
|
23
23
|
},
|
|
24
24
|
"files": [
|
|
25
25
|
"dist",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
|
-
"clean": "
|
|
33
|
+
"clean": "tsx scripts/clean.mts",
|
|
34
34
|
"prepare-docs": "cross-env PREPARE=true node ./dist/prepare-docs/prepare.js",
|
|
35
35
|
"build:cli": "tsup src/stdio.ts src/prepare-docs/prepare.ts src/index.ts --format esm --treeshake=smallest --splitting",
|
|
36
36
|
"build": "pnpm clean && pnpm build:cli && pnpm prepare-docs",
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Architecture
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import Image from "next/image";
|
|
6
|
-
import architecture from "@/assets/docs/architecture.png";
|
|
7
|
-
|
|
8
|
-
### Architecture
|
|
9
|
-
|
|
10
|
-
`assistant-ui` consists of two parts, **_Runtime_** and **_UI Components_**.
|
|
11
|
-
|
|
12
|
-
<Image
|
|
13
|
-
src={architecture}
|
|
14
|
-
alt="Architecture diagram, UI components connected to the runtime layer and the runtime layer connected to LLM and tools"
|
|
15
|
-
height={300}
|
|
16
|
-
className="mx-auto my-2 dark:hue-rotate-180 dark:invert"
|
|
17
|
-
/>
|
|
18
|
-
|
|
19
|
-
The Runtime and UI Components each require independent setup and both must be set up.
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Runtime Layer
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
assistant-ui components are full stack components. This means that they include both the UI presentation, but also logic to communicate with an external system. This logic is handled by the runtime layer and APIs.
|
|
6
|
-
|
|
7
|
-
You interact with the runtime layer in two ways:
|
|
8
|
-
|
|
9
|
-
- defining a runtime for your app
|
|
10
|
-
- using the runtime APIs to interact with the runtime
|
|
11
|
-
|
|
12
|
-
## Defining a runtime
|
|
13
|
-
|
|
14
|
-
assistant-ui ships with two low-level runtimes:
|
|
15
|
-
|
|
16
|
-
- `useLocalRuntime`
|
|
17
|
-
- `useExternalStoreRuntime`
|
|
18
|
-
|
|
19
|
-
Both of these runtimes let you implement your own runtime. The conceptual difference between the two is that `useLocalRuntime` takes ownership of the data layer, while `useExternalStoreRuntime` does not.
|
|
20
|
-
|
|
21
|
-
If you have a stateful API to integrate, use `useExternalStoreRuntime`, if you have a stateless API to integrate, use `useLocalRuntime`.
|
|
22
|
-
|
|
23
|
-
### Higher level runtimes
|
|
24
|
-
|
|
25
|
-
For many services and APIs, assistant-ui provides deeper integrations. These are built with the two low-level runtimes mentioned above.
|
|
26
|
-
|
|
27
|
-
- `useChatRuntime`: Connect to Vercel AI SDK backends
|
|
28
|
-
- `useVercelUseChatRuntime`: Integrate with Vercel AI SDK's `useChat` hook
|
|
29
|
-
- `useVercelUseAssistantRuntime`: Integrate with Vercel AI SDK's `useAssistant` hook (OpenAI Assistants API)
|
|
30
|
-
- `useVercelRSCRuntime`: Integrate with Vercel AI SDK React Server Components
|
|
31
|
-
- `useLangGraphRuntime`: Connect to LangGraph Cloud
|
|
32
|
-
- ...
|
|
33
|
-
|
|
34
|
-
### Runtime Providers
|
|
35
|
-
|
|
36
|
-
The following components accept a `runtime` prop:
|
|
37
|
-
|
|
38
|
-
- `AssistantRuntimeProvider`
|
|
39
|
-
- `Thread`
|
|
40
|
-
|
|
41
|
-
These components put the Runtime in the React Context, so that all child components can access the runtime.
|
|
42
|
-
|
|
43
|
-
### Runtime Adapters
|
|
44
|
-
|
|
45
|
-
Most runtimes accept additional adapters to configure extra integrations:
|
|
46
|
-
|
|
47
|
-
- ChatModelAdapter: Configures the backend API
|
|
48
|
-
- AttachmentAdapter: Configures the file/media attachment API
|
|
49
|
-
- SpeechSynthesisAdapter: Configures the speech API
|
|
50
|
-
- FeedbackAdapter: Configures the feedback API
|
|
51
|
-
- SuggestionAdapter: Configures dynamic suggestion generation based on conversation context
|
|
52
|
-
|
|
53
|
-
## Using the runtime APIs
|
|
54
|
-
|
|
55
|
-
The same API used by the assistant-ui components is also available to you. This allows you to build your own UI components and integrate them with the runtime layer.
|
|
56
|
-
|
|
57
|
-
### Runtime Hierarchy
|
|
58
|
-
|
|
59
|
-
The runtime API is nested as such:
|
|
60
|
-
|
|
61
|
-
import { File, Folder, Files } from "fumadocs-ui/components/files";
|
|
62
|
-
|
|
63
|
-
<Files>
|
|
64
|
-
<Folder name="AssistantRuntime" defaultOpen>
|
|
65
|
-
<Folder name="ThreadListRuntime" defaultOpen>
|
|
66
|
-
<Folder name="ThreadRuntime" defaultOpen>
|
|
67
|
-
<Folder name="MessageRuntime" defaultOpen>
|
|
68
|
-
<Folder
|
|
69
|
-
name="MessagePartRuntime (Text / Reasoning / Image / Audio / Tool-Call / UI)"
|
|
70
|
-
defaultOpen
|
|
71
|
-
></Folder>
|
|
72
|
-
<Folder name="MessageAttachmentRuntime" defaultOpen></Folder>
|
|
73
|
-
<Folder name="EditComposerRuntime" defaultOpen>
|
|
74
|
-
<Folder name="EditComposerAttachmentRuntime" defaultOpen></Folder>
|
|
75
|
-
</Folder>
|
|
76
|
-
</Folder>
|
|
77
|
-
<Folder name="ThreadComposerRuntime" defaultOpen>
|
|
78
|
-
<Folder name="ThreadComposerAttachmentRuntime" defaultOpen></Folder>
|
|
79
|
-
</Folder>
|
|
80
|
-
</Folder>
|
|
81
|
-
</Folder>
|
|
82
|
-
</Folder>
|
|
83
|
-
</Files>
|
|
84
|
-
|
|
85
|
-
The AssistantRuntime (which encompasses everything), is sometimes simply called `Runtime`.
|
|
86
|
-
|
|
87
|
-
### Runtime Context Provider Components
|
|
88
|
-
|
|
89
|
-
The following components provide the runtime APIs:
|
|
90
|
-
|
|
91
|
-
```tsx
|
|
92
|
-
// provides AssistantRuntime, ThreadListRuntime, ThreadRuntime, ComposerRuntime (ThreadComposer)
|
|
93
|
-
<AssistantRuntimeProvider runtime={runtime} />
|
|
94
|
-
|
|
95
|
-
// renders every message, provides MessageRuntime, ComposerRuntime (EditComposer)
|
|
96
|
-
<ThreadPrimitive.Messages components={{ Message, ... }} />
|
|
97
|
-
|
|
98
|
-
// renders every message part, provides MessagePartRuntime
|
|
99
|
-
<MessagePrimitive.Parts components={{ Text, Reasoning, Image, Audio, UI, tools }} />
|
|
100
|
-
|
|
101
|
-
// renders every attachment, provides AttachmentRuntime (Thread or EditComposer)
|
|
102
|
-
<ComposerPrimitive.Attachments components={{ Attachment, ... }} />
|
|
103
|
-
|
|
104
|
-
// renders every attachment, provides AtatchmentRuntime (Message)
|
|
105
|
-
<MessagePrimitive.Attachments components={{ Attachment, ... }} />
|
|
106
|
-
|
|
107
|
-
// provides a custom TextMessagePartRuntime
|
|
108
|
-
<TextMessagePartProvider text="Hello!" />
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### Accessing runtime APIs
|
|
112
|
-
|
|
113
|
-
You can access the runtime APIs with react hooks:
|
|
114
|
-
|
|
115
|
-
```tsx
|
|
116
|
-
const runtime = useAssistantRuntime();
|
|
117
|
-
const threadRuntime = useThreadRuntime();
|
|
118
|
-
const messageRuntime = useMessageRuntime();
|
|
119
|
-
const MessagePartRuntime = useMessagePartRuntime();
|
|
120
|
-
|
|
121
|
-
// thread manager has no separate hook (1:1 relationship with assistant runtime)
|
|
122
|
-
const ThreadListRuntime = useAssistantRuntime().threads;
|
|
123
|
-
|
|
124
|
-
// composer runtime is multi-use
|
|
125
|
-
const composerRuntime = useComposerRuntime(); // refers to edit composer if available, otherwise thread composer
|
|
126
|
-
|
|
127
|
-
// thread manager has no separate hook (1:1 relationship with assistant runtime)
|
|
128
|
-
const threadComposer = useThreadRuntime().composer;
|
|
129
|
-
|
|
130
|
-
// thread manager has no separate hook (1:1 relationship with assistant runtime)
|
|
131
|
-
const editComposerRuntime = useMessageRuntime().composer;
|
|
132
|
-
|
|
133
|
-
// attachment runtime is multi-use
|
|
134
|
-
const attachmentRuntime = useAttachmentRuntime(); // refers to the closest attachment runtime
|
|
135
|
-
const threadComposerAttachmentRuntime = useThreadComposerAttachmentRuntime();
|
|
136
|
-
const editComposerAttachmentRuntime = useEditComposerAttachmentRuntime();
|
|
137
|
-
const messageAttachmentRuntime = useMessageAttachmentRuntime();
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### Accessing runtime state
|
|
141
|
-
|
|
142
|
-
Most runtimes also expose a state through two methods `getState` and `subscribe`. The following helper hooks subscribe to the state, so that your component is updated when the state changes:
|
|
143
|
-
|
|
144
|
-
```tsx
|
|
145
|
-
useThreadList(); // get thread manager state
|
|
146
|
-
useThread(); // get thread state
|
|
147
|
-
useMessage(); // get message state
|
|
148
|
-
useMessagePart(); // get message part state
|
|
149
|
-
useComposer(); // get composer state
|
|
150
|
-
useThreadComposer(); // get thread composer state
|
|
151
|
-
useEditComposer(); // get edit composer state
|
|
152
|
-
useAttachment(); // get attachment state
|
|
153
|
-
useThreadComposerAttachment(); // get thread composer attachment state
|
|
154
|
-
useEditComposerAttachment(); // get edit composer attachment state
|
|
155
|
-
useMessageAttachment(); // get message attachment state
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
You might not want to subscribe to evey update. In that case, pass a callback selector to the hook:
|
|
159
|
-
|
|
160
|
-
```tsx
|
|
161
|
-
// only subscribe to role changes
|
|
162
|
-
const role = useMessage((state) => message.role);
|
|
163
|
-
```
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Why assistant-ui?
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
assistant-ui is a collection of powerful, modular primitives to build AI chat interfaces.
|
|
6
|
-
|
|
7
|
-
The modular approach means that you can incrementally adopt assistant-ui (e.g. use the backend connectors and bring your own components, or use the frontend compoents and bring your own backend).
|
|
8
|
-
You can also partially opt out of assistant-ui whenever you hit any limitation in the library.
|
|
9
|
-
|