Medical reports are written for doctors, not for the people they're about. You get a PDF full of terms and statements that someone with no technical knowledge can't understand.
Clairo is my attempt at fixing that. Upload a report, and it turns into something you can actually talk to: highlight a term for an instant plain-language definition, or open the chat panel and ask it directly what your results mean, what's out of range, or what to ask your doctor next.
Live demo — or run it locally in a few minutes (below).
- Upload & read — drop in a PDF and it opens in a clean, page-flipping viewer built on
react-pdf. - Highlight to learn — select any word or phrase and get an instant definition (Merriam-Webster's Medical dictionary, with an AI fallback) or a plain-English "explain this" breakdown. There's a "Simplify" button if even the explanation is too jargon-heavy.
- Chat with the document — ask questions in a sidebar chat. Answers are grounded in the actual PDF content via retrieval-augmented generation (RAG), so it's citing your report, not guessing.
- Cloud or local AI, your choice — by default, questions go to Google's Gemini API. If you'd rather nothing leave your machine, flip on Local Model in the nav bar and it downloads a small open-source model (Qwen2.5-1.5B) that runs entirely in-browser via WebGPU. Slower, but nothing about your medical history touches a server.
It's a Next.js 16 (App Router) app, mostly client-heavy since a lot of the interesting work — PDF parsing, embeddings, vector search — happens in the browser rather than on a server, which is what makes the local/private mode possible at all.
| Piece | What it's doing |
|---|---|
react-pdf |
Renders the PDF and extracts text client-side |
@xenova/transformers |
Generates embeddings in-browser for semantic search |
idb (IndexedDB) |
Stores document chunks + vectors locally per file |
@mlc-ai/web-llm |
Runs the local model (Qwen2.5-1.5B) via WebGPU |
@google/genai |
Streams responses from Gemini when using Cloud AI |
| Tailwind + Framer Motion | The look and feel |
The RAG pipeline is intentionally simple: chunk the PDF by page, embed each chunk, store vectors in IndexedDB, and pull the top-k most relevant chunks into the prompt when you ask a question. No external vector database — it all lives in your browser, tied to that file.
git clone https://github.com/kaificial/Clairo.git
cd Clairo
npm installCreate a .env.local in the project root:
# Required for Cloud AI (chat + fallback definitions)
GEMINI_API_KEY=your_gemini_api_key
# Optional — powers the "Exact Definition" lookup.
# Without it, definitions fall back to the AI instead of the dictionary.
MW_API_KEY=your_merriam_webster_medical_dictionary_api_key- Get a free Gemini key at aistudio.google.com.
- Get a free Merriam-Webster Medical Dictionary key at dictionaryapi.com.
Then:
npm run devOpen http://localhost:3000 and click "Start Analysis" — there's a sample medical report pre-loaded so you can try it without uploading anything.
Local AI mode needs a WebGPU-capable browser (Chrome/Edge 113+) and a decent GPU — it downloads about 1GB on first use.
- This is a personal project, not a medical device. It's built to help you understand a document, not to replace a conversation with your actual doctor sp please don't treat it as a replacement.
- The vector store and chat history are per-browser (IndexedDB / sessionStorage), not synced anywhere. Clear your browser data and it's gone, which is mostly a feature.
- The local model is small enough to run on a laptop GPU, which means it's also not as sharp as Gemini. It's there for privacy, not for being the smarter option.
npm run dev # start the dev server
npm run build # production build
npm run start # run the production build
npm run lint # eslintIf something's broken or confusing, open an issue:this started as a project to help my own family read through reports, and I'd rather it stay genuinely useful than feature-bloated. PRs welcome, especially around accessibility and clearer error states.