MedSafe AI: Local-First Pharmacology Engine

Inspiration

💡 Inspiration

In healthcare, data privacy isn't just a feature—it is a legal and moral necessity. While the world is racing to build cloud-based AI wrappers for the medical industry, we realized a massive flaw: sending highly sensitive patient prescriptions and health profiles to third-party APIs is a massive security risk.

Patients deserve enterprise-grade medical analysis without sacrificing their privacy. We built MedSafe AI to prove that with modern browser APIs, we can run a clinical-grade pharmacology engine entirely on the edge.

⚙️ What it does

MedSafe AI is an intelligent, offline-first drug safety engine. Patients or clinicians can input their pre-existing conditions, age, and a list of medications (via text, voice, or camera scan). The system instantly cross-references this against a massive onboard database of FDA-grade pharmacology data, identifying dangerous drug-to-drug interactions, drug-to-disease contraindications, and even dietary conflicts (like Grapefruit and Statins).

If a critical interaction is found, the system dynamically alerts the user, provides the biological mechanism of the interaction, suggests safer medical alternatives, and even offers an emergency GPS locator for nearby hospitals if the risk profile is lethal.

🛠️ How we built it

We engineered MedSafe AI to be entirely decoupled from the cloud:

• The Intelligence: We utilized WebGPU via Web-LLM to run a localized AI model directly inside the user's browser for intelligent clinical summarization.
• Frictionless Input: We implemented Tesseract.js to perform Optical Character Recognition (OCR) locally. Users can scan physical pill bottles with their camera, and the text extraction happens entirely on-device.
• The Engine: We built a custom deterministic algorithm in TypeScript that fuzzy-matches inputs against a hardcoded database of over 500 medications, supplements, and interactions, calculating a cumulative risk score in milliseconds.
• The Interface: We built a fluid, glassmorphic UI using React and TailwindCSS, featuring a custom HTML5 Canvas particle aurora that dynamically shifts from calm blues to critical reds based on the calculated danger of the interaction.

⚠️ Challenges we ran into

Running complex AI and OCR models purely on the frontend is incredibly resource-intensive. Our biggest hurdle was ensuring the WebGPU and Tesseract.js WebAssembly modules loaded smoothly without locking the main UI thread. We had to carefully manage state and memory to ensure the app felt snappy, even while processing complex inferences in the background. Additionally, standardizing the raw text from camera scans to accurately match our database required building a robust regex-based fuzzy matching algorithm.

🏆 Accomplishments that we're proud of

We successfully built a highly complex medical tool that requires absolute zero network requests to process sensitive data. Proving that an AI agent can read prescriptions, analyze cross-drug mechanisms, and generate clinical summaries natively in a browser environment is a massive win for decentralized healthcare.

📚 What we learned

We learned a tremendous amount about edge computing and the capabilities of modern Web APIs. Specifically, we dove deep into hardware-accelerated browser processing (WebGPU) and client-side WebAssembly execution. We also learned how to balance deterministic medical logic (which must be 100% accurate) with generative AI summaries (which provide the human touch).

🚀 What's next for MedSafe AI

The next step is to expand the internal interaction database to encompass the entire WHO essential medicines list. We also plan to wrap the Web App into an installable PWA (Progressive Web App) so patients can download the entire engine to their phones and use it in remote areas with zero cell service.

Built With

• framer-motion
• html5
• react
• tailwindcss
• tesseract.js
• typescript
• vite
• webassembly
• webgpu