skills.rest
cognitedata
cognitedataOFFICIAL
Explore all skills by this author →
WebsiteGitHub

integrate-file-viewer

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
One-click install
npx skills add https://github.com/cognitedata/builder-skills --skill integrate-file-viewer
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
cognitedatacognitedata
5

graph-viewer

Embed interactive CDF data model graphs in React-based apps.

Official
Intermediate
magnus919magnus919
40

epub

Convert EPUB2 files to EPUB3 and extract knowledge from ebook documents.

Community
Advanced
ColbyRReichenbachColbyRReichenbach
1

React Dashboard Skill

Develop React dashboards with TypeScript, Tailwind CSS, and pre-built components.

Community
Intermediate
KuassKuass
1

pdf-extract

Extract text, images, and tabular data from PDF files.

Community
Intermediate