Skip to main content

AI Components

UI patterns for AI-native features in Juniro's platform.

AI is analyzing your search...

States: Idle → Typing → AI Processing → Results

Recommendation Card​

Recommended for SarahHigh Match
Kids Coding with Scratch
CodeKids Academy • Ages 8-12
CodingBeginner

"Based on Sarah's age (10) and interest in technology, this beginner-friendly coding class is a great match."

AI Chat Message​

🤖
Juniro Assistant

I found 3 coding classes near you that accept beginners aged 8-12. Would you like me to show you the schedule options?

Confidence Indicators​

High (90%+)
Medium (60-89%)
Low (<60%)

AI Loading States​

Thinking...
Processing 60%
Generating...

AI Insight Card​

📈Booking Opportunity
AI Insight

Your Saturday 10am slot has 85% fill rate. Consider adding another session - similar providers see 40% more bookings with this schedule.

AI Badge Variants​

✨ AI Enhanced🤖 AI Generated✓ AI Verified⚡ Smart Match

Design Principles​

  1. Transparency - Always indicate when AI is involved
  2. Control - Users can dismiss, edit, or override AI suggestions
  3. Graceful Fallback - Works without AI if service is unavailable
  4. Explanation - Show why AI made a recommendation

Usage in Code​

// AI Search with loading state
<AISearchBar
  placeholder="Find activities..."
  isProcessing={isAIThinking}
  onSearch={handleSearch}
/>

// Recommendation with explanation
<RecommendationCard
  activity={activity}
  confidence="high"
  explanation="Based on your child's age and interests"
  onFeedback={handleFeedback}
/>

// Insight card
<InsightCard
  type="opportunity"
  priority="high"
  title="Booking Opportunity"
  description="Your Saturday slot is popular..."
  action={{ label: "Add Session", onClick: handleAdd }}
/>

AI components are in development. See Storybook for latest implementations.