File

npx shadcn@latest add "@assistant-ui/file"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

File renders one file message part. Playable audio/* and video/* files stay inline with their player, filename, optional size, and download link. Every other file remains the compact icon row. With a runtime it renders straight from a message's file part; standalone you hand it the part yourself.

Getting started

import { File } from "@/components/assistant-ui/elements/file";
import { MessagePrimitive } from "@assistant-ui/react";

function AssistantMessage() {
  return (
    <MessagePrimitive.Root>
      <MessagePrimitive.Parts components={{ File }} />
    </MessagePrimitive.Root>
  );
}

import { File } from "@/components/assistant-ui/elements/file";

export function Attachment() {
  return (
    <File
      type="file"
      filename="report.pdf"
      mimeType="application/pdf"
      data="https://example.com/report.pdf"
      sourceType="url"
      status={{ type: "complete" }}
    />
  );
}

Anatomy

<div>
  <div data-slot="file-player">
    <div data-slot="audio-player | video-player" />
  </div>
  <div>
    <span data-slot="file-size" />
    <a data-slot="file-download" />
  </div>
</div>

The player shows the filename as its title.

The icon row remains for non-media files. File.Player routes playable audio and video data to the matching player: http(s), blob:, and data: URLs are safe to play, and raw base64 becomes a data URI with the part's MIME type. An id or another URL scheme keeps the plain row. The icon depends on mimeType: images get an image icon, PDFs and other text get a document icon, JSON gets a braces icon, audio and video get their own icons, and everything else gets a generic file icon. sourceType states how data is encoded on the wire: "url" for a link, "id" for an opaque reference the download link can't resolve on its own, or omitted to infer it. The size row only appears for inline data (base64 or a data: URI), since a URL or id reference carries no byte count to read.

Examples

Variants and sizes

variant and size are props of File.Root. File itself renders the defaults.

<File.Root variant="muted" size="sm">
  <File.Icon mimeType={part.mimeType} />
  <File.Name>{part.filename}</File.Name>
</File.Root>

Restyle the row

File.Root, File.Icon, File.Name, File.Size, File.Download, and File.Player are exported individually for a custom layout:

import { File } from "@/components/assistant-ui/elements/file";

export function CustomFileRow() {
  return (
    <File.Root variant="ghost">
      <File.Icon mimeType={part.mimeType} />
      <File.Name>{part.filename}</File.Name>
      <File.Download
        data={part.data}
        mimeType={part.mimeType}
        filename={part.filename}
        sourceType={part.sourceType}
      />
    </File.Root>
  );
}

export function CustomMediaFile() {
  return (
    <File.Player
      data={part.data}
      mimeType={part.mimeType}
      filename={part.filename}
      sourceType={part.sourceType}
    />
  );
}

API reference