DEV Community: Dr. Vignesh Narayan R

Dr Vignesh Narayan R's Skin AI Assistant: A Safety-First Dermatology Agent (Built with React + Algolia)

Dr. Vignesh Narayan R — Sat, 07 Feb 2026 04:56:13 +0000

This is a submission for the Algolia Agent Studio Challenge: Conversational Experiences

What I Built

I built Dr Vignesh Narayan R's Skin AI Assistant, a safety-first dermatology assistant designed to help patients navigate the overwhelming world of skincare.

Instead of being a generic chatbot that "guesses" answers, this agent acts as a specialized medical triage tool. It takes into account three critical data points—Skin Type, Weather Conditions, and Medical History—to recommend safe skincare ingredient formulations.

Crucially, it is engineered to be medically responsible:

It refuses to recommend specific commercial brands (to avoid bias).
It proactively filters out ingredients that are contraindicated for specific conditions (e.g., if a user has Eczema, it knows to block Salicylic Acid recommendations, even if the user has acne).
It always directs users to book a physical consultation for prescription-strength treatments.

Demo

You can try the live application here:

https://drvigneshnarayanrskinai.netlify.app/

(Note: Since this is running on a free instance, please allow up to 60 seconds for the agent to "wake up" and respond to your first message. If it stays quiet, the daily API test quota may have paused—please try again later!)

GitHub Repo Source Code:
https://github.com/drvigneshnarayanr/drvigneshnarayanrskinai/

How I Used Algolia Agent Studio

I leveraged Algolia Agent Studio to build a RAG (Retrieval Augmented Generation) workflow that grounds the AI in medical fact rather than probability.

The Data Index
I created a custom dataset (dermatology_rules.json) containing clinical skincare rules. Instead of just indexing product names, I structured the data with medical metadata:

formulation_type (e.g., "Occlusive Ointment")
safe_for_conditions (e.g., ["Psoriasis", "Atopic Dermatitis"])
contraindicated_for (e.g., ["Acne Prone"])

Targeted Prompting & Configuration
I used the Agent Studio to configure a specific system prompt that enforces a "Safety Check" logic:

"Analyze the User Input... Search your knowledge base... Before recommending ANY product, check its contraindicated_for field. If the user has a condition listed there, YOU MUST DISCARD THAT RESULT."

Searchable Attributes
To ensure the agent actually "reads" the safety tags, I configured Algolia's Searchable Attributes to prioritize safe_for_conditions and weather_suitability. This allows the agent to perform semantic filtering—finding the right medical rule even if the user uses colloquial language.

Why Fast Retrieval Matters

In healthcare and dermatology, accuracy is non-negotiable. A standard LLM might hallucinate a product that sounds real but contains irritants.

By using Algolia's fast retrieval:

Reduced Hallucinations: The agent generates answers only from the retrieved context (my curated JSON file). If the safe answer isn't in the index, the agent knows to say "I don't know" rather than making up medical advice.
Contextual Speed: Users get advice tailored to their current weather and skin condition instantly. The search index filters 100+ possibilities down to the single safest option in milliseconds, allowing the LLM to focus on crafting a compassionate response rather than searching for facts.

Team

Dr. Vignesh Narayan R - Consultant Dermatologist & Developer.

My AI-Powered Medical Portfolio: Built with Google Cloud Run

Dr. Vignesh Narayan R — Tue, 20 Jan 2026 04:04:47 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I am a developer with a unique background in healthcare, focused on bridging the gap between clinical practice and technology. My work specializes in building tools that solve real-world problems for dermatologists and surgeons—from standardizing clinical photography to enhancing video projection for diagnosis, tracking and surgery.

This portfolio represents my journey in "Medical Tech," showcasing applications designed to improve workflow, education, and patient documentation.

Portfolio

🧪 Test Drive the Apps

My portfolio allows you to launch the actual applications I have built. Use the credentials below to unlock the full features during your review:

