skills.rest
mattwoodco
mattwoodcoCOMMUNITY
Explore all skills by this author →
Website𝕏@mattwoodcoGitHub

ai-rag-viewer

Renders PDF pages with RAG search highlight overlays and navigation controls.

3|Updated Feb 14, 2026
Search Tags:#pdf#rag#document#viewer#highlighting#react-pdf
One-click install
npx skills add https://github.com/mattwoodco/skills --skill ai-rag-viewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-rag-viewer
Source: https://github.com/mattwoodco/skills/tree/main/skills/ai-rag-viewer
Command: npx skills add https://github.com/mattwoodco/skills --skill ai-rag-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a seamless way to view and interact with PDF documents within an application, specifically highlighting relevant information found through Retrieval Augmented Generation (RAG) searches.

Core Features & Use Cases

  • PDF Rendering: Displays PDF pages using react-pdf (PDF.js).
  • RAG Highlight Integration: Visually marks text spans that match RAG search results directly on the PDF pages.
  • Navigation & Zoom: Includes controls for page turning, scrolling, and zooming in/out.
  • Use Case: When a user searches a large document repository and receives RAG results, this skill can display the relevant PDF, with the exact sentences or paragraphs from the search results highlighted, allowing for quick verification and context.

Quick Start

Add a PDF viewer component to your application using the ai-rag-viewer skill.

Frequently Asked Questions about ai-rag-viewer

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

FAQPage Schema
How do I highlight RAG search results on a PDF in a React application?▼

You can highlight RAG search results on a PDF by rendering pages with react-pdf and visually marking the specific text spans identified as relevant search results directly on the document pages.

Does the PDF viewer support zooming and page navigation controls?▼

Yes, the PDF viewer supports zooming and page navigation. It includes a toolbar for user interaction, allowing users to turn pages, scroll, and zoom in and out of the rendered PDF document.

What is the best way to display PDF documents with retrieval augmented generation context?▼

Displaying PDF documents with retrieval augmented generation context is best handled by rendering the PDF and highlighting exact sentences or paragraphs from RAG search results, allowing for quick verification and context.

How does react-pdf integrate with RAG systems to mark specific text spans?▼

react-pdf integrates with RAG systems by rendering the PDF pages while the viewer highlights specific text spans identified as relevant search results directly on those pages. PDF.js handles the underlying document rendering.

Can I use this PDF viewer for a large document repository?▼

Yes, you can use this viewer for a large document repository. When a user searches the repository and receives RAG results, the viewer displays the relevant PDF with the exact matching sentences or paragraphs highlighted.

What do I need to set up to render PDF documents with react-pdf?▼

To render PDF documents with react-pdf, you need a web application environment to add the PDF viewer component. The viewer uses PDF.js for rendering and includes a toolbar for user interaction with the displayed pages.

Related Skills

Explore More Software Engineering Skills→
mattwoodcomattwoodco
3

ai-rag-app

Set up a full-stack RAG application page with split-pane PDF chat and citation navigation.

Community
Advanced
philipcoller-777philipcoller-777

doc-reader

Extract text and data from diverse document formats into a unified envelope.

Community
Intermediate
ollieb89ollieb89

using-vector-databases

Implement vector database functionality for semantic search and RAG systems.

Community
Advanced
jasonkneenjasonkneen
471

pdf

Render PDF pages as images and extract text and form data.

Community
Basic