diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0c71db549..7d33f678b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -19,4 +19,4 @@
     "titleBar.inactiveForeground": "#e7e7e799"
   },
   "peacock.color": "#38b"
-}
\ No newline at end of file
+}
diff --git a/vibes.diy/pkg/app/components/ChatInput.tsx b/vibes.diy/pkg/app/components/ChatInput.tsx
index 897a8afd9..f03e03342 100644
--- a/vibes.diy/pkg/app/components/ChatInput.tsx
+++ b/vibes.diy/pkg/app/components/ChatInput.tsx
@@ -9,6 +9,7 @@ import React, {
 } from "react";
 import type { ChatState } from "../types/chat.js";
 import ModelPicker, { type ModelOption } from "./ModelPicker.js";
+import ImagePreview from "./ImagePreview.js";
 import { preloadLlmsText } from "../prompts.js";
 
 interface ChatInputProps {
@@ -45,6 +46,8 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
 
     // State for responsive behavior
     const [isCompact, setIsCompact] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
 
     // Expose the click function to parent components
     useImperativeHandle(
@@ -102,9 +105,64 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       };
     }, []);
 
+    const handleFilesSelected = useCallback(
+      async (files: FileList | null) => {
+        if (!files || !chatState.attachImages) return;
+        await chatState.attachImages(files);
+      },
+      [chatState.attachImages],
+    );
+
+    const onDropFiles = useCallback(
+      async (e: React.DragEvent<HTMLElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const files = e.dataTransfer?.files;
+        if (files && chatState.attachImages) {
+          await chatState.attachImages(files);
+        }
+      },
+      [chatState.attachImages],
+    );
+
     return (
-      <div ref={containerRef} className="px-4 py-2">
-        <div className="space-y-1">
+      <div
+        ref={containerRef}
+        className="px-4 py-2"
+        onDragEnter={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragOver={(e) => {
+          // Prevent default to avoid the browser opening the file
+          e.preventDefault();
+          setIsDragging(true);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          setIsDragging(false);
+        }}
+        onDrop={(e) => {
+          // Prevent navigation and route valid file drops to the shared handler
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+          if (e.dataTransfer?.files?.length) {
+            void onDropFiles(e);
+          }
+        }}
+      >
+        <div className="space-y-2">
+          {/* Attached images preview */}
+          {Array.isArray(chatState.attachedImages) &&
+            chatState.attachedImages.length > 0 && (
+              <ImagePreview
+                images={chatState.attachedImages}
+                onRemove={(id) => chatState.removeAttachedImage?.(id)}
+              />
+            )}
+
           <textarea
             ref={chatState.inputRef}
             value={chatState.input}
@@ -113,6 +171,19 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 chatState.setInput(e.target.value);
               }
             }}
+            onDragEnter={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={onDropFiles}
             onFocus={() => {
               // Fire and forget: warm the LLMs text cache using raw imports
               void preloadLlmsText();
@@ -123,7 +194,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 handleSendMessage();
               }
             }}
-            className="border-light-decorative-00 dark:border-dark-decorative-00 text-light-primary dark:text-dark-primary bg-light-background-01 dark:bg-dark-background-01 focus:ring-accent-01-light dark:focus:ring-accent-01-dark max-h-[200px] min-h-[90px] w-full resize-y rounded-lg border p-2.5 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+            className={`border-light-decorative-00 dark:border-dark-decorative-00 text-light-primary dark:text-dark-primary bg-light-background-01 dark:bg-dark-background-01 focus:ring-accent-01-light dark:focus:ring-accent-01-dark max-h-[200px] min-h-[90px] w-full resize-y rounded-lg border p-2.5 text-sm focus:border-transparent focus:ring-2 focus:outline-none ${isDragging ? "ring-2 ring-blue-500" : ""}`}
             placeholder={
               chatState.docs.length || chatState.isStreaming
                 ? "Continue coding..."
@@ -144,18 +215,44 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 compact={isCompact}
               />
             ) : (
-              <span aria-hidden="true" />
+              <span className="flex items-center gap-2" aria-hidden="true" />
             )}
