@assistant-ui/mcp-docs-server 0.1.29 → 0.1.31

package/.docs/raw/docs/cloud/ai-sdk.mdx

@@ -39,24 +39,63 @@ Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-
 
 ### Configure Environment Variables
 
+<PlatformTabs>
+<Tab value="React">
+
 ```bash title=".env.local"
 NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
 ```
 
+</Tab>
+<Tab value="React Native">
+
+```bash title=".env"
+EXPO_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```bash title=".env"
+ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
+```
+
+</Tab>
+</PlatformTabs>
+
 </Step>
 
 <Step>
 
 ### Install Dependencies
 
+<PlatformTabs>
+<Tab value="React">
+
 <InstallCommand npm={["@assistant-ui/cloud-ai-sdk", "@ai-sdk/react", "ai"]} />
 
+</Tab>
+<Tab value="React Native">
+
+<InstallCommand expo={["@assistant-ui/cloud-ai-sdk", "@ai-sdk/react", "ai", "assistant-cloud"]} />
+
+</Tab>
+<Tab value="React Ink">
+
+<InstallCommand npm={["@assistant-ui/cloud-ai-sdk", "@ai-sdk/react", "ai", "assistant-cloud", "ink", "react"]} />
+
+</Tab>
+</PlatformTabs>
+
 </Step>
 
 <Step>
 
 ### Integrate
 
+<PlatformTabs>
+<Tab value="React">
+
 ```tsx title="app/page.tsx"
 "use client";
 
