01: English screenshots and English example app

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-20 23:25:40 +02:00
parent 180361eda4
commit ba8b701aba
58 changed files with 48 additions and 49 deletions
@@ -2,7 +2,7 @@
 FOR THE EDITOR

 Guide 1: from workflow to agent. Screenshots are in screenshots/ and are referenced below by
-file name; captured on 20 September 2026 (Dify cloud, Dutch build of the same app).
+file name; captured on 20 September 2026 (Dify cloud, English interface).

 Convert to HTML, PDF and Word:  python3 build.py
 (python-markdown, google-chrome and libreoffice; layout and logo in _tools/build_guide.py)
@@ -14,7 +14,7 @@ Formatting conventions (see also README.md):
 - Blockquote (>)          = pitfall or tip (orange box)
 - Blockquote starting with **Your choice** = a choice for the participant (green box)

-Published example app (Dutch): https://udify.app/workflow/eINp9Jdd6ICodDZF
+Published example app: https://udify.app/workflow/VHWboGL9462eA1KI
 -->

 # Building in Dify: from workflow to agent
@@ -24,8 +24,6 @@ LeX Consultancy B.V. · 20 September 2026

 This guide follows the cloud version of Dify as it looked on 20 September 2026. Dify changes fast: if your screen differs, follow what you see, not what is written here.

-The screenshots show the Dutch build of this app: the same screens and the same clicks, with Dutch text in the fields and Dify's menus in Dutch. The button names inside the app are English on every account, and those are the names used below.
-
 **How to read this guide**

 | Form | Meaning |
