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

package/.docs/organized/code-examples/with-expo.md

@@ -20,336 +20,6 @@
 
 ```
 
-## adapters/openai-chat-adapter.ts
-
-```typescript
-import type { ChatModelAdapter } from "@assistant-ui/react-native";
-
-export type OpenAIModelConfig = {
-  apiKey: string;
-  model?: string;
-  baseURL?: string;
-  /** Custom fetch implementation — pass `fetch` from `expo/fetch` for streaming support */
-  fetch?: typeof globalThis.fetch;
-};
-
-type OpenAIMessage = {
-  role: string;
-  content: string | any[] | null;
-  tool_calls?: {
-    id: string;
-    type: string;
-    function: { name: string; arguments: string };
-  }[];
-  tool_call_id?: string;
-};
-
-type ToolCallAccumulator = Record<
-  number,
-  { id: string; name: string; arguments: string }
->;
-
-export function createOpenAIChatModelAdapter(
-  config: OpenAIModelConfig,
-): ChatModelAdapter {
-  const {
-    apiKey,
-    model = "gpt-4o-mini",
-    baseURL = "https://api.openai.com/v1",
-    fetch: customFetch = globalThis.fetch,
-  } = config;
-
-  const callOpenAI = async (
-    messages: OpenAIMessage[],
-    openAITools: any[] | undefined,
-    abortSignal: AbortSignal,
-  ) => {
-    const response = await customFetch(`${baseURL}/chat/completions`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${apiKey}`,
-      },
-      body: JSON.stringify({
-        model,
-        messages,
-        stream: true,
-        ...(openAITools ? { tools: openAITools } : {}),
-      }),
-      signal: abortSignal,
-    });
-
-    if (!response.ok) {
-      const body = await response.text().catch(() => "");
-      throw new Error(`OpenAI API error: ${response.status} ${body}`);
-    }
-
-    return response;
-  };
-
-  const streamResponse = async function* (
-    response: Response,
-    onUpdate: (text: string, toolCalls: ToolCallAccumulator) => any,
-  ) {
-    const reader = response.body?.getReader();
-    if (!reader) {
-      const json = await response.json();
-      const choice = json.choices?.[0]?.message;
-      return {
-        text: (choice?.content as string) ?? "",
-        toolCalls: {} as ToolCallAccumulator,
-        rawToolCalls: choice?.tool_calls,
-      };
-    }
-
-    const decoder = new TextDecoder();
-    let fullText = "";
-    const toolCalls: ToolCallAccumulator = {};
-
-    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 delta = JSON.parse(data).choices?.[0]?.delta;
-            if (!delta) continue;
-
-            if (delta.content) fullText += delta.content;
-            if (delta.tool_calls) {
-              for (const tc of delta.tool_calls) {
-                if (!toolCalls[tc.index]) {
-                  toolCalls[tc.index] = {
-                    id: tc.id ?? "",
-                    name: tc.function?.name ?? "",
-                    arguments: "",
-                  };
-                }
-                if (tc.id) toolCalls[tc.index].id = tc.id;
-                if (tc.function?.name)
-                  toolCalls[tc.index].name = tc.function.name;
-                if (tc.function?.arguments)
-                  toolCalls[tc.index].arguments += tc.function.arguments;
-              }
-            }
-
-            yield* onUpdate(fullText, toolCalls);
-          } catch {
-            // skip invalid JSON
-          }
-        }
-      }
-    } finally {
-      reader.releaseLock();
-    }
-
-    return { text: fullText, toolCalls };
-  };
-
-  return {
-    async *run({ messages, context, abortSignal }) {
-      const tools = context.tools;
-
-      // Convert messages to OpenAI format
-      const openAIMessages: OpenAIMessage[] = messages
-        .filter((m) => m.role !== "system")
-        .flatMap((m) => {
-          if (m.role === "user") {
-            const textParts = m.content.filter((p) => p.type === "text");
-            const text = textParts
-              .map((p) => ("text" in p ? p.text : ""))
-              .join("\n");
-
-            // Check for image attachments
-            const imageAttachments = (m.attachments ?? []).flatMap((a) =>
-              (a.content ?? []).filter((c: any) => c.type === "image"),
-            );
-
-            if (imageAttachments.length > 0) {
-              const content: any[] = [];
-              if (text) content.push({ type: "text", text });
-              for (const img of imageAttachments) {
-                content.push({
-                  type: "image_url",
-                  image_url: { url: (img as any).image },
-                });
-              }
-              return [{ role: "user", content }];
-            }
-
-            return [{ role: "user", content: text }];
-          }
-          if (m.role === "assistant") {
-            const result: OpenAIMessage[] = [];
-            const textParts = m.content.filter((p) => p.type === "text");
-            const toolCallParts = m.content.filter(
-              (p) => p.type === "tool-call",
-            );
-
-            if (toolCallParts.length > 0) {
-              result.push({
-                role: "assistant",
-                content:
-                  textParts.length > 0
-                    ? textParts
-                        .map((p) => ("text" in p ? p.text : ""))
-                        .join("\n")
-                    : null,
-                tool_calls: toolCallParts.map((p: any) => ({
-                  id: p.toolCallId,
-                  type: "function",
-                  function: {
-                    name: p.toolName,
-                    arguments: JSON.stringify(p.args),
-                  },
-                })),
-              });
-              for (const tc of toolCallParts) {
-                if ((tc as any).result !== undefined) {
-                  result.push({
-                    role: "tool",
-                    content: JSON.stringify((tc as any).result),
-                    tool_call_id: (tc as any).toolCallId,
-                  });
-                }
-              }
-            } else if (textParts.length > 0) {
-              result.push({
-                role: "assistant",
-                content: textParts
-                  .map((p) => ("text" in p ? p.text : ""))
-                  .join("\n"),
-              });
-            }
-
-            return result;
-          }
-          return [];
-        });
-
-      const openAITools =
-        tools && Object.keys(tools).length > 0
-          ? Object.entries(tools).map(([name, t]) => ({
-              type: "function" as const,
-              function: {
-                name,
-                description: (t as any).description ?? "",
-                parameters: (t as any).parameters ?? {},
-              },
-            }))
-          : undefined;
-
-      // Tool execution loop — keep calling OpenAI until we get a text response
-      const maxToolRounds = 5;
-      const priorParts: any[] = []; // accumulate tool-call parts across rounds
-
-      for (let round = 0; round <= maxToolRounds; round++) {
-        const response = await callOpenAI(
-          openAIMessages,
-          openAITools,
-          abortSignal,
-        );
-
-        let lastText = "";
-        const gen = streamResponse(response, function* (text, toolCalls) {
-          lastText = text;
-          const content: any[] = [...priorParts];
-          if (text) content.push({ type: "text" as const, text });
-          for (const tc of Object.values(toolCalls)) {
-            let args = {};
-            try {
-              args = JSON.parse(tc.arguments);
-            } catch {
-              // still streaming
-            }
-            content.push({
-              type: "tool-call" as const,
-              toolCallId: tc.id,
-              toolName: tc.name,
-              args,
-            });
-          }
-          if (content.length > 0) yield { content };
-        });
-
-        // Consume the stream
-        let streamResult: any;
-        while (true) {
-          const { value, done } = await gen.next();
-          if (done) {
-            streamResult = value;
-            break;
-          }
-          yield value;
-        }
-
-        const { toolCalls } = (streamResult as {
-          toolCalls: ToolCallAccumulator;
-        }) ?? { toolCalls: {} };
-        const pendingToolCalls = Object.values(toolCalls) as {
-          id: string;
-          name: string;
-          arguments: string;
-        }[];
-
-        // No tool calls — done
-        if (pendingToolCalls.length === 0) break;
-
-        // Execute tools and add results to messages for next round
-        openAIMessages.push({
-          role: "assistant",
-          content: lastText || null,
-          tool_calls: pendingToolCalls.map((tc) => ({
-            id: tc.id,
-            type: "function",
-            function: { name: tc.name, arguments: tc.arguments },
-          })),
-        });
-
-        const executedToolCalls: any[] = [];
-        for (const tc of pendingToolCalls) {
-          const args = JSON.parse(tc.arguments);
-          const toolDef = tools?.[tc.name];
-          let result: any;
-          if (toolDef?.execute) {
-            result = await (toolDef as any).execute(args);
-          }
-
-          executedToolCalls.push({
-            type: "tool-call" as const,
-            toolCallId: tc.id,
-            toolName: tc.name,
-            args,
-            result,
-          });
-
-          // Yield with all prior parts + executed tool calls so far
-          yield { content: [...priorParts, ...executedToolCalls] };
-
-          openAIMessages.push({
-            role: "tool",
-            content: JSON.stringify(result),
-            tool_call_id: tc.id,
-          });
-        }
-
-        // Add executed tool calls to prior parts for next round
-        priorParts.push(...executedToolCalls);
-
-        // Next iteration will call OpenAI with tool results
-      }
-    },
-  };
-}
-
-```
-
 ## app.json
 
 ```json
@@ -418,25 +88,27 @@ import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
 import { Pressable, useColorScheme } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useFonts } from "expo-font";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 import {
-  AssistantProvider,
-  useAssistantRuntime,
+  AssistantRuntimeProvider,
+  useAui,
+  Tools,
 } from "@assistant-ui/react-native";
 import { useAppRuntime } from "@/hooks/use-app-runtime";
 import { ThreadListDrawer } from "@/components/thread-list/ThreadListDrawer";
-import { WeatherTool } from "@/components/assistant-ui/tools";
+import { expoToolkit } from "@/components/assistant-ui/tools";
 
 function NewChatButton() {
-  const runtime = useAssistantRuntime();
+  const aui = useAui();
   const colorScheme = useColorScheme();
   const isDark = colorScheme === "dark";
 
   return (
     <Pressable
       onPress={() => {
-        runtime.threads.switchToNewThread();
+        aui.threads().switchToNewThread();
       }}
       style={{ marginRight: 16 }}
     >
@@ -471,20 +143,61 @@ function DrawerLayout() {
 }
 
 export default function RootLayout() {
+  const [fontsLoaded] = useFonts(Ionicons.font);
   const runtime = useAppRuntime();
+  const aui = useAui({
+    tools: Tools({ toolkit: expoToolkit }),
+  });
+
+  if (!fontsLoaded) return null;
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <AssistantProvider runtime={runtime}>
-        <WeatherTool />
+      <AssistantRuntimeProvider runtime={runtime} aui={aui}>
         <DrawerLayout />
-      </AssistantProvider>
+      </AssistantRuntimeProvider>
     </GestureHandlerRootView>
   );
 }
 
 ```
 
+## app/api/chat+api.ts
+
+```typescript
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
+import { openai } from "@ai-sdk/openai";
+import {
+  convertToModelMessages,
+  pruneMessages,
+  stepCountIs,
+  streamText,
+} from "ai";
+
+export async function POST(req: Request) {
+  const body = await req.json();
+  const { messages, tools } = body;
+
+  const model = openai("gpt-4o-mini");
+
+  const prunedMessages = pruneMessages({
+    messages: await convertToModelMessages(messages),
+    reasoning: "none",
+  });
+
+  const result = streamText({
+    model,
+    messages: prunedMessages,
+    maxOutputTokens: 15000,
+    stopWhen: stepCountIs(10),
+    tools: frontendTools(tools),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+
+```
+
 ## app/index.tsx
 
 ```tsx
@@ -501,9 +214,9 @@ export default function ChatPage() {
 ```tsx
 import {
   View,
-  TextInput,
   Pressable,
   Image,
+  Platform,
   StyleSheet,
   useColorScheme,
 } from "react-native";
@@ -512,12 +225,8 @@ import * as ImagePicker from "expo-image-picker";
 import {
   useAui,
   useAuiState,
-  useComposerSend,
-  useComposerCancel,
-  useComposerAddAttachment,
-  ComposerAttachments,
-  AttachmentRoot,
-  AttachmentRemove,
+  ComposerPrimitive,
+  AttachmentPrimitive,
 } from "@assistant-ui/react-native";
 
 function AttachmentPreview() {
@@ -529,27 +238,25 @@ function AttachmentPreview() {
   const uri = (imageContent as any)?.image;
 
   return (
-    <AttachmentRoot style={styles.attachmentItem}>
+    <AttachmentPrimitive.Root style={styles.attachmentItem}>
       {uri ? <Image source={{ uri }} style={styles.attachmentImage} /> : null}
-      <AttachmentRemove style={styles.attachmentRemoveButton}>
+      <AttachmentPrimitive.Remove style={styles.attachmentRemoveButton}>
         <Ionicons name="close-circle" size={20} color="#ff453a" />
-      </AttachmentRemove>
-    </AttachmentRoot>
+      </AttachmentPrimitive.Remove>
+    </AttachmentPrimitive.Root>
   );
 }
 
-const attachmentComponents = { Attachment: AttachmentPreview };
-
 export function Composer() {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === "dark";
 
   const aui = useAui();
-  const text = useAuiState((s) => s.composer.text);
   const attachmentsCount = useAuiState((s) => s.composer.attachments.length);
-  const { send, canSend } = useComposerSend();
-  const { cancel, canCancel } = useComposerCancel();
-  const { addAttachment } = useComposerAddAttachment();
+  const canCancel = useAuiState((s) => s.composer.canCancel);
+  const canSend = useAuiState(
+    (s) => !s.thread.isRunning && s.composer.isEditing && !s.composer.isEmpty,
+  );
 
   const pickImage = async () => {
     const result = await ImagePicker.launchImageLibraryAsync({
@@ -565,7 +272,7 @@ export function Composer() {
       // Force JPEG mime type — iOS may report HEIC which OpenAI doesn't support
       const dataUrl = `data:image/jpeg;base64,${asset.base64}`;
 
-      await addAttachment({
+      await aui.composer().addAttachment({
         name: asset.fileName ?? "image.jpg",
         contentType: "image/jpeg",
         type: "image",
@@ -587,7 +294,9 @@ export function Composer() {
     >
       {attachmentsCount > 0 && (
         <View style={styles.attachmentsList}>
-          <ComposerAttachments components={attachmentComponents} />
+          <ComposerPrimitive.Attachments>
+            {() => <AttachmentPreview />}
+          </ComposerPrimitive.Attachments>
         </View>
       )}
       <View
@@ -610,25 +319,20 @@ export function Composer() {
             color={isDark ? "#8e8e93" : "#6e6e73"}
           />
         </Pressable>
-        <TextInput
+        <ComposerPrimitive.Input
           style={[styles.input, { color: isDark ? "#ffffff" : "#000000" }]}
           placeholder="Message..."
           placeholderTextColor="#8e8e93"
-          value={text}
-          onChangeText={(newText) => aui.composer().setText(newText)}
           multiline
           maxLength={4000}
           editable={!canCancel}
         />
         {canCancel ? (
-          <Pressable
-            style={[styles.button, styles.stopButton]}
-            onPress={cancel}
-          >
+          <ComposerPrimitive.Cancel style={[styles.button, styles.stopButton]}>
             <View style={styles.stopIcon} />
-          </Pressable>
+          </ComposerPrimitive.Cancel>
         ) : (
-          <Pressable
+          <ComposerPrimitive.Send
             style={[
               styles.button,
               styles.sendButton,
@@ -642,15 +346,13 @@ export function Composer() {
                     : "#e5e5ea",
               },
             ]}
-            onPress={send}
-            disabled={!canSend}
           >
             <Ionicons
               name="arrow-up"
               size={20}
               color={canSend ? "#ffffff" : "#8e8e93"}
             />
-          </Pressable>
+          </ComposerPrimitive.Send>
         )}
       </View>
     </View>
@@ -660,8 +362,7 @@ export function Composer() {
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: 8,
+    paddingVertical: 8,
   },
   attachmentsList: {
     flexDirection: "row",
@@ -685,36 +386,35 @@ const styles = StyleSheet.create({
   inputWrapper: {
     flexDirection: "row",
     alignItems: "flex-end",
-    borderRadius: 24,
+    borderRadius: 20,
     borderWidth: 1,
-    paddingLeft: 6,
-    paddingRight: 6,
-    paddingVertical: 6,
-    minHeight: 48,
+    padding: 6,
   },
   attachButton: {
-    width: 34,
-    height: 34,
+    width: 30,
+    height: 30,
     justifyContent: "center",
     alignItems: "center",
   },
   input: {
     flex: 1,
     fontSize: 16,
-    lineHeight: 22,
     maxHeight: 120,
-    paddingVertical: 6,
-    letterSpacing: -0.2,
+    alignSelf: "center",
+    paddingVertical: 0,
+    ...Platform.select({
+      web: { paddingHorizontal: 4, outlineStyle: "none" },
+      default: {},
+    }),
   },
   button: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
     justifyContent: "center",
     alignItems: "center",
-    marginLeft: 8,
+    marginLeft: 6,
   },
-  sendButton: {},
   stopButton: {
     backgroundColor: "#ff453a",
   },
@@ -731,33 +431,29 @@ const styles = StyleSheet.create({
 ## components/assistant-ui/message-action-bar.tsx
 
 ```tsx
-import { Pressable, View, StyleSheet, useColorScheme } from "react-native";
+import { View, StyleSheet, useColorScheme } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import {
-  useActionBarCopy,
-  useActionBarReload,
-} from "@assistant-ui/react-native";
+import { ActionBarPrimitive } from "@assistant-ui/react-native";
 
 export function MessageActionBar() {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === "dark";
   const iconColor = isDark ? "#8e8e93" : "#6e6e73";
 
-  const { copy, isCopied } = useActionBarCopy();
-  const { reload } = useActionBarReload();
-
   return (
     <View style={styles.container}>
-      <Pressable style={styles.button} onPress={copy}>
-        <Ionicons
-          name={isCopied ? "checkmark" : "copy-outline"}
-          size={16}
-          color={isCopied ? "#34c759" : iconColor}
-        />
-      </Pressable>
-      <Pressable style={styles.button} onPress={reload}>
+      <ActionBarPrimitive.Copy style={styles.button}>
+        {({ isCopied }) => (
+          <Ionicons
+            name={isCopied ? "checkmark" : "copy-outline"}
+            size={16}
+            color={isCopied ? "#34c759" : iconColor}
+          />
+        )}
+      </ActionBarPrimitive.Copy>
+      <ActionBarPrimitive.Reload style={styles.button}>
         <Ionicons name="refresh-outline" size={16} color={iconColor} />
-      </Pressable>
+      </ActionBarPrimitive.Reload>
     </View>
   );
 }
@@ -779,14 +475,14 @@ const styles = StyleSheet.create({
 ## components/assistant-ui/message-branch-picker.tsx
 
 ```tsx
-import { Pressable, View, StyleSheet, useColorScheme } from "react-native";
+import { View, StyleSheet, useColorScheme } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { ThemedText } from "@/components/themed-text";
-import { useMessageBranching } from "@assistant-ui/react-native";
+import { BranchPickerPrimitive, useAuiState } from "@assistant-ui/react-native";
 
 export function MessageBranchPicker() {
-  const { branchNumber, branchCount, goToPrev, goToNext } =
-    useMessageBranching();
+  const branchNumber = useAuiState((s) => s.message.branchNumber);
+  const branchCount = useAuiState((s) => s.message.branchCount);
 
   const colorScheme = useColorScheme();
   const isDark = colorScheme === "dark";
@@ -796,11 +492,7 @@ export function MessageBranchPicker() {
 
   return (
     <View style={styles.container}>
-      <Pressable
-        style={styles.button}
-        onPress={goToPrev}
-        disabled={branchNumber <= 1}
-      >
+      <BranchPickerPrimitive.Previous style={styles.button}>
         <Ionicons
           name="chevron-back"
           size={14}
@@ -808,15 +500,11 @@ export function MessageBranchPicker() {
             branchNumber <= 1 ? (isDark ? "#3a3a3c" : "#d1d1d6") : iconColor
           }
         />
-      </Pressable>
+      </BranchPickerPrimitive.Previous>
       <ThemedText style={styles.label} lightColor="#6e6e73" darkColor="#8e8e93">
         {branchNumber} / {branchCount}
       </ThemedText>
-      <Pressable
-        style={styles.button}
-        onPress={goToNext}
-        disabled={branchNumber >= branchCount}
-      >
+      <BranchPickerPrimitive.Next style={styles.button}>
         <Ionicons
           name="chevron-forward"
           size={14}
@@ -828,7 +516,7 @@ export function MessageBranchPicker() {
               : iconColor
           }
         />
-      </Pressable>
+      </BranchPickerPrimitive.Next>
     </View>
   );
 }
@@ -856,11 +544,7 @@ const styles = StyleSheet.create({
 ```tsx
 import { View, Image, StyleSheet, useColorScheme } from "react-native";
 import { ThemedText } from "@/components/themed-text";
-import {
-  useAuiState,
-  MessageContent,
-  MessageAttachments,
-} from "@assistant-ui/react-native";
+import { useAuiState, MessagePrimitive } from "@assistant-ui/react-native";
 import { MessageActionBar } from "./message-action-bar";
 import { MessageBranchPicker } from "./message-branch-picker";
 
@@ -915,8 +599,6 @@ function MessageImageAttachment() {
   return <Image source={{ uri }} style={styles.messageImage} />;
 }
 
-const messageAttachmentComponents = { Attachment: MessageImageAttachment };
-
 export function MessageBubble() {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === "dark";
@@ -927,7 +609,9 @@ export function MessageBubble() {
   if (isUser) {
     return (
       <View style={[styles.container, styles.userContainer]}>
-        <MessageAttachments components={messageAttachmentComponents} />
+        <MessagePrimitive.Attachments>
+          {() => <MessageImageAttachment />}
+        </MessagePrimitive.Attachments>
         <View
           style={[
             styles.bubble,
@@ -935,7 +619,9 @@ export function MessageBubble() {
             { backgroundColor: isDark ? "#0a84ff" : "#007aff" },
           ]}
         >
-          <MessageContent renderText={({ part }) => <TextPart part={part} />} />
+          <MessagePrimitive.Content
+            renderText={({ part }) => <TextPart part={part} />}
+          />
         </View>
         <MessageBranchPicker />
       </View>
@@ -955,7 +641,9 @@ export function MessageBubble() {
           },
         ]}
       >
-        <MessageContent renderText={({ part }) => <TextPart part={part} />} />
+        <MessagePrimitive.Content
+          renderText={({ part }) => <TextPart part={part} />}
+        />
         <MessageError />
       </View>
       {!isRunning && (
@@ -1040,11 +728,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { MessageBubble } from "./message";
 import { Composer } from "./composer";
-import {
-  ThreadMessages,
-  useThreadIsEmpty,
-  useAui,
-} from "@assistant-ui/react-native";
+import { ThreadPrimitive, useAui } from "@assistant-ui/react-native";
 
 function SuggestionChip({ title, prompt }: { title: string; prompt: string }) {
   const colorScheme = useColorScheme();
@@ -1126,21 +810,21 @@ function EmptyState() {
   );
 }
 
-const renderMessage = () => <MessageBubble />;
-
 function ChatMessages() {
-  const isEmpty = useThreadIsEmpty();
-
-  if (isEmpty) {
-    return <EmptyState />;
-  }
-
   return (
-    <ThreadMessages
-      renderMessage={renderMessage}
-      contentContainerStyle={styles.messageList}
-      showsVerticalScrollIndicator={false}
-    />
+    <>
+      <ThreadPrimitive.Empty>
+        <EmptyState />
+      </ThreadPrimitive.Empty>
+      <ThreadPrimitive.If empty={false}>
+        <ThreadPrimitive.Messages
+          contentContainerStyle={styles.messageList}
+          showsVerticalScrollIndicator={false}
+        >
+          {() => <MessageBubble />}
+        </ThreadPrimitive.Messages>
+      </ThreadPrimitive.If>
+    </>
   );
 }
 
@@ -1238,14 +922,123 @@ const styles = StyleSheet.create({
 
 ```tsx
 import { View, Text, StyleSheet, useColorScheme } from "react-native";
-import {
-  makeAssistantTool,
-  type ToolCallMessagePartProps,
+import type {
+  Toolkit,
+  ToolCallMessagePartProps,
 } from "@assistant-ui/react-native";
+import { z } from "zod";
+
+// Open-Meteo API adapters (free, no API key needed)
+
+const geocodeLocationWithOpenMeteo = async (query: string) => {
+  try {
+    const response = await fetch(
+      `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(query)}&count=1`,
+    );
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const data = await response.json();
+    if (!data.results || data.results.length === 0)
+      throw new Error("No results found");
+    return { success: true as const, result: data.results[0] };
+  } catch (error) {
+    return {
+      success: false as const,
+      error:
+        error instanceof Error ? error.message : "Failed to geocode location",
+    };
+  }
+};
+
+const mapWeatherCode = (code: number): string => {
+  if (code === 0) return "Clear";
+  if (code <= 3) return "Partly Cloudy";
+  if (code <= 48) return "Foggy";
+  if (code <= 57) return "Drizzle";
+  if (code <= 67) return "Rain";
+  if (code <= 77) return "Snow";
+  if (code <= 82) return "Showers";
+  if (code <= 86) return "Snow Showers";
+  if (code === 95) return "Thunderstorm";
+  return "Stormy";
+};
+
+const mapWeatherEmoji = (code: number): string => {
+  if (code === 0) return "\u2600\uFE0F";
+  if (code <= 3) return "\u26C5";
+  if (code <= 48) return "\uD83C\uDF2B\uFE0F";
+  if (code <= 57) return "\uD83C\uDF26\uFE0F";
+  if (code <= 67) return "\uD83C\uDF27\uFE0F";
+  if (code <= 77) return "\u2744\uFE0F";
+  if (code <= 82) return "\uD83C\uDF26\uFE0F";
+  if (code <= 86) return "\uD83C\uDF28\uFE0F";
+  if (code === 95) return "\u26C8\uFE0F";
+  return "\uD83C\uDF29\uFE0F";
+};
+
+const fetchWeatherFromOpenMeteo = async ({
+  query,
+  longitude,
+  latitude,
+}: {
+  query: string;
+  longitude: number;
+  latitude: number;
+}) => {
+  try {
+    const response = await fetch(
+      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&timezone=auto&temperature_unit=fahrenheit&current=temperature_2m,weather_code,wind_speed_10m&daily=weather_code,temperature_2m_max,temperature_2m_min&forecast_days=5`,
+    );
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    const data = await response.json();
+    const current = data.current;
+    const daily = data.daily;
+    if (!current || !daily?.time) throw new Error("Invalid API response");
+
+    const forecast = daily.time.slice(0, 5).map((date: string, i: number) => {
+      const d = new Date(`${date}T12:00:00Z`);
+      const label =
+        i === 0
+          ? "Today"
+          : new Intl.DateTimeFormat("en-US", {
+              weekday: "short",
+              timeZone: "UTC",
+            }).format(d);
+      return {
+        label,
+        code: daily.weather_code[i],
+        min: Math.round(daily.temperature_2m_min[i]),
+        max: Math.round(daily.temperature_2m_max[i]),
+      };
+    });
+
+    return {
+      success: true as const,
+      location: query,
+      temperature: Math.round(current.temperature_2m),
+      weatherCode: current.weather_code,
+      windSpeed: Math.round(current.wind_speed_10m),
+      forecast,
+    };
+  } catch (error) {
+    return {
+      success: false as const,
+      error: error instanceof Error ? error.message : "Failed to fetch weather",
+    };
+  }
+};
 
-const WeatherToolUI = (
-  props: ToolCallMessagePartProps<{ city: string }, { temperature: number }>,
-) => {
+// Tool UI Components
+
+function GeocodeToolUI(
+  props: ToolCallMessagePartProps<
+    { query: string },
+    {
+      success: boolean;
+      result?: { name: string; latitude: number; longitude: number };
+      error?: string;
+    }
+  >,
+) {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === "dark";
 
@@ -1258,65 +1051,315 @@ const WeatherToolUI = (
         ]}
       >
         <Text style={[styles.label, { color: isDark ? "#8e8e93" : "#6e6e73" }]}>
-          Looking up weather for {props.args.city}...
+          Finding location...
+        </Text>
+      </View>
+    );
+  }
+
+  if (props.result?.error) {
+    return (
+      <View
+        style={[
+          styles.card,
+          { backgroundColor: isDark ? "#3a1c1c" : "#fff0f0" },
+        ]}
+      >
+        <Text style={[styles.label, { color: "#ff453a" }]}>
+          Geocoding failed: {props.result.error}
         </Text>
       </View>
     );
   }
 
+  const result = props.result?.result;
+  if (!result) return null;
+
   return (
     <View
       style={[styles.card, { backgroundColor: isDark ? "#1c1c1e" : "#f2f2f7" }]}
     >
-      <Text style={[styles.city, { color: isDark ? "#ffffff" : "#000000" }]}>
-        {props.args.city}
-      </Text>
-      <Text style={styles.temp}>{props.result?.temperature ?? "—"}°F</Text>
-      <Text style={[styles.label, { color: isDark ? "#8e8e93" : "#6e6e73" }]}>
-        Current Weather
+      <View style={styles.row}>
+        <Text style={styles.pin}>{"\uD83D\uDCCD"}</Text>
+        <View>
+          <Text
+            style={[
+              styles.locationName,
+              { color: isDark ? "#ffffff" : "#000000" },
+            ]}
+          >
+            {result.name}
+          </Text>
+          <Text
+            style={[styles.coords, { color: isDark ? "#8e8e93" : "#6e6e73" }]}
+          >
+            {Math.abs(result.latitude).toFixed(2)}
+            {"\u00B0"}
+            {result.latitude >= 0 ? "N" : "S"},{" "}
+            {Math.abs(result.longitude).toFixed(2)}
+            {"\u00B0"}
+            {result.longitude >= 0 ? "E" : "W"}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function WeatherToolUI(
+  props: ToolCallMessagePartProps<
+    { query: string; longitude: number; latitude: number },
+    {
+      success: boolean;
+      location?: string;
+      temperature?: number;
+      weatherCode?: number;
+      windSpeed?: number;
+      forecast?: Array<{
+        label: string;
+        code: number;
+        min: number;
+        max: number;
+      }>;
+      error?: string;
+    }
+  >,
+) {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  if (props.status?.type === "running") {
+    return (
+      <View
+        style={[
+          styles.card,
+          { backgroundColor: isDark ? "#1c1c1e" : "#f2f2f7" },
+        ]}
+      >
+        <Text style={[styles.label, { color: isDark ? "#8e8e93" : "#6e6e73" }]}>
+          Fetching weather for {props.args.query}...
+        </Text>
+      </View>
+    );
+  }
+
+  if (!props.result?.success) {
+    return (
+      <View
+        style={[
+          styles.card,
+          { backgroundColor: isDark ? "#3a1c1c" : "#fff0f0" },
+        ]}
+      >
+        <Text style={[styles.label, { color: "#ff453a" }]}>
+          Weather unavailable: {props.result?.error ?? "Unknown error"}
+        </Text>
+      </View>
+    );
+  }
+
+  const { location, temperature, weatherCode, windSpeed, forecast } =
+    props.result;
+
+  return (
+    <View
+      style={[
+        styles.weatherCard,
+        { backgroundColor: isDark ? "#1c1c1e" : "#f2f2f7" },
+      ]}
+    >
+      <View style={styles.weatherHeader}>
+        <Text style={styles.weatherEmoji}>
+          {mapWeatherEmoji(weatherCode ?? 0)}
+        </Text>
+        <View>
+          <Text
+            style={[
+              styles.locationName,
+              { color: isDark ? "#ffffff" : "#000000" },
+            ]}
+          >
+            {location}
+          </Text>
+          <Text
+            style={[
+              styles.condition,
+              { color: isDark ? "#8e8e93" : "#6e6e73" },
+            ]}
+          >
+            {mapWeatherCode(weatherCode ?? 0)}
+          </Text>
+        </View>
+      </View>
+
+      <Text style={styles.tempLarge}>
+        {temperature ?? "--"}
+        {"\u00B0"}F
       </Text>
+
+      {windSpeed != null && (
+        <Text style={[styles.wind, { color: isDark ? "#8e8e93" : "#6e6e73" }]}>
+          Wind: {windSpeed} mph
+        </Text>
+      )}
+
+      {forecast && forecast.length > 0 && (
+        <View
+          style={[
+            styles.forecastRow,
+            {
+              borderTopColor: isDark
+                ? "rgba(255,255,255,0.1)"
+                : "rgba(0,0,0,0.1)",
+            },
+          ]}
+        >
+          {forecast.map((day, i) => (
+            <View key={i} style={styles.forecastDay}>
+              <Text
+                style={[
+                  styles.forecastLabel,
+                  { color: isDark ? "#8e8e93" : "#6e6e73" },
+                ]}
+              >
+                {day.label}
+              </Text>
+              <Text style={styles.forecastEmoji}>
+                {mapWeatherEmoji(day.code)}
+              </Text>
+              <Text
+                style={[
+                  styles.forecastTemp,
+                  { color: isDark ? "#ffffff" : "#000000" },
+                ]}
+              >
+                {day.max}
+                {"\u00B0"}
+              </Text>
+              <Text
+                style={[
+                  styles.forecastTempLow,
+                  { color: isDark ? "#8e8e93" : "#6e6e73" },
+                ]}
+              >
+                {day.min}
+                {"\u00B0"}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
     </View>
   );
-};
+}
 
-export const WeatherTool = makeAssistantTool({
-  toolName: "get_weather",
-  description: "Get the current weather for a city",
-  parameters: {
-    type: "object",
-    properties: {
-      city: { type: "string", description: "The city name" },
-    },
-    required: ["city"],
+// Toolkit definition
+
+export const expoToolkit: Toolkit = {
+  geocode_location: {
+    description: "Geocode a location using Open-Meteo's geocoding API",
+    parameters: z.object({
+      query: z.string(),
+    }),
+    execute: async (args: { query: string }) =>
+      geocodeLocationWithOpenMeteo(args.query),
+    render: GeocodeToolUI,
+  },
+  weather_search: {
+    description:
+      "Find the weather in a location given a longitude and latitude",
+    parameters: z.object({
+      query: z.string(),
+      longitude: z.number(),
+      latitude: z.number(),
+    }),
+    execute: async (args: {
+      query: string;
+      longitude: number;
+      latitude: number;
+    }) => fetchWeatherFromOpenMeteo(args),
+    render: WeatherToolUI,
   },
-  execute: async ({ city }) => {
-    // Simulated weather API — use city to vary seed
-    await new Promise((r) => setTimeout(r, 1000));
-    const seed = city.length;
-    const temperature = Math.round(50 + ((seed * 17) % 40));
-    return { temperature };
-  },
-  render: WeatherToolUI,
-});
+};
 
 const styles = StyleSheet.create({
   card: {
+    padding: 12,
+    borderRadius: 12,
+    marginVertical: 4,
+  },
+  weatherCard: {
     padding: 16,
     borderRadius: 12,
     marginVertical: 4,
     gap: 4,
   },
-  city: {
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  pin: {
+    fontSize: 20,
+  },
+  locationName: {
     fontSize: 15,
     fontWeight: "600",
   },
-  temp: {
+  coords: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  label: {
+    fontSize: 13,
+  },
+  weatherHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    marginBottom: 4,
+  },
+  weatherEmoji: {
     fontSize: 32,
+  },
+  condition: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  tempLarge: {
+    fontSize: 40,
     fontWeight: "700",
     color: "#007aff",
   },
-  label: {
+  wind: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  forecastRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  forecastDay: {
+    alignItems: "center",
+    flex: 1,
+    gap: 4,
+  },
+  forecastLabel: {
+    fontSize: 11,
+    fontWeight: "500",
+  },
+  forecastEmoji: {
+    fontSize: 18,
+  },
+  forecastTemp: {
     fontSize: 13,
+    fontWeight: "600",
+  },
+  forecastTempLow: {
+    fontSize: 12,
   },
 });
 
@@ -1421,12 +1464,12 @@ export function ThemedView({
 ```tsx
 import { FlatList, View, StyleSheet, useColorScheme } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAssistantRuntime, useAuiState } from "@assistant-ui/react-native";
+import { useAui, useAuiState } from "@assistant-ui/react-native";
 import { ThreadListItem } from "./ThreadListItem";
 import type { DrawerContentComponentProps } from "@react-navigation/drawer";
 
 export function ThreadListDrawer({ navigation }: DrawerContentComponentProps) {
-  const runtime = useAssistantRuntime();
+  const aui = useAui();
   const threadIds = useAuiState((s) => s.threads.threadIds);
   const mainThreadId = useAuiState((s) => s.threads.mainThreadId);
   const threadItems = useAuiState((s) => s.threads.threadItems);
@@ -1455,7 +1498,7 @@ export function ThreadListDrawer({ navigation }: DrawerContentComponentProps) {
               title={threadItem?.title ?? "New Chat"}
               isActive={threadId === mainThreadId}
               onPress={() => {
-                runtime.threads.switchToThread(threadId);
+                aui.threads().switchToThread(threadId);
                 navigation.closeDrawer();
               }}
             />
@@ -1752,32 +1795,22 @@ export const Fonts = Platform.select({
 
 ```typescript
 import { useMemo } from "react";
-import { fetch } from "expo/fetch";
 import {
-  useLocalRuntime,
-  createSimpleTitleAdapter,
-  SimpleImageAttachmentAdapter,
-} from "@assistant-ui/react-native";
-import { createOpenAIChatModelAdapter } from "@/adapters/openai-chat-adapter";
+  useChatRuntime,
+  AssistantChatTransport,
+} from "@assistant-ui/react-ai-sdk";
+import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
+
+const CHAT_API = process.env.EXPO_PUBLIC_CHAT_ENDPOINT_URL ?? "/api/chat";
 
 export function useAppRuntime() {
-  const chatModel = useMemo(
-    () =>
-      createOpenAIChatModelAdapter({
-        apiKey: process.env.EXPO_PUBLIC_OPENAI_API_KEY ?? "",
-        model: "gpt-4o-mini",
-        fetch,
-      }),
+  const transport = useMemo(
+    () => new AssistantChatTransport({ api: CHAT_API }),
     [],
   );
-
-  const titleGenerator = useMemo(() => createSimpleTitleAdapter(), []);
-
-  return useLocalRuntime(chatModel, {
-    titleGenerator,
-    adapters: {
-      attachments: new SimpleImageAttachmentAdapter(),
-    },
+  return useChatRuntime({
+    transport,
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
   });
 }
 
@@ -1903,19 +1936,25 @@ module.exports = config;
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "export:web": "expo export --platform web && node scripts/flatten-assets.mjs"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^3.0.41",
+    "@ai-sdk/react": "^3.0.118",
+    "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-native": "workspace:*",
     "@expo/vector-icons": "^15.1.1",
     "@react-navigation/drawer": "^7.7.2",
     "@react-navigation/native": "^7.1.28",
-    "expo": "~55.0.4",
+    "ai": "^6.0.116",
+    "expo": "~55.0.6",
     "expo-constants": "~55.0.7",
     "expo-font": "~55.0.4",
-    "expo-image-picker": "~55.0.10",
+    "expo-image-picker": "~55.0.12",
     "expo-linking": "~55.0.7",
-    "expo-router": "~55.0.3",
+    "expo-router": "~55.0.5",
+    "expo-server": "~55.0.6",
     "expo-splash-screen": "~55.0.10",
     "expo-status-bar": "~55.0.4",
     "expo-system-ui": "~55.0.9",
@@ -1923,11 +1962,12 @@ module.exports = config;
     "react-dom": "19.2.0",
     "react-native": "0.83.2",
     "react-native-gesture-handler": "~2.30.0",
-    "react-native-reanimated": "~4.2.1",
-    "react-native-safe-area-context": "~5.6.2",
-    "react-native-screens": "~4.23.0",
+    "react-native-reanimated": "~4.2.2",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.24.0",
     "react-native-web": "~0.21.2",
-    "react-native-worklets": "0.7.2"
+    "react-native-worklets": "0.7.2",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -2010,3 +2050,14 @@ Join our community of developers creating universal apps.
 
 ```
 
+## vercel.json
+
+```json
+{
+  "buildCommand": "cd ../.. && pnpm turbo build --filter=@assistant-ui/react-native --filter=@assistant-ui/react-ai-sdk && cd examples/with-expo && pnpm run export:web",
+  "outputDirectory": "dist",
+  "framework": null
+}
+
+```
+