workflow-builder/src/examples/variableSubstitutionExample.md

Variable Substitution Example

This document demonstrates how the {{input-1.output}} variable substitution works in the workflow system.

How It Works

1. Data Flow Process

Testing Panel Input → Data Input Node → Web Scraping Node → LLM Node → Data Output Node

2. Variable Substitution Examples

Example 1: Web Scraping Node

{
  "config": {
    "url": "{{input-1.output}}",
    "formats": ["markdown", "html"]
  }
}

What happens:

1. User enters "https://github.com" in testing panel
2. Data Input Node stores: { output: "https://github.com" }
3. Web Scraping Node processes: "{{input-1.output}}" → "https://github.com"
4. Firecrawl scrapes the actual GitHub URL

Example 2: LLM Task Node

{
  "config": {
    "prompt": "Analyze this content: {{scraper-1.output}}",
    "model": "deepseek-chat"
  }
}

What happens:

1. Web Scraping Node outputs: { output: "[scraped content]" }
2. LLM Node processes: "{{scraper-1.output}}" → "[scraped content]"
3. AI analyzes the actual scraped content

3. Supported Variable Patterns

Pattern	Description	Example
{{nodeId}}	Entire output of the node	{{input-1}}
{{nodeId.output}}	Output property	{{input-1.output}}
{{nodeId.data}}	Data property	{{scraper-1.data}}
{{nodeId.status}}	Status property	{{llm-1.status}}
{{nodeId.error}}	Error property	{{scraper-1.error}}

4. Complete Workflow Example

{
  "nodes": [
    {
      "id": "input-1",
      "type": "dataInput",
      "config": {
        "dataType": "url",
        "defaultValue": "https://example.com"
      }
    },
    {
      "id": "scraper-1",
      "type": "webScraping",
      "config": {
        "url": "{{input-1.output}}",
        "formats": ["markdown", "html"]
      }
    },
    {
      "id": "llm-1",
      "type": "llmTask",
      "config": {
        "prompt": "Summarize: {{scraper-1.output}}",
        "model": "deepseek-chat"
      }
    },
    {
      "id": "output-1",
      "type": "dataOutput",
      "config": {
        "format": "json",
        "filename": "analysis.json"
      }
    }
  ]
}

5. Execution Flow

1. Testing Panel: User enters "https://github.com"

2. Data Input Node (input-1):

   • Receives: "https://github.com"
   • Stores: { output: "https://github.com" }
   • Status: "success"

3. Web Scraping Node (scraper-1):

   • Config URL: "{{input-1.output}}"
   • Variable substitution: "{{input-1.output}}" → "https://github.com"
   • Calls Firecrawl with: "https://github.com"
   • Returns: { output: "[GitHub page content]", markdown: "...", html: "..." }

4. LLM Task Node (llm-1):

   • Config prompt: "Summarize: {{scraper-1.output}}"
   • Variable substitution: "{{scraper-1.output}}" → "[GitHub page content]"
   • Calls AI with: "Summarize: [GitHub page content]"
   • Returns: { output: "[AI summary of GitHub page]" }

5. Data Output Node (output-1):

   • Receives: "[AI summary of GitHub page]"
   • Formats as JSON and saves to analysis.json

6. Error Handling

If a variable reference doesn't exist:

• {{nonexistent-node.output}} → {{nonexistent-node.output}} (unchanged)
• Warning logged to console
• Node continues with original string

7. Testing the Feature

1. Create a new workflow
2. Add a Data Input node with URL as default value
3. Add a Web Scraping node with URL set to {{input-1.output}}
4. Add an LLM Task node with prompt containing {{scraper-1.output}}
5. Run the workflow with a test URL
6. Observe how variables are substituted with actual data

This variable substitution system enables powerful data flow between nodes, making workflows dynamic and flexible!