@assistant-ui/mcp-docs-server 0.1.36 → 0.1.38

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 (109) hide show
  1. package/.docs/organized/code-examples/with-ai-sdk-v6.md +2 -2
  2. package/.docs/organized/code-examples/with-artifacts.md +2 -2
  3. package/.docs/organized/code-examples/with-chain-of-thought.md +2 -2
  4. package/.docs/organized/code-examples/with-cloud-standalone.md +2 -2
  5. package/.docs/organized/code-examples/with-cloud.md +2 -2
  6. package/.docs/organized/code-examples/with-custom-thread-list.md +2 -2
  7. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +5 -5
  8. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +5 -5
  9. package/.docs/organized/code-examples/with-eve.md +1 -1
  10. package/.docs/organized/code-examples/with-expo.md +6 -6
  11. package/.docs/organized/code-examples/with-ffmpeg.md +2 -2
  12. package/.docs/organized/code-examples/with-generative-ui.md +3 -3
  13. package/.docs/organized/code-examples/with-google-adk.md +1 -1
  14. package/.docs/organized/code-examples/with-image-generation.md +2 -2
  15. package/.docs/organized/code-examples/with-interactables.md +2 -2
  16. package/.docs/organized/code-examples/with-langchain.md +2 -2
  17. package/.docs/organized/code-examples/with-langgraph.md +2 -2
  18. package/.docs/organized/code-examples/with-livekit.md +5 -5
  19. package/.docs/organized/code-examples/with-mcp.md +17 -8
  20. package/.docs/organized/code-examples/with-pi.md +1 -1
  21. package/.docs/organized/code-examples/with-react-hook-form.md +2 -2
  22. package/.docs/organized/code-examples/with-react-ink-web.md +1 -1
  23. package/.docs/organized/code-examples/with-react-router.md +2 -2
  24. package/.docs/organized/code-examples/with-resumable-stream.md +3 -3
  25. package/.docs/organized/code-examples/with-tanstack.md +2 -2
  26. package/.docs/raw/docs/(docs)/cli.mdx +1 -1
  27. package/.docs/raw/docs/cloud/langgraph.mdx +1 -1
  28. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +3 -3
  29. package/.docs/raw/docs/integrations/index.mdx +1 -1
  30. package/.docs/raw/docs/integrations/observability/langsmith.mdx +2 -2
  31. package/.docs/raw/docs/migrations/react-langgraph-v0-7.mdx +2 -2
  32. package/.docs/raw/docs/primitives/thread-list.mdx +30 -6
  33. package/.docs/raw/docs/runtimes/a2a/quickstart.mdx +1 -1
  34. package/.docs/raw/docs/runtimes/ag-ui/quickstart.mdx +1 -1
  35. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +3 -1
  36. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +1 -1
  37. package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx +1 -1
  38. package/.docs/raw/docs/runtimes/langchain.mdx +2 -2
  39. package/.docs/raw/docs/runtimes/opencode/hooks.mdx +1 -1
  40. package/.docs/raw/docs/tools/defining-tools.mdx +5 -0
  41. package/.docs/raw/docs/tools/generative-ui.mdx +37 -0
  42. package/.docs/raw/docs/tools/mcp-apps.mdx +12 -3
  43. package/.docs/raw/docs/tools/mcp.mdx +5 -0
  44. package/.docs/raw/docs/tools/user-managed-mcp.mdx +17 -3
  45. package/.docs/raw/docs/ui/follow-up-suggestions.mdx +80 -0
  46. package/.docs/raw/docs/ui/model-selector.mdx +38 -5
  47. package/README.md +1 -1
  48. package/dist/constants.d.ts +2 -1
  49. package/dist/constants.d.ts.map +1 -1
  50. package/dist/constants.js +2 -1
  51. package/dist/constants.js.map +1 -1
  52. package/dist/index.d.ts.map +1 -1
  53. package/dist/index.js +12 -0
  54. package/dist/index.js.map +1 -1
  55. package/dist/prepare-docs/copy-raw.d.ts.map +1 -1
  56. package/dist/prepare-docs/copy-raw.js +0 -4
  57. package/dist/prepare-docs/copy-raw.js.map +1 -1
  58. package/dist/tools/docs.d.ts.map +1 -1
  59. package/dist/tools/docs.js +18 -6
  60. package/dist/tools/docs.js.map +1 -1
  61. package/dist/tools/examples.d.ts +3 -1
  62. package/dist/tools/examples.d.ts.map +1 -1
  63. package/dist/tools/examples.js +1 -1
  64. package/dist/tools/examples.js.map +1 -1
  65. package/dist/tools/resources.d.ts +7 -0
  66. package/dist/tools/resources.d.ts.map +1 -0
  67. package/dist/tools/resources.js +74 -0
  68. package/dist/tools/resources.js.map +1 -0
  69. package/dist/tools/search.d.ts +33 -0
  70. package/dist/tools/search.d.ts.map +1 -0
  71. package/dist/tools/search.js +39 -0
  72. package/dist/tools/search.js.map +1 -0
  73. package/dist/tools/tests/test-setup.d.ts.map +1 -1
  74. package/dist/tools/tests/test-setup.js +3 -1
  75. package/dist/tools/tests/test-setup.js.map +1 -1
  76. package/dist/utils/mdx.d.ts +2 -1
  77. package/dist/utils/mdx.d.ts.map +1 -1
  78. package/dist/utils/mdx.js +19 -2
  79. package/dist/utils/mdx.js.map +1 -1
  80. package/dist/utils/paths.d.ts +2 -1
  81. package/dist/utils/paths.d.ts.map +1 -1
  82. package/dist/utils/paths.js +18 -1
  83. package/dist/utils/paths.js.map +1 -1
  84. package/dist/utils/search.d.ts +10 -0
  85. package/dist/utils/search.d.ts.map +1 -0
  86. package/dist/utils/search.js +97 -0
  87. package/dist/utils/search.js.map +1 -0
  88. package/package.json +2 -2
  89. package/src/constants.ts +2 -0
  90. package/src/index.ts +14 -0
  91. package/src/prepare-docs/copy-raw.ts +0 -5
  92. package/src/tools/docs.ts +30 -4
  93. package/src/tools/examples.ts +4 -2
  94. package/src/tools/resources.ts +114 -0
  95. package/src/tools/search.ts +46 -0
  96. package/src/tools/tests/completions.test.ts +46 -0
  97. package/src/tools/tests/directory-size-cap.test.ts +50 -0
  98. package/src/tools/tests/mcp-protocol.test.ts +12 -1
  99. package/src/tools/tests/resources.test.ts +102 -0
  100. package/src/tools/tests/search.test.ts +37 -0
  101. package/src/tools/tests/test-setup.ts +2 -0
  102. package/src/utils/mdx.ts +21 -1
  103. package/src/utils/paths.ts +22 -0
  104. package/src/utils/search.ts +131 -0
  105. package/.docs/raw/blog/2024-07-29-hello/index.mdx +0 -64
  106. package/.docs/raw/blog/2024-09-11/index.mdx +0 -10
  107. package/.docs/raw/blog/2024-12-15/index.mdx +0 -10
  108. package/.docs/raw/blog/2025-01-31-changelog/index.mdx +0 -127
  109. package/.docs/raw/blog/2026-03-launch-week/index.mdx +0 -258
