# 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&#x20;

<figure><img src="/files/npFSTVBngyVBctH5oUft" alt=""><figcaption></figcaption></figure>

### Select component type

Select the type of component. The type of component will categorize it within the builder.&#x20;

* 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

{% hint style="info" %}
When selecting UI, the Cloneable SDK will expect that the component is implemented in accordance to the documentation [UI Components](/cloneable-documentation/ios-sdk/building-components/ui-components.md)
{% endhint %}

### 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

<figure><img src="/files/5zwmQwkQYmpUQZP8DPgW" alt=""><figcaption></figcaption></figure>

### 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](/cloneable-documentation/platform-documentation/data-types.md)

The implementation of the data types is discussed in more detail [CloneableDataType Protocol](/cloneable-documentation/reference/workflow-data-types/cloneabledatatype-protocol.md)

{% hint style="info" %}
The UUID of the input and output will be needed when implementing the code for your component see [Component implementation structure - Swift](/cloneable-documentation/ios-sdk/building-components/component-implementation-structure-swift.md#sending-outputs)for an example on how to utilize this UUID to send your outputs
{% endhint %}

## 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 see[Component implementation structure - Swift](/cloneable-documentation/ios-sdk/building-components/component-implementation-structure-swift.md#component-deployedworkflow_components) for more information

{% hint style="info" %}
The componentID will be required to register your component with the Cloneable SDK

[Inject component into Cloneable SDK](/cloneable-documentation/ios-sdk/building-components/inject-component-into-cloneable-sdk.md)
{% endhint %}

<figure><img src="/files/QIsdY4nXiOB57QT6v8oI" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cloneable.ai/cloneable-documentation/ios-sdk/building-components/create-a-component-definition-web-app-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.