# 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](installation.md))
- 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](flow.md) 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 →](tutorial/adding-a-processor.md) — insert a node that actually transforms the message.
