ai-rag-app

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ai-rag-ingest, ai-rag-vectors, ai-rag-chat, ai-rag-viewer, auth, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a complete, ready-to-integrate page for building Retrieval Augmented Generation (RAG) applications, enabling users to chat with their documents and get precise, source-cited answers.

Core Features & Use Cases

  • Interactive Document Chat: Upload PDFs and ask questions, receiving answers grounded in the document content.
  • Source Citation: Answers include clickable citations that highlight the exact source text in the PDF viewer.
  • Split-Pane Interface: Combines PDF upload, document list, chat interface, and PDF viewer in a cohesive UI.
  • Use Case: Developers can quickly add a powerful document-based Q&A feature to their applications, allowing users to interact with uploaded knowledge bases or reports.

Quick Start

Set up the AI RAG application page by navigating to the /rag route in your application.

Frequently Asked Questions about ai-rag-app

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

FAQPage Schema
How do I build a RAG application with Next.js for PDF chat?

To build a RAG application with Next.js, use a Skill that sets up a split-pane page for PDF upload, document management, vector search, and AI chat. It provides a ready-to-integrate interface at the /rag route, requiring App Router and authentication.

How does PDF citation navigation work in a RAG chat interface?

PDF citation navigation works by linking AI chat answers to the exact source text in the document viewer. When you ask questions, the RAG interface provides clickable citations that highlight the corresponding text within the uploaded PDF.

Do I need authentication to set up a document ingestion and vector search interface?

Yes, authentication is required to set up the document ingestion and vector search interface. The full-stack RAG application page integrates these functions and mandates user authentication to manage documents and access the chat features.

Can I use TypeScript to add source-cited document Q&A to my existing app?

Yes, you can use TypeScript to add source-cited document Q&A to your existing app. The Skill provides a complete page that integrates document ingestion, embedding, and AI chat, allowing users to interact with uploaded knowledge bases.

What is the best way to implement a split-pane UI for document upload and viewing?

The best way to implement a split-pane UI for document upload and viewing is using a full-stack RAG application page. It combines PDF upload, document list management, chat interface, and a PDF viewer in a cohesive layout for precise source-cited answers.