Skip to content

docs: add schema development workflow section with live editor and AI Kit info #374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
natocTo merged 3 commits into from
Mar 30, 2026
Merged

docs: add schema development workflow section with live editor and AI Kit info #374

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e697ab3
docs: add schema development workflow section with live editor and AI…
devin-ai-integration[bot] Mar 30, 2026
a00f33f
docs: remove Developer Portal preview note per review feedback
devin-ai-integration[bot] Mar 30, 2026
3170492
docs: remove verbose steps from live editor instructions per review
devin-ai-integration[bot] Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions extend/component/ui-options/configuration-schema.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,43 @@ 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/<project-id>/components/<component-id>/<config-id>`).
2. Press **Ctrl+D** (or **Alt+D** / **Option+D** on Mac) while on the configuration page.
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
change the schema registered in the Developer Portal.

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

Expand Down
Loading