@@ -106,6 +145,131 @@ export default function Chat() {
 }
 ```
 
+</Tab>
+<Tab value="React Native">
+
+```tsx title="app/index.tsx"
+import { useMemo, useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import { AssistantCloud } from "assistant-cloud";
+import { useCloudChat } from "@assistant-ui/cloud-ai-sdk";
+
+async function getAssistantToken() {
+  // Return a user token from your auth provider.
+  return "...";
+}
+
+export default function Chat() {
+  const cloud = useMemo(
+    () =>
+      new AssistantCloud({
+        baseUrl: process.env.EXPO_PUBLIC_ASSISTANT_BASE_URL!,
+        authToken: getAssistantToken,
+      }),
+    [],
+  );
+  const { messages, sendMessage, threads } = useCloudChat({ cloud });
+
+  const [input, setInput] = useState("");
+  const handleSubmit = () => {
+    if (!input.trim()) return;
+    sendMessage({ text: input });
+    setInput("");
+  };
+
+  return (
+    <View>
+      <View>
+        {threads.threads.map((t) => (
+          <Pressable key={t.id} onPress={() => threads.selectThread(t.id)}>
+            <Text>{t.title || "New conversation"}</Text>
+          </Pressable>
+        ))}
+        <Pressable onPress={() => threads.selectThread(null)}>
+          <Text>New chat</Text>
+        </Pressable>
+      </View>
+
+      <View>
+        {messages.map((m) => (
+          <Text key={m.id}>
+            {m.parts.map((p) => p.type === "text" && p.text)}
+          </Text>
+        ))}
+      </View>
+
+      <TextInput value={input} onChangeText={setInput} />
+      <Pressable onPress={handleSubmit}>
+        <Text>Send</Text>
+      </Pressable>
+    </View>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```tsx title="app.tsx"
+import { useMemo, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { AssistantCloud } from "assistant-cloud";
+import { useCloudChat } from "@assistant-ui/cloud-ai-sdk";
+
+async function getAssistantToken() {
+  // Return a user token from your auth provider.
+  return "...";
+}
+
+export function Chat() {
+  const cloud = useMemo(
+    () =>
+      new AssistantCloud({
+        baseUrl: process.env.ASSISTANT_BASE_URL!,
+        authToken: getAssistantToken,
+      }),
+    [],
+  );
+  const { messages, sendMessage, threads } = useCloudChat({ cloud });
+
+  const [input, setInput] = useState("");
+  const handleSubmit = () => {
+    if (!input.trim()) return;
+    sendMessage({ text: input });
+    setInput("");
+  };
+
+  useInput((value, key) => {
+    if (key.return) handleSubmit();
+    else if (key.tab) threads.selectThread(null);
+    else if (key.backspace || key.delete) setInput((text) => text.slice(0, -1));
+    else if (value) setInput((text) => text + value);
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>Threads</Text>
+      {threads.threads.map((t) => (
+        <Text key={t.id}>{t.title || "New conversation"}</Text>
+      ))}
+      <Text dimColor>Press tab for a new chat.</Text>
+
+      {messages.map((m) => (
+        <Text key={m.id}>
+          {m.parts.map((p) => p.type === "text" && p.text)}
+        </Text>
+      ))}
+
+      <Text>{"> "}{input}</Text>
+      <Text dimColor>Press enter to send.</Text>
+    </Box>
+  );
+}
+```
+
+</Tab>
+</PlatformTabs>
+
 </Step>
 
 </Steps>
@@ -229,7 +393,7 @@ export async function POST(req: Request) {
   const { messages } = await req.json();
 
   const result = streamText({
-    model: openai("gpt-4o-mini"),
+    model: openai("gpt-5.4-mini"),
     messages,
   });
 
@@ -297,7 +461,7 @@ export async function POST(req: Request) {
   const samplingCalls: Record<string, SamplingCallData[]> = {};
 
   const result = streamText({
-    model: openai("gpt-4o"),
+    model: openai("gpt-5.4-mini"),
     messages,
     tools: {
       delegate_to_gemini: tool({
@@ -356,7 +520,10 @@ export async function POST(req: Request) {
 
 ## Authentication
 
-The example above uses anonymous mode (browser session-based user ID) via the env var. For production apps with user accounts, pass an explicit cloud instance:
+The React example above uses anonymous mode for quick demos. For production apps with user accounts, pass an explicit cloud instance with a token from your auth provider:
+
+<PlatformTabs>
+<Tab value="React">
 
 ```tsx
 import { useMemo } from "react";
@@ -377,6 +544,57 @@ function Chat() {
 }
 ```
 
+</Tab>
+<Tab value="React Native">
+
+```tsx
+import { useMemo } from "react";
+import { AssistantCloud } from "assistant-cloud";
+import { useCloudChat } from "@assistant-ui/cloud-ai-sdk";
+
+async function getAssistantToken() {
+  // Return a user token from your native auth provider.
+  return "...";
+}
+
+function Chat() {
+  const cloud = useMemo(() => new AssistantCloud({
+    baseUrl: process.env.EXPO_PUBLIC_ASSISTANT_BASE_URL!,
+    authToken: getAssistantToken,
+  }), []);
+
+  const { messages, sendMessage, threads } = useCloudChat({ cloud });
+  // ...
+}
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```tsx
+import { useMemo } from "react";
+import { AssistantCloud } from "assistant-cloud";
+import { useCloudChat } from "@assistant-ui/cloud-ai-sdk";
+
+async function getAssistantToken() {
+  // Return a user token from your CLI auth flow.
+  return "...";
+}
+
+function Chat() {
+  const cloud = useMemo(() => new AssistantCloud({
+    baseUrl: process.env.ASSISTANT_BASE_URL!,
+    authToken: getAssistantToken,
+  }), []);
+
+  const { messages, sendMessage, threads } = useCloudChat({ cloud });
+  // ...
+}
+```
+
+</Tab>
+</PlatformTabs>
+
 See the [Cloud Authorization](/docs/cloud/authorization) guide for other auth providers.
 
 ## Next Steps

package/.docs/raw/docs/cloud/langgraph.mdx

@@ -36,6 +36,9 @@ Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-
 
 Add the following environment variables to your project:
 
+<PlatformTabs>
+<Tab value="React">
+
 ```bash title=".env.local"
 # Frontend API URL from your cloud project settings
 NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
@@ -44,6 +47,31 @@ NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
 ASSISTANT_API_KEY=your-api-key-here
 ```
 
+</Tab>
+<Tab value="React Native">
+
+```bash title=".env"
+# Client API URL from your cloud project settings
+EXPO_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
+
+# API key for server-side operations; do not ship this in your app bundle
+ASSISTANT_API_KEY=your-api-key-here
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```bash title=".env"
+# Client API URL from your cloud project settings
+ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
+
+# API key for server-side operations; do not ship this in your CLI bundle
+ASSISTANT_API_KEY=your-api-key-here
+```
+
+</Tab>
+</PlatformTabs>
+
 </Step>
 
 <Step>
@@ -52,8 +80,24 @@ ASSISTANT_API_KEY=your-api-key-here
 
 Install the required packages:
 
+<PlatformTabs>
+<Tab value="React">
+
 <InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-langgraph"]} />
 
+</Tab>
+<Tab value="React Native">
+
+<InstallCommand expo={["@assistant-ui/react-native", "@assistant-ui/react-langgraph", "assistant-cloud"]} />
+
+</Tab>
+<Tab value="React Ink">
+
+<InstallCommand npm={["@assistant-ui/react-ink", "@assistant-ui/react-langgraph", "assistant-cloud", "ink", "react"]} />
+
+</Tab>
+</PlatformTabs>
+
 </Step>
 
 <Step>
@@ -62,6 +106,9 @@ Install the required packages:
 
 Create a runtime provider that integrates LangGraph with assistant-cloud. Choose between anonymous mode for demos/prototypes or authenticated mode for production:
 
+<PlatformTabs>
+<Tab value="React">
+
 <Tabs items={["Anonymous", "Authenticated (Clerk)"]}>
 
 <Tab value="Anonymous">
@@ -204,6 +251,135 @@ export function MyRuntimeProvider({
 
 </Tabs>
 
+</Tab>
+<Tab value="React Native">
+
+```tsx title="components/runtime-provider.tsx"
+import { useMemo, type ReactNode } from "react";
+import { AssistantRuntimeProvider } from "@assistant-ui/react-native";
+import { AssistantCloud } from "assistant-cloud";
+import {
+  type LangChainMessage,
+  useLangGraphRuntime,
+} from "@assistant-ui/react-langgraph";
+import { createThread, deleteThread, getThreadState, sendMessage } from "@/lib/chatApi";
+
+async function getAssistantToken() {
+  // Return a user token from your auth provider.
+  return "...";
+}
+
+export function MyRuntimeProvider({ children }: { children: ReactNode }) {
+  const cloud = useMemo(
+    () =>
+      new AssistantCloud({
+        baseUrl: process.env.EXPO_PUBLIC_ASSISTANT_BASE_URL!,
+        authToken: getAssistantToken,
+      }),
+    [],
+  );
+
+  const runtime = useLangGraphRuntime({
+    cloud,
+    stream: async function* (messages, { initialize }) {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
+    create: async () => {
+      const { thread_id } = await createThread();
+      return { externalId: thread_id };
+    },
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? [],
+      };
+    },
+    delete: async (externalId) => {
+      await deleteThread(externalId);
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Ink">
+
+```tsx title="runtime-provider.tsx"
+import { useMemo, type ReactNode } from "react";
+import { AssistantRuntimeProvider } from "@assistant-ui/react-ink";
+import { AssistantCloud } from "assistant-cloud";
+import {
+  type LangChainMessage,
+  useLangGraphRuntime,
+} from "@assistant-ui/react-langgraph";
+import { createThread, deleteThread, getThreadState, sendMessage } from "./chat-api.js";
+
+async function getAssistantToken() {
+  // Return a user token from your auth provider.
+  return "...";
+}
+
+export function MyRuntimeProvider({ children }: { children: ReactNode }) {
+  const cloud = useMemo(
+    () =>
+      new AssistantCloud({
+        baseUrl: process.env.ASSISTANT_BASE_URL!,
+        authToken: getAssistantToken,
+      }),
+    [],
+  );
+
+  const runtime = useLangGraphRuntime({
+    cloud,
+    stream: async function* (messages, { initialize }) {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
+    create: async () => {
+      const { thread_id } = await createThread();
+      return { externalId: thread_id };
+    },
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? [],
+      };
+    },
+    delete: async (externalId) => {
+      await deleteThread(externalId);
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+</Tab>
+</PlatformTabs>
+
 <Callout type="info">
   The `useLangGraphRuntime` hook accepts `cloud`, `create`, `load`, and `delete` parameters for simplified thread management. The runtime handles the thread lifecycle internally.
 
@@ -220,6 +396,9 @@ export function MyRuntimeProvider({
 
 Install the thread list component:
 
+<PlatformTabs>
+<Tab value="React">
+
 <Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
   <Tab>
 
@@ -260,17 +439,110 @@ export default function ChatPage() {
 }
 ```
 
+</Tab>
+<Tab value="React Native">
+
+Follow the [React Native setup](/docs/react-native) for `Thread`, then compose it with the native thread-list primitives:
+
+```tsx title="app/chat.tsx"
+import { Text, View } from "react-native";
+import {
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+} from "@assistant-ui/react-native";
+import { Thread } from "@/components/assistant-ui/thread";
+
+function ThreadList() {
+  return (
+    <ThreadListPrimitive.Root>
+      <ThreadListPrimitive.New>
+        <Text>New chat</Text>
+      </ThreadListPrimitive.New>
+      <ThreadListPrimitive.Items
+        renderItem={({ threadId }) => (
+          <ThreadListItemPrimitive.Root key={threadId}>
+            <ThreadListItemPrimitive.Trigger>
+              <ThreadListItemPrimitive.Title fallback="New conversation" />
+            </ThreadListItemPrimitive.Trigger>
+          </ThreadListItemPrimitive.Root>
+        )}
+      />
+    </ThreadListPrimitive.Root>
+  );
+}
+
+export default function ChatPage() {
+  return (
+    <MyRuntimeProvider>
+      <View style={{ flex: 1 }}>
+        <ThreadList />
+        <Thread />
+      </View>
+    </MyRuntimeProvider>
+  );
+}
+```
+
+</Tab>
+<Tab value="React Ink">
+
+Follow the [Ink setup](/docs/ink) for `Thread`, then compose it with the terminal thread-list primitives:
+
+```tsx title="chat.tsx"
+import { Box, Text } from "ink";
+import {
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+} from "@assistant-ui/react-ink";
+import { Thread } from "./components/thread.js";
+
+function ThreadList() {
+  return (
+    <ThreadListPrimitive.Root>
+      <ThreadListPrimitive.New>
+        <Text color="green">[New chat]</Text>
+      </ThreadListPrimitive.New>
+      <ThreadListPrimitive.Items
+        renderItem={({ threadId }) => (
+          <ThreadListItemPrimitive.Root key={threadId}>
+            <ThreadListItemPrimitive.Trigger>
+              <ThreadListItemPrimitive.Title fallback="New conversation" />
+            </ThreadListItemPrimitive.Trigger>
+          </ThreadListItemPrimitive.Root>
+        )}
+      />
+    </ThreadListPrimitive.Root>
+  );
+}
+
+export function ChatPage() {
+  return (
+    <MyRuntimeProvider>
+      <Box flexDirection="column">
+        <ThreadList />
+        <Thread />
+      </Box>
+    </MyRuntimeProvider>
+  );
+}
+```
+
+</Tab>
+</PlatformTabs>
+
 </Step>
 
 </Steps>
 
 ## Authentication
 
-The examples above show two authentication modes:
+The React runtime-provider tab shows two authentication modes:
 
-- **Anonymous**: Suitable for demos and prototypes. Creates a browser session-based user ID.
+- **Anonymous**: Suitable for React demos and prototypes. Creates a browser session-based user ID.
 - **Authenticated**: For production use with user accounts. The authenticated example uses [Clerk](https://clerk.com/), but you can integrate any auth provider.
 
+The React Native and React Ink tabs use explicit `authToken` callbacks, which is the recommended shape outside browser-session-based demos.
+
 For other authentication providers or custom implementations, see the [Cloud Authorization](/docs/cloud/authorization) guide.
 
 ## Next Steps