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

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

@@ -0,0 +1,2012 @@
+# 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"
+  }
+}
+
+```
+
+## adapters/openai-chat-adapter.ts
+
+```typescript
+import type { ChatModelAdapter } from "@assistant-ui/react-native";
+
+export type OpenAIModelConfig = {
+  apiKey: string;
+  model?: string;
+  baseURL?: string;
+  /** Custom fetch implementation — pass `fetch` from `expo/fetch` for streaming support */
+  fetch?: typeof globalThis.fetch;
+};
+
+type OpenAIMessage = {
+  role: string;
+  content: string | any[] | null;
+  tool_calls?: {
+    id: string;
+    type: string;
+    function: { name: string; arguments: string };
+  }[];
+  tool_call_id?: string;
+};
+
+type ToolCallAccumulator = Record<
+  number,
+  { id: string; name: string; arguments: string }
+>;
+
+export function createOpenAIChatModelAdapter(
+  config: OpenAIModelConfig,
+): ChatModelAdapter {
+  const {
+    apiKey,
+    model = "gpt-4o-mini",
+    baseURL = "https://api.openai.com/v1",
+    fetch: customFetch = globalThis.fetch,
+  } = config;
+
+  const callOpenAI = async (
+    messages: OpenAIMessage[],
+    openAITools: any[] | undefined,
+    abortSignal: AbortSignal,
+  ) => {
+    const response = await customFetch(`${baseURL}/chat/completions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        model,
+        messages,
+        stream: true,
+        ...(openAITools ? { tools: openAITools } : {}),
+      }),
+      signal: abortSignal,
+    });
+
+    if (!response.ok) {
+      const body = await response.text().catch(() => "");
+      throw new Error(`OpenAI API error: ${response.status} ${body}`);
+    }
+
+    return response;
+  };
+
+  const streamResponse = async function* (
+    response: Response,
+    onUpdate: (text: string, toolCalls: ToolCallAccumulator) => any,
+  ) {
+    const reader = response.body?.getReader();
+    if (!reader) {
+      const json = await response.json();
+      const choice = json.choices?.[0]?.message;
+      return {
+        text: (choice?.content as string) ?? "",
+        toolCalls: {} as ToolCallAccumulator,
+        rawToolCalls: choice?.tool_calls,
+      };
+    }
+
+    const decoder = new TextDecoder();
+    let fullText = "";
+    const toolCalls: ToolCallAccumulator = {};
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        for (const line of chunk.split("\n")) {
+          if (!line.startsWith("data: ")) continue;
+          const data = line.slice(6);
+          if (data === "[DONE]") continue;
+
+          try {
+            const delta = JSON.parse(data).choices?.[0]?.delta;
+            if (!delta) continue;
+
+            if (delta.content) fullText += delta.content;
+            if (delta.tool_calls) {
+              for (const tc of delta.tool_calls) {
+                if (!toolCalls[tc.index]) {
+                  toolCalls[tc.index] = {
+                    id: tc.id ?? "",
+                    name: tc.function?.name ?? "",
+                    arguments: "",
+                  };
+                }
+                if (tc.id) toolCalls[tc.index].id = tc.id;
+                if (tc.function?.name)
+                  toolCalls[tc.index].name = tc.function.name;
+                if (tc.function?.arguments)
+                  toolCalls[tc.index].arguments += tc.function.arguments;
+              }
+            }
+
+            yield* onUpdate(fullText, toolCalls);
+          } catch {
+            // skip invalid JSON
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+
+    return { text: fullText, toolCalls };
+  };
+
+  return {
+    async *run({ messages, context, abortSignal }) {
+      const tools = context.tools;
+
+      // Convert messages to OpenAI format
+      const openAIMessages: OpenAIMessage[] = messages
+        .filter((m) => m.role !== "system")
+        .flatMap((m) => {
+          if (m.role === "user") {
+            const textParts = m.content.filter((p) => p.type === "text");
+            const text = textParts
+              .map((p) => ("text" in p ? p.text : ""))
+              .join("\n");
+
+            // Check for image attachments
+            const imageAttachments = (m.attachments ?? []).flatMap((a) =>
+              (a.content ?? []).filter((c: any) => c.type === "image"),
+            );
+
+            if (imageAttachments.length > 0) {
+              const content: any[] = [];
+              if (text) content.push({ type: "text", text });
+              for (const img of imageAttachments) {
+                content.push({
+                  type: "image_url",
+                  image_url: { url: (img as any).image },
+                });
+              }
+              return [{ role: "user", content }];
+            }
+
+            return [{ role: "user", content: text }];
+          }
+          if (m.role === "assistant") {
+            const result: OpenAIMessage[] = [];
+            const textParts = m.content.filter((p) => p.type === "text");
+            const toolCallParts = m.content.filter(
+              (p) => p.type === "tool-call",
+            );
+
+            if (toolCallParts.length > 0) {
+              result.push({
+                role: "assistant",
+                content:
+                  textParts.length > 0
+                    ? textParts
+                        .map((p) => ("text" in p ? p.text : ""))
+                        .join("\n")
+                    : null,
+                tool_calls: toolCallParts.map((p: any) => ({
+                  id: p.toolCallId,
+                  type: "function",
+                  function: {
+                    name: p.toolName,
+                    arguments: JSON.stringify(p.args),
+                  },
+                })),
+              });
+              for (const tc of toolCallParts) {
+                if ((tc as any).result !== undefined) {
+                  result.push({
+                    role: "tool",
+                    content: JSON.stringify((tc as any).result),
+                    tool_call_id: (tc as any).toolCallId,
+                  });
+                }
+              }
+            } else if (textParts.length > 0) {
+              result.push({
+                role: "assistant",
+                content: textParts
+                  .map((p) => ("text" in p ? p.text : ""))
+                  .join("\n"),
+              });
+            }
+
+            return result;
+          }
+          return [];
+        });
+
+      const openAITools =
+        tools && Object.keys(tools).length > 0
+          ? Object.entries(tools).map(([name, t]) => ({
+              type: "function" as const,
+              function: {
+                name,
+                description: (t as any).description ?? "",
+                parameters: (t as any).parameters ?? {},
+              },
+            }))
+          : undefined;
+
+      // Tool execution loop — keep calling OpenAI until we get a text response
+      const maxToolRounds = 5;
+      const priorParts: any[] = []; // accumulate tool-call parts across rounds
+
+      for (let round = 0; round <= maxToolRounds; round++) {
+        const response = await callOpenAI(
+          openAIMessages,
+          openAITools,
+          abortSignal,
+        );
+
+        let lastText = "";
+        const gen = streamResponse(response, function* (text, toolCalls) {
+          lastText = text;
+          const content: any[] = [...priorParts];
+          if (text) content.push({ type: "text" as const, text });
+          for (const tc of Object.values(toolCalls)) {
+            let args = {};
+            try {
+              args = JSON.parse(tc.arguments);
+            } catch {
+              // still streaming
+            }
+            content.push({
+              type: "tool-call" as const,
+              toolCallId: tc.id,
+              toolName: tc.name,
+              args,
+            });
+          }
+          if (content.length > 0) yield { content };
+        });
+
+        // Consume the stream
+        let streamResult: any;
+        while (true) {
+          const { value, done } = await gen.next();
+          if (done) {
+            streamResult = value;
+            break;
+          }
+          yield value;
+        }
+
+        const { toolCalls } = (streamResult as {
+          toolCalls: ToolCallAccumulator;
+        }) ?? { toolCalls: {} };
+        const pendingToolCalls = Object.values(toolCalls) as {
+          id: string;
+          name: string;
+          arguments: string;
+        }[];
+
+        // No tool calls — done
+        if (pendingToolCalls.length === 0) break;
+
+        // Execute tools and add results to messages for next round
+        openAIMessages.push({
+          role: "assistant",
+          content: lastText || null,
+          tool_calls: pendingToolCalls.map((tc) => ({
+            id: tc.id,
+            type: "function",
+            function: { name: tc.name, arguments: tc.arguments },
+          })),
+        });
+
+        const executedToolCalls: any[] = [];
+        for (const tc of pendingToolCalls) {
+          const args = JSON.parse(tc.arguments);
+          const toolDef = tools?.[tc.name];
+          let result: any;
+          if (toolDef?.execute) {
+            result = await (toolDef as any).execute(args);
+          }
+
+          executedToolCalls.push({
+            type: "tool-call" as const,
+            toolCallId: tc.id,
+            toolName: tc.name,
+            args,
+            result,
+          });
+
+          // Yield with all prior parts + executed tool calls so far
+          yield { content: [...priorParts, ...executedToolCalls] };
+
+          openAIMessages.push({
+            role: "tool",
+            content: JSON.stringify(result),
+            tool_call_id: tc.id,
+          });
+        }
+
+        // Add executed tool calls to prior parts for next round
+        priorParts.push(...executedToolCalls);
+
+        // Next iteration will call OpenAI with tool results
+      }
+    },
+  };
+}
+
+```
+
+## app.json
+
+```json
+{
+  "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": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}
+
+```
+
+## app/_layout.tsx
+
+```tsx
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} 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 { GestureHandlerRootView } from "react-native-gesture-handler";
+
+import {
+  AssistantProvider,
+  useAssistantRuntime,
+} from "@assistant-ui/react-native";
+import { useAppRuntime } from "@/hooks/use-app-runtime";
+import { ThreadListDrawer } from "@/components/thread-list/ThreadListDrawer";
+import { WeatherTool } from "@/components/assistant-ui/tools";
+
+function NewChatButton() {
+  const runtime = useAssistantRuntime();
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <Pressable
+      onPress={() => {
+        runtime.threads.switchToNewThread();
+      }}
+      style={{ marginRight: 16 }}
+    >
+      <Ionicons
+        name="create-outline"
+        size={24}
+        color={isDark ? "#ffffff" : "#000000"}
+      />
+    </Pressable>
+  );
+}
+
+function DrawerLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+      <Drawer
+        drawerContent={(props) => <ThreadListDrawer {...props} />}
+        screenOptions={{
+          headerRight: () => <NewChatButton />,
+          drawerType: "front",
+          swipeEnabled: true,
+          drawerStyle: { backgroundColor: "transparent" },
+        }}
+      >
+        <Drawer.Screen name="index" options={{ title: "Chat" }} />
+      </Drawer>
+      <StatusBar style="auto" />
+    </ThemeProvider>
+  );
+}
+
+export default function RootLayout() {
+  const runtime = useAppRuntime();
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <AssistantProvider runtime={runtime}>
+        <WeatherTool />
+        <DrawerLayout />
+      </AssistantProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+```
+
+## app/index.tsx
+
+```tsx
+import { Thread } from "@/components/assistant-ui/thread";
+
+export default function ChatPage() {
+  return <Thread />;
+}
+
+```
+
+## components/assistant-ui/composer.tsx
+
+```tsx
+import {
+  View,
+  TextInput,
+  Pressable,
+  Image,
+  StyleSheet,
+  useColorScheme,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import {
+  useAui,
+  useAuiState,
+  useComposerSend,
+  useComposerCancel,
+  useComposerAddAttachment,
+  ComposerAttachments,
+  AttachmentRoot,
+  AttachmentRemove,
+} from "@assistant-ui/react-native";
+
+function AttachmentPreview() {
+  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 (
+    <AttachmentRoot style={styles.attachmentItem}>
+      {uri ? <Image source={{ uri }} style={styles.attachmentImage} /> : null}
+      <AttachmentRemove style={styles.attachmentRemoveButton}>
+        <Ionicons name="close-circle" size={20} color="#ff453a" />
+      </AttachmentRemove>
+    </AttachmentRoot>
+  );
+}
+
+const attachmentComponents = { Attachment: AttachmentPreview };
+
+export function Composer() {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  const aui = useAui();
+  const text = useAuiState((s) => s.composer.text);
+  const attachmentsCount = useAuiState((s) => s.composer.attachments.length);
+  const { send, canSend } = useComposerSend();
+  const { cancel, canCancel } = useComposerCancel();
+  const { addAttachment } = useComposerAddAttachment();
+
+  const pickImage = async () => {
+    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
+      const dataUrl = `data:image/jpeg;base64,${asset.base64}`;
+
+      await addAttachment({
+        name: asset.fileName ?? "image.jpg",
+        contentType: "image/jpeg",
+        type: "image",
+        content: [{ type: "image", image: dataUrl }],
+      });
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: isDark
+            ? "rgba(28, 28, 30, 0.8)"
+            : "rgba(242, 242, 247, 0.8)",
+        },
+      ]}
+    >
+      {attachmentsCount > 0 && (
+        <View style={styles.attachmentsList}>
+          <ComposerAttachments components={attachmentComponents} />
+        </View>
+      )}
+      <View
+        style={[
+          styles.inputWrapper,
+          {
+            backgroundColor: isDark ? "#1c1c1e" : "#ffffff",
+            borderColor: isDark ? "#3a3a3c" : "#e5e5ea",
+          },
+        ]}
+      >
+        <Pressable
+          style={styles.attachButton}
+          onPress={pickImage}
+          disabled={canCancel}
+        >
+          <Ionicons
+            name="add-circle-outline"
+            size={24}
+            color={isDark ? "#8e8e93" : "#6e6e73"}
+          />
+        </Pressable>
+        <TextInput
+          style={[styles.input, { color: isDark ? "#ffffff" : "#000000" }]}
+          placeholder="Message..."
+          placeholderTextColor="#8e8e93"
+          value={text}
+          onChangeText={(newText) => aui.composer().setText(newText)}
+          multiline
+          maxLength={4000}
+          editable={!canCancel}
+        />
+        {canCancel ? (
+          <Pressable
+            style={[styles.button, styles.stopButton]}
+            onPress={cancel}
+          >
+            <View style={styles.stopIcon} />
+          </Pressable>
+        ) : (
+          <Pressable
+            style={[
+              styles.button,
+              styles.sendButton,
+              {
+                backgroundColor: canSend
+                  ? isDark
+                    ? "#0a84ff"
+                    : "#007aff"
+                  : isDark
+                    ? "#3a3a3c"
+                    : "#e5e5ea",
+              },
+            ]}
+            onPress={send}
+            disabled={!canSend}
+          >
+            <Ionicons
+              name="arrow-up"
+              size={20}
+              color={canSend ? "#ffffff" : "#8e8e93"}
+            />
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  attachmentsList: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8,
+    paddingBottom: 8,
+  },
+  attachmentItem: {
+    position: "relative",
+  },
+  attachmentImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 8,
+  },
+  attachmentRemoveButton: {
+    position: "absolute",
+    top: -6,
+    right: -6,
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    borderRadius: 24,
+    borderWidth: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingVertical: 6,
+    minHeight: 48,
+  },
+  attachButton: {
+    width: 34,
+    height: 34,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    lineHeight: 22,
+    maxHeight: 120,
+    paddingVertical: 6,
+    letterSpacing: -0.2,
+  },
+  button: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: 8,
+  },
+  sendButton: {},
+  stopButton: {
+    backgroundColor: "#ff453a",
+  },
+  stopIcon: {
+    width: 12,
+    height: 12,
+    borderRadius: 2,
+    backgroundColor: "#ffffff",
+  },
+});
+
+```
+
+## components/assistant-ui/message-action-bar.tsx
+
+```tsx
+import { Pressable, View, StyleSheet, useColorScheme } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  useActionBarCopy,
+  useActionBarReload,
+} from "@assistant-ui/react-native";
+
+export function MessageActionBar() {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const iconColor = isDark ? "#8e8e93" : "#6e6e73";
+
+  const { copy, isCopied } = useActionBarCopy();
+  const { reload } = useActionBarReload();
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.button} onPress={copy}>
+        <Ionicons
+          name={isCopied ? "checkmark" : "copy-outline"}
+          size={16}
+          color={isCopied ? "#34c759" : iconColor}
+        />
+      </Pressable>
+      <Pressable style={styles.button} onPress={reload}>
+        <Ionicons name="refresh-outline" size={16} color={iconColor} />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 4,
+    marginTop: 4,
+  },
+  button: {
+    padding: 6,
+    borderRadius: 8,
+  },
+});
+
+```
+
+## components/assistant-ui/message-branch-picker.tsx
+
+```tsx
+import { Pressable, View, StyleSheet, useColorScheme } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { ThemedText } from "@/components/themed-text";
+import { useMessageBranching } from "@assistant-ui/react-native";
+
+export function MessageBranchPicker() {
+  const { branchNumber, branchCount, goToPrev, goToNext } =
+    useMessageBranching();
+
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const iconColor = isDark ? "#8e8e93" : "#6e6e73";
+
+  if (branchCount <= 1) return null;
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        style={styles.button}
+        onPress={goToPrev}
+        disabled={branchNumber <= 1}
+      >
+        <Ionicons
+          name="chevron-back"
+          size={14}
+          color={
+            branchNumber <= 1 ? (isDark ? "#3a3a3c" : "#d1d1d6") : iconColor
+          }
+        />
+      </Pressable>
+      <ThemedText style={styles.label} lightColor="#6e6e73" darkColor="#8e8e93">
+        {branchNumber} / {branchCount}
+      </ThemedText>
+      <Pressable
+        style={styles.button}
+        onPress={goToNext}
+        disabled={branchNumber >= branchCount}
+      >
+        <Ionicons
+          name="chevron-forward"
+          size={14}
+          color={
+            branchNumber >= branchCount
+              ? isDark
+                ? "#3a3a3c"
+                : "#d1d1d6"
+              : iconColor
+          }
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+  },
+  button: {
+    padding: 4,
+    borderRadius: 6,
+  },
+  label: {
+    fontSize: 12,
+    fontVariant: ["tabular-nums"],
+  },
+});
+
+```
+
+## components/assistant-ui/message.tsx
+
+```tsx
+import { View, Image, StyleSheet, useColorScheme } from "react-native";
+import { ThemedText } from "@/components/themed-text";
+import {
+  useAuiState,
+  MessageContent,
+  MessageAttachments,
+} from "@assistant-ui/react-native";
+import { 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;
+  });
+
+  if (!error) return null;
+
+  return (
+    <View style={styles.errorContainer}>
+      <ThemedText
+        style={styles.errorText}
+        lightColor="#ff453a"
+        darkColor="#ff6961"
+      >
+        {typeof error === "string" ? error : "An error occurred"}
+      </ThemedText>
+    </View>
+  );
+}
+
+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>;
+  }
+  return (
+    <ThemedText
+      style={styles.assistantText}
+      lightColor="#000000"
+      darkColor="#ffffff"
+    >
+      {part.text}
+    </ThemedText>
+  );
+}
+
+function MessageImageAttachment() {
+  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} />;
+}
+
+const messageAttachmentComponents = { Attachment: MessageImageAttachment };
+
+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]}>
+        <MessageAttachments components={messageAttachmentComponents} />
+        <View
+          style={[
+            styles.bubble,
+            styles.userBubble,
+            { backgroundColor: isDark ? "#0a84ff" : "#007aff" },
+          ]}
+        >
+          <MessageContent renderText={({ part }) => <TextPart part={part} />} />
+        </View>
+        <MessageBranchPicker />
+      </View>
+    );
+  }
+
+  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)",
+          },
+        ]}
+      >
+        <MessageContent renderText={({ part }) => <TextPart part={part} />} />
+        <MessageError />
+      </View>
+      {!isRunning && (
+        <View style={styles.actionsRow}>
+          <MessageBranchPicker />
+          <MessageActionBar />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+  },
+  userContainer: {
+    alignItems: "flex-end",
+  },
+  assistantContainer: {
+    alignItems: "flex-start",
+  },
+  bubble: {
+    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,
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  messageImage: {
+    width: 200,
+    height: 200,
+    borderRadius: 12,
+    marginBottom: 4,
+  },
+  userText: {
+    fontSize: 16,
+    lineHeight: 22,
+    color: "#ffffff",
+    letterSpacing: -0.2,
+  },
+  assistantText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: -0.2,
+  },
+});
+
+```
+
+## components/assistant-ui/thread.tsx
+
+```tsx
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  useColorScheme,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { MessageBubble } from "./message";
+import { Composer } from "./composer";
+import {
+  ThreadMessages,
+  useThreadIsEmpty,
+  useAui,
+} from "@assistant-ui/react-native";
+
+function SuggestionChip({ title, prompt }: { title: string; prompt: string }) {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const aui = useAui();
+
+  return (
+    <Pressable
+      onPress={() => aui.thread().append(prompt)}
+      style={[
+        styles.suggestionChip,
+        {
+          backgroundColor: isDark
+            ? "rgba(44, 44, 46, 0.8)"
+            : "rgba(229, 229, 234, 0.8)",
+        },
+      ]}
+    >
+      <Text
+        style={[
+          styles.suggestionText,
+          { color: isDark ? "#ffffff" : "#000000" },
+        ]}
+      >
+        {title}
+      </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>
+  );
+}
+
+function EmptyState() {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  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?
+      </Text>
+      <Text
+        style={[
+          styles.emptySubtitle,
+          { color: isDark ? "#8e8e93" : "#6e6e73" },
+        ]}
+      >
+        Send a message to start chatting
+      </Text>
+      <Suggestions />
+    </View>
+  );
+}
+
+const renderMessage = () => <MessageBubble />;
+
+function ChatMessages() {
+  const isEmpty = useThreadIsEmpty();
+
+  if (isEmpty) {
+    return <EmptyState />;
+  }
+
+  return (
+    <ThreadMessages
+      renderMessage={renderMessage}
+      contentContainerStyle={styles.messageList}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+}
+
+export function Thread() {
+  const insets = useSafeAreaInsets();
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: isDark ? "#000000" : "#ffffff" },
+      ]}
+    >
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoid}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <View style={styles.messagesContainer}>
+          <ChatMessages />
+        </View>
+        <View style={{ paddingBottom: insets.bottom }}>
+          <Composer />
+        </View>
+      </KeyboardAvoidingView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  keyboardAvoid: {
+    flex: 1,
+  },
+  messagesContainer: {
+    flex: 1,
+  },
+  messageList: {
+    paddingVertical: 20,
+    paddingHorizontal: 4,
+  },
+  emptyContainer: {
+    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,
+  },
+  emptyIcon: {
+    fontSize: 32,
+  },
+  emptyTitle: {
+    fontSize: 22,
+    fontWeight: "600",
+    marginBottom: 8,
+    letterSpacing: -0.4,
+  },
+  emptySubtitle: {
+    fontSize: 15,
+    textAlign: "center",
+    letterSpacing: -0.2,
+  },
+  suggestionsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    gap: 8,
+    marginTop: 20,
+    paddingHorizontal: 16,
+  },
+  suggestionChip: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 18,
+  },
+  suggestionText: {
+    fontSize: 14,
+    letterSpacing: -0.2,
+  },
+});
+
+```
+
+## components/assistant-ui/tools.tsx
+
+```tsx
+import { View, Text, StyleSheet, useColorScheme } from "react-native";
+import {
+  makeAssistantTool,
+  type ToolCallMessagePartProps,
+} from "@assistant-ui/react-native";
+
+const WeatherToolUI = (
+  props: ToolCallMessagePartProps<{ city: string }, { temperature: number }>,
+) => {
+  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" }]}>
+          Looking up weather for {props.args.city}...
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.card, { backgroundColor: isDark ? "#1c1c1e" : "#f2f2f7" }]}
+    >
+      <Text style={[styles.city, { color: isDark ? "#ffffff" : "#000000" }]}>
+        {props.args.city}
+      </Text>
+      <Text style={styles.temp}>{props.result?.temperature ?? "—"}°F</Text>
+      <Text style={[styles.label, { color: isDark ? "#8e8e93" : "#6e6e73" }]}>
+        Current Weather
+      </Text>
+    </View>
+  );
+};
+
+export const WeatherTool = makeAssistantTool({
+  toolName: "get_weather",
+  description: "Get the current weather for a city",
+  parameters: {
+    type: "object",
+    properties: {
+      city: { type: "string", description: "The city name" },
+    },
+    required: ["city"],
+  },
+  execute: async ({ city }) => {
+    // Simulated weather API — use city to vary seed
+    await new Promise((r) => setTimeout(r, 1000));
+    const seed = city.length;
+    const temperature = Math.round(50 + ((seed * 17) % 40));
+    return { temperature };
+  },
+  render: WeatherToolUI,
+});
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    marginVertical: 4,
+    gap: 4,
+  },
+  city: {
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  temp: {
+    fontSize: 32,
+    fontWeight: "700",
+    color: "#007aff",
+  },
+  label: {
+    fontSize: 13,
+  },
+});
+
+```
+
+## 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 { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAssistantRuntime, useAuiState } from "@assistant-ui/react-native";
+import { ThreadListItem } from "./ThreadListItem";
+import type { DrawerContentComponentProps } from "@react-navigation/drawer";
+
+export function ThreadListDrawer({ navigation }: DrawerContentComponentProps) {
+  const runtime = useAssistantRuntime();
+  const 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,
+        },
+      ]}
+    >
+      <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={() => {
+                runtime.threads.switchToThread(threadId);
+                navigation.closeDrawer();
+              }}
+            />
+          );
+        }}
+        contentContainerStyle={styles.list}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    paddingVertical: 8,
+  },
+});
+
+```
+
+## components/thread-list/ThreadListItem.tsx
+
+```tsx
+import {
+  Pressable,
+  Text,
+  View,
+  StyleSheet,
+  useColorScheme,
+} from "react-native";
+
+type ThreadListItemProps = {
+  title: string;
+  isActive: boolean;
+  onPress: () => void;
+};
+
+export function ThreadListItem({
+  title,
+  isActive,
+  onPress,
+}: ThreadListItemProps) {
+  const isDark = useColorScheme() === "dark";
+
+  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,
+        ]}
+      >
+        {title}
+      </Text>
+    </View>
+  );
+
+  if (isActive) {
+    return (
+      <Pressable onPress={onPress} style={styles.itemOuter}>
+        <View
+          style={[
+            styles.glassItem,
+            {
+              backgroundColor: isDark
+                ? "rgba(44, 44, 46, 0.6)"
+                : "rgba(209, 209, 214, 0.6)",
+            },
+          ]}
+        >
+          {content}
+        </View>
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.itemOuter,
+        styles.itemPadding,
+        pressed && {
+          backgroundColor: isDark ? "#3a3a3c" : "#d1d1d6",
+          borderRadius: 10,
+        },
+      ]}
+    >
+      {content}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  itemOuter: {
+    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,
+  },
+  title: {
+    fontSize: 15,
+    flex: 1,
+  },
+  titleActive: {
+    fontWeight: "600",
+  },
+});
+
+```
+
+## components/ui/icon-symbol.ios.tsx
+
+```tsx
+import { SymbolView, SymbolViewProps, SymbolWeight } from "expo-symbols";
+import { StyleProp, ViewStyle } from "react-native";
+
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+  weight = "regular",
+}: {
+  name: SymbolViewProps["name"];
+  size?: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <SymbolView
+      weight={weight}
+      tintColor={color}
+      resizeMode="scaleAspectFit"
+      name={name}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+```
+
+## components/ui/icon-symbol.tsx
+
+```tsx
+// Fallback for using MaterialIcons on Android and web.
+
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { SymbolWeight, SymbolViewProps } from "expo-symbols";
+import { ComponentProps } from "react";
+import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native";
+
+type IconMapping = Record<
+  SymbolViewProps["name"],
+  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;
+
+/**
+ * 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;
+}) {
+  return (
+    <MaterialIcons
+      color={color}
+      size={size}
+      name={MAPPING[name]}
+      style={style}
+    />
+  );
+}
+
+```
+
+## constants/theme.ts
+
+```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.
+ */
+
+import { Platform } from "react-native";
+
+const tintColorLight = "#0a7ea4";
+const tintColorDark = "#fff";
+
+export const Colors = {
+  light: {
+    text: "#11181C",
+    background: "#fff",
+    tint: tintColorLight,
+    icon: "#687076",
+    tabIconDefault: "#687076",
+    tabIconSelected: tintColorLight,
+  },
+  dark: {
+    text: "#ECEDEE",
+    background: "#151718",
+    tint: tintColorDark,
+    icon: "#9BA1A6",
+    tabIconDefault: "#9BA1A6",
+    tabIconSelected: tintColorDark,
+  },
+};
+
+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",
+  },
+});
+
+```
+
+## hooks/use-app-runtime.ts
+
+```typescript
+import { useMemo } from "react";
+import { fetch } from "expo/fetch";
+import {
+  useLocalRuntime,
+  createSimpleTitleAdapter,
+  SimpleImageAttachmentAdapter,
+} from "@assistant-ui/react-native";
+import { createOpenAIChatModelAdapter } from "@/adapters/openai-chat-adapter";
+
+export function useAppRuntime() {
+  const chatModel = useMemo(
+    () =>
+      createOpenAIChatModelAdapter({
+        apiKey: process.env.EXPO_PUBLIC_OPENAI_API_KEY ?? "",
+        model: "gpt-4o-mini",
+        fetch,
+      }),
+    [],
+  );
+
+  const titleGenerator = useMemo(() => createSimpleTitleAdapter(), []);
+
+  return useLocalRuntime(chatModel, {
+    titleGenerator,
+    adapters: {
+      attachments: new SimpleImageAttachmentAdapter(),
+    },
+  });
+}
+
+```
+
+## 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-color.ts
+
+```typescript
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { Colors } 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 theme = useColorScheme() ?? "light";
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}
+
+```
+
+## metro.config.js
+
+```javascript
+const { getDefaultConfig } = require("expo/metro-config");
+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 = 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"
+  },
+  "dependencies": {
+    "@assistant-ui/react-native": "workspace:*",
+    "@expo/vector-icons": "^15.1.1",
+    "@react-navigation/drawer": "^7.7.2",
+    "@react-navigation/native": "^7.1.28",
+    "expo": "~55.0.4",
+    "expo-constants": "~55.0.7",
+    "expo-font": "~55.0.4",
+    "expo-image-picker": "~55.0.10",
+    "expo-linking": "~55.0.7",
+    "expo-router": "~55.0.3",
+    "expo-splash-screen": "~55.0.10",
+    "expo-status-bar": "~55.0.4",
+    "expo-system-ui": "~55.0.9",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "~4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "react-native-web": "~0.21.2",
+    "react-native-worklets": "0.7.2"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.14",
+    "typescript": "~5.9.3"
+  },
+  "private": true
+}
+
+```
+
+## README.md
+
+```markdown
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [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
+
+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
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## 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.
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+
+```
+