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

#react #python #ai #programming

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: