PDF Chat — Web Client

A lightweight chat-style web interface to interact with the PDF RAG MCP server. Upload any PDF and ask questions about it in a conversational way.

---

Screenshot

---

Stack

Layer	Tool
Web framework	FastAPI
HTTP to MCP	httpx (async)
Frontend	Vanilla HTML + CSS + JS (no framework)
Transport	MCP Streamable HTTP

---

Project Structure

webclient/
├── client_server.py     ← FastAPI app — MCP session manager + REST proxy
├── requirements.txt
├── README.md
└── static/
    ├── index.html       ← Chat UI (single file, no build step)
    └── screenshot.png

---

How It Works

Browser (index.html)
     │
     │  POST /upload  (multipart PDF)
     │  POST /query   (JSON question)
     ▼
client_server.py  (FastAPI on :3000)
     │
     │  Manages MCP session (initialized once on startup)
     │  Converts REST → JSON-RPC
     │  Parses SSE responses from MCP
     ▼
MCP Server  (:8000)
     │
     ├── ingest_pdf → PyMuPDF → chunks → embeddings → ChromaDB
     └── query_pdf  → embed question → ChromaDB search → OpenAI → answer

The browser never talks to the MCP server directly. client_server.py acts as a thin proxy — it handles the MCP protocol (JSON-RPC, session headers, SSE parsing) so the frontend only deals with simple REST calls.

---

Setup

Prerequisites

• MCP server running on http://localhost:8000 (see mcp-quickstart/)
• Python 3.10+

Install & Run

cd webclient
pip install -r requirements.txt
uvicorn client_server:app --port 3000 --reload

Open http://localhost:3000 in your browser.

---

Usage

1. Upload a PDF — drag and drop or click the sidebar to browse
2. Wait for ingestion — sidebar shows chunk count once indexed
3. Ask questions — type in the chat input or click a suggested prompt
4. View answer — response shows with chunk count and relevance score

Keyboard Shortcuts

• Enter — send message
• Shift + Enter — newline in input

---

API Endpoints

POST /upload

Accepts a PDF file via multipart form, ingests it into ChromaDB via MCP.

Request: multipart/form-data with file field

Response:

{
  "doc_id": "my_document",
  "chunks_stored": 42,
  "message": "PDF 'my_document' ingested successfully."
}

POST /query

Queries the ingested PDF using semantic search + OpenAI.

Request:

{
  "question": "What are the key findings?",
  "doc_id": "my_document"
}

Response:

{
  "answer": "The key findings are...",
  "chunks_used": 5,
  "relevance": 0.87
}

---

Running Both Servers Together

# Terminal 1 — MCP server
cd mcp-quickstart
python main.py              # runs on :8000

# Terminal 2 — Web client
cd webclient
uvicorn client_server:app --port 3000 --reload