@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

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

@@ -1,2063 +0,0 @@
-# Example: with-expo
-
-## .vscode/extensions.json
-
-```json
-{ "recommendations": ["expo.vscode-expo-tools"] }
-
-```
-
-## .vscode/settings.json
-
-```json
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
-  }
-}
-
-```
-
-## app.json
-
-```json
-{
-  "expo": {
-    "name": "with-expo",
-    "slug": "with-expo",
-    "version": "0.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "withexpo",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.assistant-ui.with-expo"
-    },
-    "android": {
-      "adaptiveIcon": {
-        "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/android-icon-foreground.png",
-        "backgroundImage": "./assets/images/android-icon-background.png",
-        "monochromeImage": "./assets/images/android-icon-monochrome.png"
-      },
-      "edgeToEdgeEnabled": true,
-      "predictiveBackGestureEnabled": false
-    },
-    "web": {
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-splash-screen",
-        {
-          "image": "./assets/images/splash-icon.png",
-          "imageWidth": 200,
-          "resizeMode": "contain",
-          "backgroundColor": "#ffffff",
-          "dark": {
-            "backgroundColor": "#18181b"
-          }
-        }
-      ],
-      "expo-font",
-      "expo-image",
-      "expo-status-bar"
-    ],
-    "experiments": {
-      "typedRoutes": true,
-      "reactCompiler": true
-    }
-  }
-}
-
-```
-
-## app/_layout.tsx
-
-```tsx
-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 { Platform, Pressable } from "react-native";
-import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-import { useFonts } from "expo-font";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-
-import {
-  AssistantRuntimeProvider,
-  AuiConfig,
-  useAui,
-  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 { colors } = useTheme();
-
-  return (
-    <Pressable
-      accessibilityLabel="New chat"
-      hitSlop={8}
-      onPress={() => {
-        haptics.selection();
-        aui.threads.switchToNewThread();
-      }}
-      style={{ marginRight: 16 }}
-    >
-      <Icon name="compose" size={22} color={colors.foreground} />
-    </Pressable>
-  );
-}
-
-function DrawerLayout() {
-  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={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: colors.background },
-        }}
-      >
-        <Drawer.Screen name="index" options={{ title: "Chat" }} />
-      </Drawer>
-      <StatusBar style="auto" />
-    </ThemeProvider>
-  );
-}
-
-export default function RootLayout() {
-  // iOS renders SF Symbols, so it never needs the MaterialIcons glyph font.
-  const [fontsLoaded] = useFonts(
-    Platform.OS === "ios" ? {} : MaterialIcons.font,
-  );
-  const runtime = useAppRuntime();
-  const config = AuiConfig({
-    tools: Tools({ toolkit }),
-  });
-
-  if (!fontsLoaded) return null;
-
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <AssistantRuntimeProvider runtime={runtime} config={config}>
-        <DrawerLayout />
-      </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-5.6-luna");
-
-  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
-import { Thread } from "@/components/assistant-ui/thread";
-
-export default function ChatPage() {
-  return <Thread />;
-}
-
-```
-
-## 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, 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;
-
-  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, { 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>
-  );
-}
-
-function SendButton() {
-  const { colors } = useTheme();
-  const canSend = useAuiState((s) => s.composer.canSend);
-
-  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) {
-      // 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",
-        type: "image",
-        content: [{ type: "image", image: dataUrl }],
-      });
-    }
-  };
-
-  return (
-    <Pressable
-      accessibilityLabel="Add image"
-      onPress={pickImage}
-      hitSlop={6}
-      style={({ pressed }) => [
-        styles.attachButton,
-        { backgroundColor: pressed ? colors.muted : "transparent" },
-      ]}
-    >
-      <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.shell,
-          { backgroundColor: colors.composer, borderColor: colors.border },
-        ]}
-      >
-        {hasAttachments && (
-          <View style={styles.attachmentsRow}>
-            <ComposerPrimitive.Attachments>
-              {() => <AttachmentPreview />}
-            </ComposerPrimitive.Attachments>
-          </View>
-        )}
-
-        <ComposerPrimitive.Input
-          style={[styles.input, { color: colors.foreground }]}
-          placeholder="Message…"
-          placeholderTextColor={colors.mutedForeground}
-          multiline
-          maxLength={4000}
-        />
-
-        <View style={styles.actionRow}>
-          <AttachButton />
-          <AuiIf condition={(s) => !s.thread.isRunning}>
-            <SendButton />
-          </AuiIf>
-          <AuiIf condition={(s) => s.thread.isRunning}>
-            <CancelButton />
-          </AuiIf>
-        </View>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    maxWidth: Spacing.threadMaxWidth + 24,
-    alignSelf: "center",
-    paddingHorizontal: 12,
-    paddingTop: 8,
-  },
-  shell: {
-    flexDirection: "column",
-    gap: 6,
-    borderRadius: Radius.composer,
-    borderWidth: StyleSheet.hairlineWidth,
-    padding: 8,
-  },
-  attachmentsRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingTop: 4,
-  },
-  attachmentItem: {
-    position: "relative",
-  },
-  attachmentImage: {
-    width: 56,
-    height: 56,
-    borderRadius: Radius.attachment,
-  },
-  attachmentRemove: {
-    position: "absolute",
-    top: -6,
-    right: -6,
-  },
-  removeBadge: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  input: {
-    fontSize: 16,
-    lineHeight: 22,
-    minHeight: 28,
-    maxHeight: 132,
-    paddingHorizontal: 10,
-    paddingTop: 6,
-    paddingBottom: 2,
-    ...Platform.select({
-      web: { outlineStyle: "none" } as any,
-      default: {},
-    }),
-  },
-  actionRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  attachButton: {
-    width: 32,
-    height: 32,
-    borderRadius: Radius.pill,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  actionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: Radius.pill,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-```
-
-## components/assistant-ui/message-action-bar.tsx
-
-```tsx
-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 { colors } = useTheme();
-
-  const buttonStyle = ({ pressed }: { pressed: boolean }) => [
-    styles.button,
-    pressed && { backgroundColor: colors.muted },
-  ];
-
-  return (
-    <View style={styles.container}>
-      <ActionBarPrimitive.Copy
-        copyToClipboard={copyToClipboard}
-        onPressIn={haptics.selection}
-        style={buttonStyle}
-      >
-        {({ isCopied }) => (
-          <Icon
-            name={isCopied ? "check" : "copy"}
-            size={16}
-            color={isCopied ? colors.foreground : colors.mutedForeground}
-          />
-        )}
-      </ActionBarPrimitive.Copy>
-      <ActionBarPrimitive.Reload
-        onPressIn={haptics.selection}
-        style={buttonStyle}
-      >
-        <Icon name="reload" size={16} color={colors.mutedForeground} />
-      </ActionBarPrimitive.Reload>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-  },
-  button: {
-    padding: 6,
-    borderRadius: Radius.sm,
-  },
-});
-
-```
-
-## components/assistant-ui/message-branch-picker.tsx
-
-```tsx
-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({
-  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);
-
-  if (branchCount <= 1) return null;
-
-  return (
-    <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>
-      <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>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-  },
-  button: {
-    padding: 4,
-  },
-  label: {
-    fontSize: 12,
-    fontVariant: ["tabular-nums"],
-  },
-});
-
-```
-
-## components/assistant-ui/message.tsx
-
-```tsx
-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";
-
-const UserText: TextMessagePartComponent = ({ text }) => {
-  const { colors } = useTheme();
-  return (
-    <Text style={[styles.userText, { color: colors.foreground }]}>{text}</Text>
-  );
-};
-
-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 (
-    <Animated.View
-      style={[styles.dot, { opacity, backgroundColor: colors.mutedForeground }]}
-    />
-  );
-}
-
-function TypingIndicator() {
-  const isRunning = useAuiState((s) => s.message.status?.type === "running");
-  if (!isRunning) return null;
-
-  return (
-    <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;
-
-  const imageContent = attachment.content?.find((c: any) => c.type === "image");
-  const uri = (imageContent as any)?.image;
-  if (!uri) return null;
-
-  return (
-    <Image
-      source={{ uri }}
-      style={[styles.messageImage, { backgroundColor: colors.muted }]}
-      contentFit="cover"
-      transition={120}
-    />
-  );
-}
-
-function UserMessage() {
-  const { colors } = useTheme();
-  return (
-    <MessagePrimitive.Root style={styles.userContainer}>
-      <View style={styles.userAttachments}>
-        <MessagePrimitive.Attachments>
-          {() => <MessageImageAttachment />}
-        </MessagePrimitive.Attachments>
-      </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 (
-    <MessagePrimitive.Root style={styles.assistantContainer}>
-      <View style={styles.assistantContent}>
-        <MessagePrimitive.Parts
-          components={{ Text: AssistantText, Empty: TypingIndicator }}
-        />
-        <ErrorPrimitive.Root
-          style={[
-            styles.error,
-            {
-              backgroundColor: colors.destructiveSurface,
-              borderColor: colors.destructive,
-            },
-          ]}
-        >
-          <ErrorPrimitive.Message
-            style={[styles.errorText, { color: colors.destructive }]}
-          />
-        </ErrorPrimitive.Root>
-      </View>
-      <MessagePrimitive.If running={false}>
-        <View style={styles.actionsRow}>
-          <MessageBranchPicker align="flex-start" />
-          <MessageActionBar />
-        </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({
-  userContainer: {
-    alignItems: "flex-end",
-  },
-  userAttachments: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "flex-end",
-    gap: 6,
-  },
-  userBubble: {
-    maxWidth: "85%",
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderRadius: Radius.bubble,
-  },
-  assistantContainer: {
-    alignItems: "flex-start",
-  },
-  assistantContent: {
-    paddingHorizontal: 2,
-  },
-  userText: {
-    fontSize: 16,
-    lineHeight: 22,
-    letterSpacing: -0.2,
-  },
-  assistantText: {
-    fontSize: 16,
-    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,
-  },
-});
-
-```
-
-## components/assistant-ui/thread.tsx
-
-```tsx
-import {
-  View,
-  Text,
-  StyleSheet,
-  KeyboardAvoidingView,
-  Platform,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { MessageBubble } from "./message";
-import { Composer } from "./composer";
-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 (
-    <ThreadPrimitive.Suggestion
-      prompt={prompt}
-      send
-      onPressIn={haptics.selection}
-      style={({ pressed }: { pressed: boolean }) => [
-        styles.chip,
-        {
-          borderColor: colors.border,
-          backgroundColor: pressed ? colors.muted : colors.background,
-        },
-      ]}
-    >
-      <Text style={[styles.chipText, { color: colors.foreground }]}>
-        {prompt}
-      </Text>
-    </ThreadPrimitive.Suggestion>
-  );
-}
-
-function EmptyState() {
-  const { colors } = useTheme();
-  return (
-    <View style={styles.empty}>
-      <Text style={[styles.welcome, { color: colors.foreground }]}>
-        How can I help you today?
-      </Text>
-      <View style={styles.chips}>
-        {suggestions.map((prompt) => (
-          <SuggestionChip key={prompt} prompt={prompt} />
-        ))}
-      </View>
-    </View>
-  );
-}
-
-function ChatMessages() {
-  return (
-    <>
-      <ThreadPrimitive.Empty>
-        <EmptyState />
-      </ThreadPrimitive.Empty>
-      <ThreadPrimitive.If empty={false}>
-        <ThreadPrimitive.MessagesFlatList
-          style={styles.flex}
-          contentContainerStyle={styles.messageList}
-          showsVerticalScrollIndicator={false}
-        >
-          {() => <MessageBubble />}
-        </ThreadPrimitive.MessagesFlatList>
-      </ThreadPrimitive.If>
-    </>
-  );
-}
-
-export function Thread() {
-  const insets = useSafeAreaInsets();
-  const { colors } = useTheme();
-
-  return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
-      <KeyboardAvoidingView
-        style={styles.flex}
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
-      >
-        <View style={styles.flex}>
-          <ChatMessages />
-        </View>
-        <View style={{ paddingBottom: insets.bottom + 8 }}>
-          <Composer />
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  flex: {
-    flex: 1,
-  },
-  messageList: {
-    width: "100%",
-    maxWidth: Spacing.threadMaxWidth,
-    marginHorizontal: "auto",
-    paddingVertical: 20,
-    paddingHorizontal: 12,
-    gap: 18,
-  },
-  empty: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 24,
-  },
-  welcome: {
-    fontSize: 24,
-    fontWeight: "600",
-    letterSpacing: -0.4,
-    textAlign: "center",
-    marginBottom: 24,
-  },
-  chips: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "center",
-    gap: 8,
-  },
-  chip: {
-    paddingHorizontal: 14,
-    paddingVertical: 8,
-    borderRadius: Radius.pill,
-    borderWidth: StyleSheet.hairlineWidth,
-  },
-  chipText: {
-    fontSize: 14,
-    letterSpacing: -0.2,
-  },
-});
-
-```
-
-## components/assistant-ui/tools.tsx
-
-```tsx
-"use generative";
-
-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)
-
-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 "☀️";
-  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 ({
-  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",
-    };
-  }
-};
-
-// 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 },
-    {
-      success: boolean;
-      result?: { name: string; latitude: number; longitude: number };
-      error?: string;
-    }
-  >,
-) {
-  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 (
-    <ToolCard>
-      <View style={styles.row}>
-        <Text style={styles.pin}>{"📍"}</Text>
-        <View>
-          <Text style={[styles.locationName, { color: colors.foreground }]}>
-            {result.name}
-          </Text>
-          <Text style={[styles.coords, { color: colors.mutedForeground }]}>
-            {Math.abs(result.latitude).toFixed(2)}
-            {"°"}
-            {result.latitude >= 0 ? "N" : "S"},{" "}
-            {Math.abs(result.longitude).toFixed(2)}
-            {"°"}
-            {result.longitude >= 0 ? "E" : "W"}
-          </Text>
-        </View>
-      </View>
-    </ToolCard>
-  );
-}
-
-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 { colors } = useTheme();
-
-  if (props.status?.type === "running") {
-    return <ToolStatus label={`Fetching weather for ${props.args.query}…`} />;
-  }
-
-  if (!props.result?.success) {
-    return (
-      <ToolError
-        label={`Weather unavailable: ${props.result?.error ?? "Unknown error"}`}
-      />
-    );
-  }
-
-  const { location, temperature, weatherCode, windSpeed, forecast } =
-    props.result;
-
-  return (
-    <ToolCard>
-      <View style={styles.weatherHeader}>
-        <Text style={styles.weatherEmoji}>
-          {mapWeatherEmoji(weatherCode ?? 0)}
-        </Text>
-        <View>
-          <Text style={[styles.locationName, { color: colors.foreground }]}>
-            {location}
-          </Text>
-          <Text style={[styles.condition, { color: colors.mutedForeground }]}>
-            {mapWeatherCode(weatherCode ?? 0)}
-          </Text>
-        </View>
-      </View>
-
-      <Text style={[styles.tempLarge, { color: colors.foreground }]}>
-        {temperature ?? "--"}
-        {"°"}F
-      </Text>
-
-      {windSpeed != null && (
-        <Text style={[styles.wind, { color: colors.mutedForeground }]}>
-          Wind: {windSpeed} mph
-        </Text>
-      )}
-
-      {forecast && forecast.length > 0 && (
-        <View style={[styles.forecastRow, { borderTopColor: colors.border }]}>
-          {forecast.map((day, i) => (
-            <View key={i} style={styles.forecastDay}>
-              <Text
-                style={[
-                  styles.forecastLabel,
-                  { color: colors.mutedForeground },
-                ]}
-              >
-                {day.label}
-              </Text>
-              <Text style={styles.forecastEmoji}>
-                {mapWeatherEmoji(day.code)}
-              </Text>
-              <Text style={[styles.forecastTemp, { color: colors.foreground }]}>
-                {day.max}
-                {"°"}
-              </Text>
-              <Text
-                style={[
-                  styles.forecastTempLow,
-                  { color: colors.mutedForeground },
-                ]}
-              >
-                {day.min}
-                {"°"}
-              </Text>
-            </View>
-          ))}
-        </View>
-      )}
-    </ToolCard>
-  );
-}
-
-// Toolkit definition
-
-export default defineToolkit({
-  geocode_location: {
-    description: "Geocode a location using Open-Meteo's geocoding API",
-    parameters: z.object({
-      query: z.string(),
-    }),
-    execute: async (args: { query: string }) => {
-      "use client";
-      return 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;
-    }) => {
-      "use client";
-      return fetchWeatherFromOpenMeteo(args);
-    },
-    render: WeatherToolUI,
-  },
-});
-
-const styles = StyleSheet.create({
-  card: {
-    padding: 14,
-    borderRadius: Radius.card,
-    borderWidth: StyleSheet.hairlineWidth,
-    marginVertical: 4,
-    gap: 4,
-  },
-  statusText: {
-    fontSize: 13,
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-  },
-  pin: {
-    fontSize: 20,
-  },
-  locationName: {
-    fontSize: 15,
-    fontWeight: "600",
-  },
-  coords: {
-    fontSize: 13,
-    marginTop: 2,
-  },
-  weatherHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    marginBottom: 4,
-  },
-  weatherEmoji: {
-    fontSize: 32,
-  },
-  condition: {
-    fontSize: 13,
-    marginTop: 2,
-  },
-  tempLarge: {
-    fontSize: 40,
-    fontWeight: "700",
-    letterSpacing: -1,
-  },
-  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,
-  },
-});
-
-```
-
-## components/thread-list/ThreadListDrawer.tsx
-
-```tsx
-import { View, Text, Pressable, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ThreadListPrimitive, 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 insets = useSafeAreaInsets();
-
-  return (
-    <View
-      style={[
-        styles.container,
-        { backgroundColor: colors.background, paddingTop: insets.top + 12 },
-      ]}
-    >
-      <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={() => (
-            <ThreadListItem onSelect={() => navigation.closeDrawer()} />
-          )}
-          style={styles.list}
-          contentContainerStyle={styles.listContent}
-          showsVerticalScrollIndicator={false}
-        />
-      </ThreadListPrimitive.Root>
-    </View>
-  );
-}
-
-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: {
-    flex: 1,
-  },
-  listContent: {
-    paddingBottom: 8,
-  },
-});
-
-```
-
-## components/thread-list/ThreadListItem.tsx
-
-```tsx
-import { Text, Pressable, StyleSheet } from "react-native";
-import {
-  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({ onSelect }: { onSelect: () => void }) {
-  const { colors } = useTheme();
-  const aui = useAui();
-  const isActive = useAuiState(
-    (s) => s.threads.mainThreadId === s.threadListItem.id,
-  );
-
-  return (
-    <ThreadListItemPrimitive.Root>
-      <Pressable
-        onPressIn={haptics.selection}
-        onPress={() => {
-          aui.threadListItem.switchTo();
-          onSelect();
-        }}
-        style={({ pressed }) => [
-          styles.item,
-          (isActive || pressed) && { backgroundColor: colors.muted },
-        ]}
-      >
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.title,
-            {
-              color: colors.foreground,
-              fontWeight: isActive ? "600" : "400",
-            },
-          ]}
-        >
-          <ThreadListItemPrimitive.Title fallback="New chat" />
-        </Text>
-      </Pressable>
-    </ThreadListItemPrimitive.Root>
-  );
-}
-
-const styles = StyleSheet.create({
-  item: {
-    height: 38,
-    justifyContent: "center",
-    paddingHorizontal: 12,
-    marginHorizontal: 8,
-    borderRadius: Radius.md,
-  },
-  title: {
-    fontSize: 15,
-    letterSpacing: -0.2,
-  },
-});
-
-```
-
-## 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 } from "expo-symbols";
-import { SF_SYMBOLS, type IconProps } from "./icon-mappings";
-
-export function Icon({
-  name,
-  size = 24,
-  color,
-  weight = "regular",
-}: IconProps) {
-  return (
-    <SymbolView
-      name={SF_SYMBOLS[name]}
-      tintColor={color}
-      weight={weight}
-      resizeMode="scaleAspectFit"
-      style={{ width: size, height: size }}
-    />
-  );
-}
-
-```
-
-## components/ui/icon.tsx
-
-```tsx
-import MaterialIcons from "@expo/vector-icons/MaterialIcons";
-import { MATERIAL_ICONS, type IconProps } from "./icon-mappings";
-
-export function Icon({ name, size = 24, color }: IconProps) {
-  return (
-    <MaterialIcons name={MATERIAL_ICONS[name]} size={size} color={color} />
-  );
-}
-
-```
-
-## constants/theme.ts
-
-```typescript
-/**
- * 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.
- */
-
-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: { light: Palette; dark: Palette } = {
-  light: {
-    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: {
-    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 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;
-
-```
-
-## hooks/use-app-runtime.ts
-
-```typescript
-import { useMemo } from "react";
-import {
-  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 transport = useMemo(
-    () => new AssistantChatTransport({ api: CHAT_API }),
-    [],
-  );
-  return useChatRuntime({
-    transport,
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-  });
-}
-
-```
-
-## hooks/use-color-scheme.ts
-
-```typescript
-export { useColorScheme } from "react-native";
-
-```
-
-## hooks/use-color-scheme.web.ts
-
-```typescript
-import { useEffect, useState } from "react";
-import { useColorScheme as useRNColorScheme } from "react-native";
-
-/**
- * To support static rendering, this value needs to be re-calculated on the client side for web
- */
-export function useColorScheme() {
-  const [hasHydrated, setHasHydrated] = useState(false);
-
-  useEffect(() => {
-    setHasHydrated(true);
-  }, []);
-
-  const colorScheme = useRNColorScheme();
-
-  if (hasHydrated) {
-    return colorScheme;
-  }
-
-  return "light";
-}
-
-```
-
-## hooks/use-theme.ts
-
-```typescript
-import { Colors, type Palette } from "@/constants/theme";
-import { useColorScheme } from "@/hooks/use-color-scheme";
-
-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
-const { getDefaultConfig } = require("expo/metro-config");
-const { withAui } = require("@assistant-ui/metro");
-const path = require("node:path");
-
-const projectRoot = __dirname;
-const monorepoRoot = path.resolve(projectRoot, "../..");
-
-const config = getDefaultConfig(projectRoot);
-
-// Watch all files within the monorepo
-config.watchFolders = [monorepoRoot];
-
-// Enable symlinks support for pnpm
-config.resolver.unstable_enableSymlinks = true;
-
-// Let Metro know where to resolve packages
-config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, "node_modules"),
-  path.resolve(monorepoRoot, "node_modules"),
-];
-
-// Force resolving shared dependencies from the app's node_modules
-config.resolver.resolveRequest = (context, moduleName, platform) => {
-  if (
-    moduleName === "react" ||
-    moduleName === "react-native" ||
-    moduleName.startsWith("react/") ||
-    moduleName.startsWith("react-native/")
-  ) {
-    return context.resolveRequest(
-      {
-        ...context,
-        originModulePath: path.resolve(projectRoot, "package.json"),
-      },
-      moduleName,
-      platform,
-    );
-  }
-
-  return context.resolveRequest(context, moduleName, platform);
-};
-
-module.exports = withAui(config);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-expo",
-  "main": "expo-router/entry",
-  "version": "0.0.0",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
-    "export:web": "expo export --platform web && node scripts/flatten-assets.mjs"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.40",
-    "@ai-sdk/react": "^4.0.65",
-    "@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": "^7.0.62",
-    "expo": "~57.0.12",
-    "expo-clipboard": "~57.0.1",
-    "expo-constants": "~57.0.10",
-    "expo-font": "~57.0.1",
-    "expo-haptics": "~57.0.1",
-    "expo-image": "~57.0.2",
-    "expo-image-picker": "~57.0.9",
-    "expo-linking": "~57.0.5",
-    "expo-router": "~57.0.12",
-    "expo-server": "~57.0.2",
-    "expo-splash-screen": "~57.0.6",
-    "expo-status-bar": "~57.0.1",
-    "expo-symbols": "^57.0.2",
-    "expo-system-ui": "~57.0.2",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-native": "0.86.2",
-    "react-native-gesture-handler": "~2.32.0",
-    "react-native-reanimated": "4.5.1",
-    "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "4.26.2",
-    "react-native-web": "~0.21.2",
-    "react-native-worklets": "0.10.1",
-    "zod": "^4.4.3"
-  },
-  "devDependencies": {
-    "@assistant-ui/metro": "workspace:*",
-    "@babel/core": "^7.29.7",
-    "@types/react": "~19.2.18",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@~7.0.2"
-  },
-  "private": true
-}
-
-```
-
-## README.md
-
-```markdown
-# 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.
-
-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 from the repository root:
-
-   ```bash
-   pnpm install
-   ```
-
-2. Configure the chat backend. Copy `.env.example` to `.env` and set your key:
-
-   ```bash
-   cp .env.example .env
-   ```
-
-   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`.
-
-3. Start the app:
-
-   ```bash
-   pnpm --filter with-expo start
-   ```
-
-   From there you can open it in the iOS simulator, an Android emulator, or the browser.
-
-## Project structure
-
-- `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
-
-- [assistant-ui documentation](https://www.assistant-ui.com/docs)
-- [Expo documentation](https://docs.expo.dev)
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true,
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
-}
-
-```
-
-## vercel.json
-
-```json
-{
-  "$schema": "https://openapi.vercel.sh/vercel.json",
-  "ignoreCommand": "bash ../../scripts/vercel-ignore-changeset-release.sh",
-  "buildCommand": "cd ../.. && pnpm turbo build --filter=@assistant-ui/react-native --filter=@assistant-ui/react-ai-sdk --filter=@assistant-ui/metro && cd examples/with-expo && pnpm run export:web",
-  "outputDirectory": "dist",
-  "framework": null
-}
-
-```
-