@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.
Files changed (40) hide show
  1. package/.docs/organized/code-examples/with-ai-sdk-v5.md +24 -15
  2. package/.docs/organized/code-examples/with-assistant-transport.md +1599 -0
  3. package/.docs/organized/code-examples/with-cloud.md +12 -10
  4. package/.docs/organized/code-examples/with-external-store.md +10 -8
  5. package/.docs/organized/code-examples/with-ffmpeg.md +17 -14
  6. package/.docs/organized/code-examples/with-langgraph.md +83 -47
  7. package/.docs/organized/code-examples/with-parent-id-grouping.md +10 -8
  8. package/.docs/organized/code-examples/with-react-hook-form.md +17 -14
  9. package/.docs/raw/docs/api-reference/integrations/react-data-stream.mdx +194 -0
  10. package/.docs/raw/docs/api-reference/overview.mdx +6 -0
  11. package/.docs/raw/docs/api-reference/primitives/Composer.mdx +31 -0
  12. package/.docs/raw/docs/api-reference/primitives/Message.mdx +108 -3
  13. package/.docs/raw/docs/api-reference/primitives/Thread.mdx +59 -0
  14. package/.docs/raw/docs/api-reference/primitives/ThreadList.mdx +128 -0
  15. package/.docs/raw/docs/api-reference/primitives/ThreadListItem.mdx +160 -0
  16. package/.docs/raw/docs/api-reference/runtimes/AssistantRuntime.mdx +0 -11
  17. package/.docs/raw/docs/api-reference/runtimes/ComposerRuntime.mdx +3 -3
  18. package/.docs/raw/docs/copilots/assistant-frame.mdx +399 -0
  19. package/.docs/raw/docs/devtools.mdx +51 -0
  20. package/.docs/raw/docs/getting-started.mdx +20 -19
  21. package/.docs/raw/docs/guides/Attachments.mdx +6 -13
  22. package/.docs/raw/docs/guides/Tools.mdx +56 -13
  23. package/.docs/raw/docs/guides/context-api.mdx +574 -0
  24. package/.docs/raw/docs/migrations/v0-12.mdx +125 -0
  25. package/.docs/raw/docs/runtimes/ai-sdk/use-chat.mdx +2 -2
  26. package/.docs/raw/docs/runtimes/custom/local.mdx +17 -4
  27. package/.docs/raw/docs/runtimes/data-stream.mdx +287 -0
  28. package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx +6 -5
  29. package/.docs/raw/docs/runtimes/mastra/overview.mdx +3 -3
  30. package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx +13 -13
  31. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +5 -0
  32. package/.docs/raw/docs/ui/ThreadList.mdx +54 -16
  33. package/dist/{chunk-L4K23SWI.js → chunk-NVNFQ5ZO.js} +4 -1
  34. package/dist/index.js +1 -1
  35. package/dist/prepare-docs/prepare.js +1 -1
  36. package/dist/stdio.js +1 -1
  37. package/package.json +7 -7
  38. package/.docs/raw/docs/concepts/architecture.mdx +0 -19
  39. package/.docs/raw/docs/concepts/runtime-layer.mdx +0 -163
  40. 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 `thread-list`
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
- ```tsx title="/app/page.tsx" {1,5-6}
33
- import { Thread } from "@/components/assistant-ui/thread";
34
- import { ThreadList } from "@/components/assistant-ui/thread-list";
35
-
36
- export default function Home() {
37
- return (
38
- <div className="grid h-full grid-cols-[200px_1fr]">
39
- <ThreadList />
40
- <Thread />
41
- </div>
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-L4K23SWI.js';
1
+ export { runServer, server } from './chunk-NVNFQ5ZO.js';
@@ -153,7 +153,7 @@ _Note: Additional files truncated due to size limits_
153
153
  `;
154
154
  break;
155
155
  }
156
- markdown += `## ${file.path}
156
+ markdown += `## ${file.path.replace(/\\/g, "/")}
157
157
 
158
158
  `;
159
159
  markdown += `\`\`\`${getFileType(file.path)}
package/dist/stdio.js CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- import { runServer } from './chunk-L4K23SWI.js';
2
+ import { runServer } from './chunk-NVNFQ5ZO.js';
3
3
 
4
4
  // src/stdio.ts
5
5
  void runServer().catch((error) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@assistant-ui/mcp-docs-server",
3
- "version": "0.1.7",
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.17.3",
12
- "zod": "^4.0.17",
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.3.0",
17
+ "@types/node": "^24.5.2",
18
18
  "tsup": "^8.5.0",
19
- "tsx": "^4.20.4",
19
+ "tsx": "^4.20.6",
20
20
  "typescript": "^5.9.2",
21
21
  "vitest": "^3.2.4",
22
- "eslint": "^9.33.0"
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": "rm -rf dist .docs",
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
-