File Upload

A file sharing system that integrates with chat interfaces to provide seamless file upload capabilities with AI agents. Supports drag-and-drop, file picker, and inline file management.

Installation

hax init
hax add composer file-upload

Component Setup

import { useFileUploadAction, FilePickerInput } from "@/hax/composer/file-upload";

export function ChatWithFileUpload() {
  const [artifacts, setArtifacts] = useState([]);

  useFileUploadAction({
    addOrUpdateArtifact: (type, data) => {
      setArtifacts(prev => [...prev, { type, data }]);
    }
  });

  return (
    <FilePickerInput onFileSelection={handleFiles} dragAndDropEnabled={true} />
  );
}