Build an AI-Powered Document Insights Tool with Django (Python), and React

Source: Dev.to

Overview

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

In this tutorial I’ll show you how to build a Document Insights tool using:

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

Backend

Step 1 – Install dependencies

pip install django djangorestframework PyPDF2 openai

Step 2 – Django model for documents

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

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

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-turbo 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

api/urls.py

from django.urls import path
from .views import UploadDocument

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

Add the app’s URLs to the project:

project/urls.py

from django.urls import path, include

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

Frontend (React)

Install Axios

npm install axios

DocumentInsights component

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>
      <h1>AI Document Insights</h1>
      <input type="file" onChange={e => setFile(e.target.files[0])} />
      <button onClick={handleUpload}>Upload</button>

      {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>
  );
}

App entry point

src/App.js

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

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

export default App;

🎉 You’re all set!

Run the Django server (python manage.py runserver) and the React development server (npm start). Upload a PDF through the UI, and the backend will return AI‑generated insights displayed in the frontend. Happy coding!

Enable CORS in Django

Make sure your backend allows CORS:

pip install django-cors-headers

In settings.py add the following:

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

Verify

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