Dify guides: first release, English set, 20 September 2026
Eight step-by-step guides, appendices (design patterns, design card with eight filled-in examples, AI tools in education), facilitator guide and presentation. LeX Consultancy edition; screenshots from the Dutch build of the same apps. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido van Dijk
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"v": 4,
|
||||
"createdOnFiles": {
|
||||
"v": 1,
|
||||
"at": "2026-09-20T18:00:00Z"
|
||||
},
|
||||
"title": "Workshop AI Agents with Dify",
|
||||
"order": [
|
||||
"cover",
|
||||
"programme",
|
||||
"poll",
|
||||
"layers",
|
||||
"patterns",
|
||||
"demo01",
|
||||
"build1",
|
||||
"demo02",
|
||||
"break",
|
||||
"build2",
|
||||
"demo07",
|
||||
"demo08",
|
||||
"human",
|
||||
"pairs",
|
||||
"designcard",
|
||||
"pitch",
|
||||
"allowed",
|
||||
"gdpraiact",
|
||||
"euframeworks",
|
||||
"takehome",
|
||||
"exit",
|
||||
"close"
|
||||
],
|
||||
"sections": {
|
||||
"cover": {
|
||||
"description": "Opening: what we are going to do and who is in the room",
|
||||
"start": "cover"
|
||||
},
|
||||
"patterns": {
|
||||
"description": "The landscape: layers, patterns and the first example",
|
||||
"start": "patterns"
|
||||
},
|
||||
"build1": {
|
||||
"description": "Building block 1: everyone builds a workflow",
|
||||
"start": "build1"
|
||||
},
|
||||
"demo02": {
|
||||
"description": "Demo: agent, knowledge base and the sabotage",
|
||||
"start": "demo02"
|
||||
},
|
||||
"build2": {
|
||||
"description": "Building block 2: two tracks, your choice",
|
||||
"start": "build2"
|
||||
},
|
||||
"demo07": {
|
||||
"description": "Demo: gatekeeper, study coach and the human in the loop",
|
||||
"start": "demo07"
|
||||
},
|
||||
"designcard": {
|
||||
"description": "Design and pitch: your next app",
|
||||
"start": "designcard"
|
||||
},
|
||||
"allowed": {
|
||||
"description": "Close: what is allowed, what you take home, exit ticket",
|
||||
"start": "allowed"
|
||||
}
|
||||
},
|
||||
"cover": "cover",
|
||||
"faces": {
|
||||
"rubik": {
|
||||
"family": "Rubik",
|
||||
"href": "https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap"
|
||||
},
|
||||
"nunito-sans": {
|
||||
"family": "Nunito Sans",
|
||||
"href": "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap"
|
||||
}
|
||||
},
|
||||
"designSystems": []
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="allowed" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">What is allowed: four questions for every tool</h2>
|
||||
<div style="display:flex; gap:24px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Under which account?</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Private, free, paid or school with a data processing agreement. Only in the last case does the school have a say.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Which data goes in?</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">No personal data of students, parents, colleagues. No unpublished test material either.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Is it trained on?</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Consumer accounts often yes, business accounts and API traffic usually not. Check it.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Who decides and checks?</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">For yourself: you. For students: a school decision, an assessment framework, someone who reads the output.</p></div>
|
||||
</div>
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">Copilot and Gemini are already in school; whether they may be switched on is a leadership decision based on the assessments of your national education bodies. Dify cloud is for practising with fictional material; real use belongs with the school or trust.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>The appendix AI tools in education goes home with them. Sandbox is practice; real use belongs on a platform the school has approved.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,10 @@
|
||||
<section id="break" data-transition="fade" style="background:#D9480F; color:#F7F4EC; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
|
||||
<div style="flex:1"></div>
|
||||
<h1 style="font-family:'Rubik', Arial, sans-serif; font-size:140px; font-weight:600; color:#F7F4EC; line-height:1">Break</h1>
|
||||
<p style="font-size:34px; color:#D9DEE6; line-height:1.4">10 minutes. Leave your app open; after the break you choose a track.</p>
|
||||
<div style="flex:1"></div>
|
||||
|
||||
|
||||
<aside>During the break: check with hesitant pairs whether the knowledge base of guide 2 is already ready, that saves time in block 2.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,15 @@
|
||||
<section id="build1" data-transition="push" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Building block 1 · 25 minutes · in pairs</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Build Text at level, with your levels</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px">
|
||||
<ul style="font-size:29px; color:#3D4756; line-height:1.5"><li>Guide 1, steps 1 to 8</li><li>Model: <b>gpt-5-mini</b>, not gpt-5</li><li>Replace the four levels with your groups</li><li>Paste a text from your own material, without names</li><li>Done? Publish and send the link to the pair next to you</li></ul>
|
||||
</div>
|
||||
<div style="width:600px; display:flex; flex-direction:column; gap:16px; background:#ECFDF5; padding:32px; border-radius:16px; border:1px solid #A7D9BF">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:32px; font-weight:600; color:#14532D">Your choice</h3>
|
||||
<p style="font-size:27px; color:#14532D; line-height:1.4">Done early? Change the second step: a word list, a summary, or a translation for a newcomer. One thing at a time, then test.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Walk round. Most common mistakes: variable not inserted via /; Publish forgotten; gpt-5 left in place. After 20 minutes: who has a link? Let two pairs try each other's app.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,18 @@
|
||||
<section id="build2" data-transition="push" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Building block 2 · 30 minutes · choose your track</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Track A or track B</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:2px solid #2563EB; border-radius:16px">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:38px; font-weight:600; color:#2563EB">A · Agent with your document</h3>
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">Guide 2. Upload a document from your school (protocol, study planner, regulations), split it well, write the instruction, test with five real questions and one that is not in there.</p>
|
||||
<p style="font-size:26px; color:#6B7280; line-height:1.4">For whom: anyone who has documents people ask questions about.</p>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:2px solid #D9480F; border-radius:16px">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:38px; font-weight:600; color:#D9480F">B · Gatekeeper on your workflow</h3>
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">Guide 7, parts B and C. Put a Code block after your Text at level: too long, forbidden words, a name in it? Then the text does not go through but to a person, with the reason.</p>
|
||||
<p style="font-size:26px; color:#6B7280; line-height:1.4">For whom: anyone who finished block 1 quickly and wants to see what code does here. Paste, do not type.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Track B is tougher; put pairs with an affinity for programming together. In both tracks: your own material must be free of personal data, say it out loud once more.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,19 @@
|
||||
<section id="close" data-transition="fade" style="background:#1E2A3A; color:#F7F4EC; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
|
||||
<img src="../images/logo-lex-wit.png" alt="LeX Consultancy" style="position:absolute; right:128px; top:96px; width:220px; height:126px; object-fit:contain">
|
||||
<div style="flex:1"></div>
|
||||
<h1 style="font-family:'Rubik', Arial, sans-serif; font-size:96px; font-weight:600; line-height:1.05; color:#F7F4EC; width:1400px">Choose the simplest pattern that works.</h1>
|
||||
<p style="font-size:34px; color:#D9DEE6; line-height:1.4">And design for the failure: what happens when it goes wrong, and who sees it?</p>
|
||||
<div style="flex:1"></div>
|
||||
<p style="font-size:28px; color:#9AA3B1; line-height:1.4">Guides, slides and links: git.lexconsultancy.nl/guido/dify-guides · l-e-x.nl</p>
|
||||
<div style="display:flex; gap:40px; align-items:flex-start; border-top:1px solid #3A4757; padding-top:24px; margin-top:-16px">
|
||||
<div style="flex:0 0 520px; display:flex; flex-direction:column; gap:6px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:28px; font-weight:600; color:#F7F4EC; letter-spacing:1px">CC BY-SA 4.0</p>
|
||||
<p style="font-size:22px; color:#9AA3B1; line-height:1.4">Owner and contact:<br>Guido van Dijk, LeX Consultancy B.V.<br>guido@l-e-x.nl</p>
|
||||
</div>
|
||||
<p style="font-size:22px; color:#9AA3B1; line-height:1.4">You may copy, adapt and reuse this presentation and the guides, including at your own school. Credit the source (Guido van Dijk, LeX Consultancy B.V., git.lexconsultancy.nl/guido/dify-guides) and share your adaptation under the same licence. The LeX Consultancy logo is excluded; product names are trademarks of their owners.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<aside>Thank you. Point to the follow-up for anyone who really wants to build. Name the licence: everything may go home with you, with attribution.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="cover" data-transition="fade" style="background:#1E2A3A; color:#F7F4EC; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
|
||||
<img src="../images/logo-lex-wit.png" alt="LeX Consultancy" style="position:absolute; right:128px; top:96px; width:260px; height:150px; object-fit:contain">
|
||||
<div style="flex:1"></div>
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#F4B183">Workshop · 2 hours · in pairs at a laptop</p>
|
||||
<h1 style="font-family:'Rubik', Arial, sans-serif; font-size:112px; font-weight:600; line-height:1.05; color:#F7F4EC; width:1300px">Building AI agents<br>with Dify</h1>
|
||||
<p style="font-size:34px; color:#D9DEE6; line-height:1.4">From one prompt to an app your colleagues can use. Build it yourself, test it yourself, break it yourself.</p>
|
||||
<div style="flex:1"></div>
|
||||
<p style="font-size:28px; color:#9AA3B1; line-height:1.4">Guido van Dijk · LeX Consultancy B.V.</p>
|
||||
|
||||
|
||||
<aside>Welcome. Laptops open, logged in to cloud.dify.ai? Anyone without an account: a sandbox account takes 2 minutes, the buddy next to you helps. Goal today: everyone goes home with one working app and a design for the next.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,17 @@
|
||||
<section id="demo01" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Demo · 3 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Text at level</h2>
|
||||
<div style="display:flex; gap:48px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:20px">
|
||||
<p style="font-size:30px; color:#3D4756; line-height:1.4">Paste a text, choose a level (year 6, 7, 9 or 12), and get a rewritten version plus three comprehension questions.</p>
|
||||
<ul style="font-size:28px; color:#3D4756; line-height:1.5"><li>Two LLM steps in a row: rewrite, then write questions</li><li>The second step works with what the first produced</li><li>Published as a webapp: share the link, done</li></ul>
|
||||
</div>
|
||||
<div style="width:640px; display:flex; flex-direction:column; gap:20px; background:#EFEAE0; padding:36px; border-radius:16px; border:1px solid #D8D2C4">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#2563EB">Interaction · shout it out</p>
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:40px; font-weight:600; color:#1E2A3A; line-height:1.2">Which pattern is this?</p>
|
||||
<p style="font-size:28px; color:#3D4756; line-height:1.4">And: what happens if I paste a text with a student's name?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Live demo of the Text at level app. Answer: pattern 1, even though there are two steps; you decide the order. The name question leads to the checklist for your own material.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,17 @@
|
||||
<section id="demo02" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Demo · 10 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">An agent with a knowledge base</h2>
|
||||
<div style="display:flex; gap:48px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:20px">
|
||||
<p style="font-size:29px; color:#3D4756; line-height:1.4">The School guide assistant answers questions from parents and students out of a two-page school guide. The Parent letter assistant rewrites a woolly letter according to the style guide and says what it changed.</p>
|
||||
<ul style="font-size:27px; color:#3D4756; line-height:1.5"><li>A knowledge base splits your document into pieces; the split determines the quality</li><li>The description of the knowledge base is for the agent, not for you</li><li>Used Knowledge above the answer: it really searched</li></ul>
|
||||
</div>
|
||||
<div style="width:640px; display:flex; flex-direction:column; gap:20px; background:#EFEAE0; padding:36px; border-radius:16px; border:1px solid #D8D2C4">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#2563EB">Interaction · sabotage</p>
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:40px; font-weight:600; color:#1E2A3A; line-height:1.2">Make it stumble</p>
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">In your pair, think of one question the assistant must not know the answer to, and one it could invent a wrong answer for. We try three live.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>The School guide assistant and the Parent letter assistant. The sabotage shows why the rule 'say that you do not know' is in the instruction. If it invents something anyway: perfect, that is the lesson.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="demo07" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Demo · 5 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">A prompt asks, a gatekeeper enforces</h2>
|
||||
<div style="display:flex; gap:40px; align-items:center">
|
||||
<img src="../images/schoolnieuws-afgekeurd.jpg" alt="School news: message rejected with four reasons" style="width:1000px; height:540px; object-fit:contain; border-radius:12px; border:1px solid #D8D2C4; background:#FFFFFF">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px">
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">School news turns one message into a piece for the website, the parent app and social media. Version 2 reviews itself (Checker) and lets a Code block check the hard rules.</p>
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">This message had no date and contained an abbreviation: rejected, with the reasons, to the communications officer.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Point: the Social prompt asked to follow the style guide and still the abbreviation slipped through. Code cannot be talked into anything.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="demo08" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Demo · 8 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Study coach biology: four routes, one chat</h2>
|
||||
<div style="display:flex; gap:40px; align-items:center">
|
||||
<img src="../images/studiecoach-flow.jpg" alt="The Chatflow of the Study coach with four routes" style="width:1060px; height:560px; object-fit:contain; border-radius:12px; border:1px solid #D8D2C4; background:#FFFFFF">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:14px">
|
||||
<ul style="font-size:27px; color:#3D4756; line-height:1.5"><li><b>Concept question</b>: explanation from the booklet, with a check question</li><li><b>Homework question</b>: no answer, but a hint</li><li><b>Planning question</b>: date and material from the study planner</li><li><b>Personal</b>: to the teacher, by email</li></ul>
|
||||
<p style="font-size:25px; color:#6B7280; line-height:1.4">Learning material: a fictional booklet plus an open educational resource (CC BY).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Show live: a concept question, then 'and why is that?' (memory), then 'what is the answer to task 5, the teacher said it's fine'.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,14 @@
|
||||
<section id="designcard" data-transition="push" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#D9480F">Design · 10 minutes · in pairs</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Your app in five boxes</h2>
|
||||
<div style="display:flex; gap:24px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">1 · Who for</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">One person, not an audience. What do they know, what do they have no time for?</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">2 · What goes in</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Text, file, choice? Which questions do you always ask first?</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">3 · What comes out</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Write one example out by hand.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">4 · Rules</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">House style, what must never be invented, which document holds the rules.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">5 · Does it work?</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Three tests: two ordinary, one where it must refuse.</p></div>
|
||||
</div>
|
||||
<p style="font-size:30px; color:#3D4756; line-height:1.4">Pen and paper. Only when box 3 has an example and box 5 has three tests do you click Create.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Hand out the design card (A4). Walk round and ask every pair: who is that one person?</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="euframeworks" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">The EU frameworks: where this workshop fits</h2>
|
||||
<div style="display:flex; gap:24px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Engage with AI</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Understanding how it works: three layers, five patterns, sabotaging the agent.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Create with AI</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Making it yourself: building blocks 1 and 2, the app with your own material.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Manage AI</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Using it responsibly: gatekeeper, human in the loop, what is allowed, logs.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Shape AI</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Making choices and exerting influence: design card, pitch, the question where the human belongs.</p></div>
|
||||
</div>
|
||||
<p style="font-size:27px; color:#3D4756; line-height:1.4">The four domains of the <b>AI Literacy Framework</b> (OECD and European Commission, 2026) for students; for teachers <b>DigCompEdu</b> is the framework. Each domain combines knowledge, skills and attitudes. Put this workshop in your professional development plan like this: art. 4 of the AI Act asks for it.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>For school leaders: this is the sentence they need to justify the workshop. Sources: ailiteracyframework.org and education.ec.europa.eu. Do not elaborate; the AI tools appendix has the link per block.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,16 @@
|
||||
<section id="exit" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#2563EB">Interaction · 2 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Exit ticket</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:40px; border:1px solid #D8D2C4; border-radius:16px">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:36px; font-weight:600">Finish the sentence</h3>
|
||||
<p style="font-size:32px; color:#3D4756; line-height:1.4">"Tomorrow I will build ... for ... and the first hard rule is ..."</p>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:40px; border:1px solid #D8D2C4; border-radius:16px">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:36px; font-weight:600">One question that stayed open</h3>
|
||||
<p style="font-size:32px; color:#3D4756; line-height:1.4">On a sticky note by the door. We answer them in the follow-up.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Take the sticky notes with you. The open questions are the agenda for the follow-up session.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,17 @@
|
||||
<section id="gdpraiact" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">GDPR and AI Act: what it means for today's apps</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:1px solid #D8D2C4; border-radius:16px">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#2563EB">GDPR</h3>
|
||||
<ul style="font-size:26px; color:#3D4756; line-height:1.5"><li>The school is the controller; Dify and the model provider are processors, outside the EU</li><li>No data processing agreement (sandbox) = no personal data goes in</li><li>Personal data after all: a student's message to the teacher (Study coach). Then: legal basis, impact assessment, retention period for the logs</li></ul>
|
||||
</div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:1px solid #D8D2C4; border-radius:16px">
|
||||
<h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#D9480F">EU AI Act</h3>
|
||||
<ul style="font-size:26px; color:#3D4756; line-height:1.5"><li><b>Art. 4</b>: AI literacy mandatory for whoever uses AI (since Feb 2025). This workshop is such a measure</li><li><b>Prohibited</b>: emotion recognition in education</li><li><b>High risk</b>: admission, assessing learning outcomes, proctoring. Our apps decide nothing about people; a coach that assesses students would</li><li><b>Art. 50</b>: a chatbot says it is AI</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size:26px; color:#3D4756; line-height:1.4">Rule of thumb: as soon as an app decides or records something about a person, the question changes from "does it work?" to "is it allowed, and who is responsible?" State of play September 2026; check your national assessment framework for the current picture.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Not as a legal lecture. Two sentences per side. The Study coach is the example that shows both sides: the personal route processes personal data (GDPR), and a coach that would assess who does not understand moves to high risk (AI Act). That is a design choice.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="human" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">The human in the loop is not decoration</h2>
|
||||
<div style="display:flex; gap:40px; align-items:center">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:20px">
|
||||
<p style="font-size:29px; color:#3D4756; line-height:1.4">"I don't get any of it and everyone laughs at me." No model should answer that. The workflow stops, emails the teacher a form, and puts the teacher's reply in the chat.</p>
|
||||
<ul style="font-size:27px; color:#3D4756; line-height:1.5"><li>The student immediately gets an honest message and a helpline</li><li>The teacher replies in their own words</li><li>After three days without a reply: a safety-net message</li></ul>
|
||||
</div>
|
||||
<img src="../images/studiecoach-docent-antwoord.jpg" alt="The chat shows Passed on and then the teacher's message" style="width:820px; height:520px; object-fit:contain; border-radius:12px; border:1px solid #D8D2C4; background:#FFFFFF">
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>The block is called Human Input. Delivery by email; Debug Mode sends the test to your own address. Have the pastoral lead read the texts.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,12 @@
|
||||
<section id="layers" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Three layers, and where we are today</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">1 · Chatbot</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">You type, you get an answer, every time you explain again. ChatGPT, Gemini, Copilot Chat, Claude, Le Chat.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">2 · Assistant in your suite</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">AI in the tools you already have. Microsoft 365 Copilot, Gemini in Workspace. The school decides through licences.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#1E2A3A; padding:36px; border:1px solid #1E2A3A; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#F7F4EC; line-height:1.2">3 · Building platform</h3><p style="font-size:27px; color:#D9DEE6; line-height:1.4">You build an app with fixed steps, your own rules and your own documents, and share it. Dify, Copilot Studio, Gems, GPTs.</p></div>
|
||||
</div>
|
||||
<p style="font-size:30px; color:#3D4756; line-height:1.4">The difference is not the model but the account: free and private, or school with a data processing agreement.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Layer 3 is today. Dify is not a model: it uses the models of OpenAI, Anthropic, Google through their API. More about what is allowed later.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,12 @@
|
||||
<section id="pairs" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#2563EB">Interaction · 4 minutes · in pairs</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Where does the human belong in your app?</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:8px"><p style="font-family:'Rubik', Arial, sans-serif; font-size:120px; font-weight:600; color:#D9480F; line-height:1">1</p><p style="font-size:28px; color:#3D4756; line-height:1.3">Which mistake must never happen again? That is your first hard rule (code).</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:8px"><p style="font-family:'Rubik', Arial, sans-serif; font-size:120px; font-weight:600; color:#D9480F; line-height:1">2</p><p style="font-size:28px; color:#3D4756; line-height:1.3">Which decision do you never want to leave to a model? That is your human in the loop.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:8px"><p style="font-family:'Rubik', Arial, sans-serif; font-size:120px; font-weight:600; color:#D9480F; line-height:1">3</p><p style="font-size:28px; color:#3D4756; line-height:1.3">Who reviews the logs, and how often? No answer, no publication.</p></div>
|
||||
</div>
|
||||
<p style="font-size:30px; color:#3D4756; line-height:1.4">Write the three answers on the back of your design card. Two pairs share their first rule with the room.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Let two pairs name their 'never again' rule. Often: student names, invented dates, tone. Link back to the gatekeeper.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,5 @@
|
||||
<section id="patterns" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Five patterns: how much may the model decide itself?</h2><table style="font-size:28px; color:#3D4756; border:1px solid #D8D2C4; background:#FFFFFF"><tr style="background:#EFEAE0"><th style="width:34%; color:#1E2A3A">Pattern</th><th style="width:40%; color:#1E2A3A">Who decides the steps</th><th style="width:26%; color:#1E2A3A">Today</th></tr><tr><td style="width:34%; color:#3D4756">1 · Single call</td><td style="width:40%; color:#3D4756">You, in advance; the model does one thing</td><td style="width:26%; color:#3D4756">Text at level</td></tr><tr><td style="width:34%; color:#3D4756">2 · Reason with tools</td><td style="width:40%; color:#3D4756">The model, step by step, with a knowledge base</td><td style="width:26%; color:#3D4756">School guide assistant</td></tr><tr><td style="width:34%; color:#3D4756">3 · Plan and execute</td><td style="width:40%; color:#3D4756">First a plan, then separate executors</td><td style="width:26%; color:#3D4756">School news: three channels</td></tr><tr><td style="width:34%; color:#3D4756">4 · Self-critique</td><td style="width:40%; color:#3D4756">The model reviews its own work</td><td style="width:26%; color:#3D4756">Checker</td></tr><tr><td style="width:34%; color:#3D4756">5 · Gatekeeper</td><td style="width:40%; color:#3D4756">Code or a person lets it through or not</td><td style="width:26%; color:#3D4756">Gatekeeper, teacher in the loop</td></tr></table><p style="font-size:28px; color:#3D4756; line-height:1.4">Rule of thumb: choose the lowest pattern that works. Every step up costs time, credits and surprises.</p>
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Do not cover exhaustively; the Design patterns appendix goes home with them. Do name the rule of thumb.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,11 @@
|
||||
<section id="pitch" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#2563EB">Interaction · 5 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Pitch in 30 seconds</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:8px"><p style="font-family:'Rubik', Arial, sans-serif; font-size:120px; font-weight:600; color:#D9480F; line-height:1">30</p><p style="font-size:28px; color:#3D4756; line-height:1.3">seconds per pair: for whom, what goes in, what comes out, which pattern.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:8px"><p style="font-family:'Rubik', Arial, sans-serif; font-size:120px; font-weight:600; color:#D9480F; line-height:1">4</p><p style="font-size:28px; color:#3D4756; line-height:1.3">pairs pitch; the room picks the app they would use themselves.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:8px"><p style="font-family:'Rubik', Arial, sans-serif; font-size:120px; font-weight:600; color:#D9480F; line-height:1">1</p><p style="font-size:28px; color:#3D4756; line-height:1.3">question from the room per pitch: where does the human belong?</p></div>
|
||||
</div>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Choose pairs with different audiences: teacher, support, communications, leadership. Applause, no jury.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,12 @@
|
||||
<section id="poll" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<p style="font-family:'Rubik', Arial, sans-serif; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#2563EB">Interaction · 2 minutes</p><h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Stand up if...</h2>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">1</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">...you used an AI chatbot for your work this week</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">2</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">...your colleagues use a tool you are not sure is allowed</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">3</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">...you ever shared a prompt with a colleague that then did not work</p></div>
|
||||
</div>
|
||||
<p style="font-size:30px; color:#3D4756; line-height:1.4">Stay standing at 3. Look around: that is the problem we solve today. A prompt is yours; an app belongs to the team.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Make people really stand. At question 3 usually three quarters stand. Name it: prompts are personal and fragile; today we build something that stays standing when you are not there.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,5 @@
|
||||
<section id="programme" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Two hours, four blocks</h2><table style="font-size:27px; color:#3D4756; border:1px solid #D8D2C4; background:#FFFFFF"><tr style="background:#EFEAE0"><th style="width:22%; color:#1E2A3A">Time</th><th style="width:30%; color:#1E2A3A">Block</th><th style="width:48%; color:#1E2A3A">What you do</th></tr><tr><td style="width:22%; color:#3D4756">0:00 - 0:15</td><td style="width:30%; color:#3D4756">The landscape</td><td style="width:48%; color:#3D4756">Poll, three layers, five patterns</td></tr><tr><td style="width:22%; color:#3D4756">0:15 - 0:40</td><td style="width:30%; color:#3D4756">Building block 1: workflow</td><td style="width:48%; color:#3D4756">Text at level, in pairs, your own levels</td></tr><tr><td style="width:22%; color:#3D4756">0:40 - 0:55</td><td style="width:30%; color:#3D4756">Demo and sabotage</td><td style="width:48%; color:#3D4756">Agent with knowledge base; make it stumble</td></tr><tr><td style="width:22%; color:#3D4756">0:55 - 1:05</td><td style="width:30%; color:#3D4756">Break</td><td style="width:48%; color:#3D4756"></td></tr><tr><td style="width:22%; color:#3D4756">1:05 - 1:35</td><td style="width:30%; color:#3D4756">Building block 2: choose your track</td><td style="width:48%; color:#3D4756">A knowledge base agent · B gatekeeper</td></tr><tr><td style="width:22%; color:#3D4756">1:35 - 1:50</td><td style="width:30%; color:#3D4756">Design card and pitch</td><td style="width:48%; color:#3D4756">Your app in five boxes, 30-second pitch</td></tr><tr><td style="width:22%; color:#3D4756">1:50 - 2:00</td><td style="width:30%; color:#3D4756">Close</td><td style="width:48%; color:#3D4756">What is allowed, what you take home, exit ticket</td></tr></table>
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Tight on time. The building blocks are sacred; if a demo overruns, shorten the demo, not the building.</aside>
|
||||
</section>
|
||||
@@ -0,0 +1,5 @@
|
||||
<section id="takehome" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">What you take home</h2><table style="font-size:25px; color:#3D4756; border:1px solid #D8D2C4; background:#FFFFFF"><tr style="background:#EFEAE0"><th style="width:10%; color:#1E2A3A">No</th><th style="width:40%; color:#1E2A3A">Guide</th><th style="width:50%; color:#1E2A3A">What you build with it</th></tr><tr><td style="width:10%; color:#3D4756">1</td><td style="width:40%; color:#3D4756">From workflow to agent</td><td style="width:50%; color:#3D4756">Text at level</td></tr><tr><td style="width:10%; color:#3D4756">2</td><td style="width:40%; color:#3D4756">Agent with its own knowledge base</td><td style="width:50%; color:#3D4756">School guide assistant</td></tr><tr><td style="width:10%; color:#3D4756">3</td><td style="width:40%; color:#3D4756">School communication</td><td style="width:50%; color:#3D4756">Parent letter assistant, School news, Reception mode</td></tr><tr><td style="width:10%; color:#3D4756">4</td><td style="width:40%; color:#3D4756">Agent Console</td><td style="width:50%; color:#3D4756">Test week planner</td></tr><tr><td style="width:10%; color:#3D4756">5</td><td style="width:40%; color:#3D4756">Transcription tool</td><td style="width:50%; color:#3D4756">From recording to minutes</td></tr><tr><td style="width:10%; color:#3D4756">6</td><td style="width:40%; color:#3D4756">Agent Console with a custom tool</td><td style="width:50%; color:#3D4756">Materials check (UDL, open resources)</td></tr><tr><td style="width:10%; color:#3D4756">7</td><td style="width:40%; color:#3D4756">School news with checks</td><td style="width:50%; color:#3D4756">Self-critique and gatekeeper</td></tr><tr><td style="width:10%; color:#3D4756">8</td><td style="width:40%; color:#3D4756">Study coach for your subject</td><td style="width:50%; color:#3D4756">Chatflow with routes, memory, teacher in the loop</td></tr><tr><td style="width:10%; color:#3D4756">Appendices</td><td style="width:40%; color:#3D4756">Design card · Design patterns · AI tools in education</td><td style="width:50%; color:#3D4756">Every guide ends with Make it yours</td></tr></table>
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents with Dify · LeX Consultancy · CC BY-SA 4.0</p><img src="../images/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>All guides, PDFs and the source are in the repository. Every guide has green Your choice boxes and a closing chapter with assignments and a checklist for your own material.</aside>
|
||||
</section>
|
||||
Reference in New Issue
Block a user