This project uses dev-tools-plugin feature together with ChatGPT to get information about available component attributes and allow simple modifications (string and booleans only).

Supports all HTML elements. Examples for Vaadin components, native HTML components and 3rd party Web Components below.

ChatGPT is optional as response has been cached for few components, see details below.

Set your ChatGPT API key within ./frontend/component-helper/chatgpt-utils.ts as const apiKey = 'sk-xxxxxxxxxx';

As usual: mvn.

Use Pick component to select component, start with vaadin-text-field.

vaadin-text-field and vaadin-button have cached ChatGPT response so you will see available attributes, inputs and descriptions immediately:

Modify values and see instant preview:

After picking any other component, ChatGPT request will be send. You will see loading indicator:

In browser console logs you will processing and parsing info:

After that processed fields will be rendered automatically:

It is possible to pick ANY component but results can be totally unpredictable ;-) Few examples: