Shogun offers new capabilities for creating Custom Elements in Shogun. With this feature enhancement, developers can save time on the initial custom element creation by leveraging AI prompts to generate an initial starting point for the element's code.

Once the code is generated, the output can be further refined through additional prompts or manually customized to meet your development specifications.

You will find a 'Code with AI' button in the layout when you start or update your custom elements:

Upon clicking the 'Code with AI' button, an overlay will open up. For new Custom Elements, example prompts are given in order to help you get started.

While for existing Custom Elements, the AI model will consider your current code (Liquid, CSS, JS) as the basis for the AI-generated code.

Submitting a given prompt will generate a response that you can further refine by conversing with AI and submitting new prompts.

If the output is not correct or inaccurate you can use the 'Regenerate response' prompt to prompt the AI to try again.

Once you have code that you're satisfied with using you can press 'Use this code' which will add the code to the custom element.

From this point, you can use the 'save changes' prompt to lock in your AI code or 'preview' the code that you've generated on a grid where you can see how your code will look on different viewports.

As the case with manually created Custom Elements, changes made in the custom element editor window will immediately take effect on pages when viewed on the Page Editor, however, the pages in question where the element has been added will need to be published or republished in our editor for changes to the custom element to be inherited to the live page.

AI Conversation history isn't stored in the custom element editor (either by “Use this Code” or closing the overlay). As such, closing out the overlay while generating responses isn't recommended and will result in lost work.

“Code with AI” may occasionally generate incorrect code or something that can’t be used immediately. Prompts can be regenerated or refined, however, AI response may also “forget” about the context and not be able to give follow-up corrections.

Images used on the immediate code may not be as relevant as expected.