Conversational Canvas
The core experience of CruxMD. A single scrollable conversation where the LLM decides what to show — narrative, insights, data, and follow-ups — and the UI renders it progressively.
Full Conversation
A complete clinical workflow showing the heart failure progression detection scenario. The agent synthesizes scattered data — trending biomarkers, weight changes, escalating medications, and buried symptoms — to identify early-stage heart failure that no single data point would flag alone.
Margaret Chen, 68F
Silent Progression
Margaret Chen, 68F — HTN, T2DM, obesity. On your schedule this afternoon. Her furosemide has been uptitrated twice in 4 months (20 → 30 → 40 mg). Escalating diuretic requirement may indicate worsening fluid retention.
What's driving the diuretic escalation? Pull her recent trends.
**Active
Pull her weight trend alongside the BNP — I want to see if the diuretic escalation correlates with fluid retention.
Two
I'm thinking GDMT — walk me through initiation given her current regimen and the contraindication landscape.
Here's
Triage Message
The AI initiates the conversation with a contextual seeding message. This provides relevant patient context and highlights the reason for the interaction — setting up the clinical question before the user asks anything.
Margaret Chen, 68F — HTN, T2DM, obesity. On your schedule this afternoon. Her furosemide has been uptitrated twice in 4 months (20 → 30 → 40 mg). Escalating diuretic requirement may indicate worsening fluid retention.
Design Notes:
- Renders with typewriter animation at AI streaming speed
- Left-aligned, plain text — no bubble styling
- Patient name bolded, key clinical flags highlighted
- Appears before user interaction begins
Action Buttons
After the agent provides recommendations, action buttons allow one-click execution. Actions can be orders (prescriptions, labs), referrals, documentation, or alerts. Selected actions show a checkmark and primary color styling.
Epilogue & Task Completion
After actions are selected, the epilogue shows completion states. Different action types have different completion behaviors: instant (immediate), agent tasks (async with spinner), and human-queued (deferred for manual handling).
- Carvedilol 3.125 mg BID prescribed — sent to CVS Pharmacy
- Lisinopril uptitrated to 20 mg — patient notified via portal
- Coordinating with cardiology...
- Follow-up appointment and echocardiogram queued for discussion and scheduling during today's visit
Memory Nudge
After completing actions, the agent shows what it learned from the interaction. This builds trust by making the learning loop transparent.
Input Toolbar
The ChatInput component combines a resizable textarea with model selection, reasoning toggle, attachment button, and send action.
Component Breakdown
Individual subcomponents that compose the conversational canvas.
UserMessage
Right-aligned bubble with muted background. In the demo, user messages have a typewriter effect with a pulsing microphone icon to simulate voice input.
What's driving the diuretic escalation? Pull her recent trends.
AgentMessage
Full-width response containing reasoning toggle, markdown narrative, insight cards, message actions (copy, feedback, retry), and follow-up suggestions.
Two
ThinkingIndicator
Shown while the agent is streaming a response. Displays a Lottie spinner alongside the latest reasoning headline or a rotating thinking verb.
InsightCard
Collapsible severity cards with left accent bar. Four types: critical (red), warning (amber), info (blue), and positive (green). Click title or chevron to expand. Citations show the source documents that support the finding.
NT-proBNP rising 85 → 142 → 219 pg/mL over 6 months, 8-lb weight gain despite diuretic therapy, escalating furosemide requirement.
FollowUpSuggestions
Ghost buttons with chevron icons that continue the conversation. Clicking a suggestion sends it as the next user message.
MessageActions
Inline action bar below each agent message: copy to clipboard, thumbs up/down feedback, and retry. Rendered as part of AgentMessage — shown in context above.
Design Principles
LLM-first
The agent decides what content to show — narrative, insights, tables, charts. The UI renders whatever the LLM returns, not predefined screens.
Progressive Disclosure
Reasoning is collapsed behind a toggle. Insight cards start collapsed. Details emerge on demand, keeping the default view clean.
Streaming-native
Responses stream in real-time: thinking indicator with reasoning headlines, typewriter narrative reveal, staggered insight card animation.
Conversational Flow
Follow-up suggestions keep the dialogue going. Each answer seeds the next question, enabling emergent navigation through patient data.