diff --git a/apps/web/public/placeholder.png b/apps/web/public/placeholder.png
new file mode 100644
index 000000000..8d580daec
Binary files /dev/null and b/apps/web/public/placeholder.png differ
diff --git a/apps/web/src/actions/documents/upload.ts b/apps/web/src/actions/documents/upload.ts
index 19b807d99..60fffa75c 100644
--- a/apps/web/src/actions/documents/upload.ts
+++ b/apps/web/src/actions/documents/upload.ts
@@ -6,7 +6,7 @@ import {
   createNewDocument,
   defaultDocumentContent,
 } from '@latitude-data/core/services/documents/create'
-import { transformFile } from '@latitude-data/core/services/files/transform'
+import { convertFile } from '@latitude-data/core/services/files/convert'
 import { z } from 'zod'
 
 import { withProject } from '../procedures'
@@ -28,7 +28,7 @@ export const uploadDocumentAction = withProject
       .getCommitByUuid({ uuid: input.commitUuid, projectId: ctx.project.id })
       .then((r) => r.unwrap())
 
-    const content = await transformFile(input.file).then((r) => r.unwrap())
+    const content = await convertFile(input.file).then((r) => r.unwrap())
     const { metadata } = await defaultDocumentContent({
       workspace: ctx.workspace,
     })
