Conigma Connect

LLM (AI) Support

Overview

You can use Large Language Models (ChatGPT, Claude, Copilot, etc.) to quickly generate Interactive UI JSON for your flows. Instead of writing the component tree by hand, describe the UI you want in plain language and let the LLM produce valid JSON that you can paste directly into the Visual Editor.

This page explains the workflow, the reference document you need, and tips for getting the best results.

Prerequisites

  • Access to an LLM (ChatGPT, Claude, GitHub Copilot Chat, or any model that accepts a system prompt)

  • The LLM Reference Document (see Attaching the Reference Document below)

  • The Connect Visual Editor for previewing and fine-tuning the generated UI

Workflow

Step 1: Attach the Reference Document

The reference document (llm-reference.md) contains everything the LLM needs to generate valid JSON: a full JSON Schema, data binding rules, layout patterns, and examples. You must provide it to the LLM as context.

How to provide it depending on your tool:

Tool

How to attach

ChatGPT

Paste the document content as the first message, or upload it as a file attachment. For repeated use, create a custom GPT with the document as instructions.

Claude

Paste the document content as the first message, or upload it as a file. For repeated use, add it to a Project as knowledge.

GitHub Copilot Chat

Reference the file using #file:llm-reference.md in your prompt.

Any other LLM

Paste the document content as a system prompt or initial context message.

Important: The reference document instructs the LLM to output only raw JSON with no markdown fences or commentary. This makes it easy to copy-paste directly into the Visual Editor.

Step 2: Describe the UI You Want

Write a plain-language description of the UI. Be specific about:

  • What data to display (column names, field names, sample values)

  • What layout you want (dashboard cards, a table, a form, a result summary)

  • What actions the user should be able to take (start a flow, open a link, submit a form)

  • What styling you prefer (colors, alignment, spacing)

Step 3: Copy the Output into the Visual Editor

  1. Copy the JSON from the LLM response.

  2. Open the Visual Editor in Connect (found on the flow's interactive output template settings).

  3. Paste the JSON into the JSON editor panel on the left.

  4. The live preview on the right renders the UI immediately.

  5. Fine-tune properties or fix any issues directly in the editor.

Step 4: Iterate

If the UI doesn't match your expectations:

  • Tell the LLM what to change (e.g. "make the header bigger", "add a download button", "change the grid to single-select").

  • The LLM will produce an updated JSON.

  • Paste it into the Visual Editor again.

📷 Placeholder: Insert screenshot of the Visual Editor with LLM-generated JSON on the left and the rendered preview on the right.

Attaching the Reference Document

The reference document is maintained at the following location in the Connect repository:

Rendering...

The document contains:

  • A JSON Schema formally defining all component types, their properties, defaults, and allowed values

  • Data binding rules explaining how buttons collect data from forms and grids

  • Layout pattern examples (dashboard, data table with actions, form with submit, result display)

  • A quick reference table summarizing all components

Tip: The document is self-contained. You do not need to provide any additional context to the LLM.

Example Prompts

Below are example prompts that produce good results when combined with the reference document.

Dashboard with KPI cards

Generate an interactive UI showing a dashboard with 4 KPI cards in a horizontal row. Each card should have an icon and a metric:

  • "Total Orders" (value: 1,284) with a ShoppingBag icon in Accent

  • "Revenue" (value: €45,230) with a Money icon in Success

  • "Pending" (value: 23) with a Clock icon in Warning

  • "Errors" (value: 3) with a DismissCircle icon in Error

Below the cards, add a horizontal divider and a label "Last updated: 2025-01-15 14:30 UTC" in Body typography with Neutral color.

Data table with flow action

Create a UI with a title "Order Review", a data grid with columns: Order ID, Customer, Amount, Status. Add 5 sample rows. Enable sorting, filtering on Customer, and multi-select with a minimum of 1. Below the grid, add a FlowStartButton labeled "Approve Selected" that binds to the grid and starts /flows/approve-orders in Background mode. Validate the grid selection before starting.

Form collecting user input

Build a form UI with:

  • A header label "Create Support Ticket"

  • A JSON Schema form with fields: Subject (required string), Priority (enum: Low, Medium, High, Critical), Description (string), Assignee Email (string, email format)

  • A divider

  • A FlowStartButton "Create Ticket" that binds to the form, validates it, and starts /flows/create-ticket interactively in the current tab.

Simple result page

Generate a result page for a completed data import flow. Show:

  • A PaneHeader "Import Complete"

  • A card with two rows: a success icon + "142 records imported" and an error icon + "3 records skipped"

  • A link button "Download Error Log" pointing to https://example.com/logs/{importId} opening in a new tab, where importId is "abc-123" provided in static data.

Tips for Best Results

Tip

Details

Be specific about data

Provide column names, field names, and sample values. The LLM can only generate realistic items/data if you describe them.

Name your flow paths

Always specify the exact flow path for FlowStartButtons (e.g. /flows/approve-orders).

Mention binding explicitly

If you want a button to read from a grid or form, say "bind to the grid" or "validate the form before starting".

Iterate in small steps

Generate a basic layout first, then ask for refinements: "add pagination", "make it wrap on mobile", "change the icon".

Use the Visual Editor to tweak

LLM output is a starting point. Fine-tune spacing, colors, and styles directly in the Visual Editor.

Validate in Preview Mode

The Visual Editor renders FlowStartButtons in preview mode — click them to verify data binding without side effects.

Limitations

  • The LLM does not know your specific flow paths, data structures, or business logic. You must specify these in the prompt.

  • Icon names must match Fluent UI icon names. If the LLM uses a name that doesn't exist, the icon won't render. Check the Fluent UI Icon Search for valid names.

  • The LLM may occasionally produce invalid JSON or use a property name that doesn't exist. Always preview in the Visual Editor before saving.

  • Complex JSON Schema forms (nested objects, conditional schemas) may need manual editing after generation.

See Also