shadcn.io is not affiliated with official shadcn/ui
Medical Assistant AI Block for React
A symptom guide sample with a standing not-medical-advice note, three symptoms, three single-choice questions each and an assessment card: a level in words, what to do, warning signs and a route to urgent care.
Installation
Overview
Show how an assistant can give general health information without playing doctor, with this AI medical assistant for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Triagebrook, a health information sample. An Alert under the top bar stays put: a sample for this demo, not medical advice, see a doctor or pharmacist, and in an emergency call your local emergency number. You pick one of three symptoms (Headache, Cough, Sprained ankle) from the options under the log, the guide asks three single-choice questions, one at a time, and then an assessment card lands in the log: a level in words with its own glyph (Self-care, See a clinician soon, Urgent: seek care now), what to do, and the warning signs. Typed text is not understood; the guide asks you to use the options and answers words such as "chest pain" with the emergency line. The composer's Shine Button is the only colored control, and everything moves with CSS only. For health sites and any assistant that must stay in its lane.
FAQ
Is this medical advice?
No, and the window says so three times: in the standing note under the top bar, in every assessment card and in the voice of the guide. It gives general information, makes no diagnosis, and invents no clinical figures. Before you ship anything like it, have a clinician review every sentence of the typed content and decide what your product may say.
How is the level chosen?
Every answer carries a typed severity from 0 to 2, and the level is the highest of the three, so one worrying answer is enough to move you to the next level. The three levels are drawn as a ring, a half circle and a triangle beside their words, so nothing depends on color. Edit the SYMPTOMS list to change the questions, the answers and their severity.
What happens with urgent symptoms?
An Urgent assessment starts with calling your local emergency number or going to an emergency department, and the warning signs stay on the card. If you type words such as "chest pain" or "can't breathe" instead of using the options, the guide answers at once with the emergency line, because a sample cannot assess an emergency. Replace those words and the number guidance with the rules of your own service.
What stays in the page, and how do I make it real?
Everything: the symptoms, questions, levels and texts are typed at the top of the file, and nothing is sent or stored. To make it real, keep the decision logic in reviewed, versioned content and call it from choose; use a model, if at all, only to phrase typed content, never to set the level.