Create a component definition - Web app builder

Create the definition of your component so that it will be available in the app builder

Overview

When creating a component, you first will create it's definition in the Cloneable web app. This allows the component to be usable within the app builder. In addition, this will provide you will all of the necessary information and IDs which will be required to implement the component in code

Access the component builder

Navigate to https://app.cloneable.ai/builder/components

Here you will only see components that you have the ability to edit, both public and ones available to your company. At this time, you can only create components private to your company

Create a component

Click create component

Select component type

Select the type of component. The type of component will categorize it within the builder.

• UI - any component that will render UI

• Processing - components which typically process data such as AI models

• Logical - More simplistic components that implement business logic

• File / Data - components that manipulate or parse files or data

When selecting UI, the Cloneable SDK will expect that the component is implemented in accordance to the documentation UI Components

Config

You may update the config which you set when creating the component.

Add inputs/outputs

On the right hand side of the page you will be able to add inputs and outputs

Data type

Select the data type that you would like the input or output to accept or send. You may select any supported Data Types

The implementation of the data types is discussed in more detail CloneableDataType Protocol

The UUID of the input and output will be needed when implementing the code for your component see Sending Outputsfor an example on how to utilize this UUID to send your outputs

Component JSON Structure

The component JSON structure is how your component is saved and referred to in both the builder as well as the component parameter passed to your component when you subscribe your component seecomponent: DeployedWorkflow_components for more information

The componentID will be required to register your component with the Cloneable SDK

Inject component into Cloneable SDK