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

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

@@ -61,10 +61,11 @@
           "resizeMode": "contain",
           "backgroundColor": "#ffffff",
           "dark": {
-            "backgroundColor": "#000000"
+            "backgroundColor": "#18181b"
           }
         }
-      ]
+      ],
+      "expo-font"
     ],
     "experiments": {
       "typedRoutes": true,
@@ -82,12 +83,13 @@ import {
   DarkTheme,
   DefaultTheme,
   ThemeProvider,
+  type Theme,
 } from "@react-navigation/native";
 import { Drawer } from "expo-router/drawer";
 import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
-import { Pressable, useColorScheme } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
+import { Platform, Pressable } from "react-native";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import { useFonts } from "expo-font";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
@@ -97,42 +99,60 @@ import {
   Tools,
 } from "@assistant-ui/react-native";
 import { useAppRuntime } from "@/hooks/use-app-runtime";
+import { useTheme } from "@/hooks/use-theme";
+import { Icon } from "@/components/ui/icon";
 import { ThreadListDrawer } from "@/components/thread-list/ThreadListDrawer";
+import { haptics } from "@/lib/haptics";
 import toolkit from "@/components/assistant-ui/tools";
 
 function NewChatButton() {
   const aui = useAui();
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
+  const { colors } = useTheme();
 
   return (
     <Pressable
+      accessibilityLabel="New chat"
+      hitSlop={8}
       onPress={() => {
+        haptics.selection();
         aui.threads().switchToNewThread();
       }}
       style={{ marginRight: 16 }}
     >
-      <Ionicons
-        name="create-outline"
-        size={24}
-        color={isDark ? "#ffffff" : "#000000"}
-      />
+      <Icon name="compose" size={22} color={colors.foreground} />
     </Pressable>
   );
 }
 
 function DrawerLayout() {
-  const colorScheme = useColorScheme();
+  const { isDark, colors } = useTheme();
+
+  const base = isDark ? DarkTheme : DefaultTheme;
+  const navTheme: Theme = {
+    ...base,
+    colors: {
+      ...base.colors,
+      background: colors.background,
+      card: colors.background,
+      text: colors.foreground,
+      border: colors.border,
+      primary: colors.foreground,
+    },
+  };
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+    <ThemeProvider value={navTheme}>
       <Drawer
         drawerContent={(props) => <ThreadListDrawer {...props} />}
         screenOptions={{
           headerRight: () => <NewChatButton />,
+          headerShadowVisible: false,
+          headerTintColor: colors.foreground,
+          headerStyle: { backgroundColor: colors.background },
+          headerTitleStyle: { fontWeight: "600" },
           drawerType: "front",
           swipeEnabled: true,
-          drawerStyle: { backgroundColor: "transparent" },
+          drawerStyle: { backgroundColor: colors.background },
         }}
       >
         <Drawer.Screen name="index" options={{ title: "Chat" }} />
@@ -143,7 +163,10 @@ function DrawerLayout() {
 }
 
 export default function RootLayout() {
-  const [fontsLoaded] = useFonts(Ionicons.font);
+  // iOS renders SF Symbols, so it never needs the MaterialIcons glyph font.
+  const [fontsLoaded] = useFonts(
+    Platform.OS === "ios" ? {} : MaterialIcons.font,
+  );
   const runtime = useAppRuntime();
   const aui = useAui({
     tools: Tools({ toolkit }),
@@ -209,70 +232,134 @@ export default function ChatPage() {
 
 ```
 
+## babel.config.js
+
+```javascript
+const path = require("node:path");
+
+module.exports = (api) => {
+  api.cache(true);
+  return {
+    presets: [
+      [
+        "babel-preset-expo",
+        {
+          "react-compiler": {
+            // Workspace packages resolve to paths outside node_modules, so the
+            // preset's node_modules exclusion does not cover them. Restrict the
+            // compiler to this app's own sources.
+            sources: (filename) => filename.startsWith(__dirname + path.sep),
+          },
+        },
+      ],
+    ],
+  };
+};
+
+```
+
 ## components/assistant-ui/composer.tsx
 
 ```tsx
-import {
-  View,
-  Pressable,
-  Image,
-  Platform,
-  StyleSheet,
-  useColorScheme,
-  type TextStyle,
-} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
+import { View, Pressable, Platform, StyleSheet } from "react-native";
+import { Image } from "expo-image";
 import * as ImagePicker from "expo-image-picker";
 import {
   useAui,
   useAuiState,
+  AuiIf,
   ComposerPrimitive,
   AttachmentPrimitive,
 } from "@assistant-ui/react-native";
+import { Icon } from "@/components/ui/icon";
+import { useTheme } from "@/hooks/use-theme";
+import { Radius, Spacing } from "@/constants/theme";
+import { haptics } from "@/lib/haptics";
 
 function AttachmentPreview() {
+  const { colors } = useTheme();
   const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
 
-  // Find image content for preview URI
   const imageContent = attachment.content?.find((c: any) => c.type === "image");
   const uri = (imageContent as any)?.image;
 
   return (
     <AttachmentPrimitive.Root style={styles.attachmentItem}>
-      {uri ? <Image source={{ uri }} style={styles.attachmentImage} /> : null}
-      <AttachmentPrimitive.Remove style={styles.attachmentRemoveButton}>
-        <Ionicons name="close-circle" size={20} color="#ff453a" />
+      {uri ? (
+        <Image
+          source={{ uri }}
+          style={[styles.attachmentImage, { backgroundColor: colors.muted }]}
+          contentFit="cover"
+          transition={120}
+        />
+      ) : null}
+      <AttachmentPrimitive.Remove
+        onPressIn={haptics.light}
+        style={styles.attachmentRemove}
+      >
+        <View
+          style={[styles.removeBadge, { backgroundColor: colors.foreground }]}
+        >
+          <Icon name="remove" size={16} color={colors.background} />
+        </View>
       </AttachmentPrimitive.Remove>
     </AttachmentPrimitive.Root>
   );
 }
 
-export function Composer() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
+function SendButton() {
+  const { colors } = useTheme();
+  const canSend = useAuiState((s) => s.composer.canSend);
 
-  const aui = useAui();
-  const attachmentsCount = useAuiState((s) => s.composer.attachments.length);
-  const canCancel = useAuiState((s) => s.composer.canCancel);
-  const canSend = useAuiState(
-    (s) => !s.thread.isRunning && s.composer.isEditing && !s.composer.isEmpty,
+  return (
+    <ComposerPrimitive.Send
+      accessibilityLabel="Send message"
+      onPressIn={() => canSend && haptics.success()}
+      style={[
+        styles.actionButton,
+        { backgroundColor: canSend ? colors.primary : colors.muted },
+      ]}
+    >
+      <Icon
+        name="send"
+        size={18}
+        color={canSend ? colors.primaryForeground : colors.mutedForeground}
+      />
+    </ComposerPrimitive.Send>
+  );
+}
+
+function CancelButton() {
+  const { colors } = useTheme();
+  return (
+    <ComposerPrimitive.Cancel
+      accessibilityLabel="Stop generating"
+      onPressIn={haptics.light}
+      style={[styles.actionButton, { backgroundColor: colors.foreground }]}
+    >
+      <Icon name="stop" size={15} color={colors.background} />
+    </ComposerPrimitive.Cancel>
   );
+}
+
+function AttachButton() {
+  const { colors } = useTheme();
+  const aui = useAui();
 
   const pickImage = async () => {
+    haptics.selection();
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ["images"],
       allowsMultipleSelection: true,
       quality: 0.8,
       base64: true,
     });
-
     if (result.canceled) return;
 
     for (const asset of result.assets) {
-      // Force JPEG mime type — iOS may report HEIC which OpenAI doesn't support
+      // iOS may report HEIC, which OpenAI rejects; normalize to JPEG.
       const dataUrl = `data:image/jpeg;base64,${asset.base64}`;
-
       await aui.composer().addAttachment({
         name: asset.fileName ?? "image.jpg",
         contentType: "image/jpeg",
@@ -283,78 +370,57 @@ export function Composer() {
   };
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor: isDark
-            ? "rgba(28, 28, 30, 0.8)"
-            : "rgba(242, 242, 247, 0.8)",
-        },
+    <Pressable
+      accessibilityLabel="Add image"
+      onPress={pickImage}
+      hitSlop={6}
+      style={({ pressed }) => [
+        styles.attachButton,
+        { backgroundColor: pressed ? colors.muted : "transparent" },
       ]}
     >
-      {attachmentsCount > 0 && (
-        <View style={styles.attachmentsList}>
-          <ComposerPrimitive.Attachments>
-            {() => <AttachmentPreview />}
-          </ComposerPrimitive.Attachments>
-        </View>
-      )}
+      <Icon name="add" size={20} color={colors.mutedForeground} />
+    </Pressable>
+  );
+}
+
+export function Composer() {
+  const { colors } = useTheme();
+  const hasAttachments = useAuiState((s) => s.composer.attachments.length > 0);
+
+  return (
+    <View style={styles.container}>
       <View
         style={[
-          styles.inputWrapper,
-          {
-            backgroundColor: isDark ? "#1c1c1e" : "#ffffff",
-            borderColor: isDark ? "#3a3a3c" : "#e5e5ea",
-          },
+          styles.shell,
+          { backgroundColor: colors.composer, borderColor: colors.border },
         ]}
       >
-        <Pressable
-          style={styles.attachButton}
-          onPress={pickImage}
-          disabled={canCancel}
-        >
-          <Ionicons
-            name="add-circle-outline"
-            size={24}
-            color={isDark ? "#8e8e93" : "#6e6e73"}
-          />
-        </Pressable>
+        {hasAttachments && (
+          <View style={styles.attachmentsRow}>
+            <ComposerPrimitive.Attachments>
+              {() => <AttachmentPreview />}
+            </ComposerPrimitive.Attachments>
+          </View>
+        )}
+
         <ComposerPrimitive.Input
-          style={[styles.input, { color: isDark ? "#ffffff" : "#000000" }]}
-          placeholder="Message..."
-          placeholderTextColor="#8e8e93"
+          style={[styles.input, { color: colors.foreground }]}
+          placeholder="Message…"
+          placeholderTextColor={colors.mutedForeground}
           multiline
           maxLength={4000}
-          editable={!canCancel}
         />
-        {canCancel ? (
-          <ComposerPrimitive.Cancel style={[styles.button, styles.stopButton]}>
-            <View style={styles.stopIcon} />
-          </ComposerPrimitive.Cancel>
-        ) : (
-          <ComposerPrimitive.Send
-            style={[
-              styles.button,
-              styles.sendButton,
-              {
-                backgroundColor: canSend
-                  ? isDark
-                    ? "#0a84ff"
-                    : "#007aff"
-                  : isDark
-                    ? "#3a3a3c"
-                    : "#e5e5ea",
-              },
-            ]}
-          >
-            <Ionicons
-              name="arrow-up"
-              size={20}
-              color={canSend ? "#ffffff" : "#8e8e93"}
-            />
-          </ComposerPrimitive.Send>
-        )}
+
+        <View style={styles.actionRow}>
+          <AttachButton />
+          <AuiIf condition={(s) => !s.thread.isRunning}>
+            <SendButton />
+          </AuiIf>
+          <AuiIf condition={(s) => s.thread.isRunning}>
+            <CancelButton />
+          </AuiIf>
+        </View>
       </View>
     </View>
   );
@@ -362,69 +428,77 @@ export function Composer() {
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
+    width: "100%",
+    maxWidth: Spacing.threadMaxWidth + 24,
+    alignSelf: "center",
+    paddingHorizontal: 12,
+    paddingTop: 8,
   },
-  attachmentsList: {
+  shell: {
+    flexDirection: "column",
+    gap: 6,
+    borderRadius: Radius.composer,
+    borderWidth: StyleSheet.hairlineWidth,
+    padding: 8,
+  },
+  attachmentsRow: {
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 8,
-    paddingBottom: 8,
+    paddingHorizontal: 4,
+    paddingTop: 4,
   },
   attachmentItem: {
     position: "relative",
   },
   attachmentImage: {
-    width: 60,
-    height: 60,
-    borderRadius: 8,
+    width: 56,
+    height: 56,
+    borderRadius: Radius.attachment,
   },
-  attachmentRemoveButton: {
+  attachmentRemove: {
     position: "absolute",
     top: -6,
     right: -6,
   },
-  inputWrapper: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    borderRadius: 20,
-    borderWidth: 1,
-    padding: 6,
-  },
-  attachButton: {
-    width: 30,
-    height: 30,
-    justifyContent: "center",
+  removeBadge: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
     alignItems: "center",
+    justifyContent: "center",
   },
   input: {
-    flex: 1,
     fontSize: 16,
-    maxHeight: 120,
-    alignSelf: "center",
-    paddingVertical: 0,
-    ...(Platform.select({
-      web: { paddingHorizontal: 4, outlineStyle: "none" },
+    lineHeight: 22,
+    minHeight: 28,
+    maxHeight: 132,
+    paddingHorizontal: 10,
+    paddingTop: 6,
+    paddingBottom: 2,
+    ...Platform.select({
+      web: { outlineStyle: "none" } as any,
       default: {},
-    }) as object),
-  } as TextStyle,
-  button: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    justifyContent: "center",
+    }),
+  },
+  actionRow: {
+    flexDirection: "row",
     alignItems: "center",
-    marginLeft: 6,
+    justifyContent: "space-between",
   },
-  stopButton: {
-    backgroundColor: "#ff453a",
+  attachButton: {
+    width: 32,
+    height: 32,
+    borderRadius: Radius.pill,
+    alignItems: "center",
+    justifyContent: "center",
   },
-  sendButton: {},
-  stopIcon: {
-    width: 12,
-    height: 12,
-    borderRadius: 2,
-    backgroundColor: "#ffffff",
+  actionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: Radius.pill,
+    alignItems: "center",
+    justifyContent: "center",
   },
 });
 
@@ -433,28 +507,46 @@ const styles = StyleSheet.create({
 ## components/assistant-ui/message-action-bar.tsx
 
 ```tsx
-import { View, StyleSheet, useColorScheme } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
+import { View, StyleSheet } from "react-native";
+import * as Clipboard from "expo-clipboard";
+import { Icon } from "@/components/ui/icon";
 import { ActionBarPrimitive } from "@assistant-ui/react-native";
+import { useTheme } from "@/hooks/use-theme";
+import { haptics } from "@/lib/haptics";
+import { Radius } from "@/constants/theme";
+
+const copyToClipboard = async (text: string) => {
+  await Clipboard.setStringAsync(text);
+};
 
 export function MessageActionBar() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const iconColor = isDark ? "#8e8e93" : "#6e6e73";
+  const { colors } = useTheme();
+
+  const buttonStyle = ({ pressed }: { pressed: boolean }) => [
+    styles.button,
+    pressed && { backgroundColor: colors.muted },
+  ];
 
   return (
     <View style={styles.container}>
-      <ActionBarPrimitive.Copy style={styles.button}>
+      <ActionBarPrimitive.Copy
+        copyToClipboard={copyToClipboard}
+        onPressIn={haptics.selection}
+        style={buttonStyle}
+      >
         {({ isCopied }) => (
-          <Ionicons
-            name={isCopied ? "checkmark" : "copy-outline"}
+          <Icon
+            name={isCopied ? "check" : "copy"}
             size={16}
-            color={isCopied ? "#34c759" : iconColor}
+            color={isCopied ? colors.foreground : colors.mutedForeground}
           />
         )}
       </ActionBarPrimitive.Copy>
-      <ActionBarPrimitive.Reload style={styles.button}>
-        <Ionicons name="refresh-outline" size={16} color={iconColor} />
+      <ActionBarPrimitive.Reload
+        onPressIn={haptics.selection}
+        style={buttonStyle}
+      >
+        <Icon name="reload" size={16} color={colors.mutedForeground} />
       </ActionBarPrimitive.Reload>
     </View>
   );
@@ -463,12 +555,12 @@ export function MessageActionBar() {
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    gap: 4,
-    marginTop: 4,
+    alignItems: "center",
+    gap: 2,
   },
   button: {
     padding: 6,
-    borderRadius: 8,
+    borderRadius: Radius.sm,
   },
 });
 
@@ -477,47 +569,41 @@ const styles = StyleSheet.create({
 ## components/assistant-ui/message-branch-picker.tsx
 
 ```tsx
-import { View, StyleSheet, useColorScheme } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { ThemedText } from "@/components/themed-text";
+import { View, Text, StyleSheet } from "react-native";
+import { Icon } from "@/components/ui/icon";
 import { BranchPickerPrimitive, useAuiState } from "@assistant-ui/react-native";
+import { useTheme } from "@/hooks/use-theme";
 
-export function MessageBranchPicker() {
+export function MessageBranchPicker({
+  align = "flex-start",
+}: {
+  align?: "flex-start" | "flex-end";
+}) {
+  const { colors } = useTheme();
   const branchNumber = useAuiState((s) => s.message.branchNumber);
   const branchCount = useAuiState((s) => s.message.branchCount);
 
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const iconColor = isDark ? "#8e8e93" : "#6e6e73";
-
   if (branchCount <= 1) return null;
 
   return (
-    <View style={styles.container}>
-      <BranchPickerPrimitive.Previous style={styles.button}>
-        <Ionicons
-          name="chevron-back"
-          size={14}
-          color={
-            branchNumber <= 1 ? (isDark ? "#3a3a3c" : "#d1d1d6") : iconColor
-          }
-        />
+    <View style={[styles.container, { justifyContent: align }]}>
+      <BranchPickerPrimitive.Previous
+        style={[styles.button, { opacity: branchNumber <= 1 ? 0.35 : 1 }]}
+        hitSlop={4}
+      >
+        <Icon name="chevron-left" size={16} color={colors.mutedForeground} />
       </BranchPickerPrimitive.Previous>
-      <ThemedText style={styles.label} lightColor="#6e6e73" darkColor="#8e8e93">
-        {branchNumber} / {branchCount}
-      </ThemedText>
-      <BranchPickerPrimitive.Next style={styles.button}>
-        <Ionicons
-          name="chevron-forward"
-          size={14}
-          color={
-            branchNumber >= branchCount
-              ? isDark
-                ? "#3a3a3c"
-                : "#d1d1d6"
-              : iconColor
-          }
-        />
+      <Text style={[styles.label, { color: colors.mutedForeground }]}>
+        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+      </Text>
+      <BranchPickerPrimitive.Next
+        style={[
+          styles.button,
+          { opacity: branchNumber >= branchCount ? 0.35 : 1 },
+        ]}
+        hitSlop={4}
+      >
+        <Icon name="chevron-right" size={16} color={colors.mutedForeground} />
       </BranchPickerPrimitive.Next>
     </View>
   );
@@ -531,7 +617,6 @@ const styles = StyleSheet.create({
   },
   button: {
     padding: 4,
-    borderRadius: 6,
   },
   label: {
     fontSize: 12,
@@ -544,53 +629,82 @@ const styles = StyleSheet.create({
 ## components/assistant-ui/message.tsx
 
 ```tsx
-import { View, Image, StyleSheet, useColorScheme } from "react-native";
-import { ThemedText } from "@/components/themed-text";
-import { useAuiState, MessagePrimitive } from "@assistant-ui/react-native";
+import { useEffect, useRef } from "react";
+import { View, Text, Animated, Platform, StyleSheet } from "react-native";
+import { Image } from "expo-image";
+import {
+  useAuiState,
+  MessagePrimitive,
+  ErrorPrimitive,
+  type TextMessagePartComponent,
+} from "@assistant-ui/react-native";
+import { useTheme } from "@/hooks/use-theme";
+import { Radius } from "@/constants/theme";
 import { MessageActionBar } from "./message-action-bar";
 import { MessageBranchPicker } from "./message-branch-picker";
 
-function MessageError() {
-  const error = useAuiState((s) => {
-    const status = s.message.status;
-    if (status?.type === "incomplete" && status.reason === "error") {
-      return status.error ?? "An error occurred";
-    }
-    return null;
-  });
+const UserText: TextMessagePartComponent = ({ text }) => {
+  const { colors } = useTheme();
+  return (
+    <Text style={[styles.userText, { color: colors.foreground }]}>{text}</Text>
+  );
+};
 
-  if (!error) return null;
+const AssistantText: TextMessagePartComponent = ({ text }) => {
+  const { colors } = useTheme();
+  return (
+    <Text style={[styles.assistantText, { color: colors.foreground }]}>
+      {text}
+    </Text>
+  );
+};
+
+function TypingDot({ delay }: { delay: number }) {
+  const { colors } = useTheme();
+  const opacity = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    const anim = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 400,
+          delay,
+          useNativeDriver: Platform.OS !== "web",
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: 400,
+          useNativeDriver: Platform.OS !== "web",
+        }),
+      ]),
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [opacity, delay]);
 
   return (
-    <View style={styles.errorContainer}>
-      <ThemedText
-        style={styles.errorText}
-        lightColor="#ff453a"
-        darkColor="#ff6961"
-      >
-        {typeof error === "string" ? error : "An error occurred"}
-      </ThemedText>
-    </View>
+    <Animated.View
+      style={[styles.dot, { opacity, backgroundColor: colors.mutedForeground }]}
+    />
   );
 }
 
-function TextPart({ part }: { part: { type: "text"; text: string } }) {
-  const role = useAuiState((s) => s.message.role);
-  if (role === "user") {
-    return <ThemedText style={styles.userText}>{part.text}</ThemedText>;
-  }
+function TypingIndicator() {
+  const isRunning = useAuiState((s) => s.message.status?.type === "running");
+  if (!isRunning) return null;
+
   return (
-    <ThemedText
-      style={styles.assistantText}
-      lightColor="#000000"
-      darkColor="#ffffff"
-    >
-      {part.text}
-    </ThemedText>
+    <View style={styles.typing}>
+      <TypingDot delay={0} />
+      <TypingDot delay={160} />
+      <TypingDot delay={320} />
+    </View>
   );
 }
 
 function MessageImageAttachment() {
+  const { colors } = useTheme();
   const attachment = useAuiState((s) => s.attachment);
   if (!attachment) return null;
 
@@ -598,119 +712,138 @@ function MessageImageAttachment() {
   const uri = (imageContent as any)?.image;
   if (!uri) return null;
 
-  return <Image source={{ uri }} style={styles.messageImage} />;
+  return (
+    <Image
+      source={{ uri }}
+      style={[styles.messageImage, { backgroundColor: colors.muted }]}
+      contentFit="cover"
+      transition={120}
+    />
+  );
 }
 
-export function MessageBubble() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const role = useAuiState((s) => s.message.role);
-  const isRunning = useAuiState((s) => s.message.status?.type === "running");
-  const isUser = role === "user";
-
-  if (isUser) {
-    return (
-      <View style={[styles.container, styles.userContainer]}>
+function UserMessage() {
+  const { colors } = useTheme();
+  return (
+    <MessagePrimitive.Root style={styles.userContainer}>
+      <View style={styles.userAttachments}>
         <MessagePrimitive.Attachments>
           {() => <MessageImageAttachment />}
         </MessagePrimitive.Attachments>
-        <View
-          style={[
-            styles.bubble,
-            styles.userBubble,
-            { backgroundColor: isDark ? "#0a84ff" : "#007aff" },
-          ]}
-        >
-          <MessagePrimitive.Content
-            renderText={({ part }) => <TextPart part={part} />}
-          />
-        </View>
-        <MessageBranchPicker />
       </View>
-    );
-  }
+      <View style={[styles.userBubble, { backgroundColor: colors.muted }]}>
+        <MessagePrimitive.Parts components={{ Text: UserText }} />
+      </View>
+      <MessageBranchPicker align="flex-end" />
+    </MessagePrimitive.Root>
+  );
+}
 
+function AssistantMessage() {
+  const { colors } = useTheme();
   return (
-    <View style={[styles.container, styles.assistantContainer]}>
-      <View
-        style={[
-          styles.bubble,
-          styles.assistantBubble,
-          {
-            backgroundColor: isDark
-              ? "rgba(44, 44, 46, 0.8)"
-              : "rgba(229, 229, 234, 0.8)",
-          },
-        ]}
-      >
-        <MessagePrimitive.Content
-          renderText={({ part }) => <TextPart part={part} />}
+    <MessagePrimitive.Root style={styles.assistantContainer}>
+      <View style={styles.assistantContent}>
+        <MessagePrimitive.Parts
+          components={{ Text: AssistantText, Empty: TypingIndicator }}
         />
-        <MessageError />
+        <ErrorPrimitive.Root
+          style={[
+            styles.error,
+            {
+              backgroundColor: colors.destructiveSurface,
+              borderColor: colors.destructive,
+            },
+          ]}
+        >
+          <ErrorPrimitive.Message
+            style={[styles.errorText, { color: colors.destructive }]}
+          />
+        </ErrorPrimitive.Root>
       </View>
-      {!isRunning && (
+      <MessagePrimitive.If running={false}>
         <View style={styles.actionsRow}>
-          <MessageBranchPicker />
+          <MessageBranchPicker align="flex-start" />
           <MessageActionBar />
         </View>
-      )}
-    </View>
+      </MessagePrimitive.If>
+    </MessagePrimitive.Root>
   );
 }
 
+export function MessageBubble() {
+  const role = useAuiState((s) => s.message.role);
+  if (role === "user") return <UserMessage />;
+  return <AssistantMessage />;
+}
+
 const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-  },
   userContainer: {
     alignItems: "flex-end",
   },
-  assistantContainer: {
-    alignItems: "flex-start",
+  userAttachments: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    gap: 6,
   },
-  bubble: {
+  userBubble: {
     maxWidth: "85%",
     paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 20,
-  },
-  userBubble: {
-    borderBottomRightRadius: 6,
-  },
-  actionsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    marginTop: 4,
-  },
-  assistantBubble: {
-    borderBottomLeftRadius: 6,
-  },
-  errorContainer: {
-    paddingTop: 4,
+    paddingVertical: 10,
+    borderRadius: Radius.bubble,
   },
-  errorText: {
-    fontSize: 14,
-    lineHeight: 20,
+  assistantContainer: {
+    alignItems: "flex-start",
   },
-  messageImage: {
-    width: 200,
-    height: 200,
-    borderRadius: 12,
-    marginBottom: 4,
+  assistantContent: {
+    paddingHorizontal: 2,
   },
   userText: {
     fontSize: 16,
     lineHeight: 22,
-    color: "#ffffff",
     letterSpacing: -0.2,
   },
   assistantText: {
     fontSize: 16,
-    lineHeight: 24,
+    lineHeight: 25,
     letterSpacing: -0.2,
   },
+  typing: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    paddingVertical: 8,
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5,
+  },
+  messageImage: {
+    width: 200,
+    height: 200,
+    borderRadius: Radius.card,
+    marginBottom: 6,
+  },
+  actionsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    marginTop: 6,
+    marginLeft: -4,
+  },
+  error: {
+    marginTop: 8,
+    borderRadius: Radius.md,
+    borderWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
 });
 
 ```
@@ -718,101 +851,71 @@ const styles = StyleSheet.create({
 ## components/assistant-ui/thread.tsx
 
 ```tsx
+import { useRef } from "react";
 import {
   View,
   Text,
-  Pressable,
   StyleSheet,
   KeyboardAvoidingView,
   Platform,
-  useColorScheme,
+  type FlatList,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { MessageBubble } from "./message";
 import { Composer } from "./composer";
-import { ThreadPrimitive, useAui } from "@assistant-ui/react-native";
-
-function SuggestionChip({ title, prompt }: { title: string; prompt: string }) {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const aui = useAui();
+import { ThreadPrimitive } from "@assistant-ui/react-native";
+import { useTheme } from "@/hooks/use-theme";
+import { Radius, Spacing } from "@/constants/theme";
+import { haptics } from "@/lib/haptics";
+
+const suggestions = [
+  "What's the weather in Tokyo?",
+  "Tell me a joke",
+  "Help me write an email",
+];
 
+function SuggestionChip({ prompt }: { prompt: string }) {
+  const { colors } = useTheme();
   return (
-    <Pressable
-      onPress={() => aui.thread().append(prompt)}
-      style={[
-        styles.suggestionChip,
+    <ThreadPrimitive.Suggestion
+      prompt={prompt}
+      send
+      onPressIn={haptics.selection}
+      style={({ pressed }: { pressed: boolean }) => [
+        styles.chip,
         {
-          backgroundColor: isDark
-            ? "rgba(44, 44, 46, 0.8)"
-            : "rgba(229, 229, 234, 0.8)",
+          borderColor: colors.border,
+          backgroundColor: pressed ? colors.muted : colors.background,
         },
       ]}
     >
-      <Text
-        style={[
-          styles.suggestionText,
-          { color: isDark ? "#ffffff" : "#000000" },
-        ]}
-      >
-        {title}
+      <Text style={[styles.chipText, { color: colors.foreground }]}>
+        {prompt}
       </Text>
-    </Pressable>
-  );
-}
-
-const defaultSuggestions = [
-  {
-    title: "What's the weather in Tokyo?",
-    prompt: "What's the weather in Tokyo?",
-  },
-  { title: "Tell me a joke", prompt: "Tell me a joke" },
-  { title: "Help me write an email", prompt: "Help me write an email" },
-];
-
-function Suggestions() {
-  return (
-    <View style={styles.suggestionsContainer}>
-      {defaultSuggestions.map((s, i) => (
-        <SuggestionChip key={i} title={s.title} prompt={s.prompt} />
-      ))}
-    </View>
+    </ThreadPrimitive.Suggestion>
   );
 }
 
 function EmptyState() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
-
+  const { colors } = useTheme();
   return (
-    <View
-      style={[
-        styles.emptyContainer,
-        { backgroundColor: isDark ? "#000000" : "#ffffff" },
-      ]}
-    >
-      <View style={styles.emptyIconContainer}>
-        <Text style={styles.emptyIcon}>💭</Text>
-      </View>
-      <Text
-        style={[styles.emptyTitle, { color: isDark ? "#ffffff" : "#000000" }]}
-      >
-        How can I help?
+    <View style={styles.empty}>
+      <Text style={[styles.welcome, { color: colors.foreground }]}>
+        How can I help you today?
       </Text>
-      <Text
-        style={[
-          styles.emptySubtitle,
-          { color: isDark ? "#8e8e93" : "#6e6e73" },
-        ]}
-      >
-        Send a message to start chatting
-      </Text>
-      <Suggestions />
+      <View style={styles.chips}>
+        {suggestions.map((prompt) => (
+          <SuggestionChip key={prompt} prompt={prompt} />
+        ))}
+      </View>
     </View>
   );
 }
 
 function ChatMessages() {
+  const listRef = useRef<FlatList>(null);
+  const nearBottom = useRef(true);
+
   return (
     <>
       <ThreadPrimitive.Empty>
@@ -820,8 +923,24 @@ function ChatMessages() {
       </ThreadPrimitive.Empty>
       <ThreadPrimitive.If empty={false}>
         <ThreadPrimitive.Messages
+          // Messages isn't a forwardRef component, but it spreads extra props
+          // onto its FlatList, so React 19 still forwards this ref to the list.
+          {...({ ref: listRef } as object)}
+          style={styles.flex}
           contentContainerStyle={styles.messageList}
           showsVerticalScrollIndicator={false}
+          scrollEventThrottle={32}
+          onScroll={(e) => {
+            const { contentOffset, contentSize, layoutMeasurement } =
+              e.nativeEvent;
+            nearBottom.current =
+              contentOffset.y + layoutMeasurement.height >=
+              contentSize.height - 48;
+          }}
+          onContentSizeChange={() => {
+            if (nearBottom.current)
+              listRef.current?.scrollToEnd({ animated: true });
+          }}
         >
           {() => <MessageBubble />}
         </ThreadPrimitive.Messages>
@@ -832,23 +951,18 @@ function ChatMessages() {
 
 export function Thread() {
   const insets = useSafeAreaInsets();
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
+  const { colors } = useTheme();
+
   return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: isDark ? "#000000" : "#ffffff" },
-      ]}
-    >
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
       <KeyboardAvoidingView
-        style={styles.keyboardAvoid}
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={styles.flex}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
       >
-        <View style={styles.messagesContainer}>
+        <View style={styles.flex}>
           <ChatMessages />
         </View>
-        <View style={{ paddingBottom: insets.bottom }}>
+        <View style={{ paddingBottom: insets.bottom + 8 }}>
           <Composer />
         </View>
       </KeyboardAvoidingView>
@@ -860,59 +974,43 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  keyboardAvoid: {
-    flex: 1,
-  },
-  messagesContainer: {
+  flex: {
     flex: 1,
   },
   messageList: {
+    width: "100%",
+    maxWidth: Spacing.threadMaxWidth,
+    marginHorizontal: "auto",
     paddingVertical: 20,
-    paddingHorizontal: 4,
+    paddingHorizontal: 12,
+    gap: 18,
   },
-  emptyContainer: {
+  empty: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    padding: 40,
-  },
-  emptyIconContainer: {
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    backgroundColor: "rgba(0, 122, 255, 0.1)",
-    justifyContent: "center",
-    alignItems: "center",
-    marginBottom: 20,
+    paddingHorizontal: 24,
   },
-  emptyIcon: {
-    fontSize: 32,
-  },
-  emptyTitle: {
-    fontSize: 22,
+  welcome: {
+    fontSize: 24,
     fontWeight: "600",
-    marginBottom: 8,
     letterSpacing: -0.4,
-  },
-  emptySubtitle: {
-    fontSize: 15,
     textAlign: "center",
-    letterSpacing: -0.2,
+    marginBottom: 24,
   },
-  suggestionsContainer: {
+  chips: {
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "center",
     gap: 8,
-    marginTop: 20,
-    paddingHorizontal: 16,
   },
-  suggestionChip: {
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: 18,
+  chip: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: Radius.pill,
+    borderWidth: StyleSheet.hairlineWidth,
   },
-  suggestionText: {
+  chipText: {
     fontSize: 14,
     letterSpacing: -0.2,
   },
@@ -925,12 +1023,15 @@ const styles = StyleSheet.create({
 ```tsx
 "use generative";
 
-import { View, Text, StyleSheet, useColorScheme } from "react-native";
+import type { ReactNode } from "react";
+import { View, Text, StyleSheet } from "react-native";
 import {
   defineToolkit,
   type ToolCallMessagePartProps,
 } from "@assistant-ui/react-native";
 import { z } from "zod";
+import { useTheme } from "@/hooks/use-theme";
+import { Radius } from "@/constants/theme";
 
 // Open-Meteo API adapters (free, no API key needed)
 
@@ -967,16 +1068,16 @@ const mapWeatherCode = (code: number): string => {
 };
 
 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";
+  if (code === 0) return "☀️";
+  if (code <= 3) return "⛅";
+  if (code <= 48) return "🌫️";
+  if (code <= 57) return "🌦️";
+  if (code <= 67) return "🌧️";
+  if (code <= 77) return "❄️";
+  if (code <= 82) return "🌦️";
+  if (code <= 86) return "🌨️";
+  if (code === 95) return "⛈️";
+  return "🌩️";
 };
 
 const fetchWeatherFromOpenMeteo = async ({
@@ -1033,6 +1134,50 @@ const fetchWeatherFromOpenMeteo = async ({
 
 // Tool UI Components
 
+function ToolCard({ children }: { children: ReactNode }) {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={[
+        styles.card,
+        { backgroundColor: colors.muted, borderColor: colors.border },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+function ToolStatus({ label }: { label: string }) {
+  const { colors } = useTheme();
+  return (
+    <ToolCard>
+      <Text style={[styles.statusText, { color: colors.mutedForeground }]}>
+        {label}
+      </Text>
+    </ToolCard>
+  );
+}
+
+function ToolError({ label }: { label: string }) {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.destructiveSurface,
+          borderColor: colors.destructive,
+        },
+      ]}
+    >
+      <Text style={[styles.statusText, { color: colors.destructive }]}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
 function GeocodeToolUI(
   props: ToolCallMessagePartProps<
     { query: string },
@@ -1043,70 +1188,38 @@ function GeocodeToolUI(
     }
   >,
 ) {
-  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" }]}>
-          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 { colors } = useTheme();
+
+  if (props.status?.type === "running") {
+    return <ToolStatus label="Finding location…" />;
+  }
+
+  if (props.result?.error) {
+    return <ToolError label={`Geocoding failed: ${props.result.error}`} />;
   }
 
   const result = props.result?.result;
   if (!result) return null;
 
   return (
-    <View
-      style={[styles.card, { backgroundColor: isDark ? "#1c1c1e" : "#f2f2f7" }]}
-    >
+    <ToolCard>
       <View style={styles.row}>
-        <Text style={styles.pin}>{"\uD83D\uDCCD"}</Text>
+        <Text style={styles.pin}>{"📍"}</Text>
         <View>
-          <Text
-            style={[
-              styles.locationName,
-              { color: isDark ? "#ffffff" : "#000000" },
-            ]}
-          >
+          <Text style={[styles.locationName, { color: colors.foreground }]}>
             {result.name}
           </Text>
-          <Text
-            style={[styles.coords, { color: isDark ? "#8e8e93" : "#6e6e73" }]}
-          >
+          <Text style={[styles.coords, { color: colors.mutedForeground }]}>
             {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>
+    </ToolCard>
   );
 }
 
@@ -1129,36 +1242,17 @@ function WeatherToolUI(
     }
   >,
 ) {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
+  const { colors } = useTheme();
 
   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>
-    );
+    return <ToolStatus label={`Fetching weather for ${props.args.query}…`} />;
   }
 
   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>
+      <ToolError
+        label={`Weather unavailable: ${props.result?.error ?? "Unknown error"}`}
+      />
     );
   }
 
@@ -1166,64 +1260,40 @@ function WeatherToolUI(
     props.result;
 
   return (
-    <View
-      style={[
-        styles.weatherCard,
-        { backgroundColor: isDark ? "#1c1c1e" : "#f2f2f7" },
-      ]}
-    >
+    <ToolCard>
       <View style={styles.weatherHeader}>
         <Text style={styles.weatherEmoji}>
           {mapWeatherEmoji(weatherCode ?? 0)}
         </Text>
         <View>
-          <Text
-            style={[
-              styles.locationName,
-              { color: isDark ? "#ffffff" : "#000000" },
-            ]}
-          >
+          <Text style={[styles.locationName, { color: colors.foreground }]}>
             {location}
           </Text>
-          <Text
-            style={[
-              styles.condition,
-              { color: isDark ? "#8e8e93" : "#6e6e73" },
-            ]}
-          >
+          <Text style={[styles.condition, { color: colors.mutedForeground }]}>
             {mapWeatherCode(weatherCode ?? 0)}
           </Text>
         </View>
       </View>
 
-      <Text style={styles.tempLarge}>
+      <Text style={[styles.tempLarge, { color: colors.foreground }]}>
         {temperature ?? "--"}
-        {"\u00B0"}F
+        {"°"}F
       </Text>
 
       {windSpeed != null && (
-        <Text style={[styles.wind, { color: isDark ? "#8e8e93" : "#6e6e73" }]}>
+        <Text style={[styles.wind, { color: colors.mutedForeground }]}>
           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)",
-            },
-          ]}
-        >
+        <View style={[styles.forecastRow, { borderTopColor: colors.border }]}>
           {forecast.map((day, i) => (
             <View key={i} style={styles.forecastDay}>
               <Text
                 style={[
                   styles.forecastLabel,
-                  { color: isDark ? "#8e8e93" : "#6e6e73" },
+                  { color: colors.mutedForeground },
                 ]}
               >
                 {day.label}
@@ -1231,29 +1301,24 @@ function WeatherToolUI(
               <Text style={styles.forecastEmoji}>
                 {mapWeatherEmoji(day.code)}
               </Text>
-              <Text
-                style={[
-                  styles.forecastTemp,
-                  { color: isDark ? "#ffffff" : "#000000" },
-                ]}
-              >
+              <Text style={[styles.forecastTemp, { color: colors.foreground }]}>
                 {day.max}
-                {"\u00B0"}
+                {"°"}
               </Text>
               <Text
                 style={[
                   styles.forecastTempLow,
-                  { color: isDark ? "#8e8e93" : "#6e6e73" },
+                  { color: colors.mutedForeground },
                 ]}
               >
                 {day.min}
-                {"\u00B0"}
+                {"°"}
               </Text>
             </View>
           ))}
         </View>
       )}
-    </View>
+    </ToolCard>
   );
 }
 
@@ -1293,16 +1358,15 @@ export default defineToolkit({
 
 const styles = StyleSheet.create({
   card: {
-    padding: 12,
-    borderRadius: 12,
-    marginVertical: 4,
-  },
-  weatherCard: {
-    padding: 16,
-    borderRadius: 12,
+    padding: 14,
+    borderRadius: Radius.card,
+    borderWidth: StyleSheet.hairlineWidth,
     marginVertical: 4,
     gap: 4,
   },
+  statusText: {
+    fontSize: 13,
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -1319,9 +1383,6 @@ const styles = StyleSheet.create({
     fontSize: 13,
     marginTop: 2,
   },
-  label: {
-    fontSize: 13,
-  },
   weatherHeader: {
     flexDirection: "row",
     alignItems: "center",
@@ -1338,7 +1399,7 @@ const styles = StyleSheet.create({
   tempLarge: {
     fontSize: 40,
     fontWeight: "700",
-    color: "#007aff",
+    letterSpacing: -1,
   },
   wind: {
     fontSize: 13,
@@ -1374,148 +1435,68 @@ const styles = StyleSheet.create({
 
 ```
 
-## components/themed-text.tsx
-
-```tsx
-import { StyleSheet, Text, type TextProps } from "react-native";
-
-import { useThemeColor } from "@/hooks/use-theme-color";
-
-export type ThemedTextProps = TextProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link";
-};
-
-export function ThemedText({
-  style,
-  lightColor,
-  darkColor,
-  type = "default",
-  ...rest
-}: ThemedTextProps) {
-  const color = useThemeColor({ light: lightColor, dark: darkColor }, "text");
-
-  return (
-    <Text
-      style={[
-        { color },
-        type === "default" ? styles.default : undefined,
-        type === "title" ? styles.title : undefined,
-        type === "defaultSemiBold" ? styles.defaultSemiBold : undefined,
-        type === "subtitle" ? styles.subtitle : undefined,
-        type === "link" ? styles.link : undefined,
-        style,
-      ]}
-      {...rest}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  default: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  defaultSemiBold: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: "600",
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: "bold",
-    lineHeight: 32,
-  },
-  subtitle: {
-    fontSize: 20,
-    fontWeight: "bold",
-  },
-  link: {
-    lineHeight: 30,
-    fontSize: 16,
-    color: "#0a7ea4",
-  },
-});
-
-```
-
-## components/themed-view.tsx
-
-```tsx
-import { View, type ViewProps } from "react-native";
-
-import { useThemeColor } from "@/hooks/use-theme-color";
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-};
-
-export function ThemedView({
-  style,
-  lightColor,
-  darkColor,
-  ...otherProps
-}: ThemedViewProps) {
-  const backgroundColor = useThemeColor(
-    { light: lightColor, dark: darkColor },
-    "background",
-  );
-
-  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
-}
-
-```
-
 ## components/thread-list/ThreadListDrawer.tsx
 
 ```tsx
-import { FlatList, View, StyleSheet, useColorScheme } from "react-native";
+import { View, Text, Pressable, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAui, useAuiState } from "@assistant-ui/react-native";
-import { ThreadListItem } from "./ThreadListItem";
+import {
+  ThreadListPrimitive,
+  ThreadListItemByIndexProvider,
+  useAui,
+} from "@assistant-ui/react-native";
 import type { DrawerContentComponentProps } from "expo-router/build/react-navigation/drawer/types";
+import { ThreadListItem } from "./ThreadListItem";
+import { Icon } from "@/components/ui/icon";
+import { useTheme } from "@/hooks/use-theme";
+import { Radius } from "@/constants/theme";
+import { haptics } from "@/lib/haptics";
 
 export function ThreadListDrawer({ navigation }: DrawerContentComponentProps) {
+  const { colors } = useTheme();
   const aui = useAui();
-  const threadIds = useAuiState((s) => s.threads.threadIds);
-  const mainThreadId = useAuiState((s) => s.threads.mainThreadId);
-  const threadItems = useAuiState((s) => s.threads.threadItems);
   const insets = useSafeAreaInsets();
-  const isDark = useColorScheme() === "dark";
 
   return (
     <View
       style={[
         styles.container,
-        {
-          backgroundColor: isDark
-            ? "rgba(28, 28, 30, 0.85)"
-            : "rgba(242, 242, 247, 0.85)",
-          paddingTop: insets.top,
-        },
+        { backgroundColor: colors.background, paddingTop: insets.top + 12 },
       ]}
     >
-      <FlatList
-        data={threadIds}
-        keyExtractor={(item) => item}
-        renderItem={({ item: threadId }) => {
-          const threadItem = threadItems.find((t) => t.id === threadId);
-          return (
-            <ThreadListItem
-              title={threadItem?.title ?? "New Chat"}
-              isActive={threadId === mainThreadId}
-              onPress={() => {
-                aui.threads().switchToThread(threadId);
-                navigation.closeDrawer();
-              }}
-            />
-          );
-        }}
-        contentContainerStyle={styles.list}
-        showsVerticalScrollIndicator={false}
-      />
+      <ThreadListPrimitive.Root style={styles.root}>
+        <Pressable
+          onPressIn={haptics.selection}
+          onPress={() => {
+            aui.threads().switchToNewThread();
+            navigation.closeDrawer();
+          }}
+          style={({ pressed }) => [
+            styles.newButton,
+            { backgroundColor: pressed ? colors.muted : "transparent" },
+          ]}
+        >
+          <Icon name="compose" size={18} color={colors.foreground} />
+          <Text style={[styles.newLabel, { color: colors.foreground }]}>
+            New chat
+          </Text>
+        </Pressable>
+
+        <Text style={[styles.sectionLabel, { color: colors.mutedForeground }]}>
+          Recent
+        </Text>
+
+        <ThreadListPrimitive.Items
+          renderItem={({ index }) => (
+            <ThreadListItemByIndexProvider index={index} archived={false}>
+              <ThreadListItem onSelect={() => navigation.closeDrawer()} />
+            </ThreadListItemByIndexProvider>
+          )}
+          style={styles.list}
+          contentContainerStyle={styles.listContent}
+          showsVerticalScrollIndicator={false}
+        />
+      </ThreadListPrimitive.Root>
     </View>
   );
 }
@@ -1524,8 +1505,36 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  root: {
+    flex: 1,
+  },
+  newButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    height: 40,
+    paddingHorizontal: 12,
+    marginHorizontal: 8,
+    marginBottom: 4,
+    borderRadius: Radius.md,
+  },
+  newLabel: {
+    fontSize: 15,
+    fontWeight: "500",
+    letterSpacing: -0.2,
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: "500",
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 6,
+  },
   list: {
-    paddingVertical: 8,
+    flex: 1,
+  },
+  listContent: {
+    paddingBottom: 8,
   },
 });
 
@@ -1534,211 +1543,168 @@ const styles = StyleSheet.create({
 ## components/thread-list/ThreadListItem.tsx
 
 ```tsx
+import { Text, Pressable, StyleSheet } from "react-native";
 import {
-  Pressable,
-  Text,
-  View,
-  StyleSheet,
-  useColorScheme,
-} from "react-native";
-
-type ThreadListItemProps = {
-  title: string;
-  isActive: boolean;
-  onPress: () => void;
-};
+  ThreadListItemPrimitive,
+  useAui,
+  useAuiState,
+} from "@assistant-ui/react-native";
+import { useTheme } from "@/hooks/use-theme";
+import { Radius } from "@/constants/theme";
+import { haptics } from "@/lib/haptics";
 
-export function ThreadListItem({
-  title,
-  isActive,
-  onPress,
-}: ThreadListItemProps) {
-  const isDark = useColorScheme() === "dark";
+export function ThreadListItem({ onSelect }: { onSelect: () => void }) {
+  const { colors } = useTheme();
+  const aui = useAui();
+  const isActive = useAuiState(
+    (s) => s.threads.mainThreadId === s.threadListItem.id,
+  );
 
-  const content = (
-    <View style={styles.row}>
-      {isActive && (
-        <View style={[styles.indicator, { backgroundColor: "#007AFF" }]} />
-      )}
-      <Text
-        numberOfLines={1}
-        style={[
-          styles.title,
-          { color: isDark ? "#ffffff" : "#000000" },
-          isActive && styles.titleActive,
+  return (
+    <ThreadListItemPrimitive.Root>
+      <Pressable
+        onPressIn={haptics.selection}
+        onPress={() => {
+          aui.threadListItem().switchTo();
+          onSelect();
+        }}
+        style={({ pressed }) => [
+          styles.item,
+          (isActive || pressed) && { backgroundColor: colors.muted },
         ]}
       >
-        {title}
-      </Text>
-    </View>
-  );
-
-  if (isActive) {
-    return (
-      <Pressable onPress={onPress} style={styles.itemOuter}>
-        <View
+        <Text
+          numberOfLines={1}
           style={[
-            styles.glassItem,
+            styles.title,
             {
-              backgroundColor: isDark
-                ? "rgba(44, 44, 46, 0.6)"
-                : "rgba(209, 209, 214, 0.6)",
+              color: colors.foreground,
+              fontWeight: isActive ? "600" : "400",
             },
           ]}
         >
-          {content}
-        </View>
+          <ThreadListItemPrimitive.Title fallback="New chat" />
+        </Text>
       </Pressable>
-    );
-  }
-
-  return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => [
-        styles.itemOuter,
-        styles.itemPadding,
-        pressed && {
-          backgroundColor: isDark ? "#3a3a3c" : "#d1d1d6",
-          borderRadius: 10,
-        },
-      ]}
-    >
-      {content}
-    </Pressable>
+    </ThreadListItemPrimitive.Root>
   );
 }
 
 const styles = StyleSheet.create({
-  itemOuter: {
+  item: {
+    height: 38,
+    justifyContent: "center",
+    paddingHorizontal: 12,
     marginHorizontal: 8,
-    marginVertical: 2,
-  },
-  itemPadding: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  glassItem: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 10,
-    overflow: "hidden",
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  indicator: {
-    width: 4,
-    height: 20,
-    borderRadius: 2,
-    marginRight: 10,
+    borderRadius: Radius.md,
   },
   title: {
     fontSize: 15,
-    flex: 1,
-  },
-  titleActive: {
-    fontWeight: "600",
+    letterSpacing: -0.2,
   },
 });
 
 ```
 
-## components/ui/icon-symbol.ios.tsx
+## components/ui/icon-mappings.ts
+
+```typescript
+import type { ComponentProps } from "react";
+import type MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import type { SymbolViewProps, SymbolWeight } from "expo-symbols";
+
+export type IconName =
+  | "compose"
+  | "send"
+  | "stop"
+  | "add"
+  | "remove"
+  | "copy"
+  | "check"
+  | "reload"
+  | "chevron-left"
+  | "chevron-right"
+  | "menu"
+  | "location";
+
+export type IconProps = {
+  name: IconName;
+  size?: number;
+  color: string;
+  weight?: SymbolWeight;
+};
+
+/** SF Symbols rendered natively on iOS via `expo-symbols`. */
+export const SF_SYMBOLS: Record<IconName, SymbolViewProps["name"]> = {
+  compose: "square.and.pencil",
+  send: "arrow.up",
+  stop: "stop.fill",
+  add: "plus",
+  remove: "xmark",
+  copy: "doc.on.doc",
+  check: "checkmark",
+  reload: "arrow.clockwise",
+  "chevron-left": "chevron.left",
+  "chevron-right": "chevron.right",
+  menu: "line.3.horizontal",
+  location: "location.fill",
+};
+
+/** Material Icons fallback for Android and web. */
+export const MATERIAL_ICONS: Record<
+  IconName,
+  ComponentProps<typeof MaterialIcons>["name"]
+> = {
+  compose: "edit",
+  send: "arrow-upward",
+  stop: "stop",
+  add: "add",
+  remove: "close",
+  copy: "content-copy",
+  check: "check",
+  reload: "refresh",
+  "chevron-left": "chevron-left",
+  "chevron-right": "chevron-right",
+  menu: "menu",
+  location: "place",
+};
+
+```
+
+## components/ui/icon.ios.tsx
 
 ```tsx
-import {
-  SymbolView,
-  type SymbolViewProps,
-  type SymbolWeight,
-} from "expo-symbols";
-import type { StyleProp, ViewStyle } from "react-native";
+import { SymbolView } from "expo-symbols";
+import { SF_SYMBOLS, type IconProps } from "./icon-mappings";
 
-export function IconSymbol({
+export function Icon({
   name,
   size = 24,
   color,
-  style,
   weight = "regular",
-}: {
-  name: SymbolViewProps["name"];
-  size?: number;
-  color: string;
-  style?: StyleProp<ViewStyle>;
-  weight?: SymbolWeight;
-}) {
+}: IconProps) {
   return (
     <SymbolView
-      weight={weight}
+      name={SF_SYMBOLS[name]}
       tintColor={color}
+      weight={weight}
       resizeMode="scaleAspectFit"
-      name={name}
-      style={[
-        {
-          width: size,
-          height: size,
-        },
-        style,
-      ]}
+      style={{ width: size, height: size }}
     />
   );
 }
 
 ```
 
-## components/ui/icon-symbol.tsx
+## components/ui/icon.tsx
 
 ```tsx
-// Fallback for using MaterialIcons on Android and web.
-
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-import type { SymbolWeight, SFSymbol } from "expo-symbols";
-import type { ComponentProps } from "react";
-import type { OpaqueColorValue, StyleProp, TextStyle } from "react-native";
-
-type IconMapping = Record<
-  SFSymbol,
-  ComponentProps<typeof MaterialIcons>["name"]
->;
-type IconSymbolName = keyof typeof MAPPING;
-
-/**
- * Add your SF Symbols to Material Icons mappings here.
- * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
- * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
- */
-const MAPPING = {
-  "house.fill": "home",
-  "paperplane.fill": "send",
-  "chevron.left.forwardslash.chevron.right": "code",
-  "chevron.right": "chevron-right",
-} as IconMapping;
+import { MATERIAL_ICONS, type IconProps } from "./icon-mappings";
 
-/**
- * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
- * This ensures a consistent look across platforms, and optimal resource usage.
- * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
- */
-export function IconSymbol({
-  name,
-  size = 24,
-  color,
-  style,
-}: {
-  name: IconSymbolName;
-  size?: number;
-  color: string | OpaqueColorValue;
-  style?: StyleProp<TextStyle>;
-  weight?: SymbolWeight;
-}) {
+export function Icon({ name, size = 24, color }: IconProps) {
   return (
-    <MaterialIcons
-      color={color}
-      size={size}
-      name={MAPPING[name]}
-      style={style}
-    />
+    <MaterialIcons name={MATERIAL_ICONS[name]} size={size} color={color} />
   );
 }
 
@@ -1748,59 +1714,83 @@ export function IconSymbol({
 
 ```typescript
 /**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ * Design tokens for the assistant-ui Expo example.
+ *
+ * These mirror the canonical web kit (`packages/ui`): a neutral zinc palette,
+ * a clean ChatGPT-grade look with subtle hairline borders and no heavy glass or
+ * shadow. Values are the sRGB equivalents of the web `oklch` tokens.
  */
 
-import { Platform } from "react-native";
-
-const tintColorLight = "#0a7ea4";
-const tintColorDark = "#fff";
+export type Palette = {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  border: string;
+  primary: string;
+  primaryForeground: string;
+  composer: string;
+  destructive: string;
+  destructiveForeground: string;
+  destructiveSurface: string;
+  ring: string;
+};
 
-export const Colors = {
+export const Colors: { light: Palette; dark: Palette } = {
   light: {
-    text: "#11181C",
-    background: "#fff",
-    tint: tintColorLight,
-    icon: "#687076",
-    tabIconDefault: "#687076",
-    tabIconSelected: tintColorLight,
+    background: "#ffffff",
+    foreground: "#18181b",
+    card: "#ffffff",
+    cardForeground: "#18181b",
+    muted: "#f4f4f5",
+    mutedForeground: "#71717a",
+    accent: "#f4f4f5",
+    border: "#e4e4e7",
+    primary: "#18181b",
+    primaryForeground: "#fafafa",
+    composer: "#fafafa",
+    destructive: "#dc2626",
+    destructiveForeground: "#ffffff",
+    destructiveSurface: "rgba(220, 38, 38, 0.08)",
+    ring: "#a1a1aa",
   },
   dark: {
-    text: "#ECEDEE",
-    background: "#151718",
-    tint: tintColorDark,
-    icon: "#9BA1A6",
-    tabIconDefault: "#9BA1A6",
-    tabIconSelected: tintColorDark,
+    background: "#18181b",
+    foreground: "#fafafa",
+    card: "#27272a",
+    cardForeground: "#fafafa",
+    muted: "#3f3f46",
+    mutedForeground: "#a1a1aa",
+    accent: "#3f3f46",
+    border: "rgba(255, 255, 255, 0.1)",
+    primary: "#e4e4e7",
+    primaryForeground: "#18181b",
+    composer: "#232326",
+    destructive: "#f87171",
+    destructiveForeground: "#18181b",
+    destructiveSurface: "rgba(248, 113, 113, 0.12)",
+    ring: "#52525b",
   },
 };
 
-export const Fonts = Platform.select({
-  ios: {
-    /** iOS `UIFontDescriptorSystemDesignDefault` */
-    sans: "system-ui",
-    /** iOS `UIFontDescriptorSystemDesignSerif` */
-    serif: "ui-serif",
-    /** iOS `UIFontDescriptorSystemDesignRounded` */
-    rounded: "ui-rounded",
-    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
-    mono: "ui-monospace",
-  },
-  default: {
-    sans: "normal",
-    serif: "serif",
-    rounded: "normal",
-    mono: "monospace",
-  },
-  web: {
-    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    serif: "Georgia, 'Times New Roman', serif",
-    rounded:
-      "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
-    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  },
-});
+export const Radius = {
+  sm: 6,
+  md: 8,
+  lg: 10,
+  card: 16,
+  bubble: 18,
+  composer: 24,
+  attachment: 14,
+  pill: 999,
+} as const;
+
+export const Spacing = {
+  threadMaxWidth: 768,
+  gutter: 16,
+} as const;
 
 ```
 
@@ -1863,34 +1853,42 @@ export function useColorScheme() {
 
 ```
 
-## hooks/use-theme-color.ts
+## hooks/use-theme.ts
 
 ```typescript
-/**
- * Learn more about light and dark modes:
- * https://docs.expo.dev/guides/color-schemes/
- */
-
-import { Colors } from "@/constants/theme";
+import { Colors, type Palette } from "@/constants/theme";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 
-export function useThemeColor(
-  props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
-) {
-  const scheme = useColorScheme();
-  const theme: "light" | "dark" = scheme === "dark" ? "dark" : "light";
-  const colorFromProps = props[theme];
-
-  if (colorFromProps) {
-    return colorFromProps;
-  } else {
-    return Colors[theme][colorName];
-  }
+export function useTheme(): { isDark: boolean; colors: Palette } {
+  const isDark = useColorScheme() === "dark";
+  return { isDark, colors: isDark ? Colors.dark : Colors.light };
 }
 
 ```
 
+## lib/haptics.ts
+
+```typescript
+import { Platform } from "react-native";
+import * as Haptics from "expo-haptics";
+
+const enabled = Platform.OS === "ios" || Platform.OS === "android";
+
+export const haptics = {
+  selection() {
+    if (enabled) void Haptics.selectionAsync();
+  },
+  light() {
+    if (enabled) void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  },
+  success() {
+    if (enabled)
+      void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+  },
+};
+
+```
+
 ## metro.config.js
 
 ```javascript
@@ -1955,20 +1953,23 @@ module.exports = withAui(config);
     "export:web": "expo export --platform web && node scripts/flatten-assets.mjs"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.68",
-    "@ai-sdk/react": "^3.0.199",
+    "@ai-sdk/openai": "^3.0.73",
+    "@ai-sdk/react": "^3.0.210",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-native": "workspace:*",
     "@expo/vector-icons": "^15.1.1",
     "@react-navigation/drawer": "7.9.4",
     "@react-navigation/native": "7.1.33",
-    "ai": "^6.0.197",
-    "expo": "~56.0.9",
-    "expo-constants": "~56.0.17",
-    "expo-font": "~56.0.5",
-    "expo-image-picker": "~56.0.16",
-    "expo-linking": "~56.0.13",
-    "expo-router": "~56.2.9",
+    "ai": "^6.0.208",
+    "expo": "~56.0.12",
+    "expo-clipboard": "~56.0.4",
+    "expo-constants": "~56.0.18",
+    "expo-font": "~56.0.7",
+    "expo-haptics": "~56.0.3",
+    "expo-image": "~56.0.11",
+    "expo-image-picker": "~56.0.18",
+    "expo-linking": "~56.0.14",
+    "expo-router": "~56.2.11",
     "expo-server": "~56.0.5",
     "expo-splash-screen": "~56.0.10",
     "expo-status-bar": "~56.0.4",
@@ -1977,9 +1978,9 @@ module.exports = withAui(config);
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.85.3",
-    "react-native-gesture-handler": "~2.31.2",
+    "react-native-gesture-handler": "~3.0.2",
     "react-native-reanimated": "4.3.1",
-    "react-native-safe-area-context": "~5.7.0",
+    "react-native-safe-area-context": "~5.8.0",
     "react-native-screens": "4.25.2",
     "react-native-web": "~0.21.2",
     "react-native-worklets": "0.8.3",
@@ -1987,6 +1988,7 @@ module.exports = withAui(config);
   },
   "devDependencies": {
     "@assistant-ui/metro": "workspace:*",
+    "@babel/core": "^7.29.7",
     "@types/react": "~19.2.17",
     "typescript": "~6.0.3"
   },
@@ -1998,56 +2000,57 @@ module.exports = withAui(config);
 ## README.md
 
 ```markdown
-# Welcome to your Expo app 👋
+# assistant-ui + Expo
+
+A native chat app built with [assistant-ui](https://www.assistant-ui.com) and [Expo](https://expo.dev). It runs on iOS, Android, and the web from a single codebase, and is styled to match the assistant-ui web kit: a clean, neutral, ChatGPT-grade look with subtle hairline borders.
+
+The chat is powered by `@assistant-ui/react-native` with the AI SDK runtime (`@assistant-ui/react-ai-sdk`). The example leans on native Expo APIs throughout:
+
+- **SF Symbols** (`expo-symbols`) for native iconography on iOS, with a Material Icons fallback on Android and the web.
+- **Haptics** (`expo-haptics`) for tactile feedback on send, stop, and selection.
+- **Image picker** (`expo-image-picker`) and **expo-image** for attachments.
+- **Clipboard** (`expo-clipboard`) so the copy action works natively.
+- A native **drawer** (`@react-navigation/drawer`) for the thread list, with a swipe gesture to switch conversations.
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+It follows the assistant-ui component conventions: `MessagePrimitive.Parts` for message rendering, `AuiIf` for declarative state-driven UI, the `ThreadList` / `ThreadListItem` primitives for the drawer, and a `"use generative"` toolkit (`components/assistant-ui/tools.tsx`) that renders weather cards inline.
 
 ## Get started
 
-1. Install dependencies
+1. Install dependencies from the repository root:
 
    ```bash
-   npm install
+   pnpm install
    ```
 
-2. Start the app
+2. Configure the chat backend. Copy `.env.example` to `.env` and set your key:
 
    ```bash
-   npx expo start
+   cp .env.example .env
    ```
 
-In the output, you'll find options to open the app in a
+   The bundled API route (`app/api/chat+api.ts`) needs `OPENAI_API_KEY`. To point the app at a separately hosted backend instead, set `EXPO_PUBLIC_CHAT_ENDPOINT_URL`.
 
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+3. Start the app:
 
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
+   ```bash
+   pnpm --filter with-expo start
+   ```
 
-When you're ready, run:
+   From there you can open it in the iOS simulator, an Android emulator, or the browser.
 
-```bash
-npm run reset-project
-```
+## Project structure
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+- `app/_layout.tsx` wires the runtime, the toolkit, and the drawer navigation.
+- `app/index.tsx` renders the `Thread`.
+- `components/assistant-ui/` holds the composer, message, action bar, branch picker, and tool UIs.
+- `components/thread-list/` holds the drawer thread list.
+- `constants/theme.ts` and `hooks/use-theme.ts` define the shared design tokens.
+- `components/ui/icon.tsx` is the cross-platform icon (SF Symbols on iOS, Material Icons elsewhere).
 
 ## Learn more
 
-To learn more about developing your project with Expo, look at the following resources:
-
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
-
-## Join the community
-
-Join our community of developers creating universal apps.
-
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+- [assistant-ui documentation](https://www.assistant-ui.com/docs)
+- [Expo documentation](https://docs.expo.dev)
 
 ```