Long Intro

This tutorial expands on the quick intro and shows how to build a browser workflow that:

Extracts links and text from a web page
Processes and analyzes the extracted content
Uses conditional logic (If) to branch based on content
Generates different outputs depending on the content type

As before, everything runs entirely in your browser — no server required.

Workflow Overview

graph TB
    A[Web Page] --> B[Get All Links]
    B --> C[Get All Text]
    C --> D[Edit Fields - Analysis]
    D --> E[If Node - Logic]
    E -->|Long Article| F[Detailed Report]
    E -->|Short Article| G[Quick Summary]

First, extract links from the page
Then, extract full page text
Analyze the text with custom expressions
Use an If node to branch into “Long” or “Short” paths
Format the final report accordingly

This shows how workflows can adapt based on web content.

Step 1: Start a new workflow

Click the extension icon and open Agentic WorkFlow.
Choose Create New Workflow or Start from Blank.
You should now have an empty canvas ready to add nodes.

Step 2: Add a link extraction node

Click Add first step.
Search for Get All Links and insert it.
By default, it extracts all <a> link URLs and labels from the current page.
Click Execute Step to test it, see the output of links.

This shows how to gather all hyperlinks on the page.

Step 3: Add text extraction and processing

From Get All Links, click Add node.
Search for Get All Text and add it.
Run Execute Step to fetch full page text (everything visible).
From Get All Text, click Add node again.
Insert Edit Fields to analyze the text.
Configure these fields:
- word_count: {{ $json.text.split(' ').length }}
- character_count: {{ $json.text.length }}
- summary: {{ $json.text.substring(0, 200) }}...
Execute to see analysis results.

This lets you count words, characters, and make a short preview.

Step 4: Add branching logic with If node

graph TB
  Analysis[Analysis Output] --> Branch[If Node]
  Branch -->|word_count > 500| Long[Detailed Branch]
  Branch -->|otherwise| Short[Summary Branch]

From the Edit Fields node, click Add node.
Search and insert If.
Configure it:
- Use the field word_count
- Operator: “Number > Larger”
- Compare it to 500
Execute the If node. You’ll see two branches: those above 500 words, and those below.

Now your workflow can respond differently based on content size.

Step 5: Create branch-specific outputs

For Long (true) branch:

Click the true connector from the If node.
Add an Edit Fields node.

Set fields:

report_type: “Detailed Analysis”

message:

Long article: {{ $json.word_count }} words, {{ $json.character_count }} chars
Preview: {{ $json.summary }}

For Short (false) branch:

Click the false connector.
Add Edit Fields.

Set fields:

report_type: “Quick Summary”

message:

Short article: {{ $json.word_count }} words
Preview: {{ $json.summary }}

Then execute the full workflow. The final output will differ based on whether the content was “long” or “short.”

Step 6: Run and review full workflow

Navigate to a web page with substantial text (e.g. a news article).
In the builder, click Execute Workflow (runs from first node onward).
Watch as:
- Links are extracted
- Full text is fetched
- Text is analyzed
- Branching logic applies
- Final report nodes emit output
Inspect the output of the final node to see the generated message.