-            <button
-              ref={submitButtonRef}
-              type="button"
-              onClick={handleSendMessage}
-              disabled={chatState.isStreaming}
-              className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
-              aria-label={chatState.isStreaming ? "Generating" : "Send message"}
-            >
-              {chatState.isStreaming ? "•••" : "Code"}
-            </button>
+            <div className="flex items-center gap-2">
+              {/* Hidden file input */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                  void handleFilesSelected(e.target.files);
+                  // Allow selecting the same file(s) consecutively
+                  e.currentTarget.value = "";
+                }}
+              />
+              <button
+                type="button"
+                aria-label="Attach images"
+                className="border-light-decorative-00 text-light-primary hover:bg-light-decorative-00/40 dark:border-dark-decorative-00 dark:text-dark-primary dark:hover:bg-dark-decorative-00/40 rounded-md border px-2 py-1 text-sm transition-colors"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={chatState.isStreaming}
+              >
+                +
+              </button>
+              <button
+                ref={submitButtonRef}
+                type="button"
+                onClick={handleSendMessage}
+                disabled={chatState.isStreaming}
+                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+                aria-label={
+                  chatState.isStreaming ? "Generating" : "Send message"
+                }
+              >
+                {chatState.isStreaming ? "•••" : "Code"}
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/vibes.diy/pkg/app/components/ImagePreview.tsx b/vibes.diy/pkg/app/components/ImagePreview.tsx
new file mode 100644
index 000000000..e1b3b0282
--- /dev/null
+++ b/vibes.diy/pkg/app/components/ImagePreview.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+interface ImagePreviewItem {
+  id: string;
+  previewUrl: string;
+  mimeType: string;
+}
+
+export function ImagePreview({
+  images,
+  onRemove,
+}: {
+  images: ImagePreviewItem[];
+  onRemove: (id: string) => void | Promise<void>;
+}) {
+  if (!images || images.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {images.map((img) => (
+        <div
+          key={img.id}
+          className="border-light-decorative-00 dark:border-dark-decorative-00 relative h-16 w-16 overflow-hidden rounded border"
+        >
+          <img
+            src={img.previewUrl}
+            alt="attachment"
+            className="h-full w-full object-cover"
+            draggable={false}
+          />
+          <button
+            type="button"
+            onClick={() => onRemove(img.id)}
+            aria-label="Remove image"
+            className="absolute top-0 right-0 m-0.5 rounded bg-black/60 px-1 text-[10px] leading-4 font-semibold text-white hover:bg-black/80"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default ImagePreview;
diff --git a/vibes.diy/pkg/app/components/Message.tsx b/vibes.diy/pkg/app/components/Message.tsx
index fc505f674..9df33e050 100644
--- a/vibes.diy/pkg/app/components/Message.tsx
+++ b/vibes.diy/pkg/app/components/Message.tsx
@@ -1,13 +1,17 @@
-import React, { memo } from "react";
+import React, { memo, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import StructuredMessage from "./StructuredMessage.js";
 import type {
   ChatMessageDocument,
   AiChatMessageDocument,
   SystemChatMessageDocument,
+  UserChatMessageDocument,
   ViewType,
 } from "../types/chat.js";
 import { parseContent } from "../utils/segmentParser.js";
+import { useFireproof, type DocFileMeta } from "use-fireproof";
+import { getSessionDatabaseName } from "../utils/databaseManager.js";
+import { ImgFile } from "./SessionSidebar/ImgFile.js";
 
 interface MessageProps {
   message: ChatMessageDocument;
@@ -106,10 +110,90 @@ const AIMessage = memo(
   },
 );
 
+const UserImages = ({
+  sessionId,
+  imageIds,
+}: {
+  sessionId: string;
+  imageIds: string[];
+}) => {
+  const dbName = getSessionDatabaseName(sessionId);
+  const { database } = useFireproof(dbName);
+  const [files, setFiles] = useState<DocFileMeta[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      const result: DocFileMeta[] = [];
+      for (const id of imageIds) {
+        try {
+          const doc = await database.get(id);
+          const fpFiles = doc?._files || {};
+          const key = "image" in fpFiles ? "image" : Object.keys(fpFiles)[0];
+          const ref = key ? fpFiles[key] : undefined;
+          if (ref) {
+            const anyRef: any = ref as any;
+            if (typeof anyRef.file === "function") {
+              // Fireproof DocFileMeta
+              result.push(anyRef as DocFileMeta);
+            } else if (ref instanceof File) {
+              // Raw File stored in _files (dev/testing scenarios)
+              const wrapped: DocFileMeta = {
+                file: async () => ref,
+                type: ref.type || "application/octet-stream",
+                size: ref.size,
+                cid: undefined as any,
+              };
+              result.push(wrapped);
+            }
+          }
+        } catch (err) {
+          console.warn(`Failed to load image ${id}:`, err);
+        }
+      }
+      if (!cancelled) {
+        setFiles(result);
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [database, imageIds]);
+
+  if (files.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 mb-2">
+      {files.map((file, index) => (
+        <div
+          key={`${sessionId}-${imageIds[index]}`}
+          className="border-light-decorative-00 dark:border-dark-decorative-00 overflow-hidden rounded border"
+        >
+          <ImgFile
+            file={file}
+            alt="User attachment"
+            className="max-w-xs"
+            maxHeight="12rem"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
 const UserMessage = memo(({ message }: { message: ChatMessageDocument }) => {
+  const userMessage = message as UserChatMessageDocument;
+  const hasImages = userMessage.images && userMessage.images.length > 0;
   return (
     <div className="mb-4 flex flex-row justify-end px-4">
       <div className="bg-light-background-02 dark:bg-dark-decorative-00 text-light-primary dark:text-dark-primary max-w-[85%] rounded-xl px-5 py-3 shadow-md">
+        {hasImages && (
+          <UserImages
+            sessionId={userMessage.session_id}
+            imageIds={userMessage.images!}
+          />
+        )}
         <div className="prose prose-sm dark:prose-invert prose-ul:pl-5 prose-ul:list-disc prose-ol:pl-5 prose-ol:list-decimal prose-li:my-0 max-w-none">
           <ReactMarkdown>{message.text}</ReactMarkdown>
         </div>
diff --git a/vibes.diy/pkg/app/hooks/sendMessage.ts b/vibes.diy/pkg/app/hooks/sendMessage.ts
index d96ae94e9..78ebdf134 100644
--- a/vibes.diy/pkg/app/hooks/sendMessage.ts
+++ b/vibes.diy/pkg/app/hooks/sendMessage.ts
@@ -39,6 +39,9 @@ export interface SendMessageContext {
   titleModel: string;
   isAuthenticated: boolean;
   vibeDoc: VibeDocument;
+  // Image support
+  attachedImages: Array<{ id: string; previewUrl: string; mimeType: string }>;
+  clearAttachedImages: () => void;
 }
 
 export async function sendMessage(
@@ -69,6 +72,8 @@ export async function sendMessage(
     titleModel,
     isAuthenticated,
     vibeDoc,
+    attachedImages,
+    clearAttachedImages,
   } = ctx;
 
   const promptText =
@@ -82,23 +87,39 @@ export async function sendMessage(
     setNeedsLogin(true, "sendMessage not authenticated");
   }
 
+  // Capture image IDs before clearing
+  const imageIds = attachedImages.map((img) => img.id);
+
   if (typeof textOverride === "string" && !skipSubmit) {
     // Update the transient userMessage state so UI reflects any override text
     // Only update when we are not in retry mode (skipSubmit === false)
-    mergeUserMessage({ text: textOverride });
+    mergeUserMessage({
+      text: textOverride,
+      images: imageIds.length > 0 ? imageIds : undefined,
+    });
+  } else if (imageIds.length > 0) {
+    // Add images to the current user message
+    mergeUserMessage({ images: imageIds });
   }
 
-  setPendingUserDoc({
-    ...userMessage,
+  const userDoc: UserChatMessageDocument = {
+    ...(userMessage as UserChatMessageDocument),
     text: promptText,
-  });
+  };
+
+  if (imageIds.length > 0) {
+    userDoc.images = imageIds;
+  }
+
+  setPendingUserDoc(userDoc);
 
   // Always submit the user message first unless we are retrying the same
   // message (e.g. after login / API key refresh)
   if (!skipSubmit) {
     await submitUserMessage();
-    // Clear the chat input once the user message has been submitted
+    // Clear the chat input and attached images once the user message has been submitted
     setInput("");
+    clearAttachedImages();
   }
 
   setIsStreaming(true);
@@ -135,6 +156,8 @@ export async function sendMessage(
     currentApiKey,
     userId,
     // setNeedsLogin,
+    sessionDatabase, // Pass sessionDatabase for image loading
+    imageIds, // Pass image IDs for multimodal support
   )
     .then(async (finalContent) => {
       isProcessingRef.current = true;
diff --git a/vibes.diy/pkg/app/hooks/useSimpleChat.ts b/vibes.diy/pkg/app/hooks/useSimpleChat.ts
index 7dbbc411b..76cea2d76 100644
--- a/vibes.diy/pkg/app/hooks/useSimpleChat.ts
+++ b/vibes.diy/pkg/app/hooks/useSimpleChat.ts
@@ -110,6 +110,11 @@ export function useSimpleChat(sessionId: string | undefined): ChatState {
   const [pendingAiMessage, setPendingAiMessage] =
     useState<ChatMessageDocument | null>(null);
 
+  // Image attachment state
+  const [attachedImages, setAttachedImages] = useState<
+    Array<{ id: string; previewUrl: string; mimeType: string }>
+  >([]);
+
   // setNeedsLogin is now obtained from AuthContext above
 
   // Derive model to use from settings or default
@@ -191,6 +196,17 @@ export function useSimpleChat(sessionId: string | undefined): ChatState {
    * Send a message and process the AI response
    * @param textOverride Optional text to use instead of the current userMessage
    */
+  // Image management functions
+  const clearAttachedImages = useCallback(() => {
+    // Revoke all preview URLs
+    attachedImages.forEach((img) => {
+      URL.revokeObjectURL(img.previewUrl);
+    });
+
+    // Clear state
+    setAttachedImages([]);
+  }, [attachedImages]);
+
   const sendMessage = useCallback(
     (textOverride?: string, skipSubmit = false) => {
       const ctx: SendMessageContext = {
@@ -216,6 +232,8 @@ export function useSimpleChat(sessionId: string | undefined): ChatState {
         titleModel: TITLE_MODEL,
         isAuthenticated,
         vibeDoc,
+        attachedImages,
+        clearAttachedImages,
       };
       return sendChatMessage(ctx, textOverride, skipSubmit);
     },
@@ -236,6 +254,8 @@ export function useSimpleChat(sessionId: string | undefined): ChatState {
       boundCheckCredits,
       ensureApiKey,
       isAuthenticated,
+      attachedImages,
+      clearAttachedImages,
     ],
   );
 
@@ -338,6 +358,140 @@ ${code}
     // No additional action needed here
   }, [advisoryErrors]);
 
+  // Image management functions
+  const attachImages = useCallback(
+    async (files: FileList) => {
+      if (!sessionId) return;
+
+      // Guardrails (values pending confirmation in review)
+      const MAX_ATTACHMENTS = 6; // maximum images per message
+      const MAX_FILE_MB = 10; // maximum size per image (MB)
+      const MAX_BYTES = MAX_FILE_MB * 1024 * 1024;
+
+      // Respect remaining slots based on current attachments
+      const remaining = Math.max(0, MAX_ATTACHMENTS - attachedImages.length);
+      if (remaining <= 0) return;
+
+      // Filter and cap incoming files before creating any preview URLs
+      const candidates: File[] = [];
+      for (let i = 0; i < files.length && candidates.length < remaining; i++) {
+        const file = files[i];
+        // Only images
+        if (!file.type.startsWith("image/")) continue;
+        // Enforce per-file size limit
+        if (file.size > MAX_BYTES) continue;
+        candidates.push(file);
+      }
+
+      if (candidates.length === 0) return;
+
+      // Prepare docs and previews (create previews only for accepted candidates)
+      const prepared = candidates.map((file) => {
+        const previewUrl = URL.createObjectURL(file);
+        const doc = {
+          type: "image" as const,
+          session_id: sessionId,
+          created_at: Date.now(),
+          _files: { image: file },
+        };
+        return { file, previewUrl, doc } as const;
+      });
+
+      try {
+        // Prefer single bulk write; fall back to sequential puts if bulk is unavailable
+        const hasBulk = typeof (sessionDatabase as any)?.bulk === "function";
+        const results = hasBulk
+          ? await (sessionDatabase as any).bulk(prepared.map((p) => p.doc))
+          : (async () => {
+              const out: any[] = [];
+              for (const p of prepared) {
+                try {
+                  // sequential to avoid introducing concurrency
+                  // eslint-disable-next-line no-await-in-loop
+                  const r = await sessionDatabase.put(p.doc as any);
+                  out.push(r);
+                } catch (e) {
+                  out.push({ error: e });
+                }
+              }
+              return out;
+            })();
+
+        const newImages: Array<{
+          id: string;
+          previewUrl: string;
+          mimeType: string;
+        }> = [];
+
+        // Map results to previews; revoke previews for failed writes
+        if (Array.isArray(results)) {
+          for (let i = 0; i < prepared.length; i++) {
+            const res = results[i] as any;
+            const id = res?.id || res?._id; // support different return shapes
+            if (id && !res?.error) {
+              newImages.push({
+                id,
+                previewUrl: prepared[i].previewUrl,
+                mimeType: prepared[i].file.type,
+              });
+            } else {
+              URL.revokeObjectURL(prepared[i].previewUrl);
+            }
+          }
+        } else {
+          // If bulk did not return per-doc results, treat as failure and clean up
+          prepared.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+          return;
+        }
+
+        if (newImages.length > 0) {
+          setAttachedImages((prev) => {
+            const available = Math.max(0, MAX_ATTACHMENTS - prev.length);
+            if (available <= 0) {
+              // no room left — cleanup all previews we created
+              newImages.forEach((ni) => URL.revokeObjectURL(ni.previewUrl));
+              return prev;
+            }
+            if (newImages.length > available) {
+              // cleanup any previews that won't be added due to capacity
+              for (let i = available; i < newImages.length; i++) {
+                URL.revokeObjectURL(newImages[i].previewUrl);
+              }
+            }
+            return [...prev, ...newImages.slice(0, available)];
+          });
+        }
+      } catch (error) {
+        console.error("Failed to store images:", error);
+        // Revoke all previews on bulk failure
+        prepared.forEach((p) => URL.revokeObjectURL(p.previewUrl));
+      }
+    },
+    [sessionId, sessionDatabase, attachedImages.length],
+  );
+
+  const removeAttachedImage = useCallback(
+    async (id: string) => {
+      // Find the image in our state
+      const imageToRemove = attachedImages.find((img) => img.id === id);
+      if (!imageToRemove) return;
+
+      // Revoke the preview URL
+      URL.revokeObjectURL(imageToRemove.previewUrl);
+
+      // Remove from Fireproof
+      try {
+        await sessionDatabase.del(id);
+      } catch (error) {
+        console.error("Failed to delete image from database:", error);
+      }
+
+      // Remove from state
+      setAttachedImages((prev) => prev.filter((img) => img.id !== id));
+    },
+    [attachedImages, sessionDatabase],
+  );
+
   return {
     sessionId: session._id,
     vibeDoc,
@@ -366,5 +520,10 @@ ${code}
     addError,
     isEmpty: docs.length === 0,
     updateSelectedModel,
+    // Image management
+    attachedImages,
+    attachImages,
+    removeAttachedImage,
+    clearAttachedImages,
   };
 }
diff --git a/vibes.diy/pkg/app/types/chat.ts b/vibes.diy/pkg/app/types/chat.ts
index 5fe60de8f..ed2c79f38 100644
--- a/vibes.diy/pkg/app/types/chat.ts
+++ b/vibes.diy/pkg/app/types/chat.ts
@@ -68,6 +68,7 @@ export interface BaseChatMessageDocument {
 
 export type UserChatMessageDocument = BaseChatMessageDocument & {
   type: "user";
+  images?: string[]; // Array of Fireproof image document IDs
 };
 
 export type AiChatMessageDocument = BaseChatMessageDocument & {
@@ -105,6 +106,18 @@ export interface ScreenshotDocument extends DocBase {
   };
 }
 
+/**
+ * Document type for image attachments
+ */
+export interface ImageDocument extends DocBase {
+  type: "image";
+  session_id: string;
+  created_at: number;
+  _files?: {
+    image: { file: () => Promise<File>; type: string };
+  };
+}
+
 // Note: We already have a SessionDocument interface, so merged the properties
 export interface SessionDocument extends DocTypes {
   _id?: string;
@@ -186,6 +199,12 @@ export interface ChatState {
   advisoryErrors: RuntimeError[];
   addError: (error: RuntimeError) => void;
   vibeDoc?: VibeDocument;
+
+  // Image management
+  attachedImages?: Array<{ id: string; previewUrl: string; mimeType: string }>;
+  attachImages?: (files: FileList) => Promise<void>;
+  removeAttachedImage?: (id: string) => Promise<void>;
+  clearAttachedImages?: () => void;
 }
 
 export interface ChatInterfaceProps extends ChatState {
diff --git a/vibes.diy/pkg/app/utils/streamHandler.ts b/vibes.diy/pkg/app/utils/streamHandler.ts
index 995c92c92..68cbc41e5 100644
--- a/vibes.diy/pkg/app/utils/streamHandler.ts
+++ b/vibes.diy/pkg/app/utils/streamHandler.ts
@@ -3,6 +3,7 @@
  */
 
 import { type CallAIOptions, type Message, callAI } from "call-ai";
+import { Database } from "use-fireproof";
 import { CALLAI_ENDPOINT } from "../config/env.js";
 
 /**
@@ -16,6 +17,8 @@ import { CALLAI_ENDPOINT } from "../config/env.js";
  * @param apiKey - The API key to use for the callAI service
  * @param userId - The user ID
  * @param setNeedsLogin - Optional callback to set needs login flag
+ * @param sessionDatabase - Optional database for loading images
+ * @param imageIds - Optional array of image document IDs for multimodal support
  * @returns A promise that resolves to the complete response when streaming is complete
  */
 export async function streamAI(
@@ -30,14 +33,83 @@ export async function streamAI(
   apiKey: string, // API key (can be dummy key for proxy)
   userId?: string,
   // setNeedsLogin?: (value: boolean, reason: string) => void,
+  sessionDatabase?: Database,
+  imageIds?: string[],
 ): Promise<string> {
   // Stream process starts
 
+  // Load images if we have image IDs and a database
+  const imageDataUrls: string[] = [];
+  if (imageIds && imageIds.length > 0 && sessionDatabase) {
+    for (const imageId of imageIds) {
+      try {
+        const doc = await sessionDatabase.get(imageId);
+        const fpFiles = doc?._files || {};
+        const key = "image" in fpFiles ? "image" : Object.keys(fpFiles)[0];
+        const ref = key ? fpFiles[key] : undefined;
+        if (ref) {
+          const anyRef: any = ref as any;
+          let file: File;
+          if (typeof anyRef.file === "function") {
+            // Fireproof DocFileMeta
+            file = await anyRef.file();
+          } else if (anyRef instanceof File) {
+            // Raw File
+            file = anyRef;
+          } else {
+            continue;
+          }
+          // Convert to data URL (browser-compatible)
+          const reader = new FileReader();
+          const dataUrl = await new Promise<string>((resolve, reject) => {
+            reader.onload = () => resolve(reader.result as string);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+          });
+          imageDataUrls.push(dataUrl);
+        }
+      } catch (error) {
+        console.warn(`Failed to load image ${imageId}:`, error);
+      }
+    }
+  }
+
+  // Build user message content - multimodal if we have images
+  let userContent:
+    | string
+    | Array<{
+        type: "text" | "image_url";
+        text?: string;
+        image_url?: { url: string };
+      }>;
+
+  if (imageDataUrls.length > 0) {
+    // Multimodal message with text and images
+    const contentParts: Array<{
+      type: "text" | "image_url";
+      text?: string;
+      image_url?: { url: string };
+    }> = [{ type: "text", text: userMessage }];
+
+    // Add image segments
+    for (const dataUrl of imageDataUrls) {
+      contentParts.push({
+        type: "image_url",
+        image_url: { url: dataUrl },
+      });
+    }
+
+    userContent = contentParts;
+  } else {
+    // Text-only message
+    userContent = userMessage;
+  }
+
   // Format messages for call-ai
   const messages: Message[] = [
     { role: "system", content: systemPrompt },
     ...messageHistory,
-    { role: "user", content: userMessage },
+    { role: "user", content: userContent },
   ];
   // Configure call-ai options with default maximum token limit
   const defaultMaxTokens = userId ? 150000 : 75000;