Manual 08: Build A Studio Visual Flow With An Agentic Miniapp

What This Guide Is For

Use this guide when a creator wants to build a visual flow in Studio and attach an App or Agentic App inside that flow.

The result is an agentic miniapp: a small published experience where normal visual Steps, forms, routing, and Agent actions work together.

What You Are Building

Example:

Start Step -> Intake Form -> Agentic App Step -> Review Result -> Submit / Publish Output

The visual flow controls the user journey. The Agentic App handles one intelligent task inside the journey, such as research, OCR, recommendation, analysis, or document generation.

If the App should coordinate several Agents as a team, see 09-agent-team-with-apps.md.

Before You Start

You need:

• permission to create Studio flows;
• permission to create Apps or Agentic Apps;
• at least one Agent if the miniapp needs AI;
• optional: a Space for knowledge;
• optional: integrations or webhooks for the final result.

Step 1: Open Studio

1. Go to Studio.
2. Select Create Flow.
3. Choose Visual Flow.
4. Add a name and short description.

Expected result: Studio opens a draft visual flow.

Step 2: Create The Start Step

1. Add a Start or first content Step.
2. Add text that explains what the user will do.
3. Add a button such as Start.
4. Connect the button to the next Step.

Expected result: the flow has a clear beginning.

Step 3: Add An Intake Form

1. Add a new Step.
2. Add the form fields the Agentic App needs.
3. Mark required fields.
4. Give each field a clear label.

Good fields for an agentic miniapp:

• request or task description;
• company or customer name;
• target market or category;
• uploaded file;
• image or document;
• desired output format.

Expected result: the flow collects the inputs needed by the Agentic App.

Step 4: Create Or Select The Agentic App

1. Open Apps or Agentic Apps.
2. Select an existing Agentic App or create a new one.
3. Define what the Agentic App does.
4. Select the Agent it should use.
5. Enable only the Tools it needs.
6. Save it as a draft or reusable App.

Example:

Agentic App: Supplier Research Miniapp
Agent: Research Assistant
Tools: web search, deep research, file reading
Output: short ranked supplier list with source notes

Expected result: an Agentic App exists and can be attached to a visual flow.

Step 5: Attach The Agentic App To The Flow

1. Return to Studio.
2. Add a new Step after the intake form.
3. Choose App, Agentic App, or Agent Action.
4. Select the Agentic App.
5. Map form fields into the Agentic App input.
6. Choose where the Agentic App output should go.

Typical input mapping:

Form field "Task" -> Agentic App input "task"
Form field "Uploaded file" -> Agentic App input "source_file"
Form field "Output format" -> Agentic App input "format"

Expected result: the visual flow can pass user input into the Agentic App.

Step 6: Define The Output Contract

Before previewing, define what the Agentic App should return.

Useful output types:

• text summary;
• structured JSON;
• table;
• file;
• image;
• decision value;
• next-Step recommendation.

Example:

Output "summary" -> Review Step text block
Output "recommendation_table" -> Review Step table
Output "next_step" -> Router condition

Expected result: later Steps know how to display or route from the Agentic App result.

Step 7: Add A Review Step

1. Add a Step after the Agentic App Step.
2. Display the Agentic App result.
3. Add actions such as:
   • approve;
   • edit;
   • retry;
   • submit;
   • download;
   • send to integration.

Expected result: the user can inspect the AI result before final submission or publishing.

Step 8: Add Routing Or Final Actions

Use routing when the miniapp should branch.

Examples:

• If confidence is high, go to Submit.
• If confidence is low, go to Manual Review.
• If a document is missing, go back to Upload.
• If the user approves, send data to a webhook.

Expected result: the flow reacts to both user choices and Agentic App outputs.

Step 9: Preview The Miniapp

1. Select Preview.
2. Fill the intake form.
3. Run the Agentic App Step.
4. Check the review Step.
5. Test retry and approval actions.
6. Test all routing paths.

Expected result: the miniapp works end-to-end before publication.

Step 10: Publish

1. Open Share or Publish.
2. Choose access mode:
   • public;
   • password protected;
   • workspace only;
   • external users or groups.
3. Choose whether it can be embedded.
4. Select Publish.

Expected result: the miniapp is available as a stable published version.

Step 11: Monitor Results

1. Open Results or Insights.
2. Review sessions, submissions, Agent runs, errors, and completion rate.
3. Check failed Agentic App runs.
4. Export results or send them to an integration if configured.

Common Patterns

Research Miniapp

Question form -> Research Agentic App -> source-backed report -> approval -> export

OCR Miniapp

Upload document -> OCR Agentic App -> extracted fields -> user review -> submit

Recommendation Miniapp

User criteria -> scoring Agentic App -> ranked options -> choose one -> confirmation

Support Intake Miniapp

Issue form -> triage Agentic App -> suggested category -> route to team

Troubleshooting

• If the Agentic App does not appear in Studio, check its visibility and publish/draft status.
• If inputs are empty, check field mapping.
• If the Agent runs but the next Step is blank, check the output contract.
• If routing fails, check the output value used by the router.
• If publishing is blocked, check required fields, access settings, and quota limits.
• If the Agent uses the wrong Tool, check the Agent's Tool permissions.

Product Decisions Needed

• Exact Studio label: Visual Flow, Flow, Board, or App Builder.
• Exact attachable unit label: App, Agentic App, Agent Action, or Miniapp.
• Whether an Agentic App must be published before it can be attached to a flow.
• Whether Agentic App outputs must be typed before publishing.
• Whether review is mandatory before an Agentic App can run in public flows.