diff --git a/apps/web/src/actions/files/convert.ts b/apps/web/src/actions/files/convert.ts
new file mode 100644
index 000000000..e5bd5355b
--- /dev/null
+++ b/apps/web/src/actions/files/convert.ts
@@ -0,0 +1,22 @@
+'use server'
+
+import { MAX_SIZE, MAX_UPLOAD_SIZE_IN_MB } from '@latitude-data/core/browser'
+import { convertFile } from '@latitude-data/core/services/files/convert'
+import { z } from 'zod'
+
+import { authProcedure } from '../procedures'
+
+export const convertFileAction = authProcedure
+  .createServerAction()
+  .input(
+    z.object({
+      file: z.instanceof(File).refine(async (file) => {
+        return file?.size <= MAX_UPLOAD_SIZE_IN_MB
+      }, `Your file must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`),
+    }),
+  )
+  .handler(async ({ input }) => {
+    const result = await convertFile(input.file)
+
+    return result.unwrap()
+  })
diff --git a/apps/web/src/actions/files/upload.ts b/apps/web/src/actions/files/upload.ts
new file mode 100644
index 000000000..c7078c42c
--- /dev/null
+++ b/apps/web/src/actions/files/upload.ts
@@ -0,0 +1,22 @@
+'use server'
+
+import { MAX_SIZE, MAX_UPLOAD_SIZE_IN_MB } from '@latitude-data/core/browser'
+import { uploadFile } from '@latitude-data/core/services/files/upload'
+import { z } from 'zod'
+
+import { authProcedure } from '../procedures'
+
+export const uploadFileAction = authProcedure
+  .createServerAction()
+  .input(
+    z.object({
+      file: z.instanceof(File).refine(async (file) => {
+        return file?.size <= MAX_UPLOAD_SIZE_IN_MB
+      }, `Your file must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`),
+    }),
+  )
+  .handler(async ({ input, ctx }) => {
+    const result = await uploadFile(input.file, ctx.workspace)
+
+    return result.unwrap()
+  })
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx
index fc6940e94..c58dd4055 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx
@@ -13,10 +13,12 @@ import {
   type DocumentVersion,
 } from '@latitude-data/core/browser'
 import {
+  AnimatedDots,
   ChatTextArea,
   cn,
   ErrorMessage,
   Icon,
+  LineSeparator,
   Message,
   MessageList,
   Text,
@@ -24,8 +26,6 @@ import {
   useAutoScroll,
   useCurrentCommit,
   useCurrentProject,
-  AnimatedDots,
-  LineSeparator,
 } from '@latitude-data/web-ui'
 import { LanguageModelUsage } from 'ai'
 import { readStreamableValue } from 'ai/rsc'
@@ -245,7 +245,7 @@ export default function Chat({
       >
         <MessageList
           messages={conversation?.messages.slice(0, chainLength - 1) ?? []}
-          parameters={parameters}
+          parameters={Object.keys(parameters)}
           collapseParameters={!expandParameters}
         />
         {(conversation?.messages.length ?? 0) >= chainLength && (
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/InputsMapper.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/InputsMapper.tsx
index 0c1f93e48..a71ec77fb 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/InputsMapper.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/InputsMapper.tsx
@@ -1,3 +1,8 @@
+import {
+  DatasetSource,
+  PlaygroundInput,
+  useDocumentParameters,
+} from '$/hooks/useDocumentParameters'
 import { Dataset, DocumentVersion } from '@latitude-data/core/browser'
 import {
   Badge,
@@ -7,12 +12,8 @@ import {
   Select,
   Text,
   Tooltip,
+  type ICommitContextType,
 } from '@latitude-data/web-ui'
-import {
-  DatasetSource,
-  PlaygroundInput,
-  useDocumentParameters,
-} from '$/hooks/useDocumentParameters'
 
 import { UseSelectDataset, type DatasetPreview } from './useSelectDataset'
 
@@ -31,7 +32,7 @@ function getTooltipValue(input: PlaygroundInput<'dataset'>) {
 
 export function InputMapper({
   document,
-  commitVersionUuid,
+  commit,
   mappedInputs,
   headersOptions,
   isLoading,
@@ -39,7 +40,7 @@ export function InputMapper({
   selectedDataset,
 }: {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
   mappedInputs: DatasetSource['mappedInputs']
   headersOptions: DatasetPreview['headersOptions']
   onSelectHeader: UseSelectDataset['onSelectHeader']
@@ -51,7 +52,7 @@ export function InputMapper({
     dataset: { inputs, copyToManual },
   } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
   return (
     <ClientOnly>
@@ -68,7 +69,7 @@ export function InputMapper({
                   className='grid col-span-2 grid-cols-subgrid gap-3 w-full items-start'
                   key={idx}
                 >
-                  <div className='flex flex-row items-center gap-x-1 min-h-8'>
+                  <div className='flex flex-row items-center gap-x-2 min-h-8'>
                     <Badge variant={isMapped ? 'accent' : 'muted'}>
                       &#123;&#123;{param}&#125;&#125;
                     </Badge>
@@ -121,7 +122,7 @@ export function InputMapper({
           </div>
         ) : (
           <Text.H6 color='foregroundMuted'>
-            No inputs. Use &#123;&#123; input_name &#125;&#125; to insert.
+            No inputs. Use &#123;&#123;input_name&#125;&#125; to insert.
           </Text.H6>
         )}
       </div>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
index 050f9a287..ff58369e4 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
@@ -1,6 +1,12 @@
-import { DocumentVersion } from '@latitude-data/core/browser'
-import { Button, cn, Icon, Select } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
+import { DocumentVersion } from '@latitude-data/core/browser'
+import {
+  Button,
+  cn,
+  Icon,
+  Select,
+  type ICommitContextType,
+} from '@latitude-data/web-ui'
 import Link from 'next/link'
 
 import { ParametersPaginationNav } from '../PaginationNav'
@@ -22,11 +28,11 @@ function BlankSlate() {
 
 export function DatasetParams({
   data,
-  commitVersionUuid,
+  commit,
   document,
 }: {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
   data: UseSelectDataset
 }) {
   const selectedId = data.selectedDataset?.id
@@ -61,7 +67,7 @@ export function DatasetParams({
       <div className={cn({ 'opacity-50': data.isLoading })}>
         <InputMapper
           document={document}
-          commitVersionUuid={commitVersionUuid}
+          commit={commit}
           isLoading={data.isLoading}
           mappedInputs={data.selectedRow.mappedInputs}
           headersOptions={data.datasetPreview.headersOptions}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
index ae9c78a87..559e33b34 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
@@ -1,13 +1,22 @@
-import { DocumentLog, DocumentVersion } from '@latitude-data/core/browser'
-import { Badge, cn, Icon, Skeleton, Text } from '@latitude-data/web-ui'
 import { useDocumentParameters } from '$/hooks/useDocumentParameters'
 import { useGenerateDocumentLogDetailUrl } from '$/hooks/useGenerateDocumentLogDetailUrl'
+import { DocumentLog, DocumentVersion } from '@latitude-data/core/browser'
+import {
+  Badge,
+  ClientOnly,
+  cn,
+  Icon,
+  Skeleton,
+  Text,
+  TextArea,
+  Tooltip,
+  type ICommitContextType,
+} from '@latitude-data/web-ui'
 import { format } from 'date-fns'
 import Link from 'next/link'
 
-import { InputParams } from '../Input'
 import { ParametersPaginationNav } from '../PaginationNav'
-import { UseLogHistoryParams } from './useLogHistoryParams'
+import { type UseLogHistoryParams } from './useLogHistoryParams'
 
 function usePaginatedDocumentLogUrl({
   page,
@@ -37,18 +46,18 @@ function usePaginatedDocumentLogUrl({
 
 export function HistoryLogParams({
   data,
-  commitVersionUuid,
+  commit,
   document,
 }: {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
   data: UseLogHistoryParams
 }) {
   const {
     history: { inputs, setInput },
   } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
   const urlData = usePaginatedDocumentLogUrl({
     selectedLog: data.selectedLog,
@@ -103,7 +112,53 @@ export function HistoryLogParams({
         )}
       </div>
       <div className={cn({ 'opacity-50': data.isLoading })}>
-        <InputParams inputs={inputs} setInput={setInput} />
+        <ClientOnly>
+          <div className='flex flex-col gap-3'>
+            {Object.keys(inputs).length > 0 ? (
+              <div className='grid grid-cols-[auto_1fr] gap-y-3'>
+                {Object.entries(inputs).map(([param, input], idx) => {
+                  const includedInPrompt =
+                    input.metadata.includeInPrompt ?? true
+                  return (
+                    <div
+                      className='grid col-span-2 grid-cols-subgrid gap-3 w-full items-start'
+                      key={idx}
+                    >
+                      <div className='flex flex-row items-center gap-x-2 min-h-8'>
+                        <Badge variant={includedInPrompt ? 'accent' : 'muted'}>
+                          &#123;&#123;{param}&#125;&#125;
+                        </Badge>
+                        {!includedInPrompt && (
+                          <Tooltip trigger={<Icon name='info' />}>
+                            This variable is not included in the current prompt
+                          </Tooltip>
+                        )}
+                      </div>
+                      <div className='flex flex-grow w-full min-w-0'>
+                        <TextArea
+                          value={input.value ?? ''}
+                          minRows={1}
+                          maxRows={6}
+                          onChange={(e) => {
+                            setInput?.(param, {
+                              ...input,
+                              value: e.target.value,
+                            })
+                          }}
+                          disabled={data.isLoading}
+                        />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <Text.H6 color='foregroundMuted'>
+                No inputs. Use &#123;&#123;input_name&#125;&#125; to insert.
+              </Text.H6>
+            )}
+          </div>
+        </ClientOnly>
       </div>
     </div>
   )
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx
index a76cb7dea..8080addd0 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx
@@ -1,24 +1,43 @@
+import { ChangeEvent, useCallback, useMemo } from 'react'
+
+import {
+  Inputs,
+  InputSource,
+  PlaygroundInput,
+} from '$/hooks/useDocumentParameters'
+import { updatePromptMetadata } from '$/lib/promptMetadata'
+import useFiles from '$/stores/files'
+import {
+  ParameterType,
+  SUPPORTED_IMAGE_TYPES,
+} from '@latitude-data/core/browser'
 import {
   Badge,
   ClientOnly,
+  DropzoneInput,
   Icon,
+  Select,
+  SelectTriggerPrimitive,
+  Skeleton,
   Text,
   TextArea,
   Tooltip,
+  type ICommitContextType,
 } from '@latitude-data/web-ui'
-import {
-  Inputs,
-  InputSource,
-  PlaygroundInput,
-} from '$/hooks/useDocumentParameters'
 
 export function InputParams({
   inputs,
   setInput,
+  commit,
+  prompt,
+  setPrompt,
   disabled = false,
 }: {
   inputs: Inputs<InputSource>
-  setInput?: (param: string, value: PlaygroundInput<InputSource>) => void
+  setInput: (param: string, value: PlaygroundInput<InputSource>) => void
+  commit: ICommitContextType['commit']
+  prompt?: string
+  setPrompt?: (prompt: string) => void
   disabled?: boolean
 }) {
   return (
@@ -27,36 +46,36 @@ export function InputParams({
         {Object.keys(inputs).length > 0 ? (
           <div className='grid grid-cols-[auto_1fr] gap-y-3'>
             {Object.entries(inputs).map(([param, input], idx) => {
-              const value = input.value
-              const metadata = input.metadata
-              const includedInPrompt =
-                metadata.includeInPrompt === undefined
-                  ? true
-                  : metadata.includeInPrompt
+              const includedInPrompt = input.metadata.includeInPrompt ?? true
               return (
                 <div
                   className='grid col-span-2 grid-cols-subgrid gap-3 w-full items-start'
                   key={idx}
                 >
-                  <div className='flex flex-row items-center gap-x-1 min-h-8'>
+                  <div className='flex flex-row items-center gap-x-2 min-h-8'>
+                    <ParameterTypeSelector
+                      parameter={param}
+                      inputs={inputs}
+                      setInput={setInput}
+                      prompt={prompt}
+                      setPrompt={setPrompt}
+                      disabled={commit.mergedAt !== null || disabled}
+                    />
                     <Badge variant={includedInPrompt ? 'accent' : 'muted'}>
                       &#123;&#123;{param}&#125;&#125;
                     </Badge>
-                    {!includedInPrompt ? (
+                    {!includedInPrompt && (
                       <Tooltip trigger={<Icon name='info' />}>
                         This variable is not included in the current prompt
                       </Tooltip>
-                    ) : null}
+                    )}
                   </div>
-                  <div className='flex flex-grow w-full'>
-                    <TextArea
-                      value={value ?? ''}
-                      minRows={1}
-                      maxRows={6}
+                  <div className='flex flex-grow w-full min-w-0'>
+                    <ParameterInput
+                      parameter={param}
+                      input={input}
+                      setInput={setInput}
                       disabled={disabled}
-                      onChange={(e) => {
-                        setInput?.(param, { ...input, value: e.target.value })
-                      }}
                     />
                   </div>
                 </div>
@@ -65,10 +84,246 @@ export function InputParams({
           </div>
         ) : (
           <Text.H6 color='foregroundMuted'>
-            No inputs. Use &#123;&#123; input_name &#125;&#125; to insert.
+            No inputs. Use &#123;&#123;input_name&#125;&#125; to insert.
           </Text.H6>
         )}
       </div>
     </ClientOnly>
   )
 }
+
+const ParameterTypeDetails = {
+  [ParameterType.Text]: {
+    label: 'Text',
+    icon: <Icon name='letterText' />,
+  },
+  [ParameterType.Document]: {
+    label: 'Document',
+    icon: <Icon name='paperclip' />,
+  },
+  [ParameterType.Image]: {
+    label: 'Image',
+    icon: <Icon name='image' />,
+  },
+}
+
+// TODO: Because document edition is debounced, when the type
+// changes it delays the render and the experience is very odd
+export function ParameterTypeSelector({
+  parameter,
+  inputs,
+  setInput,
+  prompt,
+  setPrompt,
+  disabled = false,
+}: {
+  parameter: string
+  inputs: Inputs<InputSource>
+  setInput: (param: string, value: PlaygroundInput<InputSource>) => void
+  prompt?: string
+  setPrompt?: (prompt: string) => void
+  disabled?: boolean
+}) {
+  const input = inputs[parameter]!
+  const parameters = useMemo(
+    () =>
+      Object.entries(inputs).reduce(
+        (acc, [param, input]) => {
+          if (input.metadata.type) acc[param] = { type: input.metadata.type }
+          return acc
+        },
+        {} as Record<string, { type: ParameterType }>,
+      ),
+    [inputs],
+  )
+  const selectedType = useMemo(
+    () => input.metadata.type || ParameterType.Text,
+    [parameter, inputs],
+  )
+
+  return (
+    <Select
+      name='type'
+      value={selectedType}
+      onChange={(value) => {
+        setInput(parameter, {
+          ...input,
+          value: '',
+          metadata: {
+            ...input.metadata,
+            filename: undefined,
+          },
+        })
+
+        if (prompt && setPrompt) {
+          parameters[parameter] = { type: value as ParameterType }
+          setPrompt(
+            updatePromptMetadata(prompt, {
+              parameters: parameters,
+            }),
+          )
+        }
+      }}
+      options={Object.values(ParameterType).map((type) => ({
+        value: type,
+        label: ParameterTypeDetails[type].label,
+        icon: ParameterTypeDetails[type].icon,
+      }))}
+      disabled={disabled}
+      width='auto'
+      trigger={
+        <Tooltip
+          asChild
+          trigger={
+            <SelectTriggerPrimitive className='focus:outline-none flex items-center justify-center gap-x-0.5 text-muted-foreground hover:text-primary transition colors'>
+              {ParameterTypeDetails[selectedType].icon}
+              {!disabled && <Icon name='chevronsUpDown' size='small' />}
+            </SelectTriggerPrimitive>
+          }
+        >
+          {ParameterTypeDetails[selectedType].label} parameter
+        </Tooltip>
+      }
+    />
+  )
+}
+
+function ParameterInputSkeleton() {
+  return <Skeleton className='w-full h-8 rounded-md bg-muted animate-pulse' />
+}
+
+function ParameterInput({
+  parameter,
+  input,
+  setInput,
+  disabled = false,
+}: {
+  parameter: string
+  input: PlaygroundInput<InputSource>
+  setInput: (param: string, value: PlaygroundInput<InputSource>) => void
+  disabled?: boolean
+}) {
+  const { uploadFile, convertFile, isLoading } = useFiles()
+
+  const onTextChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setInput(parameter, { ...input, value: e.target.value })
+    },
+    [setInput],
+  )
+
+  const onDocumentChange = useCallback(
+    async (files: FileList | null) => {
+      const file = files?.[0]
+      if (file) {
+        const content = await convertFile({ file })
+        if (content) {
+          setInput(parameter, {
+            ...input,
+            value: content,
+            metadata: {
+              ...input.metadata,
+              filename: file.name,
+            },
+          })
+          return
+        }
+      }
+
+      setInput(parameter, {
+        ...input,
+        value: '',
+        metadata: {
+          ...input.metadata,
+          filename: undefined,
+        },
+      })
+    },
+    [convertFile, setInput],
+  )
+
+  const onImageChange = useCallback(
+    async (files: FileList | null) => {
+      const file = files?.[0]
+      if (file) {
+        const url = await uploadFile({ file })
+        if (url) {
+          setInput(parameter, {
+            ...input,
+            value: url,
+            metadata: {
+              ...input.metadata,
+              filename: file.name,
+            },
+          })
+          return
+        }
+      }
+
+      setInput(parameter, {
+        ...input,
+        value: '',
+        metadata: {
+          ...input.metadata,
+          filename: undefined,
+        },
+      })
+    },
+    [uploadFile, setInput],
+  )
+
+  switch (input.metadata.type || ParameterType.Text) {
+    case ParameterType.Text:
+      return (
+        <TextArea
+          value={input.value ?? ''}
+          onChange={onTextChange}
+          minRows={1}
+          maxRows={6}
+          disabled={disabled}
+        />
+      )
+
+    case ParameterType.Document:
+      return isLoading ? (
+        <ParameterInputSkeleton />
+      ) : (
+        <DropzoneInput
+          icon='fileUp'
+          inputSize='small'
+          placeholder='Upload document'
+          defaultFilename={input.metadata.filename}
+          onChange={onDocumentChange}
+          accept={undefined}
+          multiple={false}
+          disabled={disabled}
+        />
+      )
+
+    case ParameterType.Image:
+      return isLoading ? (
+        <ParameterInputSkeleton />
+      ) : (
+        <DropzoneInput
+          icon='imageUp'
+          inputSize='small'
+          placeholder='Upload image'
+          defaultFilename={input.metadata.filename}
+          onChange={onImageChange}
+          accept={SUPPORTED_IMAGE_TYPES.join(',')}
+          multiple={false}
+          disabled={disabled}
+        />
+      )
+
+    default:
+      return (
+        <TextArea
+          value={'Parameter type not supported'}
+          minRows={1}
+          maxRows={1}
+          disabled={true}
+        />
+      )
+  }
+}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/ManualParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/ManualParams/index.tsx
index c855da4b8..9be49d8fe 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/ManualParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/ManualParams/index.tsx
@@ -3,12 +3,20 @@ import { useDocumentParameters } from '$/hooks/useDocumentParameters'
 import { Props } from '../index'
 import { InputParams } from '../Input'
 
-export function ManualParams({ document, commitVersionUuid }: Props) {
+export function ManualParams({ document, commit, prompt, setPrompt }: Props) {
   const {
     manual: { inputs, setInput },
   } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
-  return <InputParams inputs={inputs} setInput={setInput} />
+  return (
+    <InputParams
+      inputs={inputs}
+      setInput={setInput}
+      commit={commit}
+      prompt={prompt}
+      setPrompt={setPrompt}
+    />
+  )
 }
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx
index 51bb1b09f..9fecf2272 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx
@@ -1,16 +1,17 @@
+import {
+  INPUT_SOURCE,
+  InputSource,
+  useDocumentParameters,
+} from '$/hooks/useDocumentParameters'
 import { DocumentVersion } from '@latitude-data/core/browser'
 import {
   ClientOnly,
   CollapsibleBox,
   OnExpandFn,
   TabSelector,
+  type ICommitContextType,
   type TabSelectorOption,
 } from '@latitude-data/web-ui'
-import {
-  INPUT_SOURCE,
-  InputSource,
-  useDocumentParameters,
-} from '$/hooks/useDocumentParameters'
 
 import { DatasetParams } from './DatasetParams'
 import {
@@ -33,7 +34,9 @@ const TABS: TabSelectorOption<InputSource>[] = [
 
 export type Props = {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
+  prompt: string
+  setPrompt: (prompt: string) => void
   onExpand?: OnExpandFn
 }
 type ContentProps = Props & {
@@ -43,13 +46,15 @@ type ContentProps = Props & {
 
 function ParamsTabs({
   document,
-  commitVersionUuid,
+  commit,
+  prompt,
+  setPrompt,
   datasetInfo,
   historyInfo,
 }: ContentProps) {
   const { source, setSource } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
 
   return (
@@ -63,21 +68,19 @@ function ParamsTabs({
       {source === INPUT_SOURCE.manual && (
         <ManualParams
           document={document}
-          commitVersionUuid={commitVersionUuid}
+          commit={commit}
+          prompt={prompt}
+          setPrompt={setPrompt}
         />
       )}
       {source === INPUT_SOURCE.dataset && (
-        <DatasetParams
-          data={datasetInfo}
-          document={document}
-          commitVersionUuid={commitVersionUuid}
-        />
+        <DatasetParams data={datasetInfo} document={document} commit={commit} />
       )}
       {source === INPUT_SOURCE.history && (
         <HistoryLogParams
           data={historyInfo}
           document={document}
-          commitVersionUuid={commitVersionUuid}
+          commit={commit}
         />
       )}
     </div>
@@ -86,14 +89,14 @@ function ParamsTabs({
 
 function CollapsedContentHeader({
   document,
-  commitVersionUuid,
+  commit,
   datasetInfo,
   historyInfo,
 }: ContentProps) {
   const src = INPUT_SOURCE
   const { source } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
 
   if (source === src.manual) return null
@@ -132,11 +135,11 @@ function CollapsedContentHeader({
 export function DocumentParams({ onExpand, ...props }: Props) {
   const datasetInfo = useSelectDataset({
     document: props.document,
-    commitVersionUuid: props.commitVersionUuid,
+    commitVersionUuid: props.commit.uuid,
   })
   const historyInfo = useLogHistoryParams({
     document: props.document,
-    commitVersionUuid: props.commitVersionUuid,
+    commitVersionUuid: props.commit.uuid,
   })
 
   const contentProps = {
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Preview.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Preview.tsx
index 06f7dfa44..2623cc2ce 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Preview.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Preview.tsx
@@ -169,7 +169,7 @@ export default function Preview({
               key={index}
               role={message.role}
               content={message.content}
-              parameters={parameters}
+              parameters={Object.keys(parameters)}
               collapseParameters={!expandParameters}
             />
           ))}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
index 965f93563..775d68ef6 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/index.tsx
@@ -21,9 +21,13 @@ const GAP_PADDING = 16
 
 export default function Playground({
   document,
+  prompt,
+  setPrompt,
   metadata,
 }: {
   document: DocumentVersion
+  prompt: string
+  setPrompt: (prompt: string) => void
   metadata: ConversationMetadata
 }) {
   const [mode, setMode] = useState<'preview' | 'chat'>('preview')
@@ -50,8 +54,10 @@ export default function Playground({
       dragDisabled={!expanded}
       firstPane={
         <DocumentParams
-          commitVersionUuid={commit.uuid}
+          commit={commit}
           document={document}
+          prompt={prompt}
+          setPrompt={setPrompt}
           onExpand={(expand) => {
             setForcedSize(expand ? undefined : COLLAPSED_SIZE)
             setExpanded(expand)
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
index 0eae6ac57..fcca4f0a2 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, {
+import {
   createContext,
   Suspense,
   useCallback,
@@ -9,6 +9,18 @@ import React, {
   useState,
 } from 'react'
 
+import { createDraftWithContentAction } from '$/actions/commits/createDraftWithContentAction'
+import { requestSuggestionAction } from '$/actions/copilot/requestSuggestion'
+import { publishEventAction } from '$/actions/events/publishEventAction'
+import { type AddMessagesActionFn } from '$/actions/sdk/addMessagesAction'
+import type { RunDocumentActionFn } from '$/actions/sdk/runDocumentAction'
+import EditorHeader from '$/components/EditorHeader'
+import { useDocumentParameters } from '$/hooks/useDocumentParameters'
+import useLatitudeAction from '$/hooks/useLatitudeAction'
+import { useMetadata } from '$/hooks/useMetadata'
+import { ROUTES } from '$/services/routes'
+import useDocumentVersions from '$/stores/documentVersions'
+import useProviderApiKeys from '$/stores/providerApiKeys'
 import {
   Commit,
   DocumentVersion,
@@ -26,18 +38,6 @@ import {
   useCurrentCommit,
   useCurrentProject,
 } from '@latitude-data/web-ui'
-import { createDraftWithContentAction } from '$/actions/commits/createDraftWithContentAction'
-import { requestSuggestionAction } from '$/actions/copilot/requestSuggestion'
-import { publishEventAction } from '$/actions/events/publishEventAction'
-import { type AddMessagesActionFn } from '$/actions/sdk/addMessagesAction'
-import type { RunDocumentActionFn } from '$/actions/sdk/runDocumentAction'
-import EditorHeader from '$/components/EditorHeader'
-import { useDocumentParameters } from '$/hooks/useDocumentParameters'
-import useLatitudeAction from '$/hooks/useLatitudeAction'
-import { useMetadata } from '$/hooks/useMetadata'
-import { ROUTES } from '$/services/routes'
-import useDocumentVersions from '$/stores/documentVersions'
-import useProviderApiKeys from '$/stores/providerApiKeys'
 import { useRouter } from 'next/navigation'
 import { DiffOptions } from 'node_modules/@latitude-data/web-ui/src/ds/molecules/DocumentTextEditor/types'
 import { useDebouncedCallback } from 'use-debounce'
@@ -351,7 +351,12 @@ export default function DocumentEditor({
           secondPane={
             <SplitPane.Pane>
               <div className='flex-1 relative max-h-full'>
-                <Playground document={document} metadata={metadata!} />
+                <Playground
+                  document={document}
+                  prompt={value}
+                  setPrompt={onChange}
+                  metadata={metadata!}
+                />
               </div>
             </SplitPane.Pane>
           }
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx
index 4a002f25a..0e022598e 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx
@@ -13,13 +13,7 @@ import {
   useLocalStorage,
 } from '@latitude-data/web-ui'
 
-const EVALUATION_PARAMETERS = SERIALIZED_DOCUMENT_LOG_FIELDS.reduce(
-  (acc, field) => {
-    acc[field] = true
-    return acc
-  },
-  {} as Record<string, boolean>,
-)
+const EVALUATION_PARAMETERS = SERIALIZED_DOCUMENT_LOG_FIELDS
 
 export function EvaluationResultMessages({
   providerLog,
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx
index 03b90de20..b5a34a65d 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Messages.tsx
@@ -83,7 +83,7 @@ export function DocumentLogMessages({
       </div>
       <MessageList
         messages={messages}
-        parameters={documentLog.parameters}
+        parameters={Object.keys(documentLog.parameters)}
         collapseParameters={!expandParameters}
       />
     </>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx
index cc0243e39..aa086a0be 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx
@@ -2,12 +2,17 @@ import { useMemo } from 'react'
 
 import { RunErrorMessage } from '$/app/(private)/projects/[projectId]/versions/[commitUuid]/_components/RunErrorMessage'
 import { formatCostInMillicents, formatDuration } from '$/app/_lib/formatUtils'
-import { Inputs } from '$/hooks/useDocumentParameters'
 import useProviderApiKeys from '$/stores/providerApiKeys'
 import { MessageRole, ToolCall } from '@latitude-data/compiler'
 import { ProviderLogDto } from '@latitude-data/core/browser'
 import { DocumentLogWithMetadataAndError } from '@latitude-data/core/repositories'
-import { ClickToCopy, Message, Text } from '@latitude-data/web-ui'
+import {
+  Badge,
+  ClickToCopy,
+  Message,
+  Text,
+  TextArea,
+} from '@latitude-data/web-ui'
 import { format } from 'date-fns'
 
 import {
@@ -15,7 +20,6 @@ import {
   MetadataItem,
   MetadataItemTooltip,
 } from '../../../../../[documentUuid]/_components/MetadataItem'
-import { InputParams } from '../../../../_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index'
 
 function ProviderLogsMetadata({
   providerLog,
@@ -163,23 +167,33 @@ function DocumentLogParameters({
 }: {
   documentLog: DocumentLogWithMetadataAndError
 }) {
-  const parameters = useMemo(() => {
-    return Object.entries(documentLog.parameters).reduce(
-      (acc, [key, value]) => {
-        acc[key] = {
-          value: String(value),
-          metadata: { includeInPrompt: true },
-        }
-        return acc
-      },
-      {} as Inputs<'manual'>,
-    )
-  }, [documentLog.uuid, documentLog.parameters])
-
   return (
     <>
       <Text.H5M color='foreground'>Parameters</Text.H5M>
-      <InputParams inputs={parameters} disabled />
+      <div className='grid grid-cols-[auto_1fr] gap-y-3'>
+        {Object.entries(documentLog.parameters).map(
+          ([parameter, value], index) => (
+            <div
+              key={index}
+              className='grid col-span-2 grid-cols-subgrid gap-3 w-full items-start'
+            >
+              <div className='flex flex-row items-center gap-x-2 min-h-8'>
+                <Badge variant='accent'>
+                  &#123;&#123;{parameter}&#125;&#125;
+                </Badge>
+              </div>
+              <div className='flex flex-grow w-full min-w-0'>
+                <TextArea
+                  value={String(value || '')}
+                  minRows={1}
+                  maxRows={6}
+                  disabled={true}
+                />
+              </div>
+            </div>
+          ),
+        )}
+      </div>
     </>
   )
 }
diff --git a/apps/web/src/components/EditorHeader/index.test.ts b/apps/web/src/components/EditorHeader/index.test.ts
deleted file mode 100644
index 4c589f2ff..000000000
--- a/apps/web/src/components/EditorHeader/index.test.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { updatePromptMetadata } from './index'
-
-describe('updatePromptMetadata', () => {
-  it('should add frontmatter to a prompt without one', () => {
-    const prompt = 'Hello world'
-    const result = updatePromptMetadata(prompt, {
-      provider: 'test',
-      model: 'gpt-4',
-    })
-    expect(result).toContain('provider: test')
-    expect(result).toContain('model: gpt-4')
-    expect(result).toContain('Hello world')
-  })
-
-  it('should update existing frontmatter', () => {
-    const prompt = `---
-provider: old
-temperature: 0.2
----
-Hello world`
-    const result = updatePromptMetadata(prompt, {
-      provider: 'new',
-      model: 'gpt-4',
-    })
-    expect(result).toContain('provider: new')
-    expect(result).toContain('model: gpt-4')
-    expect(result).toContain('temperature: 0.2')
-    expect(result).toContain('Hello world')
-    expect(result).not.toContain('provider: old')
-  })
-
-  it('should handle invalid frontmatter', () => {
-    const prompt = `---
-invalid: yaml:
-:
----
-Hello world`
-    const result = updatePromptMetadata(prompt, {
-      provider: 'test',
-      model: 'gpt-4',
-    })
-    expect(result).toContain('provider: test')
-    expect(result).toContain('model: gpt-4')
-    expect(result).toContain('Hello world')
-  })
-
-  it('should handle empty frontmatter', () => {
-    const prompt = `---
----
-Hello world`
-    const result = updatePromptMetadata(prompt, {
-      provider: 'test',
-      model: 'gpt-4',
-    })
-    expect(result).toContain('provider: test')
-    expect(result).toContain('model: gpt-4')
-    expect(result).toContain('Hello world')
-  })
-
-  it('should handle mdx with leading comments', () => {
-    const prompt = `/*
-  Returns a code suggestion, given a prompt and a request.
-*/
----
-provider: old
-temperature: 0.2
----`
-    const result = updatePromptMetadata(prompt, {
-      provider: 'test',
-      model: 'gpt-4',
-    })
-    expect(result).toContain('provider: test')
-    expect(result).toContain('model: gpt-4')
-    expect(result).not.toContain('provider: old')
-  })
-})
diff --git a/apps/web/src/components/EditorHeader/index.tsx b/apps/web/src/components/EditorHeader/index.tsx
index ccb4bd09f..56bc56a4f 100644
--- a/apps/web/src/components/EditorHeader/index.tsx
+++ b/apps/web/src/components/EditorHeader/index.tsx
@@ -1,5 +1,10 @@
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 
+import { envClient } from '$/envClient'
+import useModelOptions from '$/hooks/useModelOptions'
+import { updatePromptMetadata } from '$/lib/promptMetadata'
+import { ROUTES } from '$/services/routes'
+import useProviderApiKeys from '$/stores/providerApiKeys'
 import {
   findFirstModelForProvider,
   ProviderApiKey,
@@ -15,64 +20,11 @@ import {
   Tooltip,
   useLocalStorage,
 } from '@latitude-data/web-ui'
-import { envClient } from '$/envClient'
-import useModelOptions from '$/hooks/useModelOptions'
-import { ROUTES } from '$/services/routes'
-import useProviderApiKeys from '$/stores/providerApiKeys'
 import Link from 'next/link'
-import { parse, stringify } from 'yaml'
 
 type PromptMetadata = { provider?: string; model?: string }
 export type IProviderByName = Record<string, ProviderApiKey>
 
-function extractFrontMatter(content: string) {
-  const match = content.match(/(?:\/\*[\s\S]*?\*\/\s*)?---\n([\s\S]*?)\n---/)
-  return match ? match[1] : null
-}
-
-export function updatePromptMetadata(
-  prompt: string,
-  updates: Record<string, any>,
-) {
-  // Check if the prompt has frontmatter
-  if (!prompt.match(/(?:\/\*[\s\S]*?\*\/\s*)?---/)) {
-    // If no frontmatter exists, create one with the updates
-    const newFrontMatter = stringify(updates)
-    return `---\n${newFrontMatter}---\n\n${prompt}`
-  }
-
-  try {
-    const frontMatter = extractFrontMatter(prompt)
-    if (!frontMatter) {
-      // Invalid frontmatter format, create new one
-      const newFrontMatter = stringify(updates)
-      return `---\n${newFrontMatter}---\n\n${prompt.replace(/(?:\/\*[\s\S]*?\*\/\s*)?---\n[\s\S]*?\n---\n/, '')}`
-    }
-
-    // Parse existing frontmatter
-    const parsed = parse(frontMatter) || {}
-
-    // Merge updates with existing frontmatter
-    const updated = {
-      ...parsed,
-      ...updates,
-    }
-
-    // Stringify the updated frontmatter
-    const newFrontMatter = stringify(updated)
-
-    // Replace old frontmatter with new one, preserving any leading comments
-    return prompt.replace(
-      /((?:\/\*[\s\S]*?\*\/\s*)?---\n)[\s\S]*?\n---/,
-      `$1${newFrontMatter}---`,
-    )
-  } catch (error) {
-    // If parsing fails, create new frontmatter
-    const newFrontMatter = stringify(updates)
-    return `---\n${newFrontMatter}---\n\n${prompt.replace(/(?:\/\*[\s\S]*?\*\/\s*)?---\n[\s\S]*?\n---\n/, '')}`
-  }
-}
-
 export default function EditorHeader({
   title,
   metadata,
diff --git a/apps/web/src/hooks/useDocumentParameters/index.ts b/apps/web/src/hooks/useDocumentParameters/index.ts
index 0d2a9f42a..de9e72c44 100644
--- a/apps/web/src/hooks/useDocumentParameters/index.ts
+++ b/apps/web/src/hooks/useDocumentParameters/index.ts
@@ -1,8 +1,9 @@
 import { useCallback, useMemo } from 'react'
 
-import { DocumentLog } from '@latitude-data/core/browser'
-import { AppLocalStorage, useLocalStorage } from '@latitude-data/web-ui'
 import { recalculateInputs } from '$/hooks/useDocumentParameters/recalculateInputs'
+import { DocumentLog, ParameterType } from '@latitude-data/core/browser'
+import type { ConversationMetadata } from '@latitude-data/promptl'
+import { AppLocalStorage, useLocalStorage } from '@latitude-data/web-ui'
 
 export const INPUT_SOURCE = {
   manual: 'manual',
@@ -11,14 +12,19 @@ export const INPUT_SOURCE = {
 } as const
 
 export type InputSource = (typeof INPUT_SOURCE)[keyof typeof INPUT_SOURCE]
+type PlaygroundInputMetadata = {
+  type?: ParameterType
+  filename?: string
+  includeInPrompt?: boolean
+}
 export type PlaygroundInput<S extends InputSource> = S extends 'dataset'
   ? {
       value: string
-      metadata: { includeInPrompt: boolean }
+      metadata: PlaygroundInputMetadata & { includeInPrompt: boolean }
     }
   : {
       value: string
-      metadata: { includeInPrompt?: boolean }
+      metadata: PlaygroundInputMetadata
     }
 
 type ManualInput = PlaygroundInput<'manual'>
@@ -113,6 +119,7 @@ export function useDocumentParameters({
   documentVersionUuid: string
   commitVersionUuid: string
 }) {
+  // TODO: Delete stale inputs as new inputs could eventually not fit
   const { value: allInputs, setValue } = useLocalStorage<InputsByDocument>({
     key: AppLocalStorage.playgroundParameters,
     defaultValue: {},
@@ -152,6 +159,7 @@ export function useDocumentParameters({
       setInputs(INPUT_SOURCE.dataset, newInputs),
     [setInputs],
   )
+
   const setHistoryInputs = useCallback(
     (newInputs: Inputs<'history'>) =>
       setInputs(INPUT_SOURCE.history, newInputs),
@@ -287,23 +295,26 @@ export function useDocumentParameters({
   )
 
   const onMetadataProcessed = useCallback(
-    (metadataParameters: Set<string>) => {
+    (metadata: ConversationMetadata) => {
       setInputs(
         'manual',
-        recalculateInputs({ inputs: inputs.manual.inputs, metadataParameters }),
+        recalculateInputs({
+          inputs: inputs.manual.inputs,
+          metadata,
+        }),
       )
       setInputs(
         'dataset',
         recalculateInputs({
           inputs: inputs.dataset.inputs,
-          metadataParameters,
+          metadata,
         }),
       )
       setInputs(
         'history',
         recalculateInputs({
           inputs: inputs.history.inputs,
-          metadataParameters,
+          metadata,
         }),
       )
     },
diff --git a/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.test.ts b/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.test.ts
index f4f654052..f397dfba3 100644
--- a/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.test.ts
+++ b/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.test.ts
@@ -1,3 +1,5 @@
+import { ParameterType } from '@latitude-data/core/browser'
+import type { ConversationMetadata } from '@latitude-data/promptl'
 import { describe, expect, it } from 'vitest'
 
 import { recalculateInputs } from './index'
@@ -6,10 +8,25 @@ describe('recalculateInputs', () => {
   it('delete inputs not present in parameters', () => {
     const newInputs = recalculateInputs({
       inputs: {
-        param1: { value: 'value1', metadata: { includeInPrompt: true } },
+        param1: {
+          value: 'value1',
+          metadata: { includeInPrompt: true, type: ParameterType.Document },
+        },
         param2: { value: 'value2', metadata: { includeInPrompt: true } },
       },
-      metadataParameters: new Set(['param1']),
+      metadata: {
+        parameters: new Set(['param1']),
+        config: {
+          parameters: {
+            param1: {
+              type: ParameterType.Text,
+            },
+            param2: {
+              type: ParameterType.Document,
+            },
+          },
+        },
+      } as unknown as ConversationMetadata,
     })
 
     expect(newInputs).toEqual({
@@ -17,6 +34,7 @@ describe('recalculateInputs', () => {
         value: 'value1',
         metadata: {
           includeInPrompt: true,
+          type: ParameterType.Text,
         },
       },
     })
@@ -27,7 +45,16 @@ describe('recalculateInputs', () => {
       inputs: {
         param1: { value: 'value1', metadata: { includeInPrompt: true } },
       },
-      metadataParameters: new Set(['param1', 'param2']),
+      metadata: {
+        parameters: new Set(['param1', 'param2']),
+        config: {
+          parameters: {
+            param2: {
+              type: ParameterType.Document,
+            },
+          },
+        },
+      } as unknown as ConversationMetadata,
     })
 
     expect(newInputs).toEqual({
@@ -37,16 +64,28 @@ describe('recalculateInputs', () => {
           includeInPrompt: true,
         },
       },
-      param2: { value: '', metadata: { includeInPrompt: true } },
+      param2: {
+        value: '',
+        metadata: { includeInPrompt: true, type: ParameterType.Document },
+      },
     })
   })
 
   it('respect metadata', () => {
     const newInputs = recalculateInputs({
       inputs: {
-        param1: { value: 'value1', metadata: { includeInPrompt: false } },
+        param1: {
+          value: 'value1',
+          metadata: {
+            includeInPrompt: false,
+            type: ParameterType.Image,
+          },
+        },
       },
-      metadataParameters: new Set(['param1']),
+      metadata: {
+        parameters: new Set(['param1']),
+        config: {},
+      } as unknown as ConversationMetadata,
     })
 
     expect(newInputs).toEqual({
@@ -59,13 +98,151 @@ describe('recalculateInputs', () => {
     })
   })
 
-  it('replace existing parameter if only one changed and keep value', () => {
+  it('replace existing parameter if only one changed and keeps value', () => {
     const newInputs = recalculateInputs({
       inputs: {
         param1: { value: 'value1', metadata: { includeInPrompt: true } },
-        param2: { value: 'value2', metadata: { includeInPrompt: true } },
+        param2: {
+          value: 'value2',
+          metadata: { includeInPrompt: true, type: ParameterType.Document },
+        },
+      },
+      metadata: {
+        parameters: new Set(['param1', 'param3']),
+        config: {
+          parameters: {
+            param3: {
+              type: ParameterType.Image,
+            },
+          },
+        },
+      } as unknown as ConversationMetadata,
+    })
+
+    expect(newInputs).toEqual({
+      param1: {
+        value: 'value1',
+        metadata: {
+          includeInPrompt: true,
+        },
       },
-      metadataParameters: new Set(['param1', 'param3']),
+      param3: {
+        value: 'value2',
+        metadata: { includeInPrompt: true, type: ParameterType.Image },
+      },
+    })
+  })
+
+  it('adds parameter metadata', () => {
+    const newInputs = recalculateInputs({
+      inputs: {
+        param1: {
+          value: 'value1',
+          metadata: {},
+        },
+      },
+      metadata: {
+        parameters: new Set(['param1']),
+        config: {
+          parameters: {
+            param1: {
+              type: ParameterType.Text,
+            },
+          },
+        },
+      } as unknown as ConversationMetadata,
+    })
+
+    expect(newInputs).toEqual({
+      param1: {
+        value: 'value1',
+        metadata: {
+          includeInPrompt: true,
+          type: ParameterType.Text,
+        },
+      },
+    })
+  })
+
+  it('replaces parameter metadata', () => {
+    const newInputs = recalculateInputs({
+      inputs: {
+        param1: {
+          value: 'value1',
+          metadata: {
+            type: ParameterType.Text,
+          },
+        },
+      },
+      metadata: {
+        parameters: new Set(['param1']),
+        config: {
+          parameters: {
+            param1: {
+              type: ParameterType.Image,
+            },
+          },
+        },
+      } as unknown as ConversationMetadata,
+    })
+
+    expect(newInputs).toEqual({
+      param1: {
+        value: 'value1',
+        metadata: {
+          includeInPrompt: true,
+          type: ParameterType.Image,
+        },
+      },
+    })
+  })
+
+  it('removes parameter metadata', () => {
+    const newInputs = recalculateInputs({
+      inputs: {
+        param1: {
+          value: 'value1',
+          metadata: {
+            type: ParameterType.Text,
+          },
+        },
+      },
+      metadata: {
+        parameters: new Set(['param1']),
+        config: {},
+      } as unknown as ConversationMetadata,
+    })
+
+    expect(newInputs).toEqual({
+      param1: {
+        value: 'value1',
+        metadata: {
+          includeInPrompt: true,
+        },
+      },
+    })
+  })
+
+  it('ignores unknown parameter type', () => {
+    const newInputs = recalculateInputs({
+      inputs: {
+        param1: {
+          value: 'value1',
+          metadata: {
+            type: ParameterType.Document,
+          },
+        },
+      },
+      metadata: {
+        parameters: new Set(['param1']),
+        config: {
+          parameters: {
+            param1: {
+              type: 'unknown',
+            },
+          },
+        },
+      } as unknown as ConversationMetadata,
     })
 
     expect(newInputs).toEqual({
@@ -75,7 +252,6 @@ describe('recalculateInputs', () => {
           includeInPrompt: true,
         },
       },
-      param3: { value: 'value2', metadata: { includeInPrompt: true } },
     })
   })
 })
diff --git a/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.ts b/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.ts
index 92d052a5b..2a14c93ef 100644
--- a/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.ts
+++ b/apps/web/src/hooks/useDocumentParameters/recalculateInputs/index.ts
@@ -1,32 +1,57 @@
 import { Inputs, InputSource } from '$/hooks/useDocumentParameters'
+import { ParameterType } from '@latitude-data/core/browser'
+import type { ConversationMetadata } from '@latitude-data/promptl'
+
+const ParameterTypes = Object.values(ParameterType) as string[]
 
 export function recalculateInputs<S extends InputSource>({
   inputs,
-  metadataParameters,
+  metadata: prompt,
 }: {
   inputs: Inputs<S>
-  metadataParameters: Set<string>
+  metadata: ConversationMetadata
 }): Inputs<S> {
-  return Object.fromEntries(
-    Array.from(metadataParameters).map((param) => {
-      if (param in inputs) {
-        const value = inputs[param]?.value ?? ''
-        const includeInPrompt = inputs[param]?.metadata.includeInPrompt ?? true
-        return [param, { value, metadata: { includeInPrompt } }]
-      }
+  const config = (prompt.config.parameters || {}) as Record<
+    string,
+    { type?: string }
+  >
 
-      const availableInputKey = Object.keys(inputs).find(
-        (key) => !metadataParameters.has(key),
-      )
+  const firstChangedInput = Object.entries(inputs).find(
+    ([key]) => !prompt.parameters.has(key),
+  )?.[1]
+
+  return Object.fromEntries(
+    Array.from(prompt.parameters).map((param) => {
+      const input = inputs[param] || firstChangedInput
+      let type = config[param]?.type
+      if (type && !ParameterTypes.includes(type)) type = undefined
 
-      if (availableInputKey) {
-        const input = inputs[availableInputKey]
-        const value = input?.value ?? ''
-        const includeInPrompt = input?.metadata.includeInPrompt ?? true
-        return [param, { value, metadata: { includeInPrompt } }]
+      if (input) {
+        return [
+          param,
+          {
+            ...input,
+            metadata: {
+              ...input.metadata,
+              includeInPrompt: input.metadata.includeInPrompt ?? true,
+              ...config[param],
+              type: type,
+            },
+          },
+        ]
       }
 
-      return [param, { value: '', metadata: { includeInPrompt: true } }]
+      return [
+        param,
+        {
+          value: '',
+          metadata: {
+            includeInPrompt: true,
+            ...config[param],
+            type: type,
+          },
+        },
+      ]
     }),
   )
 }
diff --git a/apps/web/src/hooks/useMetadata.ts b/apps/web/src/hooks/useMetadata.ts
index aef9d5ba2..8c631739a 100644
--- a/apps/web/src/hooks/useMetadata.ts
+++ b/apps/web/src/hooks/useMetadata.ts
@@ -10,7 +10,7 @@ import type { ReadMetadataWorkerProps } from '../workers/readMetadata'
 export function useMetadata({
   onMetadataProcessed,
 }: {
-  onMetadataProcessed?: (metadata: Set<string>) => void
+  onMetadataProcessed?: (metadata: ConversationMetadata) => void
 } = {}) {
   const [metadata, setMetadata] = useState<ConversationMetadata>()
   const workerRef = useRef<Worker | null>(null)
@@ -27,7 +27,7 @@ export function useMetadata({
 
       worker.onmessage = (event: { data: ConversationMetadata }) => {
         setMetadata(event.data)
-        onMetadataProcessed?.(event.data.parameters)
+        onMetadataProcessed?.(event.data)
       }
     }
 
diff --git a/apps/web/src/lib/promptMetadata.test.ts b/apps/web/src/lib/promptMetadata.test.ts
new file mode 100644
index 000000000..102fd4ba1
--- /dev/null
+++ b/apps/web/src/lib/promptMetadata.test.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it } from 'vitest'
+
+import { updatePromptMetadata } from './promptMetadata'
+
+describe('updatePromptMetadata', () => {
+  it('should add frontmatter to a prompt without one', () => {
+    const prompt = 'Hello world'
+
+    const result = updatePromptMetadata(prompt, {
+      provider: 'test',
+      model: 'gpt-4',
+    })
+
+    expect(result).toEqual(
+      `
+---
+provider: test
+model: gpt-4
+---
+
+Hello world
+      `.trim(),
+    )
+  })
+
+  it('should update existing frontmatter', () => {
+    const prompt = `
+---
+provider: old
+temperature: 0.2
+---
+
+Hello world
+`.trim()
+
+    const result = updatePromptMetadata(prompt, {
+      provider: 'new',
+      model: 'gpt-4',
+    })
+
+    expect(result).toEqual(
+      `
+---
+provider: new
+temperature: 0.2
+model: gpt-4
+---
+
+Hello world
+      `.trim(),
+    )
+  })
+
+  it('should replace invalid frontmatter', () => {
+    const prompt = `
+---
+invalid: yaml:
+:
+---
+Hello world
+`.trim()
+
+    const result = updatePromptMetadata(prompt, {
+      provider: 'test',
+      model: 'gpt-4',
+    })
+
+    expect(result).toEqual(
+      `
+---
+provider: test
+model: gpt-4
+---
+
+Hello world
+      `.trim(),
+    )
+  })
+
+  it('should handle empty frontmatter', () => {
+    const prompt = `
+---
+ 
+---
+
+Hello world
+`.trim()
+
+    const result = updatePromptMetadata(prompt, {
+      provider: 'test',
+      model: 'gpt-4',
+    })
+
+    expect(result).toEqual(
+      `
+---
+provider: test
+model: gpt-4
+---
+
+Hello world
+      `.trim(),
+    )
+  })
+
+  it('should handle frontmatter with leading comments', () => {
+    const prompt = `
+/*
+  Returns a code suggestion, given a prompt and a request.
+*/
+---
+provider: old
+temperature: 0.2
+---
+
+Hello world
+`.trim()
+
+    const result = updatePromptMetadata(prompt, {
+      provider: 'test',
+      model: 'gpt-4',
+    })
+
+    expect(result).toEqual(
+      `
+/*
+  Returns a code suggestion, given a prompt and a request.
+*/
+---
+provider: test
+temperature: 0.2
+model: gpt-4
+---
+
+Hello world
+      `.trim(),
+    )
+  })
+})
diff --git a/apps/web/src/lib/promptMetadata.ts b/apps/web/src/lib/promptMetadata.ts
new file mode 100644
index 000000000..abae21342
--- /dev/null
+++ b/apps/web/src/lib/promptMetadata.ts
@@ -0,0 +1,49 @@
+import { parse, stringify } from 'yaml'
+
+function extractFrontMatter(content: string) {
+  const match = content.match(/(?:\/\*[\s\S]*?\*\/\s*)?---\n([\s\S]*?)\n---/)
+  return match ? match[1] : null
+}
+
+export function updatePromptMetadata(
+  prompt: string,
+  updates: Record<string, any>,
+) {
+  // Check if the prompt has frontmatter
+  if (!prompt.match(/(?:\/\*[\s\S]*?\*\/\s*)?---/)) {
+    // If no frontmatter exists, create one with the updates
+    const newFrontMatter = stringify(updates)
+    return `---\n${newFrontMatter}---\n\n${prompt}`
+  }
+
+  try {
+    const frontMatter = extractFrontMatter(prompt)
+    if (!frontMatter) {
+      // Invalid frontmatter format, create new one
+      const newFrontMatter = stringify(updates)
+      return `---\n${newFrontMatter}---\n\n${prompt.replace(/(?:\/\*[\s\S]*?\*\/\s*)?---\n[\s\S]*?\n---\n/, '')}`
+    }
+
+    // Parse existing frontmatter
+    const parsed = parse(frontMatter) || {}
+
+    // Merge updates with existing frontmatter
+    const updated = {
+      ...parsed,
+      ...updates,
+    }
+
+    // Stringify the updated frontmatter
+    const newFrontMatter = stringify(updated)
+
+    // Replace old frontmatter with new one, preserving any leading comments
+    return prompt.replace(
+      /((?:\/\*[\s\S]*?\*\/\s*)?---\n)[\s\S]*?\n---/,
+      `$1${newFrontMatter}---`,
+    )
+  } catch (error) {
+    // If parsing fails, create new frontmatter
+    const newFrontMatter = stringify(updates)
+    return `---\n${newFrontMatter}---\n\n${prompt.replace(/(?:\/\*[\s\S]*?\*\/\s*)?---\n[\s\S]*?\n---\n/, '')}`
+  }
+}
diff --git a/apps/web/src/stores/files.ts b/apps/web/src/stores/files.ts
new file mode 100644
index 000000000..743d32dbb
--- /dev/null
+++ b/apps/web/src/stores/files.ts
@@ -0,0 +1,94 @@
+'use client'
+
+import { useCallback } from 'react'
+
+import useLatitudeAction from '$/hooks/useLatitudeAction'
+import { MAX_SIZE, MAX_UPLOAD_SIZE_IN_MB } from '@latitude-data/core/browser'
+import { useToast } from '@latitude-data/web-ui'
+
+import { convertFileAction } from '$/actions/files/convert'
+import { uploadFileAction } from '$/actions/files/upload'
+
+export default function useFiles() {
+  const { toast } = useToast()
+
+  const { execute: executeUploadFile, isPending: isUploadingFile } =
+    useLatitudeAction(uploadFileAction, {
+      onSuccess: async () => {
+        toast({
+          title: 'Hooray! 🎉',
+          description: `File uploaded successfully`,
+        })
+      },
+      onError: async (error) => {
+        toast({
+          title: 'Error uploading file',
+          description: error?.err?.message,
+          variant: 'destructive',
+        })
+      },
+    })
+
+  const { execute: executeConvertFile, isPending: isConvertingFile } =
+    useLatitudeAction(convertFileAction, {
+      onSuccess: async () => {
+        toast({
+          title: 'Hooray! 🎉',
+          description: `File converted successfully`,
+        })
+      },
+      onError: async (error) => {
+        toast({
+          title: 'Error converting file',
+          description: error?.err?.message,
+          variant: 'destructive',
+        })
+      },
+    })
+
+  const uploadFile = useCallback(
+    async ({ file }: { file: File }) => {
+      if (file.size > MAX_UPLOAD_SIZE_IN_MB) {
+        toast({
+          title: 'Error uploading file',
+          description: `Your file must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`,
+          variant: 'destructive',
+        })
+        return
+      }
+
+      const [url, error] = await executeUploadFile({ file })
+      if (error) return
+
+      return url
+    },
+    [executeUploadFile],
+  )
+
+  const convertFile = useCallback(
+    async ({ file }: { file: File }) => {
+      if (file.size > MAX_UPLOAD_SIZE_IN_MB) {
+        toast({
+          title: 'Error converting file',
+          description: `Your file must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`,
+          variant: 'destructive',
+        })
+        return
+      }
+
+      const [content, error] = await executeConvertFile({ file })
+      if (error) return
+
+      return content
+    },
+    [executeConvertFile],
+  )
+
+  return {
+    uploadFile,
+    convertFile,
+    isUploadingFile,
+    isConvertingFile,
+    isLoading: isUploadingFile || isConvertingFile,
+  }
+}
diff --git a/docs/assets/parameters_document.png b/docs/assets/parameters_document.png
new file mode 100644
index 000000000..6ea263387
Binary files /dev/null and b/docs/assets/parameters_document.png differ
diff --git a/docs/assets/parameters_image.png b/docs/assets/parameters_image.png
new file mode 100644
index 000000000..c735c7961
Binary files /dev/null and b/docs/assets/parameters_image.png differ
diff --git a/docs/assets/parameters_text.png b/docs/assets/parameters_text.png
new file mode 100644
index 000000000..bbf13baa9
Binary files /dev/null and b/docs/assets/parameters_text.png differ
diff --git a/docs/assets/parameters_types.png b/docs/assets/parameters_types.png
new file mode 100644
index 000000000..a1eb0e4ce
Binary files /dev/null and b/docs/assets/parameters_types.png differ
diff --git a/docs/guides/prompt-manager/configuration.mdx b/docs/guides/prompt-manager/configuration.mdx
index efa1e14e7..26bcb1779 100644
--- a/docs/guides/prompt-manager/configuration.mdx
+++ b/docs/guides/prompt-manager/configuration.mdx
@@ -41,6 +41,15 @@ The `model` key specifies the model to use for the prompt. The available models
 
 ### Additional Parameters
 
+#### **`parameters`**
+
+The `parameters` key optionally allows you to define advance options for the parameters in the playground and shared prompts.
+You can define the following options for each parameter:
+
+- **`type`** (required): `text`, `document`, `image`. If a parameter, or the whole parameters key, is not set, all types are `text` by default.
+
+[Learn more about prompt parameters](/guides/prompt-manager/playground#parameters)
+
 #### **`schema`**
 
 Define the JSON schema for the response of the prompt.
diff --git a/docs/guides/prompt-manager/playground.mdx b/docs/guides/prompt-manager/playground.mdx
index 2d5e9e866..2f4ff48c5 100644
--- a/docs/guides/prompt-manager/playground.mdx
+++ b/docs/guides/prompt-manager/playground.mdx
@@ -37,20 +37,64 @@ When parameters are present in your prompt, they will automatically appear in th
 
 ![Parameters](/assets/prompt_parameters.png)
 
-There are three ways to populate the parameters:
+### Parameter Types
 
-### Manual
+Parameters can have different types. On the playground, and in shared prompts, this will affect how they are populated and interpolated into the messages. You can either change the parameter types in the configuration section of the prompt, or in the playground.
+
+![Parameter Types](/assets/parameters_types.png)
+
+#### Text
+
+Text parameters allow you to freely input text content.
+
+![Text Parameter](/assets/parameters_text.png)
+
+#### Document
+
+Document parameters allow you to upload a document. The whole document will be passed to the LLM as text content. Currently, the following file types are supported:
+
+- `pdf`: PDF files.
+- `doc`: Microsoft Word files.
+- `docx`: Microsoft Word files.
+- `xls`: Microsoft Excel files.
+- `xlsx`: Microsoft Excel files.
+- `ppt`: Microsoft PowerPoint files.
+- `pptx`: Microsoft PowerPoint files.
+- `odt`: OpenDocument Text files.
+- `ods`: OpenDocument Spreadsheet files.
+- `odp`: OpenDocument Presentation files.
+- + any other file that contains raw text, such as markdown, CSV, JSON, source code...
+
+![Document Parameter](/assets/parameters_document.png)
+
+#### Image
+
+Image parameters allow you to upload an image. The image will be passed to the LLM as a URL. Currently, the following file types are supported:
+
+- `jpg`
+- `jpeg`
+- `png`
+- `gif`
+- `webp`
+
+![Image Parameter](/assets/parameters_image.png)
+
+### Populating Parameters
+
+There are three ways to populate the parameters.
+
+#### Manual
 
 Manually enter values for the parameters in the input fields.
 ![Manual Parameters](/assets/parameters_manual.png)
 
-### Dataset
+#### Dataset
 
 Load data from a dataset to populate the parameters, where each row in the dataset corresponds to a set of values for the parameters.
 ![Dataset Parameters](/assets/parameters_dataset.png)
 [Learn more about using datasets in Latitude](/guides/datasets/overview)
 
-### History
+#### History
 
 Load values from previous runs of the prompt to populate the parameters.
 ![History Parameters](/assets/parameters_history.png)
diff --git a/package.json b/package.json
index 66376fabd..2b8b74436 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@ai-sdk/mistral": "^0.0.38",
     "@ai-sdk/openai": "^0.0.54",
     "@aws-sdk/client-s3": "^3.645.0",
-    "@aws-sdk/s3-request-presigner": "^3.645.0",
+    "@aws-sdk/s3-request-presigner": "^3.679.0",
     "@monaco-editor/react": "^4.6.0",
     "@plunk/node": "^3.0.2",
     "@radix-ui/react-avatar": "^1.1.0",
@@ -73,7 +73,7 @@
     "jose": "^5.8.0",
     "lodash-es": "^4.17.21",
     "loops": "^3.3.0",
-    "lucide-react": "^0.403.0",
+    "lucide-react": "^0.468.0",
     "monaco-editor": "^0.50.0",
     "nanoid": "^5.0.7",
     "nodemailer": "^6.9.14",
diff --git a/packages/core/package.json b/packages/core/package.json
index 083c42b5b..1be76524d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -47,7 +47,7 @@
     "@ai-sdk/mistral": "^0.0.38",
     "@ai-sdk/openai": "^0.0.54",
     "@aws-sdk/client-s3": "^3.645.0",
-    "@aws-sdk/s3-request-presigner": "^3.645.0",
+    "@aws-sdk/s3-request-presigner": "^3.679.0",
     "@faker-js/faker": "^8.4.1",
     "@latitude-data/compiler": "workspace:^",
     "@latitude-data/constants": "workspace:*",
@@ -108,7 +108,7 @@
     "@ai-sdk/mistral": "^0.0.38",
     "@ai-sdk/openai": "^0.0.54",
     "@aws-sdk/client-s3": "^3.645.0",
-    "@aws-sdk/s3-request-presigner": "^3.645.0",
+    "@aws-sdk/s3-request-presigner": "^3.679.0",
     "@latitude-data/compiler": "workspace:^",
     "@latitude-data/env": "workspace:^",
     "@napi-rs/canvas": "^0.1.65",
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index 032c246b1..bcc2429df 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -469,3 +469,11 @@ export const RELATIVE_DATES = {
 } as const
 
 export type RelativeDate = keyof typeof RELATIVE_DATES
+
+export enum ParameterType {
+  Text = 'text',
+  Document = 'document',
+  Image = 'image',
+}
+
+export const SUPPORTED_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', '.gif', '.webp']
diff --git a/packages/core/src/helpers.ts b/packages/core/src/helpers.ts
index ebdd9d489..7cbaaf381 100644
--- a/packages/core/src/helpers.ts
+++ b/packages/core/src/helpers.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-import { CsvData, ProviderApiKey } from './browser'
+import { CsvData, ParameterType, ProviderApiKey } from './browser'
 
 const DEFAULT_OBJECT_TO_STRING_MESSAGE =
   'Error: Provider returned an object that could not be stringified'
@@ -36,6 +36,13 @@ export function promptConfigSchema({
       required_error: `You must select the model.\nFor example: 'model: 'gpt-4o'`,
     }),
     temperature: z.number().min(0).max(2).optional(),
+    parameters: z
+      .record(
+        z.object({
+          type: z.nativeEnum(ParameterType),
+        }),
+      )
+      .optional(),
   })
 }
 
diff --git a/packages/core/src/lib/disk.ts b/packages/core/src/lib/disk.ts
index e2fada5dd..9ccfd4437 100644
--- a/packages/core/src/lib/disk.ts
+++ b/packages/core/src/lib/disk.ts
@@ -4,12 +4,13 @@ import { env } from '@latitude-data/env'
 import { Disk, errors } from 'flydrive'
 import { FSDriver } from 'flydrive/drivers/fs'
 import { S3Driver } from 'flydrive/drivers/s3'
-import { WriteOptions } from 'flydrive/types'
+import { SignedURLOptions, WriteOptions } from 'flydrive/types'
 
 import { Result } from './Result'
 
-const generateUrl = (publicPath: string) => async (key: string) =>
-  `/${publicPath}/${key}`
+const generateUrl =
+  (baseUrl: string, publicPath: string) => async (key: string) =>
+    `${baseUrl}/${publicPath}/${key}`
 
 /**
  * These env variables are set in production.
@@ -17,6 +18,7 @@ const generateUrl = (publicPath: string) => async (key: string) =>
  * Create a .env.development file in packages/env/.env.development and add the following:
  *
  * S3_BUCKET=[your-bucket-name]
+ * PUBLIC_S3_BUCKET=[your-public-bucket-name]
  * AWS_REGION=[your-region]
  * AWS_ACCESS_KEY=[your-key]
  * AWS_ACCESS_SECRET=[your-secret]
@@ -24,16 +26,22 @@ const generateUrl = (publicPath: string) => async (key: string) =>
 function getAwsConfig() {
   const accessKeyId = env.AWS_ACCESS_KEY
   const bucket = env.S3_BUCKET
+  const publicBucket = env.PUBLIC_S3_BUCKET
   const region = env.AWS_REGION
   const secretAccessKey = env.AWS_ACCESS_SECRET
 
-  if (!accessKeyId || !secretAccessKey || !bucket || !region) {
+  if (!accessKeyId || !secretAccessKey || !bucket || !publicBucket || !region) {
     throw new Error(
-      'AWS credentials not configured. Check you setup AWS_ACCESS_KEY, AWS_ACCESS_SECRET, S3_BUCKET and AWS_REGION in your .env file.',
+      'AWS credentials not configured. Check you setup AWS_ACCESS_KEY, AWS_ACCESS_SECRET, (PUBLIC)_S3_BUCKET and AWS_REGION in your .env file.',
     )
   }
 
-  return { region, bucket, credentials: { accessKeyId, secretAccessKey } }
+  return {
+    region,
+    bucket,
+    publicBucket,
+    credentials: { accessKeyId, secretAccessKey },
+  }
 }
 
 async function getReadableStreamFromFile(file: File) {
@@ -49,20 +57,25 @@ async function getReadableStreamFromFile(file: File) {
 export class DiskWrapper {
   private disk: Disk
 
-  constructor() {
-    this.disk = new Disk(this.buildDisk())
+  // TODO: Receive an instance of Disk as a parameter,
+  // otherwise default to the local disk instance
+  constructor(visibility: 'private' | 'public' = 'private') {
+    this.disk = new Disk(this.buildDisk(visibility))
   }
 
   file(key: string) {
     return this.disk.file(key)
   }
 
-  async getUrl(key: string | undefined | null) {
-    if (!key) return null
-
+  async getUrl(key: string) {
     return this.disk.getUrl(key)
   }
 
+  async getSignedUrl(key: string, options?: SignedURLOptions) {
+    if (this.disk.driver instanceof FSDriver) return this.disk.getUrl(key)
+    return this.disk.getSignedUrl(key, options)
+  }
+
   async putFile(key: string, file: File) {
     const contents = await getReadableStreamFromFile(file)
     return this.putStream(key, contents)
@@ -101,27 +114,48 @@ export class DiskWrapper {
     }
   }
 
-  private buildDisk() {
+  private buildDisk(visibility: 'private' | 'public') {
     const key = env.DRIVE_DISK
+    const baseUrl = env.LATITUDE_URL
     const publicPath = env.FILE_PUBLIC_PATH
     const location = env.FILES_STORAGE_PATH
-
-    if (key === 'local' && !location) {
-      new Error(
-        'FILES_STORAGE_PATH env variable is required when using local disk.',
-      )
-    }
+    const publicLocation = env.PUBLIC_FILES_STORAGE_PATH
 
     if (key === 'local') {
+      if (!location && !publicLocation) {
+        throw new Error(
+          '(PUBLIC)_FILES_STORAGE_PATH env variable is required when using local disk.',
+        )
+      }
+
+      if (visibility === 'public') {
+        return new FSDriver({
+          location: publicLocation!,
+          visibility: 'public',
+          urlBuilder: { generateURL: generateUrl(baseUrl!, publicPath!) },
+        })
+      }
+
       return new FSDriver({
         location: location!,
         visibility: 'private',
-        urlBuilder: { generateURL: generateUrl(publicPath!) },
+        urlBuilder: { generateURL: generateUrl('', publicPath!) },
       })
     }
 
     const awsConfig = getAwsConfig()
 
+    if (visibility === 'public') {
+      return new S3Driver({
+        // @ts-ignore
+        credentials: awsConfig.credentials,
+        region: awsConfig.region,
+        bucket: awsConfig.publicBucket,
+        supportsACL: false,
+        visibility: 'private',
+      })
+    }
+
     return new S3Driver({
       // @ts-ignore
       credentials: awsConfig.credentials,
@@ -133,4 +167,6 @@ export class DiskWrapper {
   }
 }
 
-export const diskFactory = () => new DiskWrapper()
+export function diskFactory(visibility: 'private' | 'public' = 'private') {
+  return new DiskWrapper(visibility)
+}
diff --git a/packages/core/src/services/files/convert.test.ts b/packages/core/src/services/files/convert.test.ts
new file mode 100644
index 000000000..3c1a94975
--- /dev/null
+++ b/packages/core/src/services/files/convert.test.ts
@@ -0,0 +1,71 @@
+import { readFile, readdir } from 'fs/promises'
+import { join } from 'path'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as constants from '../../constants'
+import { BadRequestError, UnprocessableEntityError } from '../../lib'
+
+import { convertFile } from './convert'
+
+describe('convertFile', () => {
+  const DOCUMENTS_PATH = join(__dirname, '../../tests/fixtures/files/documents')
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetAllMocks()
+    vi.restoreAllMocks()
+  })
+
+  it('not converts empty file', async () => {
+    const file = new File([Buffer.from('')], 'file')
+
+    await expect(
+      convertFile(file).then((r) => r.unwrap()),
+    ).rejects.toThrowError(new BadRequestError(`File is empty`))
+  })
+
+  it('not converts large file', async () => {
+    vi.spyOn(constants, 'MAX_UPLOAD_SIZE_IN_MB', 'get').mockReturnValue(1)
+
+    const file = new File([Buffer.from('Too large!')], 'file')
+
+    await expect(
+      convertFile(file).then((r) => r.unwrap()),
+    ).rejects.toThrowError(new BadRequestError(`File too large`))
+  })
+
+  it('not converts unsupported file', async () => {
+    const name = 'file.bin'
+    const content = await readFile(join(DOCUMENTS_PATH, name))
+    const file = new File([content], name)
+
+    await expect(
+      convertFile(file).then((r) => r.unwrap()),
+    ).rejects.toThrowError(new BadRequestError(`Unsupported file type: .bin`))
+  })
+
+  it('not converts when file conversion fails', async () => {
+    const name = 'file.docx'
+    const content = await readFile(join(DOCUMENTS_PATH, name))
+    const file = new File([content.slice(0, -(content.length / 2))], name)
+
+    await expect(
+      convertFile(file).then((r) => r.unwrap()),
+    ).rejects.toThrowError(
+      new UnprocessableEntityError(`Failed to convert .docx file to text`, {}),
+    )
+  })
+
+  it('converts supported files', async () => {
+    const files = await readdir(DOCUMENTS_PATH)
+    for (const name of files) {
+      if (['file.bin'].includes(name)) continue
+
+      const content = await readFile(join(DOCUMENTS_PATH, name))
+      const file = new File([content], name)
+
+      await expect(convertFile(file).then((r) => r.unwrap())).resolves.toEqual(
+        'Hello World!\nThis is a new line!',
+      )
+    }
+  })
+})
diff --git a/packages/core/src/services/files/transform.ts b/packages/core/src/services/files/convert.ts
similarity index 94%
rename from packages/core/src/services/files/transform.ts
rename to packages/core/src/services/files/convert.ts
index 9d5affe14..b02b96c93 100644
--- a/packages/core/src/services/files/transform.ts
+++ b/packages/core/src/services/files/convert.ts
@@ -22,7 +22,7 @@ const __pdfjsSandbox = _pdfjsSandbox
 // @ts-expect-error force webpack to include the worker
 const __pdfjsWorker = _pdfjsWorker
 
-export async function transformFile(
+export async function convertFile(
   file: File,
 ): Promise<TypedResult<string, Error>> {
   const extension = path.extname(file.name).toLowerCase()
@@ -41,7 +41,7 @@ export async function transformFile(
   try {
     switch (extension) {
       case '.pdf':
-        content = await transformPdfFile(buffer)
+        content = await convertPdfFile(buffer)
         break
       case '.docx':
       case '.xlsx':
@@ -68,7 +68,7 @@ export async function transformFile(
   } catch (error) {
     return Result.error(
       new UnprocessableEntityError(
-        `Failed to transform ${extension} file to text`,
+        `Failed to convert ${extension} file to text`,
         {},
       ),
     )
@@ -83,7 +83,7 @@ export async function transformFile(
 // Copied from officeParser. The version of pdfjs in officeParser is too old and buggy.
 // The dependency cannot be force-bumped because officeParser bundles the whole library.
 // https://github.com/harshankur/officeParser/blob/c969c7ae1d4dc66c65eb2f5345b9d849fd309a09/officeParser.js#L447
-async function transformPdfFile(buffer: Buffer) {
+async function convertPdfFile(buffer: Buffer) {
   return pdfjs
     .getDocument(new Uint8Array(buffer))
     .promise.then((document) =>
diff --git a/packages/core/src/services/files/index.ts b/packages/core/src/services/files/index.ts
index d551975c6..743b7b883 100644
--- a/packages/core/src/services/files/index.ts
+++ b/packages/core/src/services/files/index.ts
@@ -1 +1,2 @@
-export * from './transform'
+export * from './convert'
+export * from './upload'
diff --git a/packages/core/src/services/files/transform.test.ts b/packages/core/src/services/files/transform.test.ts
deleted file mode 100644
index a1867ae16..000000000
--- a/packages/core/src/services/files/transform.test.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { readFile, readdir } from 'fs/promises'
-import { join } from 'path'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import * as constants from '../../constants'
-import { BadRequestError } from '../../lib'
-
-import { transformFile } from './transform'
-
-describe('transformFile', () => {
-  const FIXTURES_PATH = join(__dirname, '../../tests/fixtures/transform')
-
-  beforeEach(() => {
-    vi.resetAllMocks()
-  })
-
-  it('not transforms empty file', async () => {
-    const file = new File([Buffer.from('')], 'file')
-
-    await expect(
-      transformFile(file).then((r) => r.unwrap()),
-    ).rejects.toThrowError(new BadRequestError(`File is empty`))
-  })
-
-  it('not transforms large file', async () => {
-    vi.spyOn(constants, 'MAX_UPLOAD_SIZE_IN_MB', 'get').mockReturnValue(1)
-
-    const file = new File([Buffer.from('Too large!')], 'file')
-
-    await expect(
-      transformFile(file).then((r) => r.unwrap()),
-    ).rejects.toThrowError(new BadRequestError(`File too large`))
-  })
-
-  it('not transforms unsupported file', async () => {
-    const name = 'file.bin'
-    const content = await readFile(join(FIXTURES_PATH, name))
-    const file = new File([content], name)
-
-    await expect(
-      transformFile(file).then((r) => r.unwrap()),
-    ).rejects.toThrowError(new BadRequestError(`Unsupported file type: .bin`))
-  })
-
-  it('transforms supported files', async () => {
-    const files = await readdir(FIXTURES_PATH)
-    for (const name of files) {
-      if (['file.bin'].includes(name)) continue
-
-      const content = await readFile(join(FIXTURES_PATH, name))
-      const file = new File([content], name)
-
-      await expect(
-        transformFile(file).then((r) => r.unwrap()),
-      ).resolves.toEqual('Hello World!\nThis is a new line!')
-    }
-  })
-})
diff --git a/packages/core/src/services/files/upload.test.ts b/packages/core/src/services/files/upload.test.ts
new file mode 100644
index 000000000..dcb4bfd6d
--- /dev/null
+++ b/packages/core/src/services/files/upload.test.ts
@@ -0,0 +1,105 @@
+import { readdir, readFile } from 'fs/promises'
+import { join } from 'path'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Workspace } from '../../browser'
+import * as constants from '../../constants'
+import { BadRequestError, Result, UnprocessableEntityError } from '../../lib'
+import { diskFactory } from '../../lib/disk'
+import * as factories from '../../tests/factories'
+
+import * as convert from './convert'
+import { uploadFile } from './upload'
+
+describe('uploadFile', () => {
+  const DOCUMENTS_PATH = join(__dirname, '../../tests/fixtures/files/documents')
+  const IMAGES_PATH = join(__dirname, '../../tests/fixtures/files/images')
+  const disk = diskFactory()
+  let workspace: Workspace
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    vi.resetAllMocks()
+    vi.restoreAllMocks()
+
+    const { workspace: w } = await factories.createWorkspace()
+    workspace = w
+
+    vi.spyOn(disk, 'putFile').mockResolvedValue(Result.ok(undefined))
+  })
+
+  it('not uploads empty file', async () => {
+    const file = new File([Buffer.from('')], 'file')
+
+    await expect(
+      uploadFile(file, workspace, disk).then((r) => r.unwrap()),
+    ).rejects.toThrowError(new BadRequestError(`File is empty`))
+  })
+
+  it('not uploads large file', async () => {
+    vi.spyOn(constants, 'MAX_UPLOAD_SIZE_IN_MB', 'get').mockReturnValue(1)
+
+    const file = new File([Buffer.from('Too large!')], 'file')
+
+    await expect(
+      uploadFile(file, workspace, disk).then((r) => r.unwrap()),
+    ).rejects.toThrowError(new BadRequestError(`File too large`))
+  })
+
+  it('not uploads unsupported file', async () => {
+    const name = 'file.bin'
+    const content = await readFile(join(DOCUMENTS_PATH, name))
+    const file = new File([content], name)
+
+    await expect(
+      uploadFile(file, workspace, disk).then((r) => r.unwrap()),
+    ).rejects.toThrowError(new BadRequestError(`Unsupported file type: .bin`))
+  })
+
+  it('not uploads when disk upload fails', async () => {
+    vi.spyOn(disk, 'putFile').mockResolvedValue(
+      Result.error(new Error('Upload failed')),
+    )
+
+    const name = 'file.png'
+    const content = await readFile(join(IMAGES_PATH, name))
+    const file = new File([content], name)
+
+    await expect(
+      uploadFile(file, workspace, disk).then((r) => r.unwrap()),
+    ).rejects.toThrowError(
+      new UnprocessableEntityError(`Failed to upload .png file`, {}),
+    )
+  })
+
+  it('uploads supported image files', async () => {
+    const convertFile = vi.spyOn(convert, 'convertFile')
+
+    const files = await readdir(IMAGES_PATH)
+    for (const name of files) {
+      const content = await readFile(join(IMAGES_PATH, name))
+      const file = new File([content], name)
+
+      await expect(
+        uploadFile(file, workspace, disk).then((r) => r.unwrap()),
+      ).resolves.toContain(`/workspaces/${workspace.id}/files/${name}`)
+      expect(convertFile).not.toHaveBeenCalled()
+    }
+  })
+
+  it('uploads supported document files', async () => {
+    const convertFile = vi.spyOn(convert, 'convertFile')
+
+    const files = await readdir(DOCUMENTS_PATH)
+    for (const name of files) {
+      if (['file.bin'].includes(name)) continue
+
+      const content = await readFile(join(DOCUMENTS_PATH, name))
+      const file = new File([content], name)
+
+      await expect(
+        uploadFile(file, workspace, disk).then((r) => r.unwrap()),
+      ).resolves.toContain(`/workspaces/${workspace.id}/files/${name}`)
+      expect(convertFile).toHaveBeenCalledWith(file)
+    }
+  })
+})
diff --git a/packages/core/src/services/files/upload.ts b/packages/core/src/services/files/upload.ts
new file mode 100644
index 000000000..cd89ae85c
--- /dev/null
+++ b/packages/core/src/services/files/upload.ts
@@ -0,0 +1,52 @@
+import slugify from '@sindresorhus/slugify'
+import path from 'path'
+import { diskFactory, DiskWrapper } from '../../lib/disk'
+
+import {
+  BadRequestError,
+  Result,
+  TypedResult,
+  UnprocessableEntityError,
+} from '../../lib'
+
+import { Workspace } from '../../browser'
+import { MAX_UPLOAD_SIZE_IN_MB, SUPPORTED_IMAGE_TYPES } from '../../constants'
+import { convertFile } from './convert'
+
+export async function uploadFile(
+  file: File,
+  workspace: Workspace,
+  disk: DiskWrapper = diskFactory('public'),
+): Promise<TypedResult<string, Error>> {
+  const extension = path.extname(file.name).toLowerCase()
+  const key = `workspaces/${workspace.id}/files/${slugify(file.name, { preserveCharacters: ['.'] })}`
+
+  if (file.size === 0) {
+    return Result.error(new BadRequestError(`File is empty`))
+  }
+
+  if (file.size > MAX_UPLOAD_SIZE_IN_MB) {
+    return Result.error(new BadRequestError(`File too large`))
+  }
+
+  if (!SUPPORTED_IMAGE_TYPES.includes(extension)) {
+    const converted = await convertFile(file)
+    if (converted.error) return converted
+
+    file = new File([converted.value], file.name)
+  }
+
+  try {
+    await disk.putFile(key, file).then((r) => r.unwrap())
+    const url = await disk.getSignedUrl(key, {
+      expiresIn: undefined,
+      contentDisposition: 'inline',
+    })
+
+    return Result.ok(url)
+  } catch (error) {
+    return Result.error(
+      new UnprocessableEntityError(`Failed to upload ${extension} file`, {}),
+    )
+  }
+}
diff --git a/packages/core/src/tests/fixtures/transform/file.bin b/packages/core/src/tests/fixtures/files/documents/file.bin
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.bin
rename to packages/core/src/tests/fixtures/files/documents/file.bin
diff --git a/packages/core/src/tests/fixtures/transform/file.csv b/packages/core/src/tests/fixtures/files/documents/file.csv
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.csv
rename to packages/core/src/tests/fixtures/files/documents/file.csv
diff --git a/packages/core/src/tests/fixtures/transform/file.docx b/packages/core/src/tests/fixtures/files/documents/file.docx
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.docx
rename to packages/core/src/tests/fixtures/files/documents/file.docx
diff --git a/packages/core/src/tests/fixtures/transform/file.md b/packages/core/src/tests/fixtures/files/documents/file.md
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.md
rename to packages/core/src/tests/fixtures/files/documents/file.md
diff --git a/packages/core/src/tests/fixtures/transform/file.odp b/packages/core/src/tests/fixtures/files/documents/file.odp
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.odp
rename to packages/core/src/tests/fixtures/files/documents/file.odp
diff --git a/packages/core/src/tests/fixtures/transform/file.ods b/packages/core/src/tests/fixtures/files/documents/file.ods
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.ods
rename to packages/core/src/tests/fixtures/files/documents/file.ods
diff --git a/packages/core/src/tests/fixtures/transform/file.odt b/packages/core/src/tests/fixtures/files/documents/file.odt
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.odt
rename to packages/core/src/tests/fixtures/files/documents/file.odt
diff --git a/packages/core/src/tests/fixtures/transform/file.pdf b/packages/core/src/tests/fixtures/files/documents/file.pdf
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.pdf
rename to packages/core/src/tests/fixtures/files/documents/file.pdf
diff --git a/packages/core/src/tests/fixtures/transform/file.pptx b/packages/core/src/tests/fixtures/files/documents/file.pptx
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.pptx
rename to packages/core/src/tests/fixtures/files/documents/file.pptx
diff --git a/packages/core/src/tests/fixtures/transform/file.promptl b/packages/core/src/tests/fixtures/files/documents/file.promptl
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.promptl
rename to packages/core/src/tests/fixtures/files/documents/file.promptl
diff --git a/packages/core/src/tests/fixtures/transform/file.tsv b/packages/core/src/tests/fixtures/files/documents/file.tsv
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.tsv
rename to packages/core/src/tests/fixtures/files/documents/file.tsv
diff --git a/packages/core/src/tests/fixtures/transform/file.txt b/packages/core/src/tests/fixtures/files/documents/file.txt
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.txt
rename to packages/core/src/tests/fixtures/files/documents/file.txt
diff --git a/packages/core/src/tests/fixtures/transform/file.xlsx b/packages/core/src/tests/fixtures/files/documents/file.xlsx
similarity index 100%
rename from packages/core/src/tests/fixtures/transform/file.xlsx
rename to packages/core/src/tests/fixtures/files/documents/file.xlsx
diff --git a/packages/core/src/tests/fixtures/files/images/file.gif b/packages/core/src/tests/fixtures/files/images/file.gif
new file mode 100644
index 000000000..ae20a2a78
Binary files /dev/null and b/packages/core/src/tests/fixtures/files/images/file.gif differ
diff --git a/packages/core/src/tests/fixtures/files/images/file.jpeg b/packages/core/src/tests/fixtures/files/images/file.jpeg
new file mode 100644
index 000000000..8e3641c3c
Binary files /dev/null and b/packages/core/src/tests/fixtures/files/images/file.jpeg differ
diff --git a/packages/core/src/tests/fixtures/files/images/file.jpg b/packages/core/src/tests/fixtures/files/images/file.jpg
new file mode 100644
index 000000000..8e3641c3c
Binary files /dev/null and b/packages/core/src/tests/fixtures/files/images/file.jpg differ
diff --git a/packages/core/src/tests/fixtures/files/images/file.png b/packages/core/src/tests/fixtures/files/images/file.png
new file mode 100644
index 000000000..595b8cf38
Binary files /dev/null and b/packages/core/src/tests/fixtures/files/images/file.png differ
diff --git a/packages/core/src/tests/fixtures/files/images/file.webp b/packages/core/src/tests/fixtures/files/images/file.webp
new file mode 100644
index 000000000..690da1655
Binary files /dev/null and b/packages/core/src/tests/fixtures/files/images/file.webp differ
diff --git a/packages/web-ui/package.json b/packages/web-ui/package.json
index 162beddaf..fd0b91876 100644
--- a/packages/web-ui/package.json
+++ b/packages/web-ui/package.json
@@ -60,7 +60,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "jsdom": "^24.1.0",
-    "lucide-react": "^0.403.0",
+    "lucide-react": "^0.468.0",
     "monaco-editor": "^0.50.0",
     "postcss": "^8.4.39",
     "react": "18.3.0",
@@ -93,7 +93,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.403.0",
+    "lucide-react": "^0.468.0",
     "monaco-editor": "^0.50.0",
     "react": "18.3.0",
     "react-dom": "18.3.0",
diff --git a/packages/web-ui/src/ds/atoms/Dropzone/index.tsx b/packages/web-ui/src/ds/atoms/Dropzone/index.tsx
index ed9a6e3e3..95e2a7c2f 100644
--- a/packages/web-ui/src/ds/atoms/Dropzone/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Dropzone/index.tsx
@@ -22,7 +22,7 @@ export type DropzoneProps = Omit<
 }
 
 export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>(
-  ({ onChange, children, ...props }, ref) => {
+  ({ onChange, children, accept, multiple, ...props }, ref) => {
     const [isDragging, setIsDragging] = useState(false)
     const internalRef = useRef<HTMLInputElement>(null)
     const combineRef = useCombinedRefs(ref, internalRef)
@@ -38,9 +38,20 @@ export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>(
         e.preventDefault()
         e.stopPropagation()
         setIsDragging(false)
+
+        if (!e.dataTransfer.files.length) return
+        if (!multiple && e.dataTransfer.files.length > 1) return
+        if (
+          accept &&
+          Array.from(e.dataTransfer.files).some(
+            (file) => !accept.split(',').find((a) => file.name.endsWith(a)),
+          )
+        )
+          return
+
         onChange?.(e.dataTransfer.files)
-        if (!internalRef.current) return
 
+        if (!internalRef.current) return
         // Set files in input because then we can submit a real form
         internalRef.current.files = e.dataTransfer.files
       },
@@ -54,6 +65,7 @@ export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>(
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       onChange?.(e.target.files)
     }
+
     return (
       <div
         onDragOver={handleDragOver}
@@ -66,6 +78,8 @@ export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>(
           type='file'
           className='hidden'
           onChange={handleChange}
+          accept={accept}
+          multiple={multiple}
           {...props}
         />
       </div>
diff --git a/packages/web-ui/src/ds/atoms/DropzoneInput/index.tsx b/packages/web-ui/src/ds/atoms/DropzoneInput/index.tsx
index eb71a14d3..89d439ed8 100644
--- a/packages/web-ui/src/ds/atoms/DropzoneInput/index.tsx
+++ b/packages/web-ui/src/ds/atoms/DropzoneInput/index.tsx
@@ -1,15 +1,23 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { cn } from '../../../lib/utils'
+import { Button } from '../Button'
 import { Dropzone, type DropzoneProps } from '../Dropzone'
 import { FormField, type FormFieldProps } from '../FormField'
-import { Icon } from '../Icons'
+import { Icon, IconName } from '../Icons'
 import Text from '../Text'
 
 type Props = Omit<DropzoneProps, 'children'> &
-  Omit<FormFieldProps, 'children'> & { placeholder: string }
+  Omit<FormFieldProps, 'children'> & {
+    defaultFilename?: string
+    placeholder: string
+    icon?: IconName
+    inputSize?: 'small' | 'normal'
+    onChange?: (files: FileList | null) => void
+  }
+
 export function DropzoneInput({
   label,
   description,
@@ -18,27 +26,40 @@ export function DropzoneInput({
   placeholder,
   accept,
   multiple,
+  defaultFilename,
+  icon = 'fileUp',
+  inputSize = 'normal',
+  onChange,
   ...rest
 }: Props) {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [filename, setFilename] = useState<string | undefined>(defaultFilename)
+  useEffect(() => setFilename(defaultFilename), [defaultFilename])
+
   const ref = useRef<HTMLInputElement>(null)
+
   const onClickZone = useCallback(() => {
     if (!ref.current) return
-
     ref.current.click()
   }, [ref])
+
   const onFileChange = useCallback(
     (files: FileList | null) => {
       const file = files?.[0]
       if (!file) return
-
-      setSelectedFile(file)
+      setFilename(file.name)
+      onChange?.(files)
     },
-    [setSelectedFile],
+    [setFilename, onChange],
   )
-  const name = selectedFile?.name
+
+  const onClearFile = useCallback(() => {
+    if (ref.current) ref.current.value = ''
+    setFilename(undefined)
+    onChange?.(null)
+  }, [ref, setFilename, onChange])
+
   return (
-    <div onClick={onClickZone}>
+    <div onClick={onClickZone} className='w-full'>
       <FormField
         label={label}
         description={description}
@@ -56,26 +77,47 @@ export function DropzoneInput({
             <div
               className={cn(
                 'cursor-pointer flex min-w-0 border',
-                'rounded-md p-5 gap-x-2 flex items-center justify-center',
+                'rounded-md gap-x-2 flex items-center justify-center',
                 {
-                  'border-border': !isDragging,
+                  'border-input': !isDragging,
                   'border-dashed border-current': isDragging,
+                  'p-5': inputSize === 'normal',
+                  'px-2 py-1': inputSize === 'small',
                 },
               )}
             >
               <Icon
-                name='fileUp'
+                name={icon}
                 color='accentForeground'
                 widthClass='w-6'
                 heightClass='h-6'
+                className='shrink-0'
               />
-              <div className='flex-grow flex-shrink truncate'>
-                {name ? (
-                  <Text.H5 ellipsis noWrap color='foreground'>
-                    {name}
-                  </Text.H5>
+              <div className='flex-grow flex-shrink truncate flex items-center justify-between gap-x-2'>
+                {filename ? (
+                  <>
+                    <Text.H5 ellipsis noWrap color='foreground'>
+                      {filename}
+                    </Text.H5>
+                    <Button
+                      variant='ghost'
+                      size='none'
+                      iconProps={{
+                        name: 'x',
+                        color: 'foregroundMuted',
+                        size: 'normal',
+                        className: 'shrink-0',
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onClearFile()
+                      }}
+                    />
+                  </>
                 ) : (
-                  <Text.H5M color='accentForeground'>{placeholder}</Text.H5M>
+                  <Text.H5M ellipsis noWrap color='accentForeground'>
+                    {placeholder}
+                  </Text.H5M>
                 )}
               </div>
             </div>
diff --git a/packages/web-ui/src/ds/atoms/Icons/index.tsx b/packages/web-ui/src/ds/atoms/Icons/index.tsx
index 28b1abe8d..2f24a567c 100644
--- a/packages/web-ui/src/ds/atoms/Icons/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Icons/index.tsx
@@ -30,7 +30,10 @@ import {
   FolderOpen,
   FolderPlus,
   Github,
+  Image,
+  ImageUp,
   InfoIcon,
+  LetterText,
   ListOrdered,
   LoaderCircle,
   Lock,
@@ -55,6 +58,7 @@ import {
   Trash,
   Twitter,
   Undo,
+  X,
 } from 'lucide-react'
 
 import { cn } from '../../../lib/utils'
@@ -120,6 +124,10 @@ const Icons = {
   notEqual: EqualNotIcon,
   settings: SettingsIcon,
   paperclip: Paperclip,
+  letterText: LetterText,
+  image: Image,
+  imageUp: ImageUp,
+  x: X,
 }
 
 export type IconName = keyof typeof Icons
diff --git a/packages/web-ui/src/ds/atoms/Image/index.tsx b/packages/web-ui/src/ds/atoms/Image/index.tsx
new file mode 100644
index 000000000..204e6f22f
--- /dev/null
+++ b/packages/web-ui/src/ds/atoms/Image/index.tsx
@@ -0,0 +1,27 @@
+import { forwardRef, ImgHTMLAttributes } from 'react'
+import { cn } from '../../../lib/utils'
+
+export type ImageProps = ImgHTMLAttributes<HTMLImageElement>
+
+export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <img
+      onError={(element) => {
+        element.currentTarget.src = '/placeholder.png'
+        element.currentTarget.onerror = null
+      }}
+      fetchPriority='auto'
+      loading='lazy'
+      decoding='async'
+      className={cn(
+        'aspect-auto h-auto w-auto bg-muted object-cover shadow-sm',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
diff --git a/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx b/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx
index 57f238ff8..424334c48 100644
--- a/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Select/Primitives/index.tsx
@@ -26,6 +26,8 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValuePrimitive = SelectPrimitive.Value
 
+const SelectTriggerPrimitive = SelectPrimitive.Trigger
+
 function SelectValueWithIcon({
   icon,
   children,
@@ -264,6 +266,7 @@ export {
   SelectGroup,
   SelectValue,
   SelectTrigger,
+  SelectTriggerPrimitive,
   SelectContent,
   SelectLabel,
   SelectItem,
diff --git a/packages/web-ui/src/ds/atoms/Select/index.tsx b/packages/web-ui/src/ds/atoms/Select/index.tsx
index 79a4df7e3..428fad5e9 100644
--- a/packages/web-ui/src/ds/atoms/Select/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Select/index.tsx
@@ -42,10 +42,12 @@ export type SelectProps<V extends unknown = unknown> = Omit<
   options: SelectOption<V>[]
   defaultValue?: V
   value?: V
+  trigger?: ReactNode
   placeholder?: string
   disabled?: boolean
   required?: boolean
   onChange?: (value: V) => void
+  width?: 'auto' | 'full'
 }
 export function Select<V extends unknown = unknown>({
   name,
@@ -54,11 +56,13 @@ export function Select<V extends unknown = unknown>({
   description,
   errors,
   autoFocus,
+  trigger,
   placeholder,
   options,
   defaultValue,
   value,
   onChange,
+  width = 'full',
   disabled = false,
   required = false,
 }: SelectProps<V>) {
@@ -78,8 +82,9 @@ export function Select<V extends unknown = unknown>({
       label={label}
       description={description}
       errors={errors}
+      className={width === 'full' ? 'w-full' : 'w-auto'}
     >
-      <div className='w-full'>
+      <div className={width === 'full' ? 'w-full' : 'w-auto'}>
         <SelectRoot
           required={required}
           disabled={disabled}
@@ -88,13 +93,17 @@ export function Select<V extends unknown = unknown>({
           defaultValue={defaultValue as string}
           onValueChange={_onChange}
         >
-          <SelectTrigger autoFocus={autoFocus}>
-            <SelectValue
-              selected={selectedValue}
-              options={options}
-              placeholder={placeholder ?? 'Select an option'}
-            />
-          </SelectTrigger>
+          {trigger ? (
+            trigger
+          ) : (
+            <SelectTrigger autoFocus={autoFocus}>
+              <SelectValue
+                selected={selectedValue}
+                options={options}
+                placeholder={placeholder ?? 'Select an option'}
+              />
+            </SelectTrigger>
+          )}
           <SelectContent>
             <SelectGroup>
               <Options options={options as SelectOption<V>[]} />
diff --git a/packages/web-ui/src/ds/atoms/Tooltip/index.tsx b/packages/web-ui/src/ds/atoms/Tooltip/index.tsx
index 997487b56..d8d8127e4 100644
--- a/packages/web-ui/src/ds/atoms/Tooltip/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Tooltip/index.tsx
@@ -18,7 +18,7 @@ const TooltipRoot = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
 
-export type TooltipVariant = 'default' | 'destructive' | 'inverse'
+export type TooltipVariant = 'default' | 'destructive' | 'inverse' | 'ghost'
 type PropviderProps = ComponentPropsWithoutRef<typeof TooltipProvider>
 type RootProps = ComponentPropsWithoutRef<typeof TooltipRoot>
 type ContentProps = ComponentPropsWithoutRef<
@@ -52,6 +52,7 @@ const TooltipContent = forwardRef<
           'bg-background border': variant === 'default',
           'bg-destructive': variant === 'destructive',
           'bg-foreground text-background': variant === 'inverse',
+          'bg-transparent p-0 rounded-none': variant === 'ghost',
         },
       )}
       {...props}
@@ -68,6 +69,8 @@ function useTooltipTextContentColor(variant: TooltipVariant): TextColor {
       return 'destructiveForeground'
     case 'inverse':
       return 'background'
+    case 'ghost':
+      return 'foreground'
   }
 }
 
diff --git a/packages/web-ui/src/ds/atoms/index.ts b/packages/web-ui/src/ds/atoms/index.ts
index f1ebda656..18be251cd 100644
--- a/packages/web-ui/src/ds/atoms/index.ts
+++ b/packages/web-ui/src/ds/atoms/index.ts
@@ -1,43 +1,44 @@
-export * from './Card'
-export { default as Text } from './Text'
+export * from './Alert'
 export * from './Avatar'
+export * from './Badge'
 export * from './Button'
+export * from './Card'
+export * from './Charts'
+export * from './Checkbox'
+export * from './CircularProgress'
+export * from './ClientOnly'
+export * from './CodeBlock'
+export * from './Container'
+export * from './CopyButton'
+export * from './DatePicker/Range'
+export * from './DotIndicator'
+export * from './DropdownMenu'
+export * from './Dropzone'
+export * from './DropzoneInput'
+export * from './FloatingPanel'
 export * from './FormField'
 export * from './FormFieldGroup'
 export * from './FormWrapper'
+export * from './Icons'
+export * from './Illustrations'
+export * from './Image'
 export * from './Input'
-export * from './LineSeparator'
-export * from './Switch'
-export * from './TextArea'
 export * from './Label'
-export * from './DotIndicator'
-export * from './Select/Primitives'
+export * from './LineSeparator'
+export * from './Modal'
+export * from './NavTab'
+export * from './Popover'
+export * from './Progress'
 export * from './Select'
-export * from './Checkbox'
+export * from './Select/Primitives'
 export * from './Skeleton'
-export * from './Tooltip'
+export { default as SplitPane } from './SplitPane'
+export * from './Switch'
+export * from './Table'
+export { default as Text } from './Text'
+export * from './TextArea'
 export * from './Toast'
 export * from './Toast/ToastProvider'
 export * from './Toast/useToast'
-export * from './Icons'
-export * from './Illustrations'
-export * from './Modal'
-export * from './Popover'
-export * from './Badge'
-export * from './DropdownMenu'
-export { default as SplitPane } from './SplitPane'
-export * from './Table'
-export * from './Alert'
-export * from './NavTab'
-export * from './FloatingPanel'
-export * from './Container'
-export * from './Dropzone'
-export * from './DropzoneInput'
-export * from './Charts'
-export * from './CircularProgress'
-export * from './CodeBlock'
-export * from './CopyButton'
-export * from './Progress'
+export * from './Tooltip'
 export * from './TypewriterText'
-export * from './ClientOnly'
-export * from './DatePicker/Range'
diff --git a/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx b/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
index 7180ec88f..fa8f95270 100644
--- a/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
+++ b/packages/web-ui/src/ds/molecules/Chat/Message/index.tsx
@@ -4,8 +4,10 @@ import { ReactNode, useEffect, useMemo, useState } from 'react'
 
 import {
   ContentType,
+  ImageContent,
   MessageContent,
   PromptlSourceRef,
+  TextContent,
   ToolContent,
   ToolRequestContent,
 } from '@latitude-data/compiler'
@@ -15,6 +17,7 @@ import {
   Badge,
   BadgeProps,
   CodeBlock,
+  Image,
   Skeleton,
   Text,
   Tooltip,
@@ -22,7 +25,7 @@ import {
 import { colors, font, TextColor } from '../../../tokens'
 import { roleToString, roleVariant } from './helpers'
 
-export { roleVariant, roleToString } from './helpers'
+export { roleToString, roleVariant } from './helpers'
 
 export type MessageProps = {
   role: string
@@ -30,7 +33,7 @@ export type MessageProps = {
   className?: string
   size?: 'default' | 'small'
   animatePulse?: boolean
-  parameters?: Record<string, unknown>
+  parameters?: string[]
   collapseParameters?: boolean
 }
 
@@ -73,7 +76,7 @@ export function Message({
   content,
   animatePulse = false,
   size = 'default',
-  parameters = {},
+  parameters = [],
   collapseParameters = false,
 }: MessageProps) {
   return (
@@ -98,7 +101,7 @@ export function Message({
 export function MessageItemContent({
   content,
   size = 'default',
-  parameters = {},
+  parameters = [],
   collapseParameters = false,
   collapsedMessage,
 }: {
@@ -110,25 +113,22 @@ export function MessageItemContent({
 }) {
   if (collapsedMessage)
     return <Content value='...' color='foregroundMuted' size={size} />
+
   if (typeof content === 'string')
     return <Content value={content} color='foregroundMuted' size={size} />
 
-  return (
-    <>
-      {content.map((c, idx) => (
-        <Content
-          key={idx}
-          index={idx}
-          color='foregroundMuted'
-          value={c}
-          size={size}
-          parameters={parameters}
-          collapseParameters={collapseParameters}
-          sourceMap={(c as any)?._promptlSourceMap}
-        />
-      ))}
-    </>
-  )
+  return content.map((c, idx) => (
+    <Content
+      key={idx}
+      index={idx}
+      color='foregroundMuted'
+      value={c}
+      size={size}
+      parameters={parameters}
+      collapseParameters={collapseParameters}
+      sourceMap={(c as any)?._promptlSourceMap}
+    />
+  ))
 }
 
 export function MessageSkeleton({ role }: { role: string }) {
@@ -153,7 +153,7 @@ const Content = ({
   color,
   value,
   size,
-  parameters = {},
+  parameters = [],
   collapseParameters = false,
   sourceMap = [],
 }: {
@@ -161,7 +161,7 @@ const Content = ({
   color: TextColor
   value: string | MessageContent
   size?: 'default' | 'small'
-  parameters?: Record<string, unknown>
+  parameters?: string[]
   collapseParameters?: boolean
   sourceMap?: PromptlSourceRef[]
 }) => {
@@ -170,8 +170,8 @@ const Content = ({
       <ContentText
         index={index}
         color={color}
-        message={value}
         size={size}
+        message={value}
         parameters={parameters}
         collapseParameters={collapseParameters}
         sourceMap={sourceMap}
@@ -185,8 +185,8 @@ const Content = ({
         <ContentText
           index={index}
           color={color}
-          message={value.text}
           size={size}
+          message={value.text}
           parameters={parameters}
           collapseParameters={collapseParameters}
           sourceMap={sourceMap}
@@ -195,17 +195,20 @@ const Content = ({
 
     case ContentType.image:
       return (
-        <ContentText
+        <ContentImage
           index={index}
           color={color}
-          message={'<Image content not implemented yet>'}
           size={size}
+          image={value.image}
+          parameters={parameters}
+          collapseParameters={collapseParameters}
+          sourceMap={sourceMap}
         />
       )
 
     case ContentType.toolCall:
       return (
-        <div className='pt-2 w-full'>
+        <div key={`${index}`} className='pt-2 w-full'>
           <div className='overflow-hidden rounded-lg w-full'>
             <CodeBlock language='json'>
               {JSON.stringify(value as ToolRequestContent, null, 2)}
@@ -216,7 +219,7 @@ const Content = ({
 
     case ContentType.toolResult:
       return (
-        <div className='pt-2 w-full'>
+        <div key={`${index}`} className='pt-2 w-full'>
           <div className='overflow-hidden rounded-lg w-full'>
             <CodeBlock language='json'>
               {JSON.stringify(value as ToolContent, null, 2)}
@@ -226,48 +229,48 @@ const Content = ({
       )
 
     default:
-      return null
+      return (
+        <ContentText
+          index={index}
+          color={color}
+          size={size}
+          message={'<Content type not supported>'}
+        />
+      )
   }
 }
 
-type SourceRef = {
+type Reference = {
   identifier?: string
-  text: string
+  content: string
+  type: ContentType
 }
-type Segment = string | SourceRef
+type Segment = string | Reference
 
 const ContentText = ({
   index = 0,
   color,
-  message,
   size,
-  parameters = {},
+  message,
+  parameters = [],
   collapseParameters = false,
   sourceMap = [],
 }: {
   index?: number
   color: TextColor
-  message: string
   size?: 'default' | 'small'
-  parameters?: Record<string, unknown>
+  message: TextContent['text']
+  parameters?: string[]
   collapseParameters?: boolean
   sourceMap?: PromptlSourceRef[]
 }) => {
   const TextComponent = size === 'small' ? Text.H6 : Text.H5
 
-  // Filter source map references without value
-  sourceMap = sourceMap.filter(
-    (ref) => message.slice(ref.start, ref.end).trim().length > 0,
-  )
-
-  // Sort source map to ensure references are ordered
-  sourceMap = sourceMap.sort((a, b) => a.start - b.start)
-
   const segments = useMemo(
-    () => segmentMessage(message, sourceMap, parameters),
+    () => computeSegments(ContentType.text, message, sourceMap, parameters),
     [message, sourceMap, parameters],
   )
-  const groups = useMemo(() => groupSegmentsByNewLine(segments), [segments])
+  const groups = useMemo(() => groupSegments(segments), [segments])
 
   return groups.map((group, groupIndex) => (
     <TextComponent
@@ -308,7 +311,7 @@ function SegmentComponent({
   return DynamicSegment(segment, collapseParameters)
 }
 
-function IdentifierSegment(segment: SourceRef, collapseParameters: boolean) {
+function IdentifierSegment(segment: Reference, collapseParameters: boolean) {
   const [collapseSegment, setCollapseSegment] = useState(collapseParameters)
   useEffect(() => {
     setCollapseSegment(collapseParameters)
@@ -318,6 +321,7 @@ function IdentifierSegment(segment: SourceRef, collapseParameters: boolean) {
     return (
       <Tooltip
         asChild
+        variant={segment.type === ContentType.image ? 'ghost' : 'inverse'}
         trigger={
           <Badge
             variant='accent'
@@ -328,7 +332,12 @@ function IdentifierSegment(segment: SourceRef, collapseParameters: boolean) {
           </Badge>
         }
       >
-        <div className='line-clamp-6'>{segment.text}</div>
+        {segment.type === ContentType.text && (
+          <div className='line-clamp-6'>{segment.content}</div>
+        )}
+        {segment.type === ContentType.image && (
+          <Image src={segment.content} className='max-h-72 rounded-xl' />
+        )}
       </Tooltip>
     )
   }
@@ -342,10 +351,17 @@ function IdentifierSegment(segment: SourceRef, collapseParameters: boolean) {
             colors.textColors.accentForeground,
             font.weight.semibold,
             'cursor-pointer',
+            {
+              inline: segment.type === ContentType.text,
+              'inline-flex py-2': segment.type === ContentType.image,
+            },
           )}
           onClick={() => setCollapseSegment(!collapseSegment)}
         >
-          {segment.text}
+          {segment.type === ContentType.text && <>{segment.content}</>}
+          {segment.type === ContentType.image && (
+            <Image src={segment.content} className='max-h-72 rounded-xl' />
+          )}
         </span>
       }
     >
@@ -354,7 +370,7 @@ function IdentifierSegment(segment: SourceRef, collapseParameters: boolean) {
   )
 }
 
-function DynamicSegment(segment: SourceRef, collapseParameters: boolean) {
+function DynamicSegment(segment: Reference, collapseParameters: boolean) {
   const [collapseSegment, setCollapseSegment] = useState(collapseParameters)
   useEffect(() => {
     setCollapseSegment(collapseParameters)
@@ -364,6 +380,7 @@ function DynamicSegment(segment: SourceRef, collapseParameters: boolean) {
     return (
       <Tooltip
         asChild
+        variant={segment.type === ContentType.image ? 'ghost' : 'inverse'}
         trigger={
           <span
             className={cn(colors.textColors.accentForeground, 'cursor-pointer')}
@@ -373,7 +390,12 @@ function DynamicSegment(segment: SourceRef, collapseParameters: boolean) {
           </span>
         }
       >
-        <div className='line-clamp-6'>{segment.text}</div>
+        {segment.type === ContentType.text && (
+          <div className='line-clamp-6'>{segment.content}</div>
+        )}
+        {segment.type === ContentType.image && (
+          <Image src={segment.content} className='max-h-72 rounded-xl' />
+        )}
       </Tooltip>
     )
   }
@@ -383,10 +405,16 @@ function DynamicSegment(segment: SourceRef, collapseParameters: boolean) {
       asChild
       trigger={
         <span
-          className={cn(colors.textColors.accentForeground, 'cursor-pointer')}
+          className={cn(colors.textColors.accentForeground, 'cursor-pointer', {
+            inline: segment.type === ContentType.text,
+            'inline-flex py-2': segment.type === ContentType.image,
+          })}
           onClick={() => setCollapseSegment(!collapseSegment)}
         >
-          {segment.text}
+          {segment.type === ContentType.text && <>{segment.content}</>}
+          {segment.type === ContentType.image && (
+            <Image src={segment.content} className='max-h-72 rounded-xl' />
+          )}
         </span>
       }
     >
@@ -395,28 +423,39 @@ function DynamicSegment(segment: SourceRef, collapseParameters: boolean) {
   )
 }
 
-function segmentMessage(
-  message: string,
+function computeSegments(
+  type: ContentType,
+  source: string,
   sourceMap: PromptlSourceRef[],
-  parameters: Record<string, unknown>,
+  parameters: string[],
 ): Segment[] {
   let segments: Segment[] = []
 
-  const firstSegment = message.slice(0, sourceMap[0]?.start ?? message.length)
+  // Filter source map references without value
+  sourceMap = sourceMap.filter(
+    (ref) => source.slice(ref.start, ref.end).trim().length > 0,
+  )
+
+  // Sort source map to ensure references are ordered
+  sourceMap = sourceMap.sort((a, b) => a.start - b.start)
+
+  const firstSegment = source.slice(0, sourceMap[0]?.start ?? source.length)
   if (firstSegment.length > 0) segments.push(firstSegment)
 
   for (let i = 0; i < sourceMap.length; i++) {
     segments.push({
       identifier:
-        sourceMap[i]!.identifier && !!parameters[sourceMap[i]!.identifier!]
+        sourceMap[i]!.identifier &&
+        parameters.includes(sourceMap[i]!.identifier!)
           ? sourceMap[i]!.identifier!
           : undefined,
-      text: message.slice(sourceMap[i]!.start, sourceMap[i]!.end),
+      content: source.slice(sourceMap[i]!.start, sourceMap[i]!.end),
+      type: type,
     })
 
-    const nextSegment = message.slice(
+    const nextSegment = source.slice(
       sourceMap[i]!.end,
-      sourceMap[i + 1]?.start ?? message.length,
+      sourceMap[i + 1]?.start ?? source.length,
     )
     if (nextSegment.length > 0) segments.push(nextSegment)
   }
@@ -424,7 +463,7 @@ function segmentMessage(
   return segments
 }
 
-function groupSegmentsByNewLine(segments: Segment[]) {
+function groupSegments(segments: Segment[]) {
   let groups: Segment[][] = []
   let currentGroup: Segment[] = []
 
@@ -447,3 +486,65 @@ function groupSegmentsByNewLine(segments: Segment[]) {
 
   return groups
 }
+
+const ContentImage = ({
+  index = 0,
+  color,
+  size,
+  image,
+  parameters = [],
+  collapseParameters = false,
+  sourceMap = [],
+}: {
+  index?: number
+  color: TextColor
+  size?: 'default' | 'small'
+  image: ImageContent['image']
+  parameters?: string[]
+  collapseParameters?: boolean
+  sourceMap?: PromptlSourceRef[]
+}) => {
+  if (
+    (typeof image !== 'string' && !(image instanceof URL)) ||
+    (!image.toString().startsWith('https') &&
+      !image.toString().startsWith('http://localhost'))
+  ) {
+    return (
+      <ContentText
+        index={index}
+        color={color}
+        size={size}
+        message={'<Image preview unavailable>'}
+      />
+    )
+  }
+
+  const TextComponent = size === 'small' ? Text.H6 : Text.H5
+
+  const segment = useMemo(
+    () =>
+      computeSegments(
+        ContentType.image,
+        image.toString(),
+        sourceMap,
+        parameters,
+      ),
+    [image, sourceMap, parameters],
+  )[0]
+
+  if (!segment) return null
+
+  return (
+    <TextComponent
+      color={color}
+      whiteSpace='preWrap'
+      wordBreak='breakAll'
+      key={`${index}`}
+    >
+      <SegmentComponent
+        segment={segment}
+        collapseParameters={collapseParameters}
+      />
+    </TextComponent>
+  )
+}
diff --git a/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx b/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx
index eb5e5f0fc..ba986b71b 100644
--- a/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx
+++ b/packages/web-ui/src/ds/molecules/Chat/MessageList/index.tsx
@@ -10,7 +10,7 @@ export function MessageList({
   collapseParameters,
 }: {
   messages: ConversationMessage[]
-  parameters?: Record<string, unknown>
+  parameters?: string[]
   collapseParameters?: boolean
 }) {
   return (
diff --git a/packages/web-ui/src/providers/CommitProvider.tsx b/packages/web-ui/src/providers/CommitProvider.tsx
index 4f5e1b743..e8b45284c 100644
--- a/packages/web-ui/src/providers/CommitProvider.tsx
+++ b/packages/web-ui/src/providers/CommitProvider.tsx
@@ -38,4 +38,4 @@ const useCurrentCommit = () => {
   return context
 }
 
-export { CommitProvider, useCurrentCommit }
+export { CommitProvider, useCurrentCommit, type ICommitContextType }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46b3e1cca..1a838f2cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,7 +27,7 @@ importers:
         specifier: ^3.645.0
         version: 3.679.0
       '@aws-sdk/s3-request-presigner':
-        specifier: ^3.645.0
+        specifier: ^3.679.0
         version: 3.679.0
       '@monaco-editor/react':
         specifier: ^4.6.0
@@ -117,8 +117,8 @@ importers:
         specifier: ^3.3.0
         version: 3.3.0
       lucide-react:
-        specifier: ^0.403.0
-        version: 0.403.0(react@18.3.1)
+        specifier: ^0.468.0
+        version: 0.468.0(react@18.3.1)
       monaco-editor:
         specifier: ^0.50.0
         version: 0.50.0
@@ -694,7 +694,7 @@ importers:
         specifier: ^3.645.0
         version: 3.679.0
       '@aws-sdk/s3-request-presigner':
-        specifier: ^3.645.0
+        specifier: ^3.679.0
         version: 3.679.0
       '@faker-js/faker':
         specifier: ^8.4.1
@@ -1062,8 +1062,8 @@ importers:
         specifier: ^24.1.0
         version: 24.1.3
       lucide-react:
-        specifier: ^0.403.0
-        version: 0.403.0(react@18.3.0)
+        specifier: ^0.468.0
+        version: 0.468.0(react@18.3.0)
       monaco-editor:
         specifier: ^0.50.0
         version: 0.50.0
@@ -8254,10 +8254,10 @@ packages:
   lucia@3.2.2:
     resolution: {integrity: sha512-P1FlFBGCMPMXu+EGdVD9W4Mjm0DqsusmKgO7Xc33mI5X1bklmsQb0hfzPhXomQr9waWIBDsiOjvr1e6BTaUqpA==}
 
-  lucide-react@0.403.0:
-    resolution: {integrity: sha512-ldD3NT444k4Mi+n+43xC8XaHr88MNdhOIApIE15r7O+PcVYEBXNOOFo904cBC6Hsja+zHc1lqw0mqUgBECeisw==}
+  lucide-react@0.468.0:
+    resolution: {integrity: sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
 
   luxon@3.5.0:
     resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
@@ -20046,11 +20046,11 @@ snapshots:
       '@oslojs/crypto': 1.0.1
       '@oslojs/encoding': 1.1.0
 
-  lucide-react@0.403.0(react@18.3.0):
+  lucide-react@0.468.0(react@18.3.0):
     dependencies:
       react: 18.3.0
 
-  lucide-react@0.403.0(react@18.3.1):
+  lucide-react@0.468.0(react@18.3.1):
     dependencies:
       react: 18.3.1