useFiles()

import { useFiles } from "mcp-use/react";
import { useState } from "react";

export default function FileView() {
  const { isSupported, upload, getDownloadUrl } = useFiles();
  const [fileId, setFileId] = useState<string>();

  if (!isSupported) {
    return <p>File operations require ChatGPT.</p>;
  }

  async function handleUpload(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.currentTarget.files?.[0];
    if (!file) return;

    const uploaded = await upload(file);
    setFileId(uploaded.fileId);
  }

  async function handleDownload() {
    if (!fileId) return;
    const { downloadUrl } = await getDownloadUrl({ fileId });
    window.open(downloadUrl, "_blank");
  }

  return (
    <div>
      <input type="file" onChange={handleUpload} />
      {fileId && <button onClick={handleDownload}>Download</button>}
    </div>
  );
}

function useFiles(): UseFilesResult;

interface UseFilesResult {
  isSupported: boolean;
  upload(file: File): Promise<FileMetadata>;
  getDownloadUrl(file: FileMetadata): Promise<{ downloadUrl: string }>;
}

type FileMetadata = {
  fileId: string;
};

const { downloadUrl } = await getDownloadUrl({ fileId });