A2UI Components - Garden AI Advisor

StepIndicator

Navigation

Shows progress through a multi-step flow. Dots transition from inactive → active → completed.

{
  "id": "steps",
  "type": "StepIndicator",
  "current": 2,
  "total": 3
}

ImageUpload

Input

Drag & drop zone for image uploads. Supports click-to-select and drag-over visual feedback.

Upload a photo of your garden

Drag & drop or click to select

{
  "id": "upload-area",
  "type": "ImageUpload",
  "maxSize": "10MB",
  "action": {
    "type": "agent",
    "name": "analyzeImage"
  }
}

Button

Input

Action buttons with primary (gradient) and secondary (outlined) variants. Primary buttons have hover lift effect.

{
  "id": "submit-btn",
  "type": "Button",
  "label": "Calculate Estimate →",
  "variant": "primary",
  "action": {
    "type": "agent",
    "name": "calculateEstimate"
  }
}

ImagePreview

Display

Shows uploaded image with a remove button overlay. Used after image selection.

{
  "id": "preview",
  "type": "ImagePreview",
  "src": { "path": "/uploadedImage" },
  "removable": true
}

AnalysisCard

Display

Displays AI analysis results with an icon and summary text. Uses a gradient background.

Analysis Complete!

I see a medium-sized backyard with a lawn area and some flower beds. There's potential for adding a patio and improving the landscaping.

{
  "id": "analysis",
  "type": "AnalysisCard",
  "title": "Analysis Complete!",
  "content": { "path": "/analysis/summary" }
}

SuggestionItem

Selection

Selectable card for improvement suggestions. Click to toggle selection state.

🌳 Add shade trees

Plant 2-3 mature trees • $500 - $1,200

🪴 Flower bed renovation

New plants and mulch • $200 - $400

{
  "id": "suggestions",
  "type": "CheckboxGroup",
  "options": { "path": "/suggestions" },
  "selected": { "path": "/selectedSuggestions" }
}

EstimateItem

Display

Detailed cost breakdown for a selected improvement. Shows title, subtotal, and line-item details.

🌳 Add shade trees

$850

Oak tree (mature) $400

Maple tree (mature) $350

Planting & mulch $100

{
  "id": "estimate-trees",
  "type": "EstimateItem",
  "title": "🌳 Add shade trees",
  "subtotal": 850,
  "details": [
    { "label": "Oak tree", "price": 400 },
    { "label": "Maple tree", "price": 350 }
  ]
}

TotalCard

Display

Prominent display of the total estimated cost. Uses gradient background to stand out.

Estimated Total

$2,450

{
  "id": "total",
  "type": "TotalCard",
  "label": "Estimated Total",
  "value": { "path": "/estimate/total" },
  "currency": "USD"
}

LoadingSpinner

Feedback

Animated spinner shown during API calls. Indicates the AI is processing.

Analyzing your garden...

{
  "id": "loader",
  "type": "LoadingSpinner",
  "message": "Analyzing your garden..."
}

ErrorBox

Feedback

Displays error messages with red styling. Used for API errors, validation errors, etc.

Connection Error: Unable to connect to the server. Please check your internet connection.

{
  "id": "error",
  "type": "ErrorBox",
  "title": "Connection Error",
  "message": { "path": "/error/message" }
}

RateLimitInfo

Feedback

Warning banner shown when approaching rate limits. Helps users understand usage constraints.

⚠️ 3 requests remaining. Resets in 45 seconds.

{
  "id": "rate-limit",
  "type": "RateLimitInfo",
  "remaining": 3,
  "resetIn": 45
}