@assistant-ui/mcp-docs-server 0.1.23 → 0.1.25

package/.docs/raw/docs/react-native/index.mdx

@@ -3,159 +3,117 @@ title: Getting Started
 description: Build AI chat interfaces for iOS and Android with @assistant-ui/react-native.
 ---
 
-## Overview
+## Quick Start
 
-`@assistant-ui/react-native` brings assistant-ui to React Native. It provides composable primitives, reactive hooks, and a local runtime — the same layered architecture as the web package, built on native components (`View`, `TextInput`, `FlatList`, `Pressable`).
+The fastest way to get started with assistant-ui for React Native.
 
-**Key features:**
+<Steps>
+  <Step>
 
-- **Primitives** — `Thread`, `Composer`, `Message`, `ThreadList`, `ThreadListItem`, `ChainOfThought`, `Suggestion`, `ActionBar`, `BranchPicker`, `Attachment` components that compose with standard React Native props
-- **Reactive state** — `useAuiState` with selector support for fine-grained re-renders
-- **Local runtime** — `useLocalRuntime` with pluggable `ChatModelAdapter` for any LLM API
-- **Thread management** — Multi-thread support with create, switch, rename, delete
-- **Tool system** — `useAssistantTool`, `makeAssistantTool` for registering tools with custom UI renderers
-- **Attachments** — Image and file attachments with `useComposerAddAttachment` and attachment primitives
+### Create a new project
 
-<Callout type="info">
-  `@assistant-ui/react-native` shares its runtime core with `@assistant-ui/react` via `@assistant-ui/core`. The type system, state management, and runtime logic are identical — only the UI layer differs.
-</Callout>
+```sh
+npx assistant-ui@latest create --example with-expo my-chat-app
+cd my-chat-app
+```
+
+  </Step>
+  <Step>
 
-## Getting Started
+### Configure API endpoint
 
