Folder

A file tree beside a preview of the selected file, for showing the files an assistant wrote or read.

LLMs

Basic

Pass treeData with a content string on each file, and defaultSelectedFile to open one in the preview with its syntax highlighted.

Tree title

Set directoryTitle to put a heading above the tree, like the name of the project the files belong to.

Context menu

Pass contextMenu items to open a menu on right-click, and set contextMenu to false on a node to turn it off there.

Custom icons

Pass directoryIcons keyed by directory or a file extension to draw your own glyph for folders and each file type.

Controlled file

Pass selectedFile with onSelectedFileChange to open a file from outside the tree, or pass an empty path to close it.

Controlled folders

Pass expandedPaths with onExpandedPathsChange to open and close folders from outside, like expand all and collapse all buttons.

Load file contents

Pass fileContentService to load a file's contents when it is opened, instead of putting content on every node.

Custom preview

Pass previewRender a function of the open file to wrap or replace the preview, keeping the default one through originNode.

In context

The component inside real screens, with the components it usually sits beside.
A file browser with a search field above it that filters treeData down to the matching files and their folders.

Code review

A pull request review with the changed files in a tree and an assistant comment offering a fix below them.

Help center

A help center where folders are topics and each article opens as a page with buttons to rate it.

Generated project

An assistant reply that sets up a starter project, shows its files in a tree and offers it as a download.