Integrate File Viewer

Drops a production-ready CogniteFileViewer component into Flows apps with zero manual wiring. Handles PDFs (with page nav and zoom), images, Office docs (via CDF's conversion API), and text files. The real value is in what you don't have to touch: it configures the PDF.js worker, sets up Vite's optimizeDeps exclusion, and wires react-pdf at the correct version without you hunting down compatibility issues. Diagram annotations work automatically if you pass instanceId sources instead of raw file IDs. The skill copies eight library files into your project and walks through Vite config, dependency install, and component usage. Saves an hour of PDF viewer debugging.

skills.sh installs: 1.9K
GitHub stars: 6
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cognitedata/builder-skills --skill integrate-file-viewer --agent claude-code

Installs into .claude/skills of the current project.

Files

Integrate CogniteFileViewer

Add CogniteFileViewer to this Flows app to preview CDF files (PDF, image, text).

Dependencies

The file-viewer library files (copied in Step 2) require this npm package:

Package	Version
`react-pdf`	`^9.1.1`

pdfjs-dist ships as a dependency of react-pdf at the correct version — do not install it separately. react and @cognite/sdk are assumed to already be present in Flows apps.

Your job

Complete these steps in order. Read each file before modifying it.

Step 1 — Understand the app

Read these files before touching anything:

package.json — detect package manager (packageManager field or lock file) and existing deps
vite.config.ts — understand current Vite setup
The component where the viewer should be added

Step 2 — Copy the file-viewer source files

The file-viewer library lives in the code/ directory next to this skill file. Read and copy all files from there into src/cognite-file-viewer/ inside the app:

SKILL.md on GitHub