Skip to content

Adding a Processor

So far our workflow is a pass-through: ChatInput hands its message straight to ChatOutput. Nothing happens in the middle. In this page we drop a node between them that actually transforms the data.

What you will learn

  • How a processor sits between two nodes and changes data flowing through
  • How TextProcessor does small, common string transforms (capitalize, uppercase, trim, …)
  • How to read what a node did from the Playground's response

Step 1: Open your workflow in the editor

Open the Tutorial workflow from the previous page. You should see ChatInput connected to ChatOutput.

Step 2: Add a TextProcessor node

  1. Click + and search for Text Processor (under Text & Output).
  2. Drop it between ChatInput and ChatOutput.

Step 3: Configure it

Click the TextProcessor node to open its configuration panel.

  • Set operation to capitalize.

capitalize turns each word's first letter into uppercase: "hello world" becomes "Hello World".

Step 4: Re-wire the edges

Right now ChatInput connects directly to ChatOutput. We want the data to detour through TextProcessor:

  1. Delete the existing edge between ChatInput and ChatOutput (click the edge, press Delete).
  2. Drag from ChatInput's message output to TextProcessor's text input.
  3. Drag from TextProcessor's text output to ChatOutput's message input.
┌─────────────┐         ┌────────────────┐         ┌──────────────┐
│  ChatInput  │ message │ TextProcessor  │  text   │  ChatOutput  │
│             ├────────▶│  capitalize    ├────────▶│              │
└─────────────┘         └────────────────┘         └──────────────┘

Step 5: Save and test

Save the workflow, open the Playground, type:

hello world

You should see back:

Hello World

Try a few more:

You type You see
hello world Hello World
FROM ALL CAPS From All Caps
mixed CASE input Mixed Case Input

What just happened

Three things:

  1. A new node sits in the path. Data no longer flows directly from ChatInput to ChatOutput — it has to pass through TextProcessor first.
  2. The data was transformed. TextProcessor read its text input, applied the configured operation, and put the result on its text output.
  3. The shape of the workflow stayed the same. Still one chain, still one data type (String) on every edge, still one node responsible for one job. We just added a link.

This is the building-block move you'll repeat constantly: insert a node that does one thing, wire it in, see the change in the Playground.

Try other operations

Without changing the wiring, click the TextProcessor node and switch operation to:

  • uppercase — hello world → HELLO WORLD
  • lowercase — HELLO World → hello world
  • trim — spaced → spaced (leading/trailing whitespace gone)
  • strip_tags — <b>bold</b> → bold

Save and test each. The wiring is identical; only the configuration changes.

Next

Static vs Dynamic → — same operation, but decided at runtime instead of in the editor.