# Day 4: Healthcare Consultation Assistant
## Build a Professional Healthcare Application
Today, you'll transform your SaaS into a healthcare consultation assistant that helps doctors generate patient summaries, action items, and patient-friendly emails from their visit notes.
## What You'll Build
A healthcare application that:
- Takes doctor's consultation notes as input
- Generates professional summaries for medical records
- Creates actionable next steps for the doctor
- Drafts patient-friendly email communications
- Uses structured forms with date pickers
- Streams AI-generated content in real-time
## Prerequisites
- Completed Day 3 (authentication and subscriptions working)
- Your app deployed to Vercel
## Step 1: Install Additional Dependencies
We need a date picker for the consultation form:
```bash
npm install react-datepicker
npm install --save-dev @types/react-datepicker
```
## Step 2: Update the Backend API
Replace `api/index.py` with a new endpoint that handles consultation data:
```python
import os
from fastapi import FastAPI, Depends # type: ignore
from fastapi.responses import StreamingResponse # type: ignore
from pydantic import BaseModel # type: ignore
from fastapi_clerk_auth import ClerkConfig, ClerkHTTPBearer, HTTPAuthorizationCredentials # type: ignore
from openai import OpenAI # type: ignore
app = FastAPI()
clerk_config = ClerkConfig(jwks_url=os.getenv("CLERK_JWKS_URL"))
clerk_guard = ClerkHTTPBearer(clerk_config)
class Visit(BaseModel):
patient_name: str
date_of_visit: str
notes: str
system_prompt = """
You are provided with notes written by a doctor from a patient's visit.
Your job is to summarize the visit for the doctor and provide an email.
Reply with exactly three sections with the headings:
### Summary of visit for the doctor's records
### Next steps for the doctor
### Draft of email to patient in patient-friendly language
"""
def user_prompt_for(visit: Visit) -> str:
return f"""Create the summary, next steps and draft email for:
Patient Name: {visit.patient_name}
Date of Visit: {visit.date_of_visit}
Notes:
{visit.notes}"""
@app.post("/api")
def consultation_summary(
visit: Visit,
creds: HTTPAuthorizationCredentials = Depends(clerk_guard),
):
user_id = creds.decoded["sub"] # Available for tracking/auditing
client = OpenAI()
user_prompt = user_prompt_for(visit)
prompt = [
{"role": "system", "content": system_prompt},
{"role": "user", "content": user_prompt},
]
stream = client.chat.completions.create(
model="gpt-5-nano",
messages=prompt,
stream=True,
)
def event_stream():
for chunk in stream:
text = chunk.choices[0].delta.content
if text:
lines = text.split("\n")
for line in lines[:-1]:
yield f"data: {line}\n\n"
yield "data: \n"
yield f"data: {lines[-1]}\n\n"
return StreamingResponse(event_stream(), media_type="text/event-stream")
```
Note the key changes:
- Changed from `@app.get("/api")` to `@app.post("/api")` to accept form data
- Added a `Visit` model to validate incoming data
- Structured prompts for healthcare-specific output
## Step 3: Update Application Configuration
First, import the date picker styles in `pages/_app.tsx`:
```typescript
import { ClerkProvider } from '@clerk/nextjs';
import type { AppProps } from 'next/app';
import 'react-datepicker/dist/react-datepicker.css';
import '../styles/globals.css';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
);
}
```
Now update `pages/_document.tsx` to reflect the healthcare focus:
```typescript
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
Healthcare Consultation Assistant
);
}
```
## Step 4: Create the Consultation Form
Replace `pages/product.tsx` with the new healthcare interface:
```typescript
"use client"
import { useState, FormEvent } from 'react';
import { useAuth } from '@clerk/nextjs';
import DatePicker from 'react-datepicker';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkBreaks from 'remark-breaks';
import { fetchEventSource } from '@microsoft/fetch-event-source';
import { Protect, PricingTable, UserButton } from '@clerk/nextjs';
function ConsultationForm() {
const { getToken } = useAuth();
// Form state
const [patientName, setPatientName] = useState('');
const [visitDate, setVisitDate] = useState(new Date());
const [notes, setNotes] = useState('');
// Streaming state
const [output, setOutput] = useState('');
const [loading, setLoading] = useState(false);
async function handleSubmit(e: FormEvent) {
e.preventDefault();
setOutput('');
setLoading(true);
const jwt = await getToken();
if (!jwt) {
setOutput('Authentication required');
setLoading(false);
return;
}
const controller = new AbortController();
let buffer = '';
await fetchEventSource('/api', {
signal: controller.signal,
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${jwt}`,
},
body: JSON.stringify({
patient_name: patientName,
date_of_visit: visitDate?.toISOString().slice(0, 10),
notes,
}),
onmessage(ev) {
buffer += ev.data;
setOutput(buffer);
},
onclose() {
setLoading(false);
},
onerror(err) {
console.error('SSE error:', err);
controller.abort();
setLoading(false);
},
});
}
return (