1. Silhouette Capture Pro
A web app for standardized clinical photography.

Login Email: scienceisbest@gmail.com
(No password required for this demo tier)

2. DermCast Pro
A tool for projecting high-quality magnified video from mobile to larger screens.

Trial/License Key: pay_RyYFb6YVLY2qZW
Enter this key to bypass the payment gateway and activate the Pro viewer.

3. Quiz Master Control Panel
A web-based platform for organizing and running medical quizzes.

Access: Open Access (No login required) — Feel free to jump in and test the interface immediately.

How I Built It

To bring this portfolio to life, I utilized a modern tech stack deployed on Google's infrastructure.

Google AI Tools: I used Google Antigravity and Gemini to accelerate the development of the UI components and to debug complex logic in the video streaming modules. The AI acted as a co-pilot, helping me structure the Dockerfile for containerization.
Cloud Run: The portfolio and the embedded apps are containerized and deployed on Google Cloud Run. This ensures they auto-scale and are always available without me managing servers.
Tech Stack: The projects use a combination of React for the frontend and Python/Node.js for backend services, ensuring fast image processing and real-time data handling.

What I'm Most Proud Of

I am most proud of integrating domain-specific medical requirements into functional software.

Silhouette Capture required precise handling of camera APIs to ensure consistent lighting and framing for doctors.
DermCast Pro challenged me to handle low-latency video streaming in a browser environment.
Getting all of this deployed on Cloud Run means these tools are not just local scripts, but scalable web apps ready for real users.

Silhouette Capture Pro: Perfecting Clinical Photography with Real-Time Overlays

Dr. Vignesh Narayan R — Mon, 29 Dec 2025 06:53:17 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

Silhouette Capture Pro: Perfecting Clinical Photography with Real-Time Overlays- This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

What I Built
Silhouette Capture Pro is a specialized mobile application designed for medical professionals—specifically dermatologists and aesthetic surgeons—to standardize patient photography.

The app solves the problem of "inconsistent clinical photos" by allowing doctors to overlay a semi-transparent "ghost image" (silhouette) of a patient's previous photograph onto the live camera viewfinder. This ensures that every follow-up photo aligns perfectly with the baseline—matching the exact distance, angle, and posture.

My Pitch Video

stream.mux.com

Demo
You can try the live application here:

Live App:

Testing Instructions: To access the full features of the app for testing, please use the following credential:

Email: scienceisbest@gmail.com

The Story Behind It
As a practicing Consultant Dermatologist, I faced a recurring frustration: the results of a successful procedure were often obscured simply because the patient tilted their head slightly differently in the "after" photo compared to the "before" photo.

In aesthetic medicine, consistency is credibility. I realized that to truly track clinical progress, I needed a way to lock in the patient's posture using the previous photo as a real-time guide. Native camera apps lack this feature. I built Silhouette Capture Pro to bridge the gap between clinical excellence and photographic evidence, ensuring that the camera never lies about the results.

Technical Highlights
The core technical challenge was managing the live camera feed layer simultaneously with a static image overlay layer without compromising performance.

Alpha Blending Engine: The app utilizes real-time alpha transparency adjustment, allowing the user to fade the reference image in and out to match the live feed perfectly.

Camera API Integration: I utilized native camera APIs to access the device's front and rear sensors, ensuring high-resolution capture without lag—critical when aligning a moving subject.

Dynamic Overlay Logic: The app takes a stored bitmap, converts it to a semi-transparent overlay, and scales it dynamically based on user input before locking the focus for the final capture.

Use of Mux
I utilized Mux to host and stream the pitch video for this submission. Mux provided a reliable, high-performance solution to ensure my demo video plays back smoothly on all devices. Since my app is about visual precision, having a high-quality, adaptive stream for the pitch video was essential to clearly demonstrate the "ghost image" alignment feature.

Submitted by: @dr_vigneshnarayanr_c4d