UI Components Spec

Specification of the json format (as JSON Schema) of the Data UI Blocks produced by the UI Agent json UI renderer. Mainly usefull to implement client-side renderers as they consume this format.

How relevant object types are generated to TypeScript then can be tested here: https://transform.tools/json-schema-to-typescript

Dynamic components for one Object input data

Dynamic Components Documentation
One Object input data Documentation

One Card

One Card JSON Schema

Example JSON output:

{
  "component": "one-card",
  "id": "test-id",
  "title": "Toy Story Details",
  "image": "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
  "fields": [
    {
      "data": [
        "Toy Story"
      ],
      "data_path": "movie.title",
      "name": "Title"
    },
    {
      "data": [
        1995
      ],
      "data_path": "movie.year",
      "name": "Year"
    },
    {
      "data": [
        8.3
      ],
      "data_path": "movie.imdbRating",
      "name": "IMDB Rating"
    },
    {
      "data": [
        "2022-11-02 00:00:00"
      ],
      "data_path": "movie.released",
      "name": "Release Date"
    },
    {
      "data": [
        "Jim Varney",
        "Tim Allen",
        "Tom Hanks",
        "Don Rickles"
      ],
      "data_path": "actors[*]",
      "name": "Actors"
    }
  ]
}

Image

JSON Schema

Example JSON output:

{
  "component": "image",
  "id": "test-id",
  "image": "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg",
  "title": "Toy Story Poster"
}

Video Player

JSON Schema

Example JSON output:

{
  "component": "video-player",
  "id": "test-id",
  "title": "Toy Story Trailer",
  "video": "https://www.youtube.com/embed/v-PjgYDrg70",
  "video_img": "https://img.youtube.com/vi/v-PjgYDrg70/maxresdefault.jpg"
}

Dynamic components for Array of objects input data

Dynamic Components Documentation
Array of objects input data Documentation

Set Of Cards

JSON Schema

Example JSON output:

{
  "component": "set-of-cards",
  "id": "test-id",
  "title": "My Favorite Movies",
  "fields": [
    {
      "data": [
        "Toy Story",
        "My Name is Khan"
      ],
      "data_path": "movie.title",
      "name": "Title"
    },
    {
      "data": [
        1995,
        2003
      ],
      "data_path": "movie.year",
      "name": "Year"
    },
    {
      "data": [
        8.3,
        8.5
      ],
      "data_path": "movie.imdbRating",
      "name": "IMDB Rating"
    },
    {
      "data": [
        [
          "Jim Varney",
          "Tim Allen",
          "Tom Hanks",
          "Don Rickles"
        ],[
          "Shah Rukh Khan",
          "Kajol Devgan"
        ]
      ],
      "data_path": "actors[*]",
      "name": "Actors"
    }
  ]
}

Table

JSON Schema

Example JSON output:

{
  "component": "table",
  "id": "test-id",
  "title": "My Favorite Movies",
  "fields": [
    {
      "data": [
        "Toy Story",
        "My Name is Khan"
      ],
      "data_path": "movie.title",
      "name": "Title"
    },
    {
      "data": [
        1995,
        2003
      ],
      "data_path": "movie.year",
      "name": "Year"
    },
    {
      "data": [
        8.3,
        8.5
      ],
      "data_path": "movie.imdbRating",
      "name": "IMDB Rating"
    },
    {
      "data": [
        [
          "Jim Varney",
          "Tim Allen",
          "Tom Hanks",
          "Don Rickles"
        ],[
          "Shah Rukh Khan",
          "Kajol Devgan"
        ]
      ],
      "data_path": "actors[*]",
      "name": "Actors"
    }
  ]
}

Hand Build Component (aka HBC)

Hand Build Component (HBC) Documentation

HBC expects there is a hand build code implemented and registered in the UI renderer for component value, which is able to visualize/show JSON from the data field, which is simply input data into the UI Agent (transformed to JSON if necessary). How to register hand-build code for the component depends on the UI renderer type, see renderers documentation please.

JSON Schema

Example JSON output:

{
  "id": "test-id",
  "component": "movies:movie-detail",
  "data": {
    "movie": {
      "title": "Toy Story",
      "trailer": "https://www.youtube.com/embed/v-PjgYDrg70",
      "poster": "https://image.tmdb.org/t/p/w440_and_h660_face/uXDfjJbdP4ijW5hWSBrPrlKpxab.jpg"
    }
  }
}