In the Productised system, there's 3 different types of AI products you can build.
1. AI Products with Standard Output
2. AI Products with Dynamic Multi-Page Output
3. AI Products with Dynamic Multi-Page Output & structured output variables. (Covered in this article)
For products of greater complexity which need really nuanced output, our platform also supports prompt chaining - which is discussed later in this section and global custom variables which enable you to populate important details such as your company name easily throughout your products.
This article is all about teaching you to build AI products with dynamic multi-page output and structured output variables. When we refer to 'dynamic output' what we're essentially referring to is output that appears as a landing page does typically, with both visual and text-based elements. This is ideal for professional-grade deliverables such as diagnostics and intakes. You also have the option to embed other interactive elements within dynamic output pages, such as your calendars and videos.
To begin the building process, select 'Blank Product' from your home dashboard in the 'Products' section of your account. Get to Products by selecting the funnel icon from the sidebar. Note that the 'Build With AI' and 'Template' features are coming soon.
Step 1: The Form Builder
To build a product like this, you need to start with the form builder. This is where you create the form experience which your end users will interact with.
The form builder interface is very easy to use. All you really need to configure upfront is (i) the question name (ii) the question title (iii) the question type.
1. The question name field. The question name field is important because it is where you define the question input as a variable which will be used to provide context to your AI prompts later. It's important to use correct variable naming convention. Use lower case and underscores, for instance target_audience and not Target_Audience
You open the question settings tab to gain access to the question title and name fields, as you can see in the image arrow below:
2. The question title field and question types: The question title field is simply where you give the question a name such as what is your target audience? Then you have the question types. The most common question types you will use will be Yes/No (boolean), Rating Scale, multi-select drop-down and short/long answer. Other question types such as matrix are more complex. We cover these elsewhere in this knowledge base. Click 'Single-line-Input' below the question box to change the question type by scrolling through the options. Note that single-line is the default.
One other thing you might like to do here is set placeholder text. This appears in the box before the user types their answer. Return to 'settings' and then enter your placeholder text in the 'placeholder text within input field' box.
Step 2: The Workflow Builder
The next step is to create the workflow which powers your AI Product in the backend. Every workflow begins with the landing page node.
Select the landing page from the node menu and drop it onto the canvas. The next step is to click the node on the canvas, this will open up the properties menu on the right that enables you to create the actual page, by clicking the 'create page' button.
This brings you into the page builder environment for the first time which you can see in the image below
As you can see there is the option to create a landing page with AI. You can provide the AI with a simple prompt like 'design me a landing page with a hero section and two further content blocks for body copy and images' and you will receive a done-for-you landing page which looks sharp from the start.
For this tutorial however, we will select 'skip AI landing page' and then create the page manually using the 'blank' template. This brings you into the builder environment where you can click the '+' icon to drop some landing page elements onto the design surface.
For this example we're just going to focus on adding a form block, but there's plenty of other options you can select from the sidebar, including different content blocks, photos and other elements. The page builder is 100% drag and drop so there's no need for any serious technicalities.
For improved visual presentation we recommend deleting the title field from the form block but it's entirely up to you.
Step 3: Configuring the Product Workflow
Now you need to add all the remaining nodes that make up the workflow to the canvas, then connect them together using the connector tabs. For a basic workflow with dynamic output, you need in this order: a landing page node > a form node > an AI Writer Node > the Loader node and of course the Dynamic Output (Multi-Page) Node.
The main focus for completing your workflow from here is the AI Writer node. This is where you will create the prompt that will instruct the system to produce your dynamic output.
(i): Naming and model selection: Name the node output variable, (in this example we have called it output_1) and then select the AI model you want to use for generation of the output. Common options are GPT-4, GPT 4-Turbo and GPT 4o/4o mini.
(ii): Create the prompt and assign variables from the form
The next step in the process is the creation of the AI prompt which will need to incorporate the question name variables you created in the form earlier, such as target_audience. Here's an example prompt sequence:
Based on the {input}:
Role: You will assist me in summarizing lengthy documents into clear, concise, and accessible summaries.
The document type is: {form:document_type}
Focus on extracting and highlighting the most important key points:{form:key_summarized_points}, ensuring that no critical insights are overlooked.
Tailor the summary for the target audience:{form:document_target_audience}, adapting language, tone, and level of detail to their needs and expectations.
Ensure the final summary adheres to the desired length: {form:desired_length}, striking the right balance between brevity and completeness.
Output Requirements
Present the summary in a structured format (e.g., headings, subheadings, or bullet points) to enhance readability and comprehension.
Include a brief executive overview at the start to capture the essence in one or two sentences.
Organize the content logically, grouping related points for flow and clarity.
When appropriate, add actionable insights, implications, or recommendations derived from the document to maximize value for the reader.
As you can see the form variables have been populated throughout the prompt. This is a simple prompt that includes role, input and output requirements.
To add the form variables to the prompt, simply insert them from the variable menu
Each node will have its own component prompt which will instruct the AI model on how to represent your output dynamically on the page, including formatting and presentation instructions, and the input variables from the form indicated in red. The following example prompt is for an 'Ad Hook Variant' node.
Role: You are a high-performing ad copywriter generating emotionally resonant hook lines to capture attention.
Use the following input:
• Product or service specified by the form user, which shall be the {form:product_or_service}
• Audience specified by the form user in the input which shall be {form:specified_target_audience}
• The main benefit or transformation the form user has indicated they would like the ad to convey {form:promised_transformation}
• The tone the form user has indicated they want in {form:desired_ad_tone}
• Platform: Tailor the ad copy to suite the platform indicated in {form:desired_ad_platform}
Generate 2–3 concise, emotionally compelling attention hooks that speak to the core pain points, aspirations, or curiosity triggers of the target audience identified in {form:specified_target_audience}.
Each hook should be phrased in the selected tone {form:desired_ad_tone} and formatted appropriately for the platform specified in {form:desired_ad_platform} (e.g., short punchy lines, questions, bold statements).
Generate each hook on the page in accordance with the structured output variables to follow:
Once you have created all the nodes in the workflow builder, the final step is to create your structured output variables.
Step 4: Adding your structured output variables
The advantages of structured output: With more complex output presentation, such as with assessment-style products you may find that you have to use many nodes to adequately represent all the output on your page(s). Adding more than 3 nodes may reduce system performance and multiple nodes can be cumbersome to work with. Structured output variables enable output from one node to be presented on a page by 'chunking' the output, making product creation much easier.
The best way to think of structured output variables is as a design tool that enables granular control over where and how the output is displayed on a page, by segmenting the main node prompt into smaller components.
To use structured output, toggle the feature on after you have finished the prompt for the AI writer node.
Once you have enabled structured output create the structured output variable fields by selecting 'add field', then add the variable key name, description and the display prompt for each one. Generally, you will want to have at least 3 structured output variables on a page. Once you have created the variables they can be selected in the page builder to populate your output page as explained below.
Step 5: Adding the loader node (optional)
It's definitely not a must-have but you may well like to add a loader image for your audience to view while the product output is being generated. Drag the loader node onto the canvas, select it and then enter the loader manager to select your desired loader image.
Step 6: Adding the dynamic multi-page node
Add the node from the sidebar and drag it onto the workflow canvas.
Now there's a few configuration steps to complete before you return to the page builder environment to complete the output page configuration
1. Create the page(s)
2. Name the pages
3. Assign the AI Writer nodes to the respective pages
4. Select 'Create this page'
Step 7: Configure the dynamic output page(s)
For the final configuration of your output pages, click the dynamic output node on the canvas where it says 'edit output pages.' Then select the 'manage output pages' button and finally the 'edit' button from the Properties tab on the right, to bring up the page builder environment and configure the output pages.
Edit buttons for individual pages
By clicking edit you will be returned to the page builder environment to edit your output page(s). Here you can format the background for your page, including gradient colors, add content blocks, images and more.
To add the structured output variables that will populate the page with your dynamic content use the @ symbol which will bring up a scroll menu with all your structured output variables, referred to as 'object variables.' Note that structured variables can also be added 'in text' if you want to add additional static page text for them to feature in.
Step 8: Make your final customizations to the output presentation
- You may wish to add a video or other interactive elements to your page: You can do this by selecting the html editor from the sidebar (</> icon) and adding your desired html code for the interactive element
- You can easily change the background color, font, text weight and more by selecting those elements on the design canvas, then editing their properties in the property grid on the right.
- There's also the option to add animations and additional content blocks by selecting the '+' icon and the rectangular icon below which contains numerous content blocks, even quality images.
Step 9: Deploy the Product for Use
To deploy the product, navigate to your product's settings area, then select the deployment sub-menu and toggle 'publish product' to on. Please note that the product will not deploy if you have not created your landing page yet. You can then fetch the product deployment link from 'Domain and URL Settings'. To learn how to embed your product in your website or landing page please refer to our article on embedding your productised offering in a website.
