Forem: Sumit Kumar

AI-Powered API Gateway with Spring Boot: Turning Natural Language into Microservice Calls

Sumit Kumar — Thu, 23 Apr 2026 09:42:25 +0000

Microservices + AI: Natural Language API Gateway (Spring Boot)

Send plain English like "order 2 laptops" → get a real API call executed.

What This Project Does

You hit one endpoint with a sentence. The gateway figures out which microservice to call, extracts the payload, and executes the request — no JSON crafting needed on the client side.

🤔 Why Does This Project Exist? The Problem It Solves

Every REST API today has the same fundamental friction: the client must know the contract.

To create an order, you need to know:

The endpoint is POST /orders (not /order, not /createOrder)
The payload needs product and quantity (not item and count)
Content-Type must be application/json
The server returns 201, not 200 For machine-to-machine communication, this is fine. For humans, chatbots, voice interfaces, or any conversational UI — it's a wall.

This gateway removes that wall. It adds a semantic translation layer that accepts intent in plain English and handles all the contract mapping internally. Your microservices don't change. Your clients don't need to learn your API.

The 4 Services

Service	Port	Job
AI Gateway	8080	Entry point — takes text, runs AI, routes
User Service	8081	Handles users
Order Service	8082	Handles orders
Payment Service	8083	Handles payments

📨 The Request & Response Models

// RequestDTO.java — what comes in
@Data
public class RequestDTO {
    private String input;   // "Create a new user named Sumit with email sumit@test.com"
    private String apiKey;  // stubbed for future JWT-based auth
}

// ResponseDTO.java — what goes out
@Data
@Builder
public class ResponseDTO {
    private String mappedApi;              // "/users"
    private String method;                 // "POST"
    private Map<String, Object> payload;   // {"name":"Sumit","email":"sumit@test.com"}
    private String response;               // raw downstream service response
    private String validationStatus;       // APPROVED / REJECTED / UNMAPPED
    private String threatStatus;           // NONE / LOW / MEDIUM / HIGH
    private String aiProvider;             // "groq" or "ollama"
}

Request Lifecycle (5 Steps)

Input: "I want to order 2 laptops"

Validate — LLM call #1: Is this a threat? SQL injection? Gibberish?
Short-circuit — If threat is HIGH or input is invalid → reject immediately, no further calls
Map intent — LLM call #2: What API does this map to?
Route — /orders → http://localhost:8082/orders
Execute — HTTP call to Order Service, return response

LLM #1 output:

{ "valid": true, "reason": "Normal order request.", "threat": "NONE" }

LLM #2 output:

{ "endpoint": "/orders", "method": "POST", "payload": { "product": "laptop", "quantity": "2" } }

Final response:

{
  "mappedApi": "/orders",
  "method": "POST",
  "payload": { "product": "laptop", "quantity": "2" },
  "response": "{\"id\":\"ord_001\",\"status\":\"PENDING\"}",
  "validationStatus": "APPROVED",
  "threatStatus": "NONE",
  "aiProvider": "groq"
}

Project Structure

ai-gateway/
└── src/main/java/com/sumit/aigateway/
    ├── controller/GatewayController.java   ← single entry point
    ├── service/
    │   ├── AiService.java                  ← LLM calls (Groq / Ollama)
    │   ├── GatewayService.java             ← orchestration pipeline
    │   └── RoutingService.java             ← maps endpoint → service URL
    ├── client/DownstreamClient.java        ← calls downstream microservices
    ├── filter/RateLimitFilter.java         ← pre-request rate limiting
    └── model/
        ├── RequestDTO.java                 ← input model
        └── ResponseDTO.java                ← output model

Key Design Decisions

Two LLM calls, not one

Validation and mapping are kept separate. If validation fails, the second LLM call never happens — saves cost and latency.

`parseJson()` sanitizer

LLMs sometimes wrap JSON in markdown fences (json) even when told not to. This method strips them before parsing, preventing a Jackson crash.

Three response states

State	Meaning
`APPROVED`	All good — downstream service was called
`REJECTED`	Threat detected — blocked at validation
`UNMAPPED`	Valid input, but LLM couldn't match a known endpoint

UNMAPPED prevents a hallucinated endpoint like /unicorns from causing a 500 error.

`startsWith` in routing

/users matches both /users (create) and /users/123 (get by ID) — one rule covers all path variants.

`temperature: 0.1`

Near-deterministic LLM output. Creativity is the enemy when you need consistent, parseable JSON every time.

Groq vs Ollama — one config line switch

app:
  ai-provider: groq   # change to "ollama" for fully local inference

Factor	Groq	Ollama
Speed	~300–600ms	1–5s (hardware-dependent)
Cost	Free tier, pay-per-token	Free forever
Data privacy	Leaves your network	100% local
Best for	Production, low latency	Dev, private/air-gapped

Both run the same Llama model — the difference is purely infrastructure.

⚙️ GatewayService — The Orchestration Pipeline

@Slf4j
@Service
public class GatewayService {

    @Value("${app.ai-provider}") private String aiProvider;

    private final AiService aiService;
    private final RoutingService routingService;
    private final DownstreamClient downstreamClient;
    private final ObjectMapper objectMapper = new ObjectMapper();

