We’ll use Langchain, OpenAI, Cloudflare R2 storage & Supabase vector storage to create our own Chat with a PDF app. You’ll have it running in 5 minutes!

Chat and ask questions to your PDF

​
Pre-requisites

To build your own Chat with PDF app you’ll need to have Supabase, OpenAI and Storage set up. If you haven’t, please start by doing that.

Supabase

Set up user authentication & PostgreSQL database using Supabase

Storage

Set up audio, pdf and image storage using Cloudflare R2

OpenAI

Set up OpenAI & use it’s various models throughout your app

Once that is ready, you can go ahead and follow the steps below.

​
Database tables

We’ll create 3 tables & a search function to retrieve vector embeddings.

Copy paste the following into your Supabase SQL editor:

Great job! The database setup is complete, and your app is ready to go. Visit http://localhost:3000/pdf to see it in action.

​
App Structure

  1. app/api/(apps)/pdf/* Key API routes:

    • app/api/(apps)/pdf/chat/route.ts: Interacts with OpenAI for chatting. You can customize the model and prompt. It streams responses to the user and updates the conversations table in Supabase.
    • app/api/(apps)/pdf/upload/route.ts: Uploads PDFs to Cloudflare R2, returns a public URL, and updates the documents table. It also checks the maximum number of files per user, and reduces user credits.
    • app/api/(apps)/pdf/vectorize/route.ts: Splits the uploaded PDF into chunks, vectorizes it, and stores the data in Supabase with metadata.
    • app/api/(apps)/pdf/delete/route.ts: Deletes data from both Supabase and Cloudflare R2.
    • app/api/(apps)/pdf/externaldoc/route.ts: Handles non-file uploads for online PDFs.

  2. /app/(apps)/pdf/* Contains all front-end logic, including paywall checks and pages for chatting with different PDFs based on document ID.

  3. /components/pdf/* Contains all front-end components unique to the PDF app.

  4. /components/chat/* Contains all components for the chat interface, also used in the regular chatbot.

If you have any questions, feel free to reach out to me on Twitter or Discord!

AnthropicVoice to notes