Skip to content

feat(appkit): /ui visual variant picker#476

Open
IamGalymzhan wants to merge 5 commits into
mainfrom
feat/ui-variants
Open

feat(appkit): /ui visual variant picker#476
IamGalymzhan wants to merge 5 commits into
mainfrom
feat/ui-variants

Conversation

@IamGalymzhan

@IamGalymzhan IamGalymzhan commented Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

/ui variant selector skill

Document

This PR is adding a new feature of /ui skill, that makes agent create several design versions of the UI component and allows user to select it live on the web page, while agent could read it on the next turn and implement selected degisn.

How to test

  1. Use /ui command via Isaac/Claude Code and type want you want to build in dev-playground
  2. Once agent completes go to the page and select needed variants
    • You can see choices in the node_modules/.databricks/appkit/appkit-ui-choices.jsonl file
  3. Tell agent that you have selected variants that you liked
  4. Confirm everything is done (No component, selected the right design)

Limitations:

  1. No MCP integration (need sync)
  2. Skill lives in this repo only for now and only for Claude Code for testing

@github-actions

github-actions Bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

🔬  Run evals on this PR  ·  Go to Evals Monitor →

@github-actions

github-actions Bot commented Jul 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

📦 Bundle size report

Compared against bundle-size-baseline.json (main).

@databricks/appkit

npm tarball (packed): 710 KB (+7.9 KB) — gzipped download (dist + bin; excludes release-only docs/NOTICE).

dist raw gzip
JS (runtime) 735 KB (+6.6 KB) 257 KB (+3.0 KB)
Type declarations 279 KB (+4.6 KB) 96 KB (+2.1 KB)
Source maps 1.4 MB (+13 KB) 479 KB (+5.3 KB)
Other 11 KB 3.7 KB
Total 2.4 MB (+24 KB) 836 KB (+10 KB)
Per-entry composition (own code — deps external (as shipped))
Entry Initial (gz) Lazy (gz) Total (gz) node_modules (min) Own code (min)
. 80 KB (+773 B) 2.5 KB 82 KB (+773 B) external 261 KB (+2.4 KB)
./beta 39 KB 230 B 39 KB external 117 KB
./type-generator 19 KB 0 B 19 KB external 54 KB

Chunks:

Entry Chunk Load Size (gz)
. index.js initial 76 KB
. utils.js initial 4.0 KB
. remote-tunnel-manager.js lazy 2.5 KB
./beta beta.js initial 30 KB
./beta databricks.js initial 5.7 KB
./beta service-context.js initial 3.2 KB
./beta client-options.js initial 220 B
./beta databricks.js lazy 127 B
./beta index.js lazy 103 B
./type-generator index.js initial 19 KB

@databricks/appkit-ui

npm tarball (packed): 305 KB (+9.5 KB) — gzipped download (dist + bin; excludes release-only docs/NOTICE).

dist raw gzip
JS (runtime) 359 KB (+9.2 KB) 119 KB (+3.5 KB)
Type declarations 205 KB (+4.3 KB) 74 KB (+2.0 KB)
Source maps 685 KB (+16 KB) 224 KB (+6.1 KB)
CSS 16 KB 3.3 KB
Total 1.2 MB (+29 KB) 421 KB (+12 KB)
Per-entry composition (consumer bundle — deps bundled, peerDeps external)
Entry Initial (gz) Lazy (gz) Total (gz) node_modules (min) Own code (min)
./js 4.3 KB 49 KB 54 KB 208 KB 12 KB
./js/beta 20 B 0 B 20 B 0 B 0 B
./react 429 KB (+1.4 KB) 49 KB 478 KB (+1.4 KB) 1.3 MB (+136 B) 168 KB (+4.3 KB)
./react/beta 20 B 0 B 20 B 0 B 0 B

Chunks:

Entry Chunk Load Size (gz)
./js index.js initial 4.2 KB
./js chunk initial 120 B
./js apache-arrow lazy 49 KB
./js/beta beta.js initial 20 B
./react index.js initial 427 KB
./react tslib initial 2.1 KB
./react apache-arrow lazy 49 KB
./react/beta beta.js initial 20 B