@@ -66,6 +66,28 @@ export async function getAvailablePaths(): Promise<string[]> {
66
66
  return paths.sort();
67
67
  }
68
68
 
69
+ export async function getAvailableDocFiles(): Promise<string[]> {
70
+ const files: string[] = [];
71
+
72
+ async function scanDirectory(dir: string, prefix = ""): Promise<void> {
73
+ const { directories, files: dirFiles } = await listDirContents(dir);
74
+
75
+ for (const file of dirFiles) {
76
+ if (extname(file) !== MDX_EXTENSION) continue;
77
+ const name = file.replace(MDX_EXTENSION, "");
78
+ files.push(prefix ? `${prefix}/${name}` : name);
79
+ }
80
+
81
+ for (const subdir of directories) {
82
+ const newPrefix = prefix ? `${prefix}/${subdir}` : subdir;
83
+ await scanDirectory(join(dir, subdir), newPrefix);
84
+ }
85
+ }
86
+
87
+ await scanDirectory(DOCS_PATH);
88
+ return files.sort();
89
+ }
90
+
69
91
  export function findNearestPaths(
70
92
  requestedPath: string,
71
93
  availablePaths: string[],
@@ -0,0 +1,131 @@
1
+ import { join } from "node:path";
2
+ import { DOCS_PATH, MDX_EXTENSION } from "../constants.js";
3
+ import { getAvailablePaths, pathExists } from "./paths.js";
4
+ import { readMDXFile } from "./mdx.js";
5
+
6
+ const SCORE_WEIGHTS = {
7
+ FULL_QUERY: { title: 10, path: 8, description: 5 },
8
+ TOKEN: { title: 3, path: 2, description: 1, content: 0.5 },
9
+ } as const;
10
+
11
+ interface IndexEntry {
12
+ path: string;
13
+ title: string;
14
+ description: string;
15
+ content: string;
16
+ excerpt: string;
17
+ }
18
+
19
+ export interface SearchResult {
20
+ path: string;
21
+ title: string;
22
+ snippet: string;
23
+ }
24
+
25
+ let indexPromise: Promise<IndexEntry[]> | null = null;
26
+
27
+ function deriveTitle(
28
+ path: string,
29
+ frontmatter: Record<string, unknown>,
30
+ ): string {
31
+ const fmTitle = frontmatter["title"];
32
+ if (typeof fmTitle === "string" && fmTitle.trim()) return fmTitle;
33
+ return path.split("/").pop() ?? path;
34
+ }
35
+
36
+ async function buildIndex(): Promise<IndexEntry[]> {
37
+ const paths = await getAvailablePaths();
38
+ const entries = await Promise.all(
39
+ paths.map(async (path): Promise<IndexEntry | null> => {
40
+ const filePath = join(DOCS_PATH, `${path}${MDX_EXTENSION}`);
41
+ if (!(await pathExists(filePath))) return null;
42
+ const mdx = await readMDXFile(filePath);
43
+ if (!mdx) return null;
44
+ const description = mdx.frontmatter["description"];
45
+ return {
46
+ path,
47
+ title: deriveTitle(path, mdx.frontmatter),
48
+ description: typeof description === "string" ? description : "",
49
+ content: mdx.content,
50
+ excerpt: mdx.excerpt ?? "",
51
+ };
52
+ }),
53
+ );
54
+ return entries.filter((entry): entry is IndexEntry => entry !== null);
55
+ }
56
+
57
+ function getIndex(): Promise<IndexEntry[]> {
58
+ if (!indexPromise) {
59
+ indexPromise = buildIndex().catch((error) => {
60
+ indexPromise = null;
61
+ throw error;
62
+ });
63
+ }
64
+ return indexPromise;
65
+ }
66
+
67
+ function makeSnippet(
68
+ content: string,
69
+ tokens: string[],
70
+ excerpt: string,
71
+ ): string {
72
+ const lower = content.toLowerCase();
73
+ for (const token of tokens) {
74
+ const idx = lower.indexOf(token);
75
+ if (idx >= 0) {
76
+ const start = Math.max(0, idx - 60);
77
+ const end = Math.min(content.length, idx + token.length + 100);
78
+ const slice = content.slice(start, end).replace(/\s+/g, " ").trim();
79
+ return `${start > 0 ? "…" : ""}${slice}${end < content.length ? "…" : ""}`;
80
+ }
81
+ }
82
+ if (excerpt) return excerpt.slice(0, 160);
83
+ const firstLine = content.split("\n").find((line) => line.trim());
84
+ return firstLine ? firstLine.replace(/^#+\s*/, "").slice(0, 160) : "";
85
+ }
86
+
87
+ function scoreEntry(
88
+ entry: IndexEntry,
89
+ query: string,
90
+ tokens: string[],
91
+ ): number {
92
+ const title = entry.title.toLowerCase();
93
+ const path = entry.path.toLowerCase();
94
+ const description = entry.description.toLowerCase();
95
+ const content = entry.content.toLowerCase();
96
+
97
+ let score = 0;
98
+ if (title.includes(query)) score += SCORE_WEIGHTS.FULL_QUERY.title;
99
+ if (path.includes(query)) score += SCORE_WEIGHTS.FULL_QUERY.path;
100
+ if (description.includes(query))
101
+ score += SCORE_WEIGHTS.FULL_QUERY.description;
102
+
103
+ for (const token of tokens) {
104
+ if (title.includes(token)) score += SCORE_WEIGHTS.TOKEN.title;
105
+ if (path.includes(token)) score += SCORE_WEIGHTS.TOKEN.path;
106
+ if (description.includes(token)) score += SCORE_WEIGHTS.TOKEN.description;
107
+ if (content.includes(token)) score += SCORE_WEIGHTS.TOKEN.content;
108
+ }
109
+ return score;
110
+ }
111
+
112
+ export async function searchDocs(
113
+ query: string,
114
+ limit = 10,
115
+ ): Promise<SearchResult[]> {
116
+ const normalized = query.trim().toLowerCase();
117
+ if (!normalized) return [];
118
+ const tokens = normalized.split(/\s+/).filter(Boolean);
119
+
120
+ const index = await getIndex();
121
+ return index
122
+ .map((entry) => ({ entry, score: scoreEntry(entry, normalized, tokens) }))
123
+ .filter((scored) => scored.score > 0)
124
+ .sort((a, b) => b.score - a.score)
125
+ .slice(0, limit)
126
+ .map(({ entry }) => ({
127
+ path: entry.path,
128
+ title: entry.title,
129
+ snippet: makeSnippet(entry.content, tokens, entry.excerpt),
130
+ }));
131
+ }
@@ -1,64 +0,0 @@
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/home/testimonials/testimonials";
10
- import { BLOG_TESTIMONIALS } from "@/components/home/testimonials/data";
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
-
38
- 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.
39
-
40
- <Image
41
- src={npmDownloads}
42
- alt="graph showing 1355 weekly npm downloads"
43
- width={381}
44
- height={94}
45
- className="mx-auto dark:hue-rotate-180 dark:invert"
46
- />
47
-
48
- I want to thank the following contributors who got the project to where it is today:
49
-
50
- - [@m13v](https://github.com/m13v) for contributing two examples and several how-to videos
51
- - [@okisdev](https://github.com/okisdev) for multiple bugfixes
52
- - [@Rajaniraiyn](https://github.com/Rajaniraiyn) for improving streaming support for REST APIs
53
- - @ccbkai for integrating Chrome's `window.ai` with assistant-ui
54
- - [@stingfeng](https://github.com/stingfeng/dify-extensions) for building a [Dify](https://dify.ai) integration
55
- - [@Ephibbs](https://github.com/Ephibbs/flowtoken) for building a Perplexity-style text streaming library ([Demo](https://assistant-ui-flowtoken-demo.vercel.app/))
56
- - … and so many others
57
-
58
- 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.
59
-
60
- 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!
61
-
62
- 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).
63
-
64
- 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).
@@ -1,10 +0,0 @@
1
- ---
2
- title: Build conversational AI agents with LangGraph and assistant-ui
3
- description: Announcing our collaboration with LangChain
4
- author: Harrison Chase
5
- date: 2024-09-11T12:00:00
6
- ---
7
-
8
- import { Redirect } from "./redirect";
9
-
10
- <Redirect />
@@ -1,10 +0,0 @@
1
- ---
2
- title: Announcing github-assistant
3
- description: github-assistant answers questions about your GitHub repositories.
4
- author: Amir Zohrenejad
5
- date: 2024-12-15T12:00:00
6
- ---
7
-
8
- import { Redirect } from "./redirect";
9
-
10
- <Redirect />
@@ -1,127 +0,0 @@
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
- <Callout emoji="🎉">
9
- This is the first edition of our changelog. We post these updates on a monthly
10
- basis. If you want more frequent updates about our new features, join our
11
- Discord where we have a `#changelog` channel that is updated on a daily basis.
12
- </Callout>
13
-
14
- ## Summary
15
-
16
- 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. 🎉
17
-
18
- ## shadcn/ui CLI support
19
-
20
- You can now install all components using the shadcn CLI, e.g.
21
-
22
- ```sh
23
- npx shadcn@latest add "https://r.assistant-ui.com/thread"
24
- ```
25
-
26
- We began a migration towards distributing our components as unstyled primitives and using the shadcn CLI to drop styles in your project.
27
-
28
- ## Styled components moved to @assistant-ui/react-ui
29
-
30
- All styled components (Thread, ThreadList, AssistantModal, makeMarkdownText, etc.) have been moved to a new package, `@assistant-ui/ui`.
31
-
32
- To ease the migration, we added a migration codemod:
33
-
34
- ```sh
35
- npx assistant-ui upgrade
36
- ```
37
-
38
- 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.
39
-
40
- ## Customizing the max-width of the Thread
41
-
42
- You can now customize the max-width of the thread via `--aui-thread-max-width` CSS variable.
43
-
44
- ## Thread Management
45
-
46
- 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.
47
-
48
- We shipped a `<ThreadList />` component which gives the user the UI to manage their threads.
49
-
50
- We also shipped a few hooks `useThreadListItem()`, `useThreadListItemRuntime()`, `useRemoteThreadListRuntime()` and `useCloudThreadListRuntime()`.
51
-
52
- ## Assistant Cloud
53
-
54
- We rolled out the new Assistant Cloud service to early users. This is a managed service for persistence, chat history, and thread management.
55
- Our runtimes are being upgraded to support Assistant Cloud natively by letting you pass a `cloud` object to the runtime hook.
56
-
57
- Keep an eye out for the public announcement of Assistant Cloud in a few days.
58
-
59
- ## Improvements to our LangGraph Integration
60
-
61
- - 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).
62
- - We now also support starting LangGraph runs without a user message (based on button input or other events).
63
- - Cancellation of runs is now supported via an `abortSignal` being passed to the LangGraph runtime adapter.
64
-
65
- ## Improvements to our AI SDK Integration
66
-
67
- We now give you access to annotations and data packets in the assistant message:
68
-
69
- ```tsx
70
- type AssistantMessage = {
71
- metadata: {
72
- unstable_annotations: [...],
73
- unstable_data: [...],
74
- }
75
- }
76
- ```
77
-
78
- ## AI SDK recommended for new projects
79
-
80
- For new projects, we recommend using the AI SDK integration. Previously, we recommended our custom SDK called `useEdgeRuntime`.
81
- 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.
82
-
83
- The edge runtime remains maintained and supported for existing projects.
84
-
85
- ## Misc
86
-
87
- - **Refactors & API Enhancements**:
88
-
89
- - Renamed `ModelConfig` to `ModelContext`.
90
- - Moved `switchToThread / switchToNewThread` under `runtime.threads`.
91
- - Deprecated `UIContentPart`.
92
- - `ToolCallContentPart.args` is now a `JSONObject`.
93
- - `MessagePrimitive.tools.Override` introduced.
94
- - Added `AppendMessage.sourceId` to provide better tracking.
95
- - Reverse order of threads in `useRemoteThreadListRuntime` for better visibility.
96
- - Added `threads.getById` and `threads.main` APIs.
97
- - Introduced `AssistantCloudThreadHistoryAdapter` to handle cloud-based thread history.
98
- - Auto-injection of history adapter in the local runtime.
99
- - Tool call `id` + `args` are now optional in `ThreadMessageLike`.
100
- - Added `ThreadListPrimitive.Root`.
101
- - `ComposerRuntime.clearAttachments` API added.
102
- - Improved input support for IME keyboards (e.g., Chinese, Japanese, Korean).
103
- - Moved repository to a new GitHub organization (`assistant-ui/assistant-ui`).
104
-
105
- - **External Store & Data Handling**:
106
-
107
- - Enhanced `ExternalStoreAdapter` to support metadata and attachments.
108
- - Renamed `getExternalStoreMessage` to `getExternalStoreMessages`.
109
- - Tool call `args` streaming support in our Python SDK.
110
-
111
- - **User Interface & Styling**:
112
-
113
- - Styled UI assistant message footer.
114
- - Improved attachment filename handling to prevent overflow.
115
- - Renamed CSS class to `aui-thread-welcome-suggestions`.
116
-
117
- - **Performance Optimizations**:
118
-
119
- - Memoized `MessageRepository.getMessages()` for better efficiency.
120
- - Marked `ChatAdapter` types as readonly.
121
-
122
- - **Bug Fixes**:
123
-
124
- - Fixed event subscription issues in thread lists.
125
- - Fixed import errors in React server environments.
126
- - Prevented excessive classes being included via TailwindCSS.
127
- - Fixed AI SDK annotation packet errors.
@@ -1,258 +0,0 @@
1
- ---
2
- title: "Launch Week: assistant-ui goes multi-platform"
3
- description: "React Native, terminal UIs, and more — assistant-ui is no longer just for the web."
4
- author: Simon Farshid
5
- date: 2026-03-09T12:00:00
6
- ---
7
-
8
- import Image from "next/image";
9
-
10
- This week, we're shipping one major feature every day. The theme: **assistant-ui everywhere**.
11
-
12
- For two years, assistant-ui has been the go-to library for building AI chat on the web. Starting this week, that changes. Same runtime, same adapters, same developer experience — now on every platform your users are.
13
-
14
- ---
15
-
16
- ## Day 1 — React Native
17
-
18
- **Build AI chat for iOS and Android.**
19
-
20
- We're launching `@assistant-ui/react-native` — native React Native bindings that bring the full assistant-ui experience to mobile.
21
-
22
- Everything you know from the web version carries over:
23
-
24
- - **Same runtime, same adapters.** Your `ChatModelAdapter`, AI SDK integration, or LangGraph setup works out of the box. No rewrites.
25
- - **Native primitives.** `View`, `Pressable`, `Text`, `FlatList` — not web views, not wrappers. Real native components.
26
- - **Full feature set.** Streaming, tool calls, message branching, thread management, attachments — all there.
27
-
28
- Get started in one command:
29
-
30
- ```sh
31
- npx assistant-ui@latest create --example with-expo my-chat-app
32
- ```
33
-
34
- Or add it to an existing Expo project:
35
-
36
- ```sh
37
- npx expo install @assistant-ui/react-native @assistant-ui/react-ai-sdk
38
- ```
39
-
40
- The API mirrors the web version closely. If you've built with `@assistant-ui/react`, you already know how to use it.
41
-
42
- [Read the docs →](/docs/react-native)
43
-
44
- ---
45
-
46
- ## Day 2 — React Ink (Terminal UI)
47
-
48
- **Build AI chat for the terminal.**
49
-
50
- We're launching `@assistant-ui/react-ink` — terminal UI bindings powered by [Ink](https://github.com/vadimdemedes/ink), the React renderer for CLIs.
51
-
52
- Build rich, interactive AI chat interfaces that run in any terminal:
53
-
54
- - **Composable primitives.** `ThreadRoot`, `ComposerInput`, `MessageContent` — the same component model, adapted for the terminal.
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.
57
- - **Tool calls with live feedback.** Built-in `ToolFallback` component shows spinners and formatted JSON output while tools execute.
58
- - **Shared backend.** Same adapters, same runtime core. Switch platforms without touching your backend code.
59
-
60
- Get started:
61
-
62
- ```sh
63
- npx assistant-ui@latest create --ink my-chat-app
64
- ```
65
-
66
- [Read the docs →](/docs/ink)
67
-
68
- ---
69
-
70
- ## Day 3 — Assistant Cloud Redesign
71
-
72
- **A new dashboard for managing your AI assistants at scale.**
73
-
74
- We've completely redesigned [Assistant Cloud](https://cloud.assistant-ui.com), the hosted backend for assistant-ui. Thread persistence, analytics, user management, and more, all in one place.
75
-
76
- <Image
77
- src="/images/cloud-dashboard.png"
78
- alt="Assistant Cloud dashboard showing analytics, threads, and run tracking"
79
- width={1200}
80
- height={675}
81
- className="mx-auto rounded-xl border drop-shadow"
82
- />
83
-
84
- ### What is Assistant Cloud?
85
-
86
- Assistant Cloud gives your assistant-ui app a production-ready backend. Drop in a few lines of config and get:
87
-
88
- - **Thread persistence.** Conversations survive page refreshes. Users can pick up where they left off.
89
- - **Thread list.** A ChatGPT-style sidebar, powered by your data — no extra backend work.
90
- - **Auto-generated titles.** Every thread gets a title, automatically.
91
- - **User authorization.** Works with Clerk, Auth0, Supabase, Firebase, or anonymous mode for demos.
92
-
93
- ### What's new in the redesign
94
-
95
- The new dashboard at `cloud.assistant-ui.com` is a full control center for your AI deployments:
96
-
97
- - **Analytics dashboard.** Total cost, token usage, run count, average duration — with model distribution charts and usage trends over time.
98
- - **Thread browser.** Search and inspect every conversation. View full message history, metadata, and timestamps.
99
- - **User analytics.** Per-user metrics: runs, threads created, tokens consumed, costs incurred.
100
- - **Run tracking.** Every LLM invocation logged with model, provider, cost, input/output tokens, cached tokens, reasoning tokens, and duration.
101
- - **Assistant configuration.** Create multiple assistants with different models, system prompts, temperature, and top-p settings.
102
- - **LLM provider management.** Configure OpenAI, Anthropic, Google, and other providers — with encrypted credential storage.
103
- - **API key management.** Generate, track, and revoke project API keys.
104
- - **Auth rules.** Configure JWT validation with JWKS URL, audience, and issuer settings.
105
-
106
- ### Getting started
107
-
108
- Add thread persistence to your existing assistant-ui app:
109
-
110
- ```sh
111
- npx assistant-ui@latest cloud
112
- ```
113
-
114
- Or integrate directly with the AI SDK using `useCloudChat`:
115
-
116
- ```sh
117
- npm install @assistant-ui/cloud-ai-sdk @ai-sdk/react ai
118
- ```
119
-
120
- Works with any assistant-ui runtime — AI SDK, LangGraph, or custom backends. No migration required.
121
-
122
- [Read the docs →](/docs/cloud)
123
-
124
- [Sign up here →](https://cloud.assistant-ui.com)
125
-
126
- ---
127
-
128
- ## Day 4 — <span className="shimmer">tw-shimmer</span>
129
-
130
- **Beautiful shimmer effects for Tailwind CSS v4. Zero dependencies, pure CSS.**
131
-
132
- We're launching [`tw-shimmer`](https://www.npmjs.com/package/tw-shimmer) — a Tailwind CSS v4 plugin that adds polished shimmer animations for both text and skeleton loaders. No JavaScript runtime, no dependencies — just add a class and go.
133
-
134
- - **Sine-eased gradients.** 17 carefully calculated gradient stops following a sine ease-in-out curve. No banding, no harsh edges — just smooth, organic highlights.
135
- - **OKLCH color mixing.** Perceptually uniform color transitions that look great in any color scheme.
136
- - **Text + Background.** Shimmer text labels or skeleton placeholders with the same API.
137
- - **Auto-sizing.** CSS container queries automatically derive speed and spread from container width — no JavaScript measurement needed.
138
- - **Fully customizable.** Speed, spread, angle, color, duration, and repeat delay — all controllable via Tailwind utilities or CSS variables.
139
-
140
- Install and add to your CSS:
141
-
142
- ```sh
143
- npm install tw-shimmer
144
- ```
145
-
146
- ```css title="app/globals.css"
147
- @import "tailwindcss";
148
- @import "tw-shimmer";
149
- ```
150
-
151
- Then use it:
152
-
153
- ```html
154
- <!-- Text shimmer -->
155
- <span class="shimmer text-foreground/60">Loading...</span>
156
-
157
- <!-- Skeleton loader -->
158
- <div class="shimmer-container flex gap-3">
159
- <div class="shimmer-bg bg-muted size-12 rounded-full" />
160
- <div class="flex-1 space-y-2">
161
- <div class="shimmer-bg bg-muted h-4 w-1/4 rounded" />
162
- <div class="shimmer-bg bg-muted h-4 w-full rounded" />
163
- </div>
164
- </div>
165
- ```
166
-
167
- [See the interactive demo →](/tw-shimmer)
168
-
169
- [Read the docs →](/docs/utilities/tw-shimmer)
170
-
171
- ---
172
-
173
- ## Day 5 — Cloud AI SDK
174
-
175
- **Add cloud persistence to any AI SDK app. Just change your import.**
176
-
177
- We're launching `@assistant-ui/cloud-ai-sdk` — a standalone package that adds full thread persistence and management to any Vercel AI SDK application with a single hook change. No providers, no context, no runtime objects.
178
-
179
- ### Before
180
-
181
- ```tsx
182
- import { useChat } from "@ai-sdk/react";
183
-
184
- const { messages, sendMessage } = useChat();
185
- ```
186
-
187
- ### After
188
-
189
- ```tsx
190
- import { useCloudChat } from "@assistant-ui/cloud-ai-sdk";
191
-
192
- const { messages, sendMessage, threads } = useCloudChat();
193
- ```
194
-
195
- That's it. One import change gives you:
196
-
197
- - **Automatic thread creation.** Threads are created on the first message — no manual setup.
198
- - **Full message persistence.** Conversations survive page refreshes. Users pick up where they left off.
199
- - **Built-in thread list.** `threads.threads` gives you a ChatGPT-style thread sidebar, sorted by recency.
200
- - **Auto-generated titles.** Every thread gets an AI-generated title after the first response.
201
- - **Zero config.** Set one env var (`NEXT_PUBLIC_ASSISTANT_BASE_URL`) and you're done.
202
- - **Works with any UI.** Keep your existing components — `useCloudChat` returns the same interface as `useChat`.
203
-
204
- The package exports just two hooks (`useCloudChat` and `useThreads`) and four types. It works independently of assistant-ui's runtime and primitives — any React UI works.
205
-
206
- Get started:
207
-
208
- ```sh
209
- npm install @assistant-ui/cloud-ai-sdk @ai-sdk/react ai
210
- ```
211
-
212
- [Read the docs →](/docs/cloud/ai-sdk)
213
-
214
- [See the launch page →](/cloud-ai-sdk)
215
-
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
-
248
- ## One runtime, every platform
249
-
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.
251
-
252
- ```
253
- @assistant-ui/react → Web (React + Radix UI)
254
- @assistant-ui/react-native → Mobile (React Native)
255
- @assistant-ui/react-ink → Terminal (Ink)
256
- ```
257
-
258
- We'll be updating this post throughout the week as we ship new announcements. Follow [@assistant-ui](https://x.com/assistantui) for daily updates or join our [Discord](https://discord.gg/S9dwgCNEFs) for early access.