Interface Templates

Don’t start from scratch. These templates provide battle-tested JSON structures for common agent scenarios. Copy, paste, and adapt them to your needs.

1. Flight Search Result

A rich card displaying flight details, designed for high information density.

{
  "type": "flight-card",
  "props": {
    "airline": {
      "name": "TechAir",
      "logo": "https://cdn.example.com/logo.png"
    },
    "flightNumber": "TA-882",
    "departure": {
      "city": "San Francisco",
      "code": "SFO",
      "time": "10:30 AM",
      "date": "2025-10-15"
    },
    "arrival": {
      "city": "Tokyo",
      "code": "NRT",
      "time": "02:15 PM",
      "date": "2025-10-16"
    },
    "price": {
      "amount": 1250,
      "currency": "USD"
    },
    "duration": "11h 45m"
  }
}

React Implementation Hint

Ensure your FlightCard component handles the nested objects (like departure.city) gracefully.

2. Dynamic Form (Data Collection)

A form generated on-the-fly to collect specific user information.

{
  "type": "form-container",
  "props": {
    "title": "Travel Preferences",
    "submitAction": "save_preferences",
    "fields": [
      {
        "id": "dietary",
        "type": "select",
        "label": "Dietary Restrictions",
        "options": ["None", "Vegetarian", "Vegan", "GF"]
      },
      {
        "id": "seat",
        "type": "radio",
        "label": "Seat Preference",
        "options": ["Window", "Aisle"]
      }
    ]
  }
}

3. Data Dashboard

For “Analyst Agents” that need to visualize data.

{
  "type": "chart-widget",
  "props": {
    "title": "Quarterly Revenue",
    "chartType": "bar",
    "data": {
      "labels": ["Q1", "Q2", "Q3", "Q4"],
      "datasets": [
        {
          "label": "2024",
          "data": [120, 190, 30, 50],
          "color": "#6366f1"
        }
      ]
    }
  }
}

Contributing a Template

Have a great component pattern? Submit a PR to our GitHub Repository with the tag template.