-This guide uses [Expo](https://expo.dev) with the OpenAI API. You can substitute any LLM provider.
+Create a `.env` file pointing to your chat API:
 
-<Steps>
+```
+EXPO_PUBLIC_CHAT_ENDPOINT_URL="http://localhost:3000/api/chat"
+```
+
+  </Step>
   <Step>
 
-### Create an Expo project
+### Start the app
 
 ```sh
-npx create-expo-app@latest my-chat-app
-cd my-chat-app
+npx expo start
 ```
 
   </Step>
+</Steps>
+
+## Manual Setup
+
+If you prefer to add assistant-ui to an existing Expo project, follow these steps.
+
+<Steps>
   <Step>
 
 ### Install dependencies
 
 ```sh
-npx expo install @assistant-ui/react-native
+npx expo install @assistant-ui/react-native @assistant-ui/react-ai-sdk
 ```
 
   </Step>
   <Step>
 
-### Create a ChatModelAdapter
+### Setup Backend Endpoint
 
-The adapter connects your LLM API to the runtime. Here's an example for the OpenAI chat completions API with streaming:
+Create a backend API route using the Vercel AI SDK. This is the same endpoint you'd use with `@assistant-ui/react` on the web:
 
-```tsx title="adapters/openai-chat-adapter.ts"
-import type {
-  ChatModelAdapter,
-  ChatModelRunResult,
-} from "@assistant-ui/react-native";
+<Tabs groupId="provider" items={["OpenAI", "Anthropic", "Google"]}>
+
+```ts title="app/api/chat/route.ts" tab="OpenAI"
+import { openai } from "@ai-sdk/openai";
+import { convertToModelMessages, streamText } from "ai";
 
-type OpenAIModelConfig = {
-  apiKey: string;
-  model?: string;
-  baseURL?: string;
-  fetch?: typeof globalThis.fetch;
-};
-
-export function createOpenAIChatModelAdapter(
-  config: OpenAIModelConfig,
-): ChatModelAdapter {
-  const {
-    apiKey,
-    model = "gpt-4o-mini",
-    baseURL = "https://api.openai.com/v1",
-    fetch: customFetch = globalThis.fetch,
-  } = config;
-
-  return {
-    async *run({ messages, abortSignal }) {
-      const openAIMessages = messages
-        .filter((m) => m.role !== "system")
-        .map((m) => ({
-          role: m.role as "user" | "assistant",
-          content: m.content
-            .filter((p) => p.type === "text")
-            .map((p) => ("text" in p ? p.text : ""))
-            .join("\n"),
-        }));
-
-      const response = await customFetch(
-        `${baseURL}/chat/completions`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${apiKey}`,
-          },
-          body: JSON.stringify({
-            model,
-            messages: openAIMessages,
-            stream: true,
-          }),
-          signal: abortSignal,
-        },
-      );
-
-      if (!response.ok) {
-        const body = await response.text().catch(() => "");
-        throw new Error(
-          `OpenAI API error: ${response.status} ${body}`,
-        );
-      }
-
-      const reader = response.body?.getReader();
-      if (!reader) {
-        const json = await response.json();
-        const text = json.choices?.[0]?.message?.content ?? "";
-        yield {
-          content: [{ type: "text" as const, text }],
-        } satisfies ChatModelRunResult;
-        return;
-      }
-
-      const decoder = new TextDecoder();
-      let fullText = "";
-
-      try {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          const chunk = decoder.decode(value, { stream: true });
-          for (const line of chunk.split("\n")) {
-            if (!line.startsWith("data: ")) continue;
-            const data = line.slice(6);
-            if (data === "[DONE]") continue;
-            try {
-              const parsed = JSON.parse(data);
-              const content =
-                parsed.choices?.[0]?.delta?.content ?? "";
-              fullText += content;
-              yield {
-                content: [
-                  { type: "text" as const, text: fullText },
-                ],
-              } satisfies ChatModelRunResult;
-            } catch {
-              // skip invalid JSON
-            }
-          }
-        }
-      } finally {
-        reader.releaseLock();
-      }
-    },
-  };
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: openai("gpt-4o-mini"),
+    messages: await convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="app/api/chat/route.ts" tab="Anthropic"
+import { anthropic } from "@ai-sdk/anthropic";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: anthropic("claude-sonnet-4-20250514"),
+    messages: await convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="app/api/chat/route.ts" tab="Google"
+import { google } from "@ai-sdk/google";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: google("gemini-2.0-flash"),
+    messages: await convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
 }
 ```
 
-<Callout type="tip">
-  On Expo, import `fetch` from `expo/fetch` for streaming support and pass it as the `fetch` option.
+</Tabs>
+
+<Callout type="info">
+  This is the same backend you'd use with `@assistant-ui/react` on the web. If you already have an API route, you can reuse it as-is.
 </Callout>
 
   </Step>
@@ -164,36 +122,29 @@ export function createOpenAIChatModelAdapter(
 ### Set up the runtime
 
 ```tsx title="hooks/use-app-runtime.ts"
-import { useMemo } from "react";
-import { fetch } from "expo/fetch";
-import { useLocalRuntime } from "@assistant-ui/react-native";
-import { createOpenAIChatModelAdapter } from "@/adapters/openai-chat-adapter";
+import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
 
-export function useAppRuntime() {
-  const chatModel = useMemo(
-    () =>
-      createOpenAIChatModelAdapter({
-        apiKey: process.env.EXPO_PUBLIC_OPENAI_API_KEY ?? "",
-        model: "gpt-4o-mini",
-        fetch,
-      }),
-    [],
-  );
+const API_URL = process.env.EXPO_PUBLIC_API_URL ?? "http://localhost:3000";
 
-  return useLocalRuntime(chatModel);
+export function useAppRuntime() {
+  return useChatRuntime({
+    transport: new AssistantChatTransport({
+      api: `${API_URL}/api/chat`,
+    }),
+  });
 }
 ```
 
   </Step>
   <Step>
 
-### Build the UI
+### Use it in your app
 
-Wrap your app with `AssistantProvider` — thread and composer contexts are set up automatically:
+Wrap your app with `AssistantRuntimeProvider` and build your chat UI:
 
 ```tsx title="app/index.tsx"
 import {
-  AssistantProvider,
+  AssistantRuntimeProvider,
   useAuiState,
   useAui,
 } from "@assistant-ui/react-native";
@@ -304,9 +255,9 @@ export default function App() {
   const runtime = useAppRuntime();
 
   return (
-    <AssistantProvider runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime}>
       <ChatScreen />
-    </AssistantProvider>
+    </AssistantRuntimeProvider>
   );
 }
 ```
@@ -314,19 +265,27 @@ export default function App() {
   </Step>
 </Steps>
 
-## Architecture
-
-```
-useLocalRuntime(chatModel, options?)
-  └─ AssistantProvider
-       ├─ useAuiState((s) => s.thread)    → thread state (messages, isRunning, …)
-       ├─ useAuiState((s) => s.composer)   → composer state (text, isEmpty, …)
-       ├─ useAuiState((s) => s.message)    → single message state (inside renderItem)
-       └─ Primitives                       → ThreadRoot, ComposerInput, MessageContent, …
-```
-
-The runtime core is shared with `@assistant-ui/react` — only the UI primitives are React Native-specific.
-
-## Example
-
-For a complete Expo example with drawer navigation, thread list, and styled chat UI, see the [`with-expo` example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-expo).
+## What's Next?
+
+<Cards>
+  <Card
+    title="Migration from Web"
+    description="Already using assistant-ui? Migrate your web app to React Native."
+    href="/docs/react-native/migration"
+  />
+  <Card
+    title="Custom Backend"
+    description="Connect to your own backend API or manage threads server-side."
+    href="/docs/react-native/custom-backend"
+  />
+  <Card
+    title="Primitives"
+    description="Composable native UI components for building chat interfaces."
+    href="/docs/react-native/primitives"
+  />
+  <Card
+    title="Example App"
+    description="Full Expo example with drawer navigation, thread list, and styled UI."
+    href="https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-expo"
+  />
+</Cards>

package/.docs/raw/docs/react-native/migration.mdx

@@ -0,0 +1,144 @@
+---
+title: Migration from Web
+description: Migrate an existing @assistant-ui/react app to React Native.
+---
+
+If you already have an assistant-ui web app, most of your code transfers directly. The runtime core is shared between `@assistant-ui/react` and `@assistant-ui/react-native` via `@assistant-ui/core` — only the UI layer changes.
+
+## What stays the same
+
+- **Runtime setup** — `useChatRuntime`, `useLocalRuntime`, `ChatModelAdapter`, and all runtime options work identically.
+- **AI SDK integration** — `@assistant-ui/react-ai-sdk` works with React Native. Your `useChatRuntime` + `AssistantChatTransport` setup transfers directly.
+- **Tool definitions** — `useAssistantTool`, `makeAssistantTool`, and tool UI renderers use the same API.
+- **State hooks** — `useAuiState`, `useAui`, and selector patterns are the same.
+- **Backend code** — Your API routes, streaming endpoints, and server-side logic need zero changes.
+
+## What changes
+
+| Web (`@assistant-ui/react`) | React Native (`@assistant-ui/react-native`) |
+|---|---|
+| `AssistantRuntimeProvider` | `AssistantRuntimeProvider` (same name) |
+| DOM primitives (`div`, `button`, `input`) | Native primitives (`View`, `Pressable`, `TextInput`) |
+| CSS / Tailwind styling | React Native `StyleSheet` or inline styles |
+| `@assistant-ui/ui` (shadcn components) | Build your own native UI with primitives |
+
+## Step-by-step
+
+<Steps>
+  <Step>
+
+### Install the React Native package
+
+```sh
+npx expo install @assistant-ui/react-native
+```
+
+  </Step>
+  <Step>
+
+### Keep your runtime hook
+
+Your `useChatRuntime` setup works as-is — no changes needed:
+
+```tsx title="hooks/use-app-runtime.ts"
+// This file is identical to your web version
+import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
+
+export function useAppRuntime() {
+  return useChatRuntime({
+    transport: new AssistantChatTransport({
+      api: "/api/chat",
+    }),
+  });
+}
+```
+
+<Callout type="tip">
+  If you use a monorepo, you can share this file between web and native projects directly.
+</Callout>
+
+  </Step>
+  <Step>
+
+### Replace the provider
+
+```tsx
+// Before (web)
+// import { AssistantRuntimeProvider } from "@assistant-ui/react";
+
+// After (React Native) — same component name, different package
+import { AssistantRuntimeProvider } from "@assistant-ui/react-native";
+
+export default function App() {
+  const runtime = useAppRuntime();
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {/* your native UI */}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+  </Step>
+  <Step>
+
+### Rebuild the UI layer
+
+This is the main migration effort. Web components (`Thread`, `ThreadList` from `@assistant-ui/ui`) don't render in React Native. Replace them with native primitives:
+
+```tsx
+// Web — DOM-based
+// import { Thread } from "@/components/assistant-ui/thread";
+
+// React Native — use primitives or build custom
+import {
+  ThreadPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+} from "@assistant-ui/react-native";
+import { View } from "react-native";
+
+function MyMessage() {
+  return (
+    <View style={{ padding: 12 }}>
+      <MessagePrimitive.Content />
+    </View>
+  );
+}
+
+function ChatScreen() {
+  return (
+    <ThreadPrimitive.Root style={{ flex: 1 }}>
+      <ThreadPrimitive.Messages>
+        {() => <MyMessage />}
+      </ThreadPrimitive.Messages>
+      <ComposerPrimitive.Root>
+        <ComposerPrimitive.Input placeholder="Message..." />
+        <ComposerPrimitive.Send />
+      </ComposerPrimitive.Root>
+    </ThreadPrimitive.Root>
+  );
+}
+```
+
+See the [Primitives reference](/docs/react-native/primitives) for the full list of available components.
+
+  </Step>
+</Steps>
+
+## Monorepo code sharing
+
+In a monorepo, you can share everything except the UI layer:
+
+```
+packages/
+  shared/
+    hooks/          ← useAppRuntime with useChatRuntime (shared)
+    tools/          ← tool definitions (shared)
+  web/
+    components/     ← DOM-based UI
+  native/
+    components/     ← React Native UI
+```
+
+The runtime hook, tool definitions, and backend code are platform-agnostic. Only the UI components need separate implementations for web and native.