Skip to main content

AI-Powered Template Generator

Create and Edit List & Details Panels from Your API Data​

The AI-powered Handlebars Generator enables rapid creation and customization of UI panels for your integrations. Instantly generate, preview, and refine Handlebars templates for List and Details views—no manual coding required. This includes the creation of Handlebars helpers, JavaScript, CSS and the panels of Handlebars

1. Accessing the Feature​

Step 1: Navigate to your integration and scroll to the Test button at the bottom of the page.

Step 2: Click Test to fetch data from your configured endpoint. You’ll see the live response from your API.

2. Launching the Template Wizard​

  • If you’ve selected a custom carousel as your display control, and your endpoint returns an array of items, the Template Wizard button appears below the response data.
  • If your API response does not contain an items array, use JSONata to transform your data—see tips below.

3. Using the AI-Powered Generator​

a. Opening the Wizard​

Click Template Wizard. A panel opens, showing tabs for each UI view (e.g., List, Details).

b. Auto-Generated Handlebars​

  • The wizard will auto-generate Handlebars templates for each panel based on your data and any prior configuration.
  • For the first time, the AI creates new templates. If you’re updating, the wizard will prefill existing templates, CSS, and JavaScript, ready to edit.

c. Tabs & Navigation​

  • Each UI panel (List, Details, etc.) has its own tab.
  • Easily switch between views to customize each panel individually.

d. Edit & Customize​

  • Edit the Handlebars template for the selected panel.
  • Add a description for each panel (e.g., "Shopify ecommerce card, size selector, color selector, include image and add to cart button").
  • Edit or add custom Handlebars helpers as needed (e.g., helpers for price formatting, image selection, etc.).

e. Layout & Visual Guidance​

  • Attach or drag-and-drop images to show your desired layout, branding, or style. (This helps the AI understand your visual goals and adapt templates accordingly.)
  • Add notes about layout requirements, special fields, or brand colors.

f. Documentation & Guidance​

  • Inline documentation and tooltips are available to help you edit Handlebars syntax and make the most of helpers.

4. Actions​

  • Use This Handlebars: Save/apply the template for the current panel.
  • Regenerate: Rerun the AI generator after you edit sample data or parameters.
  • Persistence: All templates, helpers, descriptions, and attached images are saved per panel for future editing.

5. Handling API Responses​

  • If your endpoint returns an items array: The wizard works out of the box.
  • If not: Use the JSONata field to transform your API response into a format with an items array. Tip: If you see a warning, you’ll need to provide a transformation so the AI understands your data as a list.

6. Example Workflow​

  1. Test your endpoint—see the returned JSON data.
  2. Click Template Wizard—review or edit generated Handlebars for List and Details panels.
  3. Describe your panel and/or attach images for layout inspiration.
  4. Save to persist your template, or regenerate to update after API changes.

7. Visual Reference​

Template Wizard Screenshot (Attach screenshots showing the List panel, editing interface, and layout image upload)

8. Best Practices​

  • Always test your endpoint before generating templates.
  • For best results, provide layout screenshots or sketches—brand colors, card layouts, etc.
  • Leverage helpers and tooltips for advanced formatting.
  • Use the “Regenerate” button after updating your endpoint data to keep templates in sync.

Troubleshooting​

FAQ​

Q: What if my API changes? A: Use “Regenerate” to update templates based on new data.

Q: Can I use my own Handlebars code? A: Yes, simply paste your template in the editor for each panel.

Q: Are images required? A: No, but uploading layout images helps the AI generate more brand-aligned templates.