使用说明
PDF聊天--Web客户端
一个轻量级的聊天风格的web界面，用于与PDF RAG MCP服务器交互。上传任何PDF，并以对话的方式提问。
截图
堆栈
| 图层 | 工具 |
|---|---|
| Web框架 | FastAPI |
| HTTP到MCP | httpx（异步） |
| 前端 | 普通HTML+CSS+JS（无框架） |
| 传输 | MCP流式HTTP |
项目结构
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
运作原理
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
浏览器从不直接与MCP服务器通信。 client_server.py 充当瘦代理——它处理MCP协议（JSON-RPC、会话头、SSE解析），因此前端只处理简单的REST调用。
设置
先决条件
- 正在运行的MCP服务器
http://localhost:8000（参见mcp-quickstart/) - Python 3.10+
安装并运行
cd webclient
pip install -r requirements.txt
uvicorn client_server:app --port 3000 --reload
打开 http://localhost:3000 在您的浏览器中。
用法
- 上传PDF --拖放或单击侧边栏进行浏览
- 等待摄入 --侧边栏显示索引后的块计数
- 提出问题 --键入聊天输入或单击建议的提示
- 查看答案 --响应显示块计数和相关性得分
键盘快捷键
Enter--发送消息Shift + Enter--输入中的换行符
API终点
POST /upload
通过多部分表单接受PDF文件，并通过MCP将其导入ChromaDB。
请求： multipart/form-data 和 file 领域
答复：
{
"doc_id": "my_document",
"chunks_stored": 42,
"message": "PDF 'my_document' ingested successfully."
}
POST /query
使用语义搜索+OpenAI查询摄入的PDF。
请求：
{
"question": "What are the key findings?",
"doc_id": "my_document"
}
答复：
{
"answer": "The key findings are...",
"chunks_used": 5,
"relevance": 0.87
}
同时运行两台服务器
# 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
