pip install django djangorestframework PyPDF2 openai

from django.db import models

class Document(models.Model):
f...

Managing contracts, agreements, or any business documents can be time-consuming and prone to errors. What if you could automatically extract key information like parties, important dates, and clauses from PDFs, all powered by AI?

In this tutorial, I’ll show you how to build a document insights tool using Django (Python) for the backend, React for the frontend, and OpenAI GPT API for AI-powered document analysis.

Tech Stack

• Backend: Django + Django REST Framework
• Frontend: React + Axios
• Database: SQLite
• AI: OpenAI
• PDF Parsing: PyPDF2

1. Backend Step 1: Install Dependencies

pip install django djangorestframework PyPDF2 openai

Step 2: Django Model for Documents

In api/models.py:

from django.db import models

class Document(models.Model):
file = models.FileField(upload_to='documents/')
uploaded_at = models.DateTimeField(auto_now_add=True)
extracted_text = models.TextField(blank=True, null=True)
insights = models.JSONField(blank=True, null=True)

Run migrations:

python manage.py makemigrations
python manage.py migrate

Step 3: Serializer

In api/serializers.py:

from rest_framework import serializers
from .models import Document

class DocumentSerializer(serializers.ModelSerializer):
class Meta:
model = Document
fields = ['id', 'file', 'uploaded_at', 'extracted_text', 'insights']

Step 4: Django API View Using OpenAI GPT

In api/views.py:

from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Document
from .serializers import DocumentSerializer
from PyPDF2 import PdfReader
from openai import OpenAI

# Initialize OpenAI client
client = OpenAI(api_key="YOUR_OPENAI_API_KEY")

class UploadDocument(APIView):
def post(self, request):
file = request.FILES['file']
doc = Document.objects.create(file=file)

# Extract text from PDF
reader = PdfReader(file)
text = ""
for page in reader.pages:
text += page.extract_text() or ""
doc.extracted_text = text

# Prepare AI prompt
prompt = f"""
You are an AI assistant that extracts structured information from documents.
For the following document text, provide:
1. Parties involved
2. Important dates
3. Key clauses
4. Any missing or inconsistent information
Return as JSON.

Document:
{text}
"""

# Call OpenAI API
response = client.chat.completions.create(
model="gpt-5-nano",  # use GPT-3.5 or GPT-4 if you have access
messages=[{"role": "user", "content": prompt}]
)

# Save AI insights
doc.insights = response.choices[0].message.content
doc.save()

serializer = DocumentSerializer(doc)
return Response(serializer.data)

Step 5: URLs

In api/urls.py:

from django.urls import path
from .views import UploadDocument

urlpatterns = [
path('upload-document/', UploadDocument.as_view(), name='upload-document'),
]

Include in project/urls.py:

from django.urls import path, include

urlpatterns = [
path('api/', include('api.urls')),
]

Step 6: React Frontend

Install Axios:

npm install axios

Create a new file: src/pages/DocumentInsights.jsx

import React, { useState } from 'react';
import axios from 'axios';

export default function DocumentInsights() {
const [file, setFile] = useState(null);
const [insights, setInsights] = useState(null);

const handleUpload = async () => {
const formData = new FormData();
formData.append("file", file);

try {
const { data } = await axios.post(
"http://127.0.0.1:8000/api/upload-document/",
formData
);
setInsights(JSON.parse(data.insights));
} catch (error) {
console.error(error);
}
};

return (
<div className="min-h-screen flex items-center justify-center">
<div className=" bg-gray-100 rounded-lg shadow-md p-6 w-full max-w-lg">
<h1 className="text-2xl font-semibold mb-4 text-center">
AI Document Insights
</h1>
<div>
<input  className="bg-white border rounded mb-4 p-4" type="file" onChange={(e) => setFile(e.target.files[0])} />
</div>
<div className='block'>
<button className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600' onClick={handleUpload}>Upload</button>
</div>
{insights && (
<div>
<h2>Parties:</h2> {insights.parties.join(", ")}
<h2>Dates:</h2> {insights.dates.join(", ")}
<h2>Key Clauses:</h2> {insights.key_clauses.join(", ")}
<h2>Missing Info:</h2> {insights.missing_info.join(", ")}
</div>
)}
</div>
</div>
);
}

src/App.js

import DocumentInsights from "./pages/DocumentInsights";
import './App.css'

function App() {
return (
<div>
<DocumentInsights />
</div>
);
}

export default App;

Make sure your backend allows CORS:

pip install django-cors-headers

In settings.py:

INSTALLED_APPS = [
....,
'corsheaders',
]

MIDDLEWARE = [
...,
'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOW_ALL_ORIGINS = True

Step 7: Test It

Run Django:

python manage.py runserver

Run React:

npm run dev

Open your browser, upload a PDF, and see AI-powered structured insights.