# Custom Components

### Building and Customizing

### **Component API**

| **Key**     |             | **Description**                                                                                                                                                                     |
| ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| HTML        |             | Contains HTML to be rendered as a component.                                                                                                                                        |
| fields      |             | Optional either `html` or `fields` keys must be present. Contains BF schema elements normally found in the `fields` key of the page editor. The schema will be used as a component. |
| source      |             |                                                                                                                                                                                     |
| modelSource | *{ model }* | If supplied, this will act as the models data source                                                                                                                                |
| *schema*    |             | All schema keys can be accessed from within the component as `schema.theKey` This allows                                                                                            |
|             |             |                                                                                                                                                                                     |

### Implementation API

| Key          |               | Description                                                                                                                                                                |
| ------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| \<bfcomp>    |               | html tag name needed to identify a BF component                                                                                                                            |
| name         | string        | The component name                                                                                                                                                         |
| modelSource  |               | used to supply the model will be for this component, in not supplied, the current model for the element is used.                                                           |
| modelDev     | object        | optional, used to add model keys that can be used for development and tests of components that are rendered where there is no `model` available. ( Used by the BF editor ) |
| source       | { component } | If supplied, this will act as the entire source for the component. This attribute was added to allow the BF component editor the ability to preview live components.       |
| fields       | array         | If supplied will act as the source of the field schema and replace the components default fields                                                                           |
| *attributes* | various       | All additional attributes supplied will override the components schema keys where applicable.                                                                              |

#### Usage as an JSON Schema element

< JSON Schema here >

#### Usage as an HTML Vue component

```markup
<bfcomp name="MyComponent" modelSource="model"   ></bfcomp>
```


---

# 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.klai.studio/v1/usage/stylingverview/custom-components.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.