Natural Language to SQL: Building AI-Powered Database Query Interfaces with Django and React

Why Natural Language to SQL Matters in 2026

In 2026, the gap between business users who need data insights and the SQL skills required to extract them has never been wider — or easier to bridge. Large Language Models (LLMs) have matured to the point where converting plain English into accurate SQL queries is not just possible, but production-ready.

This guide walks you through building your own AI-powered database query interface using Django on the backend and React on the frontend, with an LLM middleware layer that translates natural language into optimized SQL.

How NL2SQL Works: The Architecture

A production-grade NL2SQL system has four main components:

1. Frontend (React) — A chat-like interface where users type questions in natural language
2. API Gateway (Django REST Framework) — Routes requests, manages sessions, and enforces permissions
3. LLM Orchestrator — The brain that translates natural language to SQL using schema context and few-shot examples
4. Query Executor — Validates, sanitizes, and runs the generated SQL against your database, returning results as JSON

The beauty of this architecture is that each component is independently testable and upgradeable.

Setting Up the Django Backend

Start by creating a Django app that handles API requests and database interactions:

# models.py
from django.db import models

class QueryHistory(models.Model):
    session_id = models.UUIDField()
    natural_language = models.TextField()
    generated_sql = models.TextField()
    result_json = models.JSONField(null=True, blank=True)
    execution_time_ms = models.IntegerField(null=True)
    created_at = models.DateTimeField(auto_now_add=True)
    success = models.BooleanField(default=True)

class SchemaMetadata(models.Model):
    table_name = models.CharField(max_length=255)
    column_name = models.CharField(max_length=255)
    data_type = models.CharField(max_length=100)
    description = models.TextField(blank=True)
    is_foreign_key = models.BooleanField(default=False)
    referenced_table = models.CharField(max_length=255, null=True, blank=True)

The SchemaMetadata model is crucial — it feeds the LLM with the exact structure of your database, enabling accurate SQL generation.

Building the LLM Orchestrator

This is where the magic happens. The orchestrator constructs a prompt that includes your database schema, example queries, and the user's question:

# services/nl2sql.py
import openai
from django.db import connection

def build_schema_context():
    from your_app.models import SchemaMetadata
    tables = {}
    for meta in SchemaMetadata.objects.all():
        if meta.table_name not in tables:
            tables[meta.table_name] = []
        tables[meta.table_name].append(f"{meta.column_name} ({meta.data_type})")
    return "\n\n".join(f"Table: {t}\n" + "\n".join(f"  - {c}" for c in cols) for t, cols in tables.items())

def generate_sql(natural_query: str) -> str:
    schema = build_schema_context()
    response = openai.chat.completions.create(
        model="gpt-4o",
        messages=[
            {"role": "system", "content": "You are an expert SQL query generator. Given a database schema and a natural language question, generate a safe, efficient SQL query. Rules: 1) Only use SELECT queries 2) Use LIMIT 100 3) Use proper JOIN syntax 4) Return ONLY valid SQL"}, 
            {"role": "user", "content": f"Schema:\n{schema}\n\nQuestion: {natural_query}\n\nSQL:"}
        ],
        temperature=0.1,
    )
    return response.choices[0].message.content.strip()

Creating the API Endpoint

With Django REST Framework, expose an endpoint that accepts a natural language query, generates SQL, executes it, and returns results:

# views.py
from rest_framework.views import APIView
from rest_framework.response import Response
from django.db import connection
from .services.nl2sql import generate_sql

class NLQueryView(APIView):
    def post(self, request):
        natural_query = request.data.get("query", "")
        if not natural_query:
            return Response({"error": "Query is required"}, status=400)
        generated_sql = generate_sql(natural_query)
        if not generated_sql.strip().upper().startswith("SELECT"):
            return Response({"error": "Only SELECT queries are permitted"}, status=400)
        with connection.cursor() as cursor:
            cursor.execute(generated_sql)
            columns = [col[0] for col in cursor.description]
            rows = cursor.fetchall()
        return Response({
            "sql": generated_sql,
            "columns": columns,
            "rows": rows,
        })

Building the React Frontend

On the React side, create a chat-like interface:

// NLQueryChat.jsx
import { useState } from 'react';

export default function NLQueryChat() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  const submitQuery = async () => {
    setLoading(true);
    const res = await fetch('/api/nl-query/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query }),
    });
    const data = await res.json();
    setResults(prev => [...prev, {
      question: query, sql: data.sql,
      columns: data.columns, rows: data.rows,
    }]);
    setQuery('');
    setLoading(false);
  };

  return (
    <div>
      {results.map((r, i) => (
        <div key={i}>
          <p>🔍 {r.question}</p>
          <pre>{r.sql}</pre>
          <table>
            <thead><tr>{r.columns.map(c => <th key={c}>{c}</th>)}</tr></thead>
            <tbody>{r.rows.map((row, j) => (
              <tr key={j}>{row.map((cell, k) => <td key={k}>{cell}</td>)}</tr>
            ))}</tbody>
          </table>
        </div>
      ))}
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <button onClick={submitQuery}>Ask</button>
    </div>
  );
}

Best Practices for Production

• Query Safety: Always validate generated SQL is read-only. Use a dedicated read-only database user.
• Schema Caching: Cache schema metadata and refresh only when migrations run.
• Prompt Engineering: Include 3-5 few-shot examples matching common query patterns.
• Rate Limiting: LLM API calls are expensive — implement rate limiting per user/session.
• Explain the SQL: Show generated SQL alongside results to build trust.
• Feedback Loop: Add thumbs-up/thumbs-down to track query quality.

Conclusion

Natural Language to SQL is no longer a futuristic concept — it's a practical, buildable feature that can dramatically improve how your team interacts with data. By combining Django's robust ORM and REST Framework with React's flexible UI and modern LLM APIs, you can create a query interface that puts the power of your database into the hands of every stakeholder.

At Gsoft Technologies, we specialize in building AI-powered web applications with Django and React. Contact us to discuss your next project.