@IamGalymzhan
IamGalymzhan marked this pull request as ready for review July 17, 2026 12:18
@IamGalymzhan
IamGalymzhan requested a review from a team as a code owner July 17, 2026 12:18
@IamGalymzhan
feat(ui-variants): visual variant picker with dev-only recorder
c5187d6 
Build a piece of app UI in several variants, pick one live in the running app,
then finalize the chosen variant into source.

- `<Variants>`/`<Variant>` (appkit-ui): inline switcher — hover-revealed
  controls, tick confirm, `accent` and `layout` props — that degrades to a
  plain viewer when the recorder is absent. The block identifier prop is
  `blockId` (a semantic key, not a DOM id).
- `uiVariants()` recorder plugin (appkit): POST /api/ui-variants/confirm,
  dev-gated (403), keyed upsert into
  node_modules/.databricks/appkit/.appkit-ui-choices.jsonl via a swappable
  ChoiceSink (default FileChoiceSink). Register conditionally so it never
  mounts in production.
- ast-grep lint rule flagging any <Variants> left in source before deploy.
- dev-playground demo route + nav.
- `/ui` command + guidance reference driving the author → pick → finalize loop.

Signed-off-by: Galymzhan <zhangazy2004@gmail.com>
@IamGalymzhan
docs(ui-variants): regenerate API docs for blockId rename
497e79e 
Signed-off-by: Galymzhan <zhangazy2004@gmail.com>
@IamGalymzhan
feat: add devOnly manifest flag to gate plugin registration
4a1bb74 
Introduce a declarative `devOnly` field on the plugin manifest. When set,
createApp registers the plugin only when NODE_ENV === "development"; in any
other environment it is skipped before resource collection (not constructed,
no routes, resources not validated). This moves the dev-only guarantee from
an app-author-written NODE_ENV ternary into the framework itself.

Mark the ui-variants plugin devOnly and simplify the dev-playground
registration to a plain uiVariants() call. The in-handler NODE_ENV 403 is
retained as fail-safe defense against mount-anyway paths.

Adds the field to the Zod schema (source of truth) and PluginManifest type,
regenerates the published JSON schema, documents it in the manifest guide,
and covers development/production/test/unset in bootstrap tests.

Signed-off-by: Galymzhan <zhangazy2004@gmail.com>
@IamGalymzhan
docs: regenerate API docs for devOnly manifest field
8dbe78f 
Signed-off-by: Galymzhan <zhangazy2004@gmail.com>
calvarjorge
calvarjorge reviewed Jul 20, 2026
View reviewed changes

@calvarjorge calvarjorge left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! Took a first look and left some comments

Comment thread .claude/commands/ui.md
@@ -0,0 +1,106 @@
---

@calvarjorge calvarjorge Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the place where we want to place the skill? Maybe yes, but there is a difference with the rest of the skills in the dir -- the other skills are to be used by appkit developers, while this skilled is meant to be installed and used by appkit users

Comment thread .claude/commands/ui.md
@@ -0,0 +1,106 @@
---

@calvarjorge calvarjorge Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to name it /ui? Can we align on this to avoid changing it later? Maybe this is to broad, other option could be /appkit-ui-variants

Comment thread packages/appkit-ui/src/react/ui-variants/index.ts
@@ -0,0 +1,2 @@
export { Variant, type VariantProps } from "./variant";

@calvarjorge calvarjorge Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we name the dir /ui-variants to be more specific and be consistent with the appkit-ui naming?

@IamGalymzhan IamGalymzhan Jul 20, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll make it

@IamGalymzhan
refactor(appkit-ui): rename variants dir to ui-variants
2653dd4 
Match the appkit plugin dir name for cross-package consistency. Files and the
public API are unchanged; only the internal directory moves.

Signed-off-by: Galymzhan <zhangazy2004@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@calvarjorge calvarjorge calvarjorge left review comments
@MarioCadenas MarioCadenas Awaiting requested review from MarioCadenas MarioCadenas is a code owner automatically assigned from databricks/eng-apps-devex-appkit

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@IamGalymzhan @calvarjorge