integrate-file-viewer

Name: integrate-file-viewer
Availability: InStock
Author: Cognite

Automate CogniteFileViewer setup for PDF, image, and text previews in Flows applications.

5|1|Updated Mar 4, 2026

Search Tags:#integration #react #javascript #configuration #file preview #cdf

Ready to run

npx skills add https://github.com/cognitedata/builder-skills --skill integrate-file-viewer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: integrate-file-viewer
Source: https://github.com/cognitedata/builder-skills/tree/main/skills/integrate-file-viewer
Command: npx skills add https://github.com/cognitedata/builder-skills --skill integrate-file-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-pdf, pdfjs-dist, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies integrating CogniteFileViewer into Flows applications to enable quick and reliable file previews for PDFs, images, and texts.

Core Features & Use Cases

File Preview Integration: Adds CogniteFileViewer to display PDFs, images, and text files directly within a Flows app.
Configuration Setup: Handles installation, Vite configuration, worker setup, and component usage with minimal user input.
Use Case: A developer needs to embed an interactive document viewer for project files, avoiding manual setup of multiple dependencies and configurations.

Quick Start

Insert the CogniteFileViewer component into your React app, passing the file source and SDK to enable in-app previews instantly.

Frequently Asked Questions about integrate-file-viewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I preview PDF and image files in a React app?▼

To preview PDF and image files in a React app, you can integrate a file viewer component that manages dependencies like react-pdf and pdfjs-dist. This automates configuration and renders documents directly within your application interface.

What is the best way to set up CDF file previews without manual configuration?▼

Setting up CDF file previews without manual configuration involves using an automated integration tool that handles Vite configuration and worker setup. This approach embeds the CogniteFileViewer component to instantly visualize files with minimal input.

Does CogniteFileViewer work with Vite for PDF rendering?▼

Yes, CogniteFileViewer works with Vite by automating the required configuration and worker setup for PDF rendering. It manages the integration of react-pdf and pdfjs-dist to ensure PDFs display correctly in your environment.

Why does PDF file preview fail after manual dependency installation in React?▼

PDF file preview often fails after manual dependency installation due to missing Vite configuration or incomplete worker setup. Automating this integration manages react-pdf and pdfjs-dist configurations to prevent rendering errors.

Do I need to manually configure pdfjs-dist workers to preview documents in Flows?▼

No, you do not need to manually configure pdfjs-dist workers to preview documents in Flows. The integration handles worker setup and dependency configuration automatically, enabling rapid deployment of file visualization.