Create a component definition - Web 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

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

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