@@ -68,7 +66,7 @@ Before we started clicking, this card was filled in (the blank card is in the De

 Top left you see your workspace with the label SANDBOX and your number of credits. That number is a one-off allowance, not per month.

-![Studio, the overview of your apps](screenshots/screenshot-1789888233562-0.jpg)
+![Studio, the overview of your apps](screenshots/01-studio-overview.jpg)

 ---

@@ -76,15 +74,15 @@ Top left you see your workspace with the label SANDBOX and your number of credit

 1. Click **Create** at the top right.

-![The Create menu](screenshots/screenshot-1789888241542-1.jpg)
+![The Create menu](screenshots/02-create-menu.jpg)

 2. Choose **Create from Blank**. You see two kinds: Workflow and Chatflow.

-![Create from Blank, two visible kinds](screenshots/screenshot-1789888248465-2.jpg)
+![Create from Blank, two visible kinds](screenshots/03-create-from-blank.jpg)

 3. Click **MORE BASIC APP TYPES**. Now Chatbot, Agent and Text Generator appear as well. This is the button everyone misses when they want to build an agent.

-![All five app types](screenshots/screenshot-1789888255498-3.jpg)
+![All five app types](screenshots/04-all-app-types.jpg)

 | Type | What it is | What for |
 | --- | --- | --- |
@@ -103,7 +101,7 @@ Top left you see your workspace with the label SANDBOX and your number of credit

 6. Click **Create**.

-![Workflow chosen, name filled in](screenshots/screenshot-1789888261215-4.jpg)
+![Workflow chosen, name filled in](screenshots/05-workflow-chosen.jpg)

 ---

@@ -113,11 +111,11 @@ A workflow does not start by itself. In the right-hand panel you choose what tri

 1. Click **User Input** in the right-hand panel.

-![Choosing the start node](screenshots/screenshot-1789888272174-5.jpg)
+![Choosing the start node](screenshots/06-start-node.jpg)

 The node is now on the canvas. On the right you see **INPUT FIELD** with a plus sign: that is where you create the fields the user will fill in.

-![The User Input node](screenshots/screenshot-1789888280622-6.jpg)
+![The User Input node](screenshots/07-user-input-node.jpg)

 ---

@@ -128,7 +126,7 @@ The node is now on the canvas. On the right you see **INPUT FIELD** with a plus
 1. Click the plus sign next to **INPUT FIELD**.
 2. Open **Field Type** at the top.

-![The field types](screenshots/screenshot-1789888289765-7.jpg)
+![The field types](screenshots/08-field-types.jpg)

 3. Choose **Paragraph**.
 4. Fill in the two fields.
@@ -140,7 +138,7 @@ The node is now on the canvas. On the right you see **INPUT FIELD** with a plus

 > Watch out: as soon as you type the variable name, Dify fills the label field with that same name. Clear that field before typing your own label, otherwise you end up with `textThe text you...`.

-![Field text, type Paragraph](screenshots/screenshot-1789888299055-8.jpg)
+![Field text, type Paragraph](screenshots/09-field-text.jpg)

 5. Click **Save**.

@@ -167,13 +165,13 @@ The node is now on the canvas. On the right you see **INPUT FIELD** with a plus

 > After each new line, click in the empty box first before you type. If you do not, your text ends up nowhere.

-![Field level, type Select with four options](screenshots/screenshot-1789888356154-9.jpg)
+![Field level, type Select with four options](screenshots/10-field-level.jpg)

 > **Your choice: the levels.** These four options are an example. Put in the levels you actually teach: "year 3", "vocational year 2", "adult learners", "ESL A2", or something else entirely such as "colleague", "parent", "governor". The option later becomes the literal word that goes into the prompt, so choose words the model can work with.

 6. Click **Save**. Both fields are now in the node.

-![Both input fields](screenshots/screenshot-1789888361362-10.jpg)
+![Both input fields](screenshots/11-both-fields.jpg)

 ---

@@ -181,7 +179,7 @@ The node is now on the canvas. On the right you see **INPUT FIELD** with a plus

 1. On the right, under **NEXT STEP**, click **SELECT NEXT STEP**. You get the list of nodes.

-![The list of nodes](screenshots/screenshot-1789888367047-11.jpg)
+![The list of nodes](screenshots/12-node-list.jpg)

 2. Choose **LLM**.

@@ -192,7 +190,7 @@ The node defaults to **gpt-5**. That costs five credits per answer. gpt-5-mini c
 3. Click the model name **gpt-5**.
 4. Choose **gpt-5-mini**.

-![The model picker](screenshots/screenshot-1789888376523-12.jpg)
+![The model picker](screenshots/13-model-picker.jpg)

 ### Write the prompt

@@ -212,7 +210,7 @@ Level:
 8. Right after it, type a forward slash `/`. A list of your input fields appears.
 9. Choose **level** from the list. No need to type curly braces; Dify inserts the variable itself.

-![The variable list after a forward slash](screenshots/screenshot-1789888390005-13.jpg)
+![The variable list after a forward slash](screenshots/14-variable-list.jpg)

 > **Your choice: the prompt.** The instruction above is the heart of your app. Want the text to get shorter too? Add: "Make the text at most half as long." Want difficult words in bold and explained at the bottom? Say so literally. Want the style of your own course book? Paste a paragraph from it as an example, preceded by "Write in this style:". Change one thing at a time and test again (step 7); then you know which change has which effect.

@@ -224,7 +222,7 @@ Text:

 11. Type a forward slash `/` again and choose **text**. The prompt is now complete.

-![The first LLM node, finished](screenshots/screenshot-1789888404719-14.jpg)
+![The first LLM node, finished](screenshots/15-llm1-finished.jpg)

 ---

@@ -248,12 +246,12 @@ Write three comprehension questions about the text below. Question 1 is about a
 Text: 
 ```

-6. Type a forward slash `/`. There are now more variables in the list than before: at the top the output of **LLM 2** (the node you are in) and below it that of **LLM** (the previous node).
+6. Type a forward slash `/`. There is now an extra group in the list: at the top the output of **LLM** (the previous node), below it the User Input fields.
 7. Choose **text** under **LLM**. That is the rewritten text.

-> If you choose `text` under LLM 2, it writes questions about the original text, and you only notice when testing.
+> If you choose `text` under USER INPUT, it writes questions about the original text, and you only notice when testing.

-![The variable list with LLM and LLM 2](screenshots/screenshot-1789888443889-15.jpg)
+![The variable list with the output of LLM](screenshots/16-variable-list-llm2.jpg)

 This is what a workflow is all about: the second step works with what the first one produced. You decide that order.

@@ -265,7 +263,7 @@ This is what a workflow is all about: the second step works with what the first

 1. Click **SELECT NEXT STEP** and choose **Output**.

-![The empty Output node](screenshots/screenshot-1789888462641-16.jpg)
+![The empty Output node](screenshots/17-output-empty.jpg)

 2. Click the plus sign next to **OUTPUT VARIABLE**.
 3. Create two output variables. For each one, type the name and choose the source from the list.
@@ -275,7 +273,7 @@ This is what a workflow is all about: the second step works with what the first
 | `rewritten_text` | LLM / text |
 | `questions` | LLM 2 / text |

-![The Output node with two variables](screenshots/screenshot-1789888503770-17.jpg)
+![The Output node with two variables](screenshots/18-output-filled.jpg)

 ---

@@ -283,7 +281,7 @@ This is what a workflow is all about: the second step works with what the first

 1. Click **Test Run** at the top right. A panel with your own input fields appears on the right.

-![The test panel](screenshots/screenshot-1789888511668-18.jpg)
+![The test panel](screenshots/20-test-panel.jpg)

 2. Paste a piece of text into the field **The text you want to adapt**. If you have nothing to hand, use this:

@@ -294,15 +292,15 @@ Photosynthesis is the process by which plants use light, water and carbon dioxid
 3. Under **For which level** choose an option, for example **year 7**.
 4. Click **Start Run**.

-![Input filled in](screenshots/screenshot-1789888525952-19.jpg)
+![Input filled in](screenshots/21-test-input.jpg)

 You see the nodes light up one by one as they run.

-![The workflow running](screenshots/screenshot-1789888548079-20.jpg)
+![The workflow running](screenshots/22-test-running.jpg)

 Under **RESULT** is the outcome: the rewritten text and the three questions. Under **DETAIL** and **TRACING** you see per step exactly what happened and how long it took.

-![The result](screenshots/screenshot-1789888571578-21.jpg)
+![The result](screenshots/23-test-result.jpg)

 ---

@@ -312,27 +310,25 @@ As long as you do not publish, your app exists only for you.

 1. Click **Publish** at the top right.

-![The Publish menu, not yet published](screenshots/screenshot-1789889788152-22.jpg)
+![The Publish menu, not yet published](screenshots/24-publish-menu.jpg)

 2. Click **Publish** in the menu. At the top the status changes to published.

-![Published](screenshots/screenshot-1789889800590-23.jpg)
+![Published](screenshots/25-published.jpg)

 3. Open the menu again. It now says **Publish Update** and the grey options have become active.

 > Every change you make from now on has to be published again with Publish Update. Otherwise the link keeps showing the old version.

-![The menu after publishing](screenshots/screenshot-1789889811360-24.jpg)
+![The menu after publishing](screenshots/26-publish-menu-after.jpg)

-4. Click **Open webapp** (in the Dutch screenshots: Webapp openen).
-
-![Opening the webapp](screenshots/screenshot-1789889820194-25.jpg)
+4. Click **Open web app**.

 Your app opens as an ordinary web page with its own address. That link works without logging in, on a phone too. That is the link you give to your test partner.

-The Dutch version of the app in this guide is at <https://udify.app/workflow/eINp9Jdd6ICodDZF>. Open it to see what you are working towards.
+The app in this guide is live at <https://udify.app/workflow/VHWboGL9462eA1KI>. Open it to see what you are working towards.

-![The published webapp](screenshots/screenshot-1789889850420-26.jpg)
+![The published webapp](screenshots/27-webapp.jpg)

 ---

@@ -3,6 +3,10 @@
 Dify changes fast. Every guide states on its title page on which day the screens were captured.
 This is what changed per release.

+## 2026-09-20, English screenshots
+
+- Guide 01 rebuilt with the English Dify interface and an English app (Text at level, https://udify.app/workflow/VHWboGL9462eA1KI). The other guides follow.
+
 ## 2026-09-20, first release

 - Guides 01 to 08, with "Your choice" boxes and "Make it yours".
@@ -4,10 +4,9 @@ Step-by-step guides, appendices and a two-hour workshop on building AI agents in
 education. Made by LeX Consultancy B.V. All examples play at Example College (fictional);
 screens captured on Dify cloud, 20 September 2026.

-The screenshots show the Dutch build of the same apps (Dify's menus in Dutch, Dutch text in
-the fields); the screens, buttons and clicks are identical, and every guide says so on its
-first page. Prompts, sample documents and instructions in the guides are in English, so you
-can build the English version directly.
+The screenshots show the English Dify interface and the English build of each app. Guides
+whose screenshots still come from the Dutch build say so on their first page; those are being
+replaced one by one.

 Licence: CC BY-SA 4.0 (documents, slides, images) and MIT (scripts), see LICENSE.md.
 Owner and contact: Guido van Dijk, guido@l-e-x.nl.
@@ -52,16 +51,16 @@ The order is also a learning path: 01 and 02 in the first hour of the workshop,

 ## Example apps

-The Dutch builds of the apps are live to try out (Dutch interface and Dutch sample documents):
+The apps are live to try out:

- Text at level (01): https://udify.app/workflow/eINp9Jdd6ICodDZF
- School guide assistant (02, with the Reception mode from 03): https://udify.app/chat/cvLAmpk60m9HUXUy
- Parent letter assistant (03): https://udify.app/chat/OJCfxjBeBHCEbBPx
- School news (03 and 07): https://udify.app/workflow/jJclFyX9BlteuHYi
- Test week planner (04): https://udify.app/agent/rKoqw8rbmp0IF86Q
- Transcription tool (05): https://udify.app/workflow/7N5dNg8fD9qXHA80
- Materials check (06): https://udify.app/agent/lkWKedkSW2d3nqBV
- Study coach biology (08): https://udify.app/chat/fP0TJW3s8IXOj9BO
+- Text at level (01): https://udify.app/workflow/VHWboGL9462eA1KI
+- School guide assistant (02, with the Reception mode from 03; Dutch build): https://udify.app/chat/cvLAmpk60m9HUXUy
+- Parent letter assistant (03); Dutch build): https://udify.app/chat/OJCfxjBeBHCEbBPx
+- School news (03 and 07); Dutch build): https://udify.app/workflow/jJclFyX9BlteuHYi
+- Test week planner (04); Dutch build): https://udify.app/agent/rKoqw8rbmp0IF86Q
+- Transcription tool (05); Dutch build): https://udify.app/workflow/7N5dNg8fD9qXHA80
+- Materials check (06); Dutch build): https://udify.app/agent/lkWKedkSW2d3nqBV
+- Study coach biology (08); Dutch build): https://udify.app/chat/fP0TJW3s8IXOj9BO

 ## Building or editing yourself