From e697ab3d31fd0ebd720bef0d977195ea5c66ab61 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 30 Mar 2026 11:05:13 +0000 Subject: [PATCH 1/3] docs: add schema development workflow section with live editor and AI Kit info Relates to: UT-3673 Co-Authored-By: Jakub Kotek --- .../ui-options/configuration-schema.md | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/extend/component/ui-options/configuration-schema.md b/extend/component/ui-options/configuration-schema.md index f3e9460c..5b423cf9 100644 --- a/extend/component/ui-options/configuration-schema.md +++ b/extend/component/ui-options/configuration-schema.md @@ -75,6 +75,48 @@ The following `options` keys can be used in property definitions: | `options.disable_array_delete` | Disable removing items from arrays | | `options.disable_array_reorder` | Disable reordering items in arrays | +## Developing and Previewing Schemas + +When building or iterating on a configuration schema, you need a way to see how your JSON schema renders as a form. +The recommended approach is to use the **live schema editor built into the Keboola UI**. + +### Live Schema Editor in Keboola UI (Recommended) + +The Keboola UI includes a built-in live schema editor that lets you edit a JSON schema and immediately see the rendered form +side by side. This is the fastest way to iterate on your schema during development. + +**How to use it:** + +1. Open any component configuration page in the Keboola UI (e.g., `https://connection.keboola.com/admin/projects//components//`). +2. Press **Ctrl+D** (or **Alt+D** / **Option+D** on Mac) while on the configuration page. +3. A resizable side panel opens with a code editor containing the current configuration schema JSON. +4. Edit the schema in the panel — the form on the page updates in real time as you type. +5. Use the **arrow button** in the panel toolbar to move the editor to the left or right side of the screen. +6. Click the **checkmark button** to apply the schema override for the current browser session. +7. Press **Ctrl+D** again (or click the **close button**) to hide the editor. + +This editor uses the same [RJSF](https://rjsf-team.github.io/react-jsonschema-form/) rendering library as the production UI, +so what you see in the editor is exactly what end users will see. The override is local to your browser session — it does not +change the schema registered in the Developer Portal. + +*Note: The JSON schema preview that was previously available in the Developer Portal UI has been removed, as it did not +support the full range of Keboola UI extensions and rendered most schemas incorrectly.* + +### Generating Schemas with AI Kit + +You can also use the **build-component-ui** skill from the +[Keboola AI Kit](https://github.com/keboola/ai-kit/tree/main/plugins/component-developer/skills/build-component-ui) +to generate or refine configuration schemas using AI. The skill is an expert agent specialized in: + +- Designing `configSchema.json` and `configRowSchema.json` structures +- Using `options.dependencies` for conditional field visibility +- Choosing the right UI elements and formats +- Setting up sync actions for dynamic dropdowns and test connection buttons + +To use it, install the [Keboola AI Kit](https://github.com/keboola/ai-kit) as a Claude Code plugin and invoke the +`@build-component-ui` agent. Describe your component's configuration needs and it will produce a complete schema +following Keboola conventions and best practices. + ### Example Let's assume your component accepts the following configuration: From a00f33f7246d00bd64f97ed424894ac47eb9906d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 30 Mar 2026 11:14:58 +0000 Subject: [PATCH 2/3] docs: remove Developer Portal preview note per review feedback Co-Authored-By: Jakub Kotek --- extend/component/ui-options/configuration-schema.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/extend/component/ui-options/configuration-schema.md b/extend/component/ui-options/configuration-schema.md index 5b423cf9..902728b2 100644 --- a/extend/component/ui-options/configuration-schema.md +++ b/extend/component/ui-options/configuration-schema.md @@ -99,9 +99,6 @@ This editor uses the same [RJSF](https://rjsf-team.github.io/react-jsonschema-fo so what you see in the editor is exactly what end users will see. The override is local to your browser session — it does not change the schema registered in the Developer Portal. -*Note: The JSON schema preview that was previously available in the Developer Portal UI has been removed, as it did not -support the full range of Keboola UI extensions and rendered most schemas incorrectly.* - ### Generating Schemas with AI Kit You can also use the **build-component-ui** skill from the From 31704920efeb1c1cd897e78bfc715e5ad07c0b77 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Mon, 30 Mar 2026 11:15:28 +0000 Subject: [PATCH 3/3] docs: remove verbose steps from live editor instructions per review Co-Authored-By: Jakub Kotek --- extend/component/ui-options/configuration-schema.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/extend/component/ui-options/configuration-schema.md b/extend/component/ui-options/configuration-schema.md index 902728b2..cdff0d49 100644 --- a/extend/component/ui-options/configuration-schema.md +++ b/extend/component/ui-options/configuration-schema.md @@ -89,11 +89,9 @@ side by side. This is the fastest way to iterate on your schema during developme 1. Open any component configuration page in the Keboola UI (e.g., `https://connection.keboola.com/admin/projects//components//`). 2. Press **Ctrl+D** (or **Alt+D** / **Option+D** on Mac) while on the configuration page. -3. A resizable side panel opens with a code editor containing the current configuration schema JSON. -4. Edit the schema in the panel — the form on the page updates in real time as you type. -5. Use the **arrow button** in the panel toolbar to move the editor to the left or right side of the screen. -6. Click the **checkmark button** to apply the schema override for the current browser session. -7. Press **Ctrl+D** again (or click the **close button**) to hide the editor. +3. Use the **arrow button** in the panel toolbar to move the editor to the left or right side of the screen. +4. Click the **checkmark button** to apply the schema override for the current browser session. +5. Press **Ctrl+D** again (or click the **close button**) to hide the editor. This editor uses the same [RJSF](https://rjsf-team.github.io/react-jsonschema-form/) rendering library as the production UI, so what you see in the editor is exactly what end users will see. The override is local to your browser session — it does not