@kestra-io/create-artifact-sdk

CLI scaffolder for Kestra plugin custom UIs.

Usage

Run from your plugin's root directory (the one containing settings.gradle or settings.gradle.kts):

npm create @kestra-io/artifact-sdk

Or from inside the ui/ directory:

cd my-plugin/ui
npm create @kestra-io/artifact-sdk

The CLI will:

1. Detect your plugin — reads settings.gradle[.kts] to find the plugin group id (e.g. io.kestra.plugin.redis).
2. Ask which task you want to add a custom UI for (e.g. list.ListPop).
3. Ask which UI module to customize:
   • topology-details — panel shown when a task node is displayed in the topology view
   • log-details — panel shown in the log view for a task execution
4. Show a summary and ask for confirmation before writing anything.
5. Scaffold the ui/ directory with:
   • package.json (with all required dependencies)
   • vite.config.ts (pre-configured with your plugin id and task)
   • src/main.ts and src/App.vue for local development
   • src/components/<ComponentName>.vue — the starter component to edit
   • src/<ComponentName>.stories.ts — a Storybook story
   • .storybook/main.ts and .storybook/preview.ts
   • index.html, tsconfig.json, .gitignore
6. Run npm install (optional, prompted).

After scaffolding

cd ui

# Local dev — renders the component in a Vite app
npm run dev

# Storybook — develop and document in isolation
npm run storybook

# Build the UI module for bundling with the plugin
npm run build

How component names are derived

The component filename is built from the task type and the UI module:

| Task type | UI module | Component name | | ------------------ | ------------------ | ----------------------------------- | | list.ListPop | topology-details | ListListPopTopologyDetails.vue | | io.Get | log-details | IoGetLogDetails.vue | | trigger.Schedule | trigger-details | TriggerScheduleTriggerDetails.vue |

Requirements

• Node.js ≥ 18
• Must be run from a directory containing settings.gradle or settings.gradle.kts (or a direct child of one)