AI-powered healthcare assistant with Generative UI that dynamically renders interactive medical components in real-time. Built with Next.js 16, Tambo AI SDK, MCP (Model Context Protocol), TypeScript & Tailwind CSS.
Medileon doesn't just respond with text — it generates entire UI components on the fly based on what you say. Ask about symptoms and an interactive symptom checker appears. Ask about medications and a detailed drug info card renders. Every response is a living, interactive interface.
- 🧠 Generative UI — 21+ dynamic components rendered by AI in real-time
- 🚨 Emergency Detection — Instant 911 interface when critical symptoms are detected
- 📊 Health Dashboard — Live vitals, wellness score, and medication tracking
- 💊 Drug Intelligence — Interactions, side effects, and dosage information
- 📋 Lab Report Analysis — Upload reports for instant AI interpretation
- 🌤️ Environment Health — Real-time weather & air quality health advisories
- 🎨 Dark/Light Mode — Sleek adaptive theming with zinc/teal accents
Below is every component Medileon can render, along with realistic prompts you can type to trigger each one. Try them out!
Renders an interactive body diagram with severity indicators and suggested actions.
Prompt:
I've been having a throbbing headache behind my eyes for 2 days, along with some nausea and light sensitivity
Prompt:
My chest feels tight and I have a dry cough that won't go away for a week
Prompt:
I have sharp lower back pain and tingling down my left leg since yesterday
Shows interactive symptom buttons for a specific disease. Tap the symptoms you have.
Prompt:
I think I have the flu
Prompt:
I have diabetes
Prompt:
I might have a urinary tract infection
Prompt:
I think I'm dealing with acid reflux
Appears after you select symptoms from the Symptom Selector — shows urgency level, severity score, recommendations, and home remedies.
How to trigger: First say
I have a cold, then select your symptoms from the rendered Symptom Selector and hit Submit. The assessment result card renders automatically.
Shows a color-coded urgency badge (routine → emergency) based on how serious your symptoms are.
Prompt:
How urgent is a mild sore throat?
Prompt:
Is a fever of 103°F something I should worry about?
Displays potential conditions ranked by probability with confidence scores.
Prompt:
I have a runny nose, sneezing, itchy eyes, and mild cough — what could it be?
Prompt:
I've been feeling extremely tired, thirsty all the time, and urinating frequently. What's wrong?
Prompt:
My joints are stiff in the morning and my knees are swollen. What conditions could this be?
CRITICAL — Triggers a full-screen emergency interface with 911 call button, nearest ER, and emergency contacts.
Prompt:
I'm having severe chest pain and can't breathe
Prompt:
I think I'm having a heart attack, my left arm is numb
Prompt:
Someone is having a seizure and is unconscious
⚠️ This component takes top priority over everything else when emergency keywords are detected.
Beautiful line chart visualization of health metrics over time with trend indicators.
Prompt:
Show me my heart rate vitals
Prompt:
Display my blood pressure trends for the past week
Prompt:
What does my blood glucose look like?
Prompt:
Show my oxygen saturation levels
Prompt:
Track my weight over time
Structured analysis card with collapsible sections — insights, recommendations, tips, and warnings.
Prompt:
Analyze my heart rate trends
Prompt:
Give me advice about my blood pressure readings
Prompt:
What other vitals should I be tracking?
Detailed drug information card with dosage, side effects, warnings, and interactions.
Prompt:
Tell me about Ibuprofen
Prompt:
What is Metformin used for and what are its side effects?
Prompt:
Give me information about Amoxicillin
Prompt:
What should I know about Atorvastatin?
Collapsible sections with in-depth medication guidance — how it works, best practices, what to watch for.
Prompt:
How does Lisinopril work and what should I watch for?
Prompt:
Tell me more about Sertraline interactions
Prompt:
What are best practices for taking Omeprazole?
Interactive tracker showing your daily medications with progress bar and taken/not-taken toggles.
Prompt:
Show my medications
Prompt:
Track my daily medication schedule
Prompt:
What medications do I need to take today?
Beautiful doctor profile with qualifications, specializations, ratings, and availability.
Prompt:
Tell me more about Dr. Sarah Chen
Prompt:
Show me information about my cardiologist
List of available doctors with ratings, experience, and next available slots.
Prompt:
Show me available cardiologists
Prompt:
Find me other doctors near me
Prompt:
Who are the best dermatologists available?
Interactive scheduling interface with selectable time slots, doctor info, and location.
Prompt:
I want to book a doctor appointment
Prompt:
Schedule an appointment with a neurologist for next week
Prompt:
Book me a visit with Dr. Patel
Interactive checklist for preparing for your doctor visit — what to bring, questions to ask, day-of tips.
Prompt:
How should I prepare for my doctor appointment?
Prompt:
What should I bring to my medical appointment?
Prompt:
Help me get ready for my doctor visit tomorrow
Interactive goals tracker with progress bars, streaks, and completion toggles.
Prompt:
Show my health goals
Prompt:
Track my fitness objectives
Prompt:
What are my wellness targets?
Animated BMI result card with visual scale, category colors, and healthy weight range.
Prompt:
Calculate my BMI. I weigh 75 kg and I'm 175 cm tall
Prompt:
What's my body mass index? I'm 180 lbs and 5'10"
Prompt:
Am I at a healthy weight? 68 kg, 162 cm
Searchable symptom grid for a disease with severity indicators, doctor warning signs, and prevention tips.
Prompt:
What are the symptoms of diabetes?
Prompt:
Tell me about migraine symptoms
Prompt:
What does pneumonia feel like?
Prompt:
Symptoms of anxiety disorder
Upload a medical report for instant AI analysis with scanning animation and structured results.
Prompt:
Analyze my lab report(then upload a file)
Prompt:
I'm uploading a medical report for analysis
Prompt:
Can you read my blood test results?
Simulated digital prescription with medication details, QR code, and doctor signature.
Prompt:
Write me a prescription for Amoxicillin 500mg
Prompt:
I need a prescription for my acid reflux
Prompt:
Generate a prescription for Ibuprofen
Real-time weather, air quality index, and health advice based on environmental conditions.
Prompt:
What's the weather like and should I go outside?
Prompt:
Is the air quality safe for exercising outdoors?
Prompt:
Check the weather and AQI for health advice
Comprehensive command center with wellness score, live vitals, medication status, and health risks.
How to access: Click the Dashboard button in the header to open the full Health Command Center overlay.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5 |
| AI Orchestration | Tambo AI SDK |
| Tool Protocol | MCP (Model Context Protocol) |
| Styling | Tailwind CSS 4 |
| Animations | Framer Motion |
| Charts | Recharts |
| Validation | Zod |
| Icons | Lucide React |
- Node.js 18+
- npm or yarn
- Tambo AI API Key
# 1. Clone the repository
git clone https://github.com/yourusername/medileon.git
cd medileon
# 2. Install dependencies
npm install
# 3. Configure environment
cp .env.example .env.local
# Add your Tambo API key:
# NEXT_PUBLIC_TAMBO_API_KEY=your_tambo_api_key_here
# 4. Start development server
npm run devOpen http://localhost:3000 and start chatting!
Medileon includes a built-in MCP health tools server accessible at:
- Development:
http://localhost:3000/api/mcp - Production: Your deployed URL +
/api/mcp
| Tool | Description |
|---|---|
getSymptoms |
Get symptoms for 45+ diseases |
assessUrgency |
Assess symptom urgency level |
calculateBMI |
Calculate BMI from weight/height |
checkDrugInteractions |
Check medication interactions |
getMedicationInfo |
Get detailed drug information |
searchHealth |
Search diseases and medications |
getHealthTips |
Health tips by category |
npm run mcp:install
npm run mcp:build
npm run mcp:startmedileon/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── page.tsx # Main chat interface
│ │ └── api/mcp/route.ts # MCP HTTP endpoint
│ ├── components/
│ │ ├── generative/ # AI-rendered components (21+)
│ │ ├── interactable/ # Stateful interactive components
│ │ ├── chat/ # Chat UI (MessageList, ChatInput)
│ │ ├── dashboard/ # Health Dashboard
│ │ ├── onboarding/ # First-run experience
│ │ ├── providers/ # Context providers (Tambo, Theme)
│ │ └── ui/ # Base UI primitives
│ ├── lib/
│ │ ├── tambo/ # Tambo SDK config (components, tools, schemas)
│ │ └── hooks/ # Custom React hooks
│ └── types/ # TypeScript declarations
├── mcp-server/ # Standalone MCP health server
└── public/assets/ # Screenshots and static assets
- Theme: Edit
src/app/globals.cssfor the zinc/teal color scheme - New Components: Add to
src/components/generative/, create a schema insrc/lib/tambo/schemas.ts, and register insrc/lib/tambo/components.ts - New Tools: Add handlers in
src/lib/tambo/tools.tsor extend the MCP server inmcp-server/src/tools/
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
Built with ❤️ for the Tambo AI Hackathon
Medileon — Healthcare that adapts to you.