    public ResponseDTO process(RequestDTO request) throws Exception {
        String userInput = request.getInput();
        log.info("Processing input: {}", userInput);

        // ── Step 1: Validate & detect threats ────────────────────────────
        String validationRaw = aiService.validateRequest(userInput);
        JsonNode validation  = parseJson(validationRaw);

        String threat   = validation.path("threat").asText("NONE");
        boolean isValid = validation.path("valid").asBoolean(true);

        if (!isValid || "HIGH".equals(threat)) {
            return ResponseDTO.builder()
                .validationStatus("REJECTED")
                .threatStatus(threat)
                .response("Rejected: " + validation.path("reason").asText())
                .aiProvider(aiProvider)
                .build();
        }

        // ── Step 2: Map natural language → API intent ─────────────────────
        String mappingRaw    = aiService.mapNaturalLanguageToApi(userInput);
        JsonNode mapping     = parseJson(mappingRaw);

        String endpoint      = mapping.path("endpoint").asText("").trim();
        String method        = mapping.path("method").asText("POST").trim();
        JsonNode payloadNode = mapping.path("payload");

        // ── Step 3: Guard against hallucinated endpoints ──────────────────
        if (endpoint.isEmpty() || !routingService.isKnownEndpoint(endpoint)) {
            return ResponseDTO.builder()
                .validationStatus("UNMAPPED")
                .threatStatus(threat)
                .response("Could not map to a known API. Try: " +
                          "'Create user', 'Place order', 'Process payment'")
                .aiProvider(aiProvider)
                .build();
        }

        // ── Step 4: Build payload map from dynamic JsonNode ───────────────
        Map<String, Object> payloadMap = new HashMap<>();
        if (payloadNode.isObject()) {
            payloadNode.fields().forEachRemaining(e ->
                payloadMap.put(e.getKey(), e.getValue().asText())
            );
        }

        // ── Step 5: Route and execute ─────────────────────────────────────
        String downstreamUrl   = routingService.resolveDownstreamUrl(endpoint);
        String serviceResponse = downstreamClient.call(method, downstreamUrl, payloadMap);

        return ResponseDTO.builder()
            .mappedApi(endpoint)
            .method(method)
            .payload(payloadMap)
            .response(serviceResponse)
            .validationStatus("APPROVED")
            .threatStatus(threat)
            .aiProvider(aiProvider)
            .build();
    }

    private JsonNode parseJson(String raw) throws Exception {
        String clean = raw.replaceAll("(?s)```

json|

```", "").trim();
        int start = clean.indexOf('{');
        int end   = clean.lastIndexOf('}');
        if (start >= 0 && end > start) clean = clean.substring(start, end + 1);
        return objectMapper.readTree(clean);
    }
}

Core Architecture Boundary

Natural Language Input
        │
   [AiService]          ← interprets intent only, no business logic
        │
   Structured JSON       ← AI's job ends here
        │
  [RoutingService]       ← pure Java, maps endpoint strings to URLs
        │
  [DownstreamClient]     ← HTTP caller
        │
  ┌─────────────────────────────────────────┐
  │  User :8081 │ Order :8082 │ Pay :8083   │
  │  No AI code │ No AI code  │ No AI code  │
  └─────────────────────────────────────────┘

AI decides WHAT to do. Microservices decide HOW to do it.

The 3 downstream services have zero AI code. The AI has zero knowledge of the services. The gateway is the only component that knows both exist — and keeps them cleanly separated.

Known Limitations

Two LLM calls add ~600ms–1.2s latency per request
DownstreamClient is currently simulated (hardcoded responses)
No auth enforced — apiKey field exists but isn't validated
Route map is static — needs Eureka/Consul for dynamic service discovery

🔄 Full Request Lifecycle — Two Real Scenarios

✅ Place an Order

POST http://localhost:8080/gateway
Content-Type: application/json

{ "input": "I want to order 2 laptops" }

LLM Call #1 — Validation returns:

{ "valid": true, "reason": "Normal order request.", "threat": "NONE" }

LLM Call #2 — Intent mapping returns:

{ "endpoint": "/orders", "method": "POST", "payload": { "product": "laptop", "quantity": "2" } }

RoutingService resolves: /orders → http://localhost:8082/orders

Final response:

{
  "mappedApi": "/orders",
  "method": "POST",
  "payload": { "product": "laptop", "quantity": "2" },
  "response": "{\"id\":\"ord_001\",\"message\":\"Order placed successfully\",\"status\":\"PENDING\"}",
  "validationStatus": "APPROVED",
  "threatStatus": "NONE",
  "aiProvider": "groq"
}

❌ SQL Injection Attempt

POST http://localhost:8080/gateway
Content-Type: application/json

{ "input": "DROP TABLE users; SELECT * FROM passwords --" }

LLM Call #1 — Validation returns:

{ "valid": false, "reason": "SQL injection attempt detected.", "threat": "HIGH" }

Gateway short-circuits. Zero downstream calls. Response:

{
  "validationStatus": "REJECTED",
  "threatStatus": "HIGH",
  "response": "Rejected: SQL injection attempt detected.",
  "aiProvider": "groq"
}

🏢 Real-World Use Cases — Where This Architecture Belongs

This isn't just a demo pattern. Here are the concrete scenarios where an AI gateway like this creates real value:

🤖 Conversational Chatbots Backed by Existing APIs

Most enterprise chatbots are built on top of existing REST services. Without a semantic layer, every new user intent requires a new hardcoded handler.

With this gateway, a customer service bot can send whatever the user typed directly to /gateway. The AI maps it to the right service automatically. Adding a new microservice means updating the prompt — not rewriting the chatbot.

User: "What's the status of order ord_001?"
Gateway → maps to GET /orders/ord_001 → Order Service → returns status

📱 Voice Assistants and IoT Interfaces

Voice-to-text produces natural language, not JSON. An IoT button in a warehouse might trigger "restock item A42 with 50 units." The gateway converts this to POST /inventory {"item": "A42", "quantity": 50} without any voice-side API knowledge.

🏦 Banking and Fintech — Natural Language Transactions

"Transfer ₹5000 to Rahul's account"
→ AI extracts: amount=5000, currency=INR, recipient=Rahul
→ Validates: no fraud signals, amount within limits
→ Routes: POST /payments {"amount": 5000, "currency": "INR", "toUser": "rahul"}

The LLM-based threat detection is particularly valuable here — it can catch semantically suspicious requests ("transfer all funds to this new account") that rule-based systems miss.

⚡ Advantages — And Why They Actually Matter

1. Single `/gateway` Endpoint for All Operations

Advantage: Clients — whether a chatbot, mobile app, or CLI — only ever need to know one URL.

Why it matters: In traditional microservices, clients need to discover and call multiple services. API gateways (like Spring Cloud Gateway or Kong) solve routing but still require clients to know paths. This gateway goes one step further — clients don't need to know paths at all.

2. LLM-based Threat Detection vs. Rule-based Filtering

Advantage: Catches semantically malicious inputs that regex and keyword lists miss.

Why it matters: A traditional WAF (Web Application Firewall) blocks DROP TABLE but not dRoP/**/TaBlE or a carefully crafted multi-step injection. The LLM understands intent. The cost is latency — which is why this is best combined with traditional filters, not used as a replacement.

3. Zero Changes to Existing Microservices

Advantage: The User Service, Order Service, and Payment Service are completely unaware of the AI layer.

Why it matters: Your microservices stay clean, independently testable, and deployable on their own schedules. You're not introducing AI coupling into domain logic. A team owning the Order Service doesn't need to know or care that an LLM sits upstream. If the AI layer is removed or replaced tomorrow, all three microservices are untouched.

4. Provider-Agnostic LLM Integration

Advantage: Switch between Groq (cloud, fast) and Ollama (local, private) with one config line.

Why it matters: Cloud LLMs have latency, cost, and data-privacy implications. Local LLMs have hardware requirements. Supporting both lets you use Ollama in development and air-gapped environments, Groq in production — without branching your codebase.

5. Explicit `UNMAPPED` State

Advantage: When the LLM can't map an input, the system tells the caller gracefully instead of throwing a 500.

Why it matters: LLMs hallucinate. Assuming the model always maps correctly leads to silent failures or cryptic errors. The UNMAPPED state is honest — "I understood your input but couldn't find a matching API" — and gives the caller actionable information.

💡 Final Thoughts

The design principle this microservices project proves:

AI decides WHAT to do. Microservices decide HOW to do it.

AiService interprets. RoutingService routes. DownstreamClient calls the right microservice. Each layer is independently replaceable — swap Groq for GPT-4, swap RestTemplate for WebClient, swap the static route map for Eureka service discovery — and none of the other layers notice.

The three microservices (User, Order, Payment) know nothing about AI. The AI knows nothing about the microservices. The gateway is the only component that knows both — and it keeps them cleanly separated.

That's what good AI integration in a microservices architecture looks like. AI handles ambiguity at the edge. Microservices handle reliability at the core. The two never bleed into each other.

# The End of the Era of Manual Hard Coding(Collaborated With Claude Sonnet 4.6)

Sumit Kumar — Sun, 29 Mar 2026 19:07:32 +0000

How I Built a Complete AI Code Review Website Just by Prompting

The Old World of Coding

Not long ago, building a web application meant:

Spending weeks or months writing code line by line
Memorizing hundreds of syntax rules
Googling every small error for hours
Hiring expensive developers just to build a simple website
Reading 500-page documentation before writing a single line
Debugging until 3 AM over a missing semicolon

That world is gone forever.

What I Just Did in ONE Session

Today, I sat down with Claude Sonnet and ChatGPT and said:

"Build me an AI Code Review web application from scratch"

That's it.

No manual coding. No documentation reading. No Stack Overflow. No hiring a developer.

And within a single session — I had a complete, fully working web application running on my machine.

What The App Can Do

The app I built is not a simple "Hello World" project. It is a professional-grade AI Code Review Tool that:

✅ Supports Python, JavaScript and Java
✅ Auto-detects the programming language
✅ Analyzes code quality automatically
✅ Shows cyclomatic complexity of every function
✅ Detects security vulnerabilities
✅ Gives code quality score (0–100)
✅ Suggests improvements and best practices
✅ Fixes code automatically
✅ Beautiful dark-themed responsive UI
✅ Real-time line numbers in code editor
✅ REST API backend with Flask
✅ Fully working frontend with HTML, CSS & JS

All of this — built just by prompting.

The Tools I Used

Claude Sonnet 4.6  +  ChatGPT

That's it. Nothing else.

No frameworks installed manually. No boilerplate written by hand. No design decisions made manually. Just natural language conversations.

How It Worked — My Exact Process

Step 1 — I described what I wanted

I simply typed:

"Make me an AI code review web application
that checks test cases, analyzes complexity,
supports Python JavaScript and Java,
with a beautiful dark UI"

Step 2 — AI generated everything

Within seconds I had:

backend/
├── app.py           ← Flask API server
├── code_analyzer.py ← Static analysis engine
├── test_runner.py   ← Test execution engine
└── ai_reviewer.py   ← AI reviewer

frontend/
├── index.html       ← Complete webpage
├── css/style.css    ← Full dark theme CSS
└── js/app.js        ← All JavaScript logic

Step 3 — I just ran the commands

pip install flask flask-cors python-dotenv
python app.py

And opened the browser. That was it.

What Would This Have Taken Before AI?

	Before AI (Manual Coding)	After AI (Prompt Coding)
Time needed	2–4 weeks	1 session (few hours)
Skills needed	Python, JS, CSS, HTML, Flask, REST APIs	Ability to describe what you want
Team size	2–3 developers	Just you
Documentation read	Flask docs, MDN, etc.	Zero
Stack Overflow	100+ searches	Zero searches
Debugging hours	20–40 hours	Near zero
Cost	$2,000 – $5,000	$0 – $20/month (AI sub)

The Shift That Is Happening Right Now

We are living through the biggest shift in software development history.

Watch how manual coding transforms itself into AI coding — same task, different era:

🕰️ Manual Coding Era — Setting Up Flask with CORS

# Step 1: Google "how to create Flask app"
# Step 2: Read documentation for 30 minutes
from flask import Flask          # ← finally figured this out

# Step 3: Google "how to enable CORS in Flask"
# Stack Overflow: 47 answers... which one is right?
# Try 1 → AttributeError. Nope.
# Try 2 → ImportError. Nope.
# Try 3 → works but breaks on POST requests
# 3 hours later...

from flask_cors import CORS      # ← found the right package... maybe
app = Flask(__name__)
CORS(app)                        # ← fingers crossed

# Step 4: Test it. CORS error in browser. Again.
# Step 5: Cry. Google again. Another hour gone.
# Step 6: Realize you needed CORS(app, resources={...})
# Total time: 4 hours for 3 lines of working code

⚡ AI Coding Era — Same Task, 8 Seconds

You:  "Build me a Flask API with CORS enabled,
       support POST requests, and use environment
       variables for configuration"

Claude: *thinks for 3 seconds*

# ✅ Generated instantly — no Googling, no Stack Overflow
import os
from flask import Flask, request, jsonify
from flask_cors import CORS
from dotenv import load_dotenv

load_dotenv()

app = Flask(__name__)
CORS(app, resources={
    r"/api/*": {
        "origins": os.getenv("ALLOWED_ORIGINS", "*"),
        "methods": ["GET", "POST", "OPTIONS"],
        "allow_headers": ["Content-Type", "Authorization"]
    }
})

@app.route('/api/review', methods=['POST'])
def review_code():
    data = request.get_json()
    if not data or 'code' not in data:
        return jsonify({"error": "No code provided"}), 400
    # ... rest of logic
    return jsonify({"status": "success"}), 200

if __name__ == '__main__':
    app.run(debug=os.getenv("DEBUG", False),
            port=int(os.getenv("PORT", 5000)))

You:  python app.py
Done. ✅  Zero errors. First try.

The code didn't change. The developer's struggle did.

Manual coding didn't disappear — it evolved. Every painful hour of Googling, every Stack Overflow rabbit hole, every 3 AM debugging session — all of that tribal knowledge got absorbed into the AI. And now it executes in seconds, on demand, for anyone.

What This Means For Developers

❌ The Bad News (for some)

Simple repetitive coding jobs will disappear
Junior developers who only write boilerplate will be replaced
Agencies charging $10,000 for simple websites will lose business

✅ The Good News (for everyone)

Anyone with an idea can now build it
Developers can focus on creativity, not syntax
Startups can build MVPs in days, not months
Students can learn by building real projects
Non-technical founders can create prototypes
The barrier to entry is now just having an idea

The New Skill That Matters

The most valuable skill in tech is no longer:

❌ Memorizing syntax
❌ Knowing every API by heart
❌ Writing boilerplate code

The most valuable skill is now:

✅ PROMPTING — knowing how to describe what you want clearly and precisely

This is called Prompt Engineering and it is the new programming language that everyone needs to learn.

Claude Sonnet 4.6 — The Real Power Behind This Project

What I Asked

I gave Claude this single prompt:

"Build a Flask API that analyzes Python code,
detects security vulnerabilities, calculates
cyclomatic complexity, and returns a quality
score from 0–100"

What It Delivered

It returned 340 lines of working, structured code — with proper error handling, docstrings, modular functions, and inline comments explaining every decision.

No hallucinated libraries. No broken imports. No syntax errors. First try.

What Claude Handled That Impressed Me Most

Most AI tools struggle when requirements get complex. Claude did not.

In one prompt I asked for:

✅ REST API with 6 endpoints
✅ Static analysis for 3 languages
✅ Cyclomatic complexity calculation
✅ Security vulnerability detection
✅ A scoring algorithm (0–100)
✅ Error handling for malformed input
✅ CORS configuration
✅ Environment variable support

It delivered all 8 requirements. First response. Zero revisions needed.

That is not a tool. That is a senior developer who never sleeps, never complains, and works in seconds.

The Numbers That Say It All


Lines of code generated	1,300+
Requirements fulfilled	100%
Revisions needed	~2 minor
Time taken	Under 1 hour
Senior developer equivalent	~3 weeks of work

The Moment I Realized Claude Was Different

Halfway through the project, I changed my mind.

I told Claude:

"Actually, instead of just Python support, add JavaScript and Java too — and make the language auto-detection work without the user selecting anything"

A human developer would have said: "That changes the whole architecture. Give me two days."

Claude responded in 8 seconds with updated code across four files simultaneously — perfectly integrated, no broken references, no missed edge cases.

That is when I understood this is not just autocomplete. This is a thinking collaborator.

Claude Sonnet 4.6 vs ChatGPT — Real Differences I Observed

Capability	Claude Sonnet 4.6	ChatGPT
Multi-file project generation	Entire project in one response	Usually one file at a time
Code consistency across files	Variable names match perfectly	Sometimes inconsistent
Long context handling	Remembers full project structure	Can drift in long sessions
Explanation quality	Explains why, not just what	Explains what mostly
Security awareness	Flags risky patterns proactively	Flags only when asked
Following complex requirements	Rarely misses a requirement	Occasionally skips details
Code readability	Clean, professional structure	Functional but sometimes messy
Best used for	Full project architecture	Quick fixes and debugging

Together — they are unstoppable.

⚠️ Honest disclaimer: AI-generated code still needs human review before production deployment. I reviewed the output, tested it, and validated the logic. The AI built it — I verified it.

This is what separates a developer who uses AI from someone who just runs it blindly.

The Proof — My App Running Live

🖥️  AI Code Review Tool
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📁 Project Structure:
   7 files
   1300+ lines of code
   Full backend + frontend

🚀 Features:
   • Auto language detection
   • Code quality scoring
   • Complexity analysis
   • Security checks
   • Fix suggestions

⏱️  Time to build: 1 session
💬  Method: Just prompting
🧑‍💻  Manual code written: ~0 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

What Is Coming Next

This is just the beginning.

Year	What AI Can Do
2024	AI writes code from prompts
2025	AI builds entire applications
2026	AI deploys and maintains apps
2027	AI designs, builds, tests, and ships entire products autonomously

The question is no longer "Can you code?"

The question is now:

"Can you think clearly enough to describe what you want to build?"

Conclusion

The era of manually typing every line of code is ending.

Not because coding is dead — but because the barrier between idea and reality has been removed.

Today, if you have:

✅ A clear idea
✅ A good prompt
✅ Claude or GPT open in your browser

You can build anything.

The most exciting time in tech history is not coming.

It is already here.

"The best code is the code you never had to manually write."

— Every developer in 2025

About This Article


Written by	Sumit Kumar
Project	AI Code Review Tool
Built with	Claude Sonnet 4.6 + ChatGPT
Time taken	1 session
Lines of code written manually	~0

I Built a RAG-Based PDF Reader Web App Using Node.js, LangChain, Ollama, and Hugging Face

Sumit Kumar — Wed, 25 Mar 2026 17:40:33 +0000

I Built a RAG-Based PDF Reader Web App Using Node.js, LangChain, Ollama, and Hugging Face

Turn any PDF into an interactive AI knowledge base using Retrieval-Augmented Generation (RAG).

If you've ever wanted to upload a PDF and chat with it like ChatGPT, this project does exactly that.

I built a RAG-based PDF Reader Web App that allows users to:

📄 Upload a PDF file
🔍 Extract and process the content
✂️ Split the content into chunks
🧠 Generate embeddings locally
💾 Store them in a vector store
🎯 Retrieve relevant sections based on user questions
🤖 Generate grounded answers using a local LLM

This project combines traditional web development with modern AI application design, making it a great hands-on example of how RAG works in practice.

💡 Live Idea of the Project

The goal of this app is simple:

Upload a PDF and ask questions about its content in natural language.

Instead of manually searching through long reports, research papers, notes, books, or documentation, users can just ask:

"What is the main topic of this document?"
"Summarize chapter 2"
"What are the important conclusions?"
"What technologies are mentioned in the PDF?"

The application finds the most relevant content from the uploaded PDF and uses that context to answer the question.

📦 GitHub Repository

You can find the full source code here:

🔗 GitHub: https://github.com/SumitK25/rag-pdf-webapp

If you like the project, feel free to ⭐ star the repository, fork it, or contribute improvements!

🧩 What is RAG?

RAG stands for Retrieval-Augmented Generation.

It is a technique that improves LLM responses by combining two key steps:

Retrieval – Search for the most relevant information from your own data
Generation – Pass that retrieved information to a language model to generate an answer

Instead of relying only on what the model already knows, RAG helps the model answer based on specific external knowledge, such as:

📄 PDFs
📝 Documents
📒 Notes
🏢 Internal company data
📚 Research papers
📖 Support manuals

Why RAG is Useful

Large language models are powerful, but they have some limitations:

❌ They may hallucinate
❌ They may not know your private data
❌ They may not know newly added content
❌ They may answer confidently even when wrong

RAG helps solve this by providing the model with relevant context at query time.

In this project, that context comes from the uploaded PDF.

✨ Project Features

Here are the main features of this application:

✅ Upload PDF files from the browser
✅ Extract text content from PDF documents
✅ Split the document into manageable overlapping chunks
✅ Convert chunks into embeddings using a local embedding model
✅ Store embeddings in memory for semantic retrieval
✅ Ask questions about the uploaded PDF
✅ Retrieve the top relevant chunks
✅ Generate answers using Ollama
✅ Keep short chat history for conversational continuity
✅ Clear chat and reset the app when needed
✅ Modern and clean chat-style web interface

🛠️ Tech Stack

This project uses the following technologies.

Frontend

Technology	Purpose
HTML	Page structure
CSS	Styling and layout
Vanilla JavaScript	Interactivity and API calls

Backend

Technology	Purpose
Node.js	Runtime environment
Express.js	Web server framework
Multer	File upload handling
CORS	Cross-origin support
dotenv	Environment variables

AI / RAG Stack

Technology	Purpose
LangChain	Orchestration framework
PDFLoader	PDF text extraction
RecursiveCharacterTextSplitter	Document chunking
MemoryVectorStore	In-memory vector database
HuggingFaceTransformersEmbeddings	Local embedding generation
ChatOllama	Local LLM integration

Local Model Infrastructure

Model	Role
Ollama	Local LLM server
llama3.2	Answer generation
Xenova/all-MiniLM-L6-v2	Embedding generation

🤔 Why I Built This Project

I wanted to build something practical that demonstrates how AI can work with user-provided documents.

A lot of people hear about RAG in theory, but the best way to understand it is to build a complete project.

This project helped me explore:

📄 How to process PDF files
🔎 How semantic search works
🧠 How embeddings are generated
📦 How vector retrieval powers document Q&A
🤖 How to integrate local LLMs into a web app
🔗 How to connect a frontend chat UI to an AI backend

It's also a useful real-world application because PDFs are everywhere.

🎯 Use Cases

This kind of app can be useful for many scenarios.

🎓 For Students

Ask questions from notes or textbooks
Summarize chapters
Clarify concepts from study material

🔬 For Researchers

Query research papers quickly
Identify key findings
Summarize long documents

💻 For Developers

Search technical documentation
Ask questions from API docs
Understand large manuals

🏢 For Businesses

Interact with internal PDFs
Extract insights from reports
Build internal Q&A assistants

⚙️ How the Application Works

Let's walk through the full architecture and workflow of the application.

🔄 High-Level Flow

1.  User uploads a PDF
2.  Backend receives the file
3.  PDF text is extracted using LangChain
4.  Extracted text is split into chunks
5.  Chunks are converted into embeddings
6.  Embeddings are stored in a vector store
7.  User asks a question
8.  App retrieves the most relevant chunks
9.  Retrieved chunks are used as context in the LLM prompt
10. Ollama generates the answer
11. Answer is shown in the chat UI

🖥️ Frontend

The frontend is designed to be simple, clean, and interactive.

It contains:

📌 A heading
📎 A PDF upload section
✅ Upload status messages
💬 A chat interface
⌨️ An input box for questions
🔘 A button to ask questions
🗑️ A clear chat button

📝 Frontend HTML Structure

The UI is built using HTML and styled with CSS.

1. Upload Section

This allows the user to select and upload a PDF.

<div class="upload-section">
  <input type="file" id="pdfFile" accept=".pdf"/>
  <button class="btn-upload" onclick="uploadPDF()">
    Upload PDF
  </button>
</div>

2. Upload Status

This displays upload progress or error messages.

<div id="uploadStatus"></div>

3. Chat Box

This is the main interface for user interaction.

<div class="chat-box">
  <div class="chat-header">
    💬 Chat with your PDF
    <button class="btn-clear" onclick="clearChat()">
      🗑 Clear
    </button>
  </div>
  <div class="messages" id="messages">
    <div class="message ai">
      👋 Upload a PDF and ask me anything about it!
    </div>
  </div>
  <div class="input-area">
    <input
      type="text"
      id="questionInput"
      placeholder="Ask a question about the PDF..."
      onkeydown="if(event.key==='Enter') askQuestion()"
    />
    <button class="btn-ask" id="askBtn" onclick="askQuestion()">
      Ask
    </button>
  </div>
</div>

🎨 Frontend CSS Styling

The app uses a modern card-style design.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 30px 20px;
}

h1 {
  font-size: 26px;
  margin-bottom: 20px;
  color: #1a1a2e;
}

.upload-section {
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 720px;
}

.chat-box {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  height: 520px;
}

.chat-header {
  padding: 14px 20px;
  background: #4f46e5;
  color: white;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.message.user {
  background: #4f46e5;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

.message.ai {
  background: #f1f5f9;
  color: #1a1a2e;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.message.loading {
  background: #f1f5f9;
  color: #94a3b8;
  align-self: flex-start;
  font-style: italic;
}

.input-area {
  display: flex;
  padding: 14px;
  gap: 10px;
  border-top: 1px solid #e2e8f0;
}

.input-area input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.input-area input:focus {
  border-color: #4f46e5;
}

.btn-ask {
  background: #4f46e5;
  color: white;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.btn-ask:hover {
  background: #4338ca;
}

.btn-ask:disabled {
  background: #a5b4fc;
  cursor: not-allowed;
}

.btn-upload {
  background: #4f46e5;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.btn-upload:hover {
  background: #4338ca;
}

.btn-clear {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.btn-clear:hover {
  background: rgba(255,255,255,0.35);
}

CSS Design Highlights

✅ Responsive centered layout
✅ Upload card with spacing and shadows
✅ Scrollable message container
✅ Separate styles for user and AI messages
✅ Loading state for thinking indicator
✅ Disabled state for the ask button
✅ Clean indigo color scheme

⚡ Frontend JavaScript Logic

The frontend JavaScript handles:

📤 PDF upload
✅ Status updates
📨 Sending user questions
💬 Showing chat messages
⏳ Displaying loading states
🗑️ Clearing chat
📜 Auto-scrolling the chat window

📤 Uploading a PDF

When the user selects a PDF and clicks Upload PDF, the file is sent to the server using FormData.

async function uploadPDF() {
  const fileInput = document.getElementById("pdfFile");
  const statusDiv = document.getElementById("uploadStatus");

  if (!fileInput.files[0]) {
    statusDiv.style.color = "red";
    statusDiv.textContent = "❌ Please select a PDF.";
    return;
  }

  statusDiv.style.color = "orange";
  statusDiv.textContent = "⏳ Processing PDF...";

  const formData = new FormData();
  formData.append("pdf", fileInput.files[0]);

  try {
    const res = await fetch("/upload", {
      method: "POST",
      body: formData,
    });
    const data = await res.json();

    if (res.ok) {
      statusDiv.style.color = "green";
      statusDiv.textContent =
        `✅ Ready! ${data.chunks} chunks indexed.`;
      addMessage(
        "ai",
        "✅ PDF loaded successfully! Ask me anything."
      );
    } else {
      statusDiv.style.color = "red";
      statusDiv.textContent = "❌ " + data.error;
    }
  } catch (e) {
    statusDiv.style.color = "red";
    statusDiv.textContent = "❌ Upload failed.";
  }
}

What this does:

✅ Checks if a file is selected
✅ Updates UI status with color-coded messages
✅ Sends the PDF to /upload via FormData
✅ Handles success and failure responses
✅ Informs the user when the PDF is ready

❓ Asking Questions

Once the PDF is processed, the user can ask questions about it.

async function askQuestion() {
  const input = document.getElementById("questionInput");
  const askBtn = document.getElementById("askBtn");
  const question = input.value.trim();
  if (!question) return;

  addMessage("user", question);
  input.value = "";
  askBtn.disabled = true;

  const loadingId = addMessage("loading", "🤖 Thinking...");

  try {
    const res = await fetch("/ask", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ question }),
    });
    const data = await res.json();
    removeMessage(loadingId);

    if (res.ok) {
      addMessage("ai", data.answer);
    } else {
      addMessage("ai", "❌ " + data.error);
    }
  } catch (e) {
    removeMessage(loadingId);
    addMessage("ai", "❌ Request failed.");
  }

  askBtn.disabled = false;
  scrollToBottom();
}

What this does:

✅ Reads the user question
✅ Displays it in the chat as a user message
✅ Sends the question to the backend
✅ Shows a "🤖 Thinking..." message while waiting
✅ Displays the AI response
✅ Handles API errors gracefully
✅ Disables the ask button during processing

🛠️ Message Utility Functions

The UI uses helper functions to manage chat messages dynamically.

function addMessage(type, text) {
  const box = document.getElementById("messages");
  const div = document.createElement("div");
  const id = "msg_" + Date.now() + Math.random();
  div.id = id;
  div.className = `message ${type}`;
  div.textContent = text;
  box.appendChild(div);
  scrollToBottom();
  return id;
}

function removeMessage(id) {
  const el = document.getElementById(id);
  if (el) el.remove();
}

function scrollToBottom() {
  const box = document.getElementById("messages");
  box.scrollTop = box.scrollHeight;
}

What these do:

addMessage() — Creates a new message bubble in the chat
removeMessage() — Removes a specific message (used for loading indicators)
scrollToBottom() — Auto-scrolls the chat to show the latest message

🗑️ Clearing the Chat

The app supports resetting everything with a single click.

async function clearChat() {
  document.getElementById("messages").innerHTML =
    '<div class="message ai">🗑️ Chat cleared! Upload a PDF to start.</div>';
  document.getElementById("uploadStatus").textContent = "";
  await fetch("/clear", { method: "POST" });
}

This clears:

💬 Chat UI messages
✅ Upload status text
🧠 Backend vector store
📝 Backend chat history

🔧 Backend

Now let's look at the backend, which handles all the AI and document processing logic.

📦 Backend Dependencies

The server imports the following modules:

import "dotenv/config";

import express from "express";
import multer from "multer";
import cors from "cors";
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";

import { PDFLoader }
  from "@langchain/community/document_loaders/fs/pdf";
import { RecursiveCharacterTextSplitter }
  from "@langchain/textsplitters";
import { MemoryVectorStore }
  from "langchain/vectorstores/memory";
import { HuggingFaceTransformersEmbeddings }
  from "@langchain/community/embeddings/huggingface_transformers";
import { ChatOllama }
  from "@langchain/ollama";

Why These Packages Are Used

Package	Purpose
`express`	Server framework
`multer`	File upload handling
`cors`	Cross-origin request support
`fs`	File system operations
`dotenv`	Environment variable management
`PDFLoader`	Reads PDF content
`RecursiveCharacterTextSplitter`	Splits long text into chunks
`MemoryVectorStore`	Stores embeddings in memory
`HuggingFaceTransformersEmbeddings`	Generates embeddings locally
`ChatOllama`	Connects to the local Ollama model

🚀 Server Initialization

The app starts by setting up Express and middleware.

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
app.use(cors());
app.use(express.json());
app.use(express.static("public"));

const upload = multer({ dest: "uploads/" });

What this does:

✅ Enables CORS for cross-origin requests
✅ Parses JSON request bodies
✅ Serves static frontend files from the public directory
✅ Configures Multer to store uploads temporarily in the uploads/ folder

💾 Application State

Two in-memory variables are used to track the current session:

let vectorStore = null;
let chatHistory = [];

Variable	Purpose
`vectorStore`	Stores the indexed PDF chunks as embeddings
`chatHistory`	Stores recent conversation pairs for context continuity

Important note: Because these are stored in memory:

⚠️ They reset when the server restarts
✅ They are suitable for demos and prototypes
❌ They are not ideal for production persistence

🧠 Embedding Model Setup

The app uses a local Hugging Face embedding model:

const embeddings = new HuggingFaceTransformersEmbeddings({
  modelName: "Xenova/all-MiniLM-L6-v2",
});

Why This Model?

Xenova/all-MiniLM-L6-v2 is popular because it is:

✅ Lightweight and fast
✅ Runs locally without external API
✅ Good for semantic similarity tasks
✅ Suitable for local RAG prototypes
✅ Well-supported in LangChain

Its role is to convert text chunks into numerical vectors (embeddings) that capture the semantic meaning of the text.

🤖 LLM Setup with Ollama

For answer generation, the app uses Ollama with the llama3.2 model.

const llm = new ChatOllama({
  model: "llama3.2",
  temperature: 0,
  baseUrl: "http://127.0.0.1:11434",
});

Why Use Ollama?

Ollama allows you to run open-source LLMs locally.

✅ Local execution — no cloud dependency
✅ Privacy-friendly — your data stays on your machine
✅ No API costs
✅ Easy model switching
✅ Great for experimentation and learning

Why Temperature is 0?

A lower temperature makes the output more deterministic and focused, which is ideal for document Q&A where accuracy matters more than creativity.

📤 Upload Route: `POST /upload`

This route handles PDF uploading, text extraction, chunking, embedding, and indexing.

app.post("/upload", upload.single("pdf"), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: "No file uploaded" });
    }

    const filePath = req.file.path;
    chatHistory = [];

    console.log("📄 Loading PDF...");
    const loader = new PDFLoader(filePath);
    const docs = await loader.load();
    console.log(`   → Loaded ${docs.length} page(s)`);

    console.log("✂️  Splitting text...");
    const splitter = new RecursiveCharacterTextSplitter({
      chunkSize: 1000,
      chunkOverlap: 200,
    });
    const splits = await splitter.splitDocuments(docs);
    console.log(`   → Created ${splits.length} chunks`);

    console.log("🧠 Creating LOCAL embeddings...");
    vectorStore = await MemoryVectorStore.fromDocuments(
      splits,
      embeddings
    );

    fs.unlinkSync(filePath);

    console.log("✅ PDF processed successfully!");
    res.json({
      message: "✅ PDF processed successfully!",
      chunks: splits.length,
    });

  } catch (err) {
    console.error("❌ Upload error:", err.message);
    res.status(500).json({ error: "PDF processing failed" });
  }
});

🔍 Step-by-Step Breakdown of `/upload`

Step 1: Validate the Upload

If no file is uploaded, the server returns an error immediately.

if (!req.file) {
  return res.status(400).json({ error: "No file uploaded" });
}

Step 2: Reset Chat History

Uploading a new PDF starts a fresh document session.

chatHistory = [];

Step 3: Load the PDF

The PDF is parsed into LangChain document objects using PDFLoader.

const loader = new PDFLoader(filePath);
const docs = await loader.load();

Each page of the PDF becomes a separate document object containing:

pageContent — the text of the page
metadata — page number and source info

Step 4: Split the Text into Chunks

The content is divided into manageable chunks using RecursiveCharacterTextSplitter.

const splitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
  chunkOverlap: 200,
});
const splits = await splitter.splitDocuments(docs);

Step 5: Generate Embeddings and Create the Vector Store

Each chunk is embedded and stored for later retrieval.

vectorStore = await MemoryVectorStore.fromDocuments(
  splits,
  embeddings
);

Step 6: Delete the Uploaded File

The temporary file is removed after processing to save disk space.

fs.unlinkSync(filePath);

Step 7: Return Success Response

The server sends back the chunk count and a success message.

res.json({
  message: "✅ PDF processed successfully!",
  chunks: splits.length,
});

✂️ Why Chunking is Important

Chunking is a critical part of any RAG system.

If you pass an entire PDF into an LLM:

❌ It may exceed token limits
❌ Retrieval becomes inefficient
❌ Answers may become noisy or unfocused

Forem: Sumit Kumar

AI-Powered API Gateway with Spring Boot: Turning Natural Language into Microservice Calls

Microservices + AI: Natural Language API Gateway (Spring Boot)

What This Project Does

🤔 Why Does This Project Exist? The Problem It Solves

The 4 Services

📨 The Request & Response Models

Request Lifecycle (5 Steps)

Project Structure

Key Design Decisions

Two LLM calls, not one

parseJson() sanitizer

Three response states

startsWith in routing

temperature: 0.1

Groq vs Ollama — one config line switch

⚙️ GatewayService — The Orchestration Pipeline

Core Architecture Boundary

Known Limitations

🔄 Full Request Lifecycle — Two Real Scenarios

✅ Place an Order

❌ SQL Injection Attempt

🏢 Real-World Use Cases — Where This Architecture Belongs

🤖 Conversational Chatbots Backed by Existing APIs

📱 Voice Assistants and IoT Interfaces

🏦 Banking and Fintech — Natural Language Transactions

⚡ Advantages — And Why They Actually Matter

1. Single /gateway Endpoint for All Operations

2. LLM-based Threat Detection vs. Rule-based Filtering

3. Zero Changes to Existing Microservices

4. Provider-Agnostic LLM Integration

5. Explicit UNMAPPED State

💡 Final Thoughts

# The End of the Era of Manual Hard Coding(Collaborated With Claude Sonnet 4.6)

How I Built a Complete AI Code Review Website Just by Prompting

The Old World of Coding

What I Just Did in ONE Session

What The App Can Do

The Tools I Used

How It Worked — My Exact Process

Step 1 — I described what I wanted

Step 2 — AI generated everything

Step 3 — I just ran the commands

What Would This Have Taken Before AI?

The Shift That Is Happening Right Now

🕰️ Manual Coding Era — Setting Up Flask with CORS

⚡ AI Coding Era — Same Task, 8 Seconds

What This Means For Developers

❌ The Bad News (for some)

✅ The Good News (for everyone)

The New Skill That Matters

Claude Sonnet 4.6 — The Real Power Behind This Project

What I Asked

What It Delivered

What Claude Handled That Impressed Me Most

The Numbers That Say It All

The Moment I Realized Claude Was Different

Claude Sonnet 4.6 vs ChatGPT — Real Differences I Observed

The Proof — My App Running Live

What Is Coming Next

Conclusion

About This Article

I Built a RAG-Based PDF Reader Web App Using Node.js, LangChain, Ollama, and Hugging Face

I Built a RAG-Based PDF Reader Web App Using Node.js, LangChain, Ollama, and Hugging Face

💡 Live Idea of the Project

📦 GitHub Repository

🧩 What is RAG?

Why RAG is Useful

✨ Project Features

🛠️ Tech Stack

Frontend

Backend

AI / RAG Stack

Local Model Infrastructure

🤔 Why I Built This Project

🎯 Use Cases

🎓 For Students

🔬 For Researchers

💻 For Developers

🏢 For Businesses

`parseJson()` sanitizer

`startsWith` in routing

`temperature: 0.1`

1. Single `/gateway` Endpoint for All Operations

5. Explicit `UNMAPPED` State

📤 Upload Route: `POST /upload`

🔍 Step-by-Step Breakdown of `/upload`