File Browser Example Plugin
Example Paperclip plugin that demonstrates:
- projectSidebarItem — An optional "Files" link under each project in the sidebar that opens the project detail with this plugin’s tab selected. This is controlled by plugin settings and defaults to off.
- detailTab (entityType project) — A project detail tab with a workspace-path selector, a desktop two-column layout (file tree left, editor right), and a mobile one-panel flow with a back button from editor to file tree, including save support.
This is a repo-local example plugin for development. It should not be assumed to ship in a generic production build unless it is explicitly included.
Slots
| Slot | Type | Description |
|---|---|---|
| Files (sidebar) | projectSidebarItem |
Optional link under each project → project detail + tab. |
| Files (tab) | detailTab |
Responsive tree/editor layout with save support. |
Settings
Show Files in Sidebar— toggles the project sidebar link on or off. Defaults to off.Comment File Links— controls whether comment annotations and the comment context-menu action are shown.
Capabilities
ui.sidebar.register— project sidebar itemui.detailTab.register— project detail tabprojects.read— resolve projectproject.workspaces.read— list workspaces and read paths for file access
Worker
- getData
workspaces—ctx.projects.listWorkspaces(projectId, companyId)(ordered, primary first). - getData
fileList—{ projectId, workspaceId, directoryPath? }→ list directory entries for the workspace root or a subdirectory (Nodefs). - getData
fileContent—{ projectId, workspaceId, filePath }→ read file content using workspace-relative paths (Nodefs). - performAction
writeFile—{ projectId, workspaceId, filePath, content }→ write the current editor buffer back to disk.
Local Install (Dev)
From the repo root, build the plugin and install it by local path:
pnpm --filter @paperclipai/plugin-file-browser-example build
pnpm paperclipai plugin install ./packages/plugins/examples/plugin-file-browser-example
To uninstall:
pnpm paperclipai plugin uninstall paperclip-file-browser-example --force
Local development notes:
- Build first. The host resolves the worker from the manifest
entrypoints.worker(e.g../dist/worker.js). Runpnpm buildin the plugin directory before installing so the worker file exists. - Dev-only install path. This local-path install flow assumes this monorepo checkout is present on disk. For deployed installs, publish an npm package instead of depending on
packages/plugins/examples/...existing on the host. - Reinstall after pulling. If you installed a plugin by local path before the server stored
package_path, the plugin may show status error (worker not found). Uninstall and install again so the server persists the path and can activate the plugin. - Optional: use
paperclip-plugin-dev-serverfor UI hot-reload withdevUiUrlin plugin config.
Structure
src/manifest.ts— manifest withprojectSidebarItemanddetailTab(entityTypes["project"]).src/worker.ts— data handlers for workspaces, file list, file content.src/ui/index.tsx—FilesLink(sidebar) andFilesTab(workspace path selector + two-panel file tree/editor).