UI Extension — Overview

Miso’s client-side SDK for Javascript comes with a built-in UI extension to help you quickly visualize Miso API results with basic elements. It consists of:

  • A data model driven mechanism to render results from Miso APIs
  • Custom elements
  • Data models


You can setup a basic list element with just a few steps. To use the SDK bundled with the UI plugin, add the following script to your webpage:

<script src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk/dist/umd/miso-with-ui.min.js"></script>

See the installation section for other setup methods.

To add a custom element on the page:

<miso-list api="user_to_products" on:start="load">
  <script data-attr="payload" type="application/json">
      "fl": ["*"]
  <template data-name="item">
    <div data-product-id="${data.product_id}">
      <a href="${data.url}">
        <img src="${data.cover_image}">


npm module

To use the SDK as an npm module, run in your project directory:

npm install --save @miso.ai/client-sdk @miso.ai/client-sdk-ui

In your application, register the UI plugin before creating an SDK client.

const MisoClient = require('@miso.ai/client-sdk');
const { UiPlugin } = require('@miso.ai/client-sdk-ui');


Script tag

This SDK is also served by jsDelivr. You can also include the SDK bundled with UI plugin in your webpage using a script tag:

<script src="https://cdn.jsdelivr.net/npm/@miso.ai/client-sdk/dist/umd/miso-with-ui.min.js"></script>

You don't need to register the plugin in this case, as the bundled version does it for you.

Core Concepts

The UI plugin follows a simple data model driven paradigm:

  • Data models keep track of state and its transition

  • Elements trigger actions on the models and listen to their data events to update themselves


A custom element is responsible for the following:

  • Take various attributes
  • Create a data model if necessary and attach to it
  • Trigger data model's action via its API
  • Subscribe and respond to data model's events

Data model

A data model manages the following:

  • Find or wait for the first SDK client instance and connects to it
  • Accept action calls, request data from the client, keep responses in order, then emit data events
Icon/Activity Icon/Add Icon/API Icon/Arrow/Down Icon/Arrow/Left Icon/Arrow/Right Icon/Arrow/TopRight Icon/Arrow/Up Icon/Bento Icon/Billing Icon/Bin Icon/Book Icon/Bookmark/Default Icon/Bookmark/Filled Icon/Calendar Icon/Caret/Down Icon/Caret/Up Icon/Chavron/DownIcon/Chavron/LeftIcon/Chavron/RightIcon/Chavron/UpIcon/Checknox/CheckedIcon/Checknox/Unchecked Icon/Checklist Icon/Chip Icon/Clipboard / Copied Icon/Clipboard/Default Icon/Clock/Stopwatch Icon/CMD Icon/Data/Catalog Icon/Data/Engine Icon/Data/Group Icon/Data/Interact Icon/Data/Users Icon/Dive Icon/Docs/Key Icon/Dojo Icon/Email Icon/Env/Development Icon/Env/Playground Icon/Env/Prod Icon/Folder Icon/Fullscreen/Collapse Icon/Fullscreen/Expand Icon/Guides/Multiple Icon/Guides/Single Icon/Hashtag Icon/Heart/Outline Icon/Heart/Solid Icon / Cart z Icon / Click Icon / Clock Icon / Data Icon / Doc Icon / EmptyCart z Icon/Social/Facebook Icon / Genome Incognito Icon / Money Icon/Social/ProductHunt Icon / Search Icon/Social/Twitter Icon / User Icon/Info/Error Icon/Info/Info Icon/Info/Question Icon/Info/Warning Icon/Interact/Download Icon/Interact/Edit Icon/Interact/External v2 Icon/Interact/External Icon/Interact/Filter Icon/Interact/Logout Icon/Interact/Options Icon/Interact/Re-order Icon/Interact/Reload Icon/Interact/Remove Icon/Interact/Replace Icon/Interact/Search Icon/Interact/Shuffle Icon/Interact/Undo Icon/Interact/Upload Icon/Interact/Video Icon/Invoice Icon/Loading Icon/Loading Icon/Lock/Locked Icon/Lock/Unlocked Icon/Lock Icon/Mapping Menu Icon/Notification Icon/Overview Icon/Person/Team Icon/Person/User Icon/Plan/Enterprise Icon/Plan/Growth Icon/Plan/Startup Icon/Plan/Trial Icon/Recipe Icon/Rocket Icon/Settings/App Icon/Settings/User Icon/Settings Icon/Shrine Icon/Sidebar/Close Icon/Sidebar/Open Icon/Slideout Icon/Sort/Ascending Icon/Sort/Default Icon/Sort/Descending Icon/Star/Filled Icon/Star/Outlined Stopwatch Icon/Support Icon/Tag Icon/Interact/Thumb/Dislike Icon/Interact/Thumb/Like Icon/Tick Icon/Trend/New Icon/Trend/Trending Icon/Tutorial Icon/Lock/Unlocked Icon/View/Grid Icon/View/List Icon/Watchlist/Add