Use Case: Parsing Stringified JSON API Responses for Flow Automation

This example shows how Titan Flow can extract key invoice details from an uploaded file end-to-end. A Web project uploads the invoice, OCR extracts text, an external service returns structured data, and the JSON Parse node converts the returned stringified JSON into usable fields. The parsed values can then be displayed in a Web project, stored in Salesforce, or used for downstream automation.

Overview

Many extraction services return data as stringified JSON rather than a standard JSON object. These responses can contain escaped characters, nested objects, and multi-level structures. Because this data arrives as text, it cannot be mapped or evaluated in Titan Flow until it is parsed.

The JSON Parse node automatically converts the entire response into a structured JSON object, including nested layers. This allows your flow to access fields such as invoice_number, vendor_name, and amount_due without manual cleanup or custom code.

Flow Setup

In this section, you’ll configure the Flow that processes the uploaded invoice, calls the external service, and prepares the data for parsing. This Flow handles OCR, API communication, and variable preparation before the JSON Parse step runs.

Flow Variables

Create the following variables in the Static Variables window:

• ocr_result
• gpt_result
• text_input
• content_result
• invoice_number
• vendor_name
• amount_due
• due_date

These variables provide a consistent mapping surface for the JSON Parse node and any downstream steps.

Flow Steps

In this section, you’ll add and configure each Flow node in sequence, from text extraction to API calls and JSON parsing. Each step builds on the previous one to ensure the invoice data is extracted, structured, and ready for downstream use.

Titan Vision AI Node

1. Click the Start +. 
2. Choose Titan Vision AI. 
3. Click Next. 

Configure the node:

4. Set Engine to Version 1.
5. In Files, choose the variable that holds the uploaded file (for example, files_var).
6. In Store Plain Text to, choose the static variable where the extracted text should be stored (for example, ocr_result).
7. Click Next to continue.

8. On the Custom Mapping screen, select Add Field only if you need to configure custom output mapping.
9. If no custom mapping is required, click Next to continue.

10. Enter a Tag name and click Insert.

API Hub Node

1. From the After Finish connector of the Titan Vision AI node, click the + icon.
2. Select the Integrations tab.
3. Choose API Hub from the list.
4. Click Next to continue.

5. In the Parameters tab, set the request type to POST.
6. Enter the endpoint URL:
   https://api.openai.com/v1/chat/completions
7. Leave the source set to Static.

8. Select the Authorization tab.
9. Set Auth Type to Bearer Token.
10. Paste your API token into the Token field.

11. Select the Headers tab.
12. Add a header with the following values:

• Key: Content-Type
• Type: Static
• Value: application/json

13. Select the Body tab.
14. Set Body Content Type to JSON.
15. Paste the JSON request body into the editor. 
16. In the message content, reference the OCR output variable where required (for example, [GV / ocr_result]) so the invoice text is passed into the request dynamically.
17. Review the body to confirm it returns JSON with the expected fields (for example, invoice number, vendor name, amount due, and due date).

18. Select the Output tab.
19. Under Plain Result, choose String and select [GV / gpt_result] as the variable to store the full API response.
20. Add a Mapping Path to extract the parsed content:
    • Set the type to String.
    • Enter the path:
      choices.0.message.content
    • Select [GV / content_result] as the target variable.
21. Click Update to save the output configuration.

JSON Parse Node

This is the key step that enables advanced extraction.

1. From the After Finish connector of the API Hub node, click the + icon.
2. Select the Integrations tab.
3. Choose JSON Parse.
4. Click Next.

5. In the JSON Parse window, use the Select JSON Variable dropdown to select [GV / content_result].
6. Paste a sample JSON payload into the editor. This sample is used only to generate the JSON tree and does not affect runtime values.
7. Click Generate to build the JSON tree.

Why the Generate button may be disabled:
The Generate button becomes available only after a JSON variable is selected. If no variable is selected, Titan cannot generate the JSON tree.

8. After the JSON tree is generated, the Tree View opens automatically.
9. For each field in the tree, use the Store into variable dropdown to map the value to a static variable:
   • Map InvoiceNumber to [GV / invoice_number].
   • Map VendorName to [GV / vendor_name].
   • Map AmountDue to [GV / amount_due].
   • Map DueDate to [GV / due_date].
10. If required, select + New Variable to create a variable directly from the Tree View.

Note: You can also create these global static variables in your project settings ahead of time. Any variables created or selected here are stored in Global Static Variables and are available throughout the Flow.

11. Click Update to save the mappings and complete the JSON Parse configuration.

Add the Finish Node

1. From the On Success, On Partial Success, or On Fail connector of the JSON Parse node, click the + icon. For this example, the On Success node was selected. 
2. In the Add Node window, stay on the Popular tab. Click Next 

3. In Return Parameters, select the variables that should be returned when the Flow completes.
   For this example, all listed variables are selected because the JSON Parse node populates them.
   Returning them ensures that every parsed field is available to downstream steps or the calling Web project. This includes:

• ocr_result
• gpt_result
• text_input
• content_result
• invoice_number
• vendor_name
• amount_due
• due_date

Use the filter if needed to quickly find specific variables.

4. Click Next to confirm the selection.

5. Enter a Tag name and click Insert. 

The Finish node returns the parsed and mapped variables from the Flow, allowing them to be used by downstream processes, such as a Web project or another automation step.

Review the completed Flow and confirm that all nodes are connected correctly.

Configure the Web Project 

In this section, you’ll create a Web project that triggers the Flow, uploads an invoice, and receives the parsed results returned by the JSON Parse node. The Web project serves as the user-facing entry point for the process, displaying the extracted invoice data once the Flow is complete. 

Create Web Project Static Variables

Before configuring the Web project layout and actions, create the static variables that will store the data returned from the Flow.

1. Open the Web project.
2. Navigate to Project Settings → Custom Variables → Static.
3. Create the following static variables:
   • chatgpt_result
   • ocr_result
   • content_result
   • invoice_number
   • vendor_name
   • amount_due
   • amount_date
4. Click Apply to save the variables.

These variables act as the receiving surface for values returned by the Flow, including the structured fields produced by the JSON Parse node.

Add Web Project Elements

In this step, you’ll add the elements that allow a user to upload an invoice, trigger the Flow, and view the extracted invoice details.

Required Elements

Add the following elements to your Web project:

1. File Upload
   • This element allows the user to upload an invoice file.
   • The uploaded file is passed to the Flow for OCR and processing.
2. Button
   • This button triggers the Flow when clicked.
   • In this example, the button executes the Flow, which extracts text, calls the API, and parses the JSON response.
3. Input Fields
   Add input fields to display the values returned by the Flow:
   • Invoice Number
   • Vendor Name
   • Amount Due
   • Amount Date
4. These fields are populated automatically once the Flow is complete.

How Users Interact with the Web Project

• The user uploads an invoice using the File Upload element.
• The user clicks the button to start processing.
• The Flow runs OCR, sends the extracted text to the API, and parses the response using the JSON Parse node.
• The parsed invoice values are returned to the Web project.
• Each input field is populated with the corresponding invoice detail.

Configure the Button On Click Action

In this step, you’ll configure the button to trigger the Flow and return the parsed invoice values to the Web project.

Open Button Actions

1. Select the Button element in the Web project.
2. Click the Link / Actions icon in the toolbar.

Add Flow Node 

1. Click Start + to add an action.
2. Select Flow and click Next.

3. Choose the Flow created earlier.
4. (Optional) Enable Test mode if you want to run the Flow without committing data.
5. (Optional) Enter a message to display while the Flow runs, for example: Please wait…
6. Click Configure Parameters and map the required input values.
7. Locate the files_var parameter.
8. Set the source to Field.
9. Select the File Upload element from the dropdown.
10. Leave the remaining parameters set to Static unless your Flow requires them.
11. Click Apply to save the configuration.

This step ensures the uploaded invoice file is passed correctly into the Flow for processing.

12. Click Return Parameters.
13. For each variable that should be returned to the Web project, set the source to Field and select the matching Web project variable.
14. In this example, map the following:

• chatgpt_result → gpt_result
• ocr_result → ocr_result
• content_result → content_result
• invoice_number → invoice_number
• vendor_name → vendor_name
• amount_date → due_date
• amount_due → amount_due

15. Leave unrelated variables set to Static.
16. Click Apply to save the configuration. Click Next. 

These return parameters allow the parsed invoice data produced by the JSON Parse node to populate the Web project fields after the Flow completes.

17. Enter a tag name and click Insert. 

Add Affected Element Node 

After configuring the Flow return parameters, use an Affected Elements action to populate the input fields with the returned values.

1. From the After Finish connector on the Launch Flow node, click +.
2. Select Affected Elements and click Next.

3. Select the input fields that should be updated:

• Invoice Number
• Vendor Name
• Amount Date
• Amount Due

4. For each selected field, choose Set value from.
5. Map each field to its corresponding variable:

• Invoice Number → GV/invoice_number
• Vendor Name → GV/vendor_name
• Amount Date → GV/amount_date
• Amount Due → GV/amount_due

6. Click Apply.
7. Click Next to continue.

8. Enter a tag name and click Insert.

Add a Toast Message

Add a toast message to confirm that the Flow has completed successfully.

1. From the After Finish connector on the Affected Elements node, click +.
2. Select Show Toast and click Next.

3. Set the Type to Information.
4. (Optional) Enable Auto Dismiss and set the duration.
5. Enter a short confirmation message, for example: Success

6. Enter a tag name and click insert. 

At this point, the On Click Action flow is fully configured and ready to be tested end-to-end.

Result

When the user uploads an invoice and clicks the button, the process runs end-to-end without any additional input.

• The uploaded file is sent to the Flow.
• OCR extracts the invoice text.
• The API returns structured data.
• The JSON Parse node converts the response into individual fields.
• The parsed values are returned to the Web project.
• Each input field is populated automatically with the extracted invoice details.
• A confirmation toast is displayed to indicate completion.

From the user’s perspective, the experience is simple: upload an invoice, click once, and review the populated fields.

View Parsed Data in Debug Mode

To understand how the JSON Parse node processed the API response, you can review the project in Debug mode.

The debug view shows:

• The original API response is stored in content_result
• The individual fields extracted by the JSON Parse node
• Each parsed value is mapped into its corresponding variable, such as:
  • invoice_number
  • vendor_name
  • amount_due
  • amount_date

This confirms that the JSON string returned by the API was successfully converted into structured data and made available for use throughout the project.