Skip to content

Your First Workflow: Hello, Playground

This is the first page of a six-part tutorial. Each page adds one new idea to the same workflow, so by the end you will have built up — by hand — a workflow that uses processors, ports, configuration, trigger edges, and branching.

We start as small as possible: a workflow with two nodes that echoes whatever you type back at you.

What you will learn

  • How to open the Playground — FlowDrop's interactive sandbox
  • How ChatInput and ChatOutput form a minimal interactive workflow
  • The fast feedback loop you will use for the rest of the tutorial

Prerequisites

  • FlowDrop installed with core modules enabled (Installation guide)
  • The flowdrop_playground module enabled

We'll be using a small vocabulary — node, edge, port, configuration. If those words feel unfamiliar at any point, Flow walks through them from the ground up; you can read it before, after, or alongside this tutorial.

Step 1: Create a new workflow

  1. Go to Administration > FlowDrop > Workflows (/admin/flowdrop/workflows).
  2. Click + Add Workflow.
  3. Label it "Tutorial" and click Save.

We'll keep adding to this same workflow across all six pages.

Step 2: Open it in the editor

From the workflow listing, click the actions dropdown on the Tutorial workflow and choose Open in Editor.

You'll land on an empty canvas with a + button on the left.

Step 3: Add a ChatInput node

  1. Click + to open the node palette.
  2. Search for Chat Input (under Text & Output).
  3. Click to drop it on the canvas.

ChatInput is the entry point for Playground workflows. Whatever the user types in the chat UI arrives on its message output port.

Step 4: Add a ChatOutput node

  1. Click + again, find Chat Output, and drop it next to ChatInput.

ChatOutput does the opposite: it takes a message input and renders it back in the chat UI.

Step 5: Connect them

Drag from ChatInput's message output port to ChatOutput's message input port.

┌─────────────┐         ┌──────────────┐
│  ChatInput  │ message │  ChatOutput  │
│             ├────────▶│              │
└─────────────┘         └──────────────┘

That's the whole workflow: take what the user typed and echo it.

Step 6: Save

Click Save in the editor toolbar. The workflow is now ready to run.

Step 7: Open the Playground

The Playground is FlowDrop's interactive runner — chat-style, no admin form needed.

  1. From the workflow listing, find your Tutorial workflow.
  2. Click the actions dropdown and select Playground (or navigate to /admin/flowdrop/workflows/{id}/playground).
  3. Type a message — hello — and press Enter.

The workflow runs and your message comes straight back.

Why the Playground

You could run this from Administration > FlowDrop > Execute — pick the workflow, pick an orchestrator, click Execute, look at a pipeline detail page. That's the right tool for production runs and trigger-driven workflows.

For learning, the Playground is faster:

  • One click to run.
  • Inline feedback — you see results in the chat, no separate detail page.
  • Multi-turn — you keep iterating in the same session.

For the rest of this tutorial, the Playground is your test loop. Edit the workflow → save → send a message → see what changed.

What you have so far

Two nodes, one edge, one data type (String) flowing across it. Almost nothing happens — and that's the point. We have a working harness. From here on, each page adds one node or one idea.

Next

Adding a Processor → — insert a node that actually transforms the message.