Spaces:
Running
Running
Update index.html
Browse files- index.html +857 -19
index.html
CHANGED
|
@@ -1,19 +1,857 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Our Dify-Powered Agentic Platform — Team Explainer</title>
|
| 7 |
+
<style>
|
| 8 |
+
:root{
|
| 9 |
+
--ink:#14213d;--muted:#5d6b82;--paper:#fffdf8;--card:#ffffff;
|
| 10 |
+
--blue:#4f7cff;--purple:#7c5cff;--cyan:#18b7d4;--green:#29b473;
|
| 11 |
+
--orange:#ff9f43;--red:#ee5d68;--yellow:#ffd166;--pink:#ef6fb5;
|
| 12 |
+
--line:#dce5f2;--soft:#f3f7fc;--navy:#15203b;
|
| 13 |
+
--shadow:0 12px 30px rgba(26,45,82,.10);
|
| 14 |
+
}
|
| 15 |
+
*{box-sizing:border-box}
|
| 16 |
+
html{scroll-behavior:smooth}
|
| 17 |
+
body{
|
| 18 |
+
margin:0;background:
|
| 19 |
+
linear-gradient(180deg,#f7fbff 0,#fffdf8 23rem,#fffdf8 100%);
|
| 20 |
+
color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
| 21 |
+
line-height:1.6;
|
| 22 |
+
}
|
| 23 |
+
a{color:#315bd8;text-decoration:none}
|
| 24 |
+
a:hover{text-decoration:underline}
|
| 25 |
+
.container{max-width:1180px;margin:auto;padding:0 22px}
|
| 26 |
+
.hero{padding:52px 0 32px;position:relative;overflow:hidden}
|
| 27 |
+
.hero:before,.hero:after{content:"";position:absolute;border-radius:999px;filter:blur(0);opacity:.22;z-index:-1}
|
| 28 |
+
.hero:before{width:320px;height:320px;background:#6d5cff;right:-80px;top:-90px}
|
| 29 |
+
.hero:after{width:240px;height:240px;background:#18b7d4;left:-90px;top:100px}
|
| 30 |
+
.badge{
|
| 31 |
+
display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px;
|
| 32 |
+
background:#edf3ff;border:1px solid #cfddff;color:#315bd8;font-weight:800;font-size:.84rem;
|
| 33 |
+
}
|
| 34 |
+
h1{font-size:clamp(2.25rem,5vw,5rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 20px;max-width:1000px}
|
| 35 |
+
h1 span{color:var(--purple)}
|
| 36 |
+
.lead{font-size:clamp(1.06rem,1.8vw,1.35rem);max-width:900px;color:var(--muted)}
|
| 37 |
+
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin-top:35px}
|
| 38 |
+
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
|
| 39 |
+
.paper{
|
| 40 |
+
background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
|
| 41 |
+
}
|
| 42 |
+
.hero-card{padding:18px}
|
| 43 |
+
.note{
|
| 44 |
+
padding:16px 18px;border-radius:16px;background:#fff8dc;border:1px solid #ffe29a;color:#684e00;
|
| 45 |
+
}
|
| 46 |
+
.toc{
|
| 47 |
+
position:sticky;top:0;z-index:30;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);
|
| 48 |
+
border-top:1px solid #edf1f7;border-bottom:1px solid #dde4ef;
|
| 49 |
+
}
|
| 50 |
+
.toc-inner{display:flex;gap:10px;overflow:auto;padding:11px 0;scrollbar-width:none}
|
| 51 |
+
.toc a{
|
| 52 |
+
white-space:nowrap;padding:8px 11px;border-radius:10px;color:#40506b;font-weight:800;font-size:.83rem;
|
| 53 |
+
background:#fff;border:1px solid #e0e7f1;
|
| 54 |
+
}
|
| 55 |
+
section{padding:58px 0}
|
| 56 |
+
.kicker{text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--purple);font-size:.77rem}
|
| 57 |
+
h2{font-size:clamp(1.8rem,3.4vw,3.15rem);letter-spacing:-.04em;line-height:1.05;margin:8px 0 15px}
|
| 58 |
+
h3{font-size:1.27rem;margin:0 0 8px}
|
| 59 |
+
.section-intro{color:var(--muted);font-size:1.05rem;max-width:900px;margin-bottom:26px}
|
| 60 |
+
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
|
| 61 |
+
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
| 62 |
+
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
| 63 |
+
@media(max-width:900px){.grid4,.grid3{grid-template-columns:repeat(2,1fr)}}
|
| 64 |
+
@media(max-width:650px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
|
| 65 |
+
.card{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 7px 22px rgba(24,46,88,.06)}
|
| 66 |
+
.icon{
|
| 67 |
+
width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
|
| 68 |
+
background:#eef3ff;font-size:1.5rem;margin-bottom:12px;border:1px solid #d7e2ff
|
| 69 |
+
}
|
| 70 |
+
.pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#f0f4fb;color:#51627b;font-size:.77rem;font-weight:900}
|
| 71 |
+
.good{background:#ebfbf3;border-color:#c6efd9}
|
| 72 |
+
.warn{background:#fff6e8;border-color:#ffddb2}
|
| 73 |
+
.bad{background:#fff0f0;border-color:#fac8cc}
|
| 74 |
+
.good .icon{background:#dcf8ea}.warn .icon{background:#ffefd4}.bad .icon{background:#ffe2e4}
|
| 75 |
+
.big-idea{padding:26px;background:linear-gradient(120deg,#17223e,#283b72);color:white;border-radius:24px;box-shadow:var(--shadow)}
|
| 76 |
+
.big-idea strong{color:#ffd166}
|
| 77 |
+
.checklist{display:grid;gap:11px;margin:0;padding:0;list-style:none}
|
| 78 |
+
.checklist li{display:flex;gap:10px;align-items:flex-start}
|
| 79 |
+
.checklist li:before{content:"✓";flex:0 0 25px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#daf5e7;color:#137548;font-weight:900}
|
| 80 |
+
.xlist li:before{content:"×";background:#ffe1e3;color:#b2323c}
|
| 81 |
+
.diagram{padding:18px;background:#fbfdff;border:1px solid #dfe8f5;border-radius:22px;overflow:auto}
|
| 82 |
+
.diagram svg{display:block;width:100%;height:auto;min-width:680px}
|
| 83 |
+
.caption{color:var(--muted);font-size:.88rem;margin-top:9px}
|
| 84 |
+
.callout{border-left:5px solid var(--blue);padding:16px 18px;background:#f4f7ff;border-radius:0 14px 14px 0;margin:22px 0}
|
| 85 |
+
.callout.orange{border-left-color:var(--orange);background:#fff7ea}
|
| 86 |
+
.callout.green{border-left-color:var(--green);background:#effbf5}
|
| 87 |
+
.callout.red{border-left-color:var(--red);background:#fff2f3}
|
| 88 |
+
.compare{width:100%;border-collapse:separate;border-spacing:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}
|
| 89 |
+
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
|
| 90 |
+
.compare th{background:#f3f6fb;color:#31415d;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em}
|
| 91 |
+
.compare tr:last-child td{border-bottom:0}
|
| 92 |
+
.num{
|
| 93 |
+
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#263968;color:white;font-weight:900;flex:0 0 38px
|
| 94 |
+
}
|
| 95 |
+
.step{display:flex;gap:15px;align-items:flex-start}
|
| 96 |
+
.step+.step{margin-top:19px}
|
| 97 |
+
.timeline{position:relative;padding-left:12px}
|
| 98 |
+
.timeline:before{content:"";position:absolute;left:30px;top:24px;bottom:24px;width:3px;background:#dfe7f5}
|
| 99 |
+
.timeline .step{position:relative}
|
| 100 |
+
.timeline .num{z-index:2}
|
| 101 |
+
.node-chip{display:inline-block;border:1px solid #dce4f0;background:white;border-radius:10px;padding:5px 8px;margin:3px;font-size:.78rem;font-weight:800}
|
| 102 |
+
.legend{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
|
| 103 |
+
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#52627b;font-weight:800}
|
| 104 |
+
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
|
| 105 |
+
.code{
|
| 106 |
+
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#10182b;color:#eaf1ff;border-radius:15px;padding:16px;overflow:auto;font-size:.86rem
|
| 107 |
+
}
|
| 108 |
+
.quote{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;color:#293a5b}
|
| 109 |
+
.footer{padding:36px 0 70px;color:#62718a;font-size:.9rem}
|
| 110 |
+
.source-list{display:grid;gap:10px}
|
| 111 |
+
.source{background:white;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
|
| 112 |
+
.stamp{
|
| 113 |
+
display:inline-block;background:#eaf8ff;color:#176b82;border:1px solid #c7e8f2;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900
|
| 114 |
+
}
|
| 115 |
+
.keyline{height:1px;background:linear-gradient(90deg,transparent,#d6dfec,transparent);margin:15px 0}
|
| 116 |
+
@media print{
|
| 117 |
+
.toc{display:none}.hero{padding-top:20px}section{break-inside:avoid;padding:28px 0}
|
| 118 |
+
body{background:white}.paper,.card,.diagram{box-shadow:none}
|
| 119 |
+
}
|
| 120 |
+
</style>
|
| 121 |
+
</head>
|
| 122 |
+
<body>
|
| 123 |
+
|
| 124 |
+
<header class="hero">
|
| 125 |
+
<div class="container">
|
| 126 |
+
<span class="badge">📘 Team Explainer • Dify-powered product strategy</span>
|
| 127 |
+
<h1>We build the <span>experience.</span><br>Dify runs the engine.</h1>
|
| 128 |
+
<p class="lead">
|
| 129 |
+
This document explains, in simple visual terms, how we can create our own branded no-code AI agent/workflow platform
|
| 130 |
+
while using Dify underneath for workflow execution, agents, RAG, tools, model connections and runtime operations.
|
| 131 |
+
</p>
|
| 132 |
+
|
| 133 |
+
<div class="hero-grid">
|
| 134 |
+
<div class="big-idea">
|
| 135 |
+
<div style="font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;opacity:.75;font-weight:900">The one sentence everyone should remember</div>
|
| 136 |
+
<div style="font-size:clamp(1.5rem,3vw,2.55rem);line-height:1.1;font-weight:900;margin-top:10px">
|
| 137 |
+
We are <strong>not rebuilding Dify.</strong><br>
|
| 138 |
+
We are building <strong>our own product UI</strong> on top of Dify.
|
| 139 |
+
</div>
|
| 140 |
+
<div style="margin-top:18px;color:#dce7ff">
|
| 141 |
+
Think of Dify as the engine, gearbox and electronics inside a car. Our product is the dashboard, controls,
|
| 142 |
+
body design and customer experience.
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
|
| 146 |
+
<div class="paper hero-card">
|
| 147 |
+
<svg viewBox="0 0 620 430" role="img" aria-label="Car analogy diagram">
|
| 148 |
+
<defs>
|
| 149 |
+
<linearGradient id="gCar" x1="0" x2="1">
|
| 150 |
+
<stop offset="0" stop-color="#4f7cff"/><stop offset="1" stop-color="#7c5cff"/>
|
| 151 |
+
</linearGradient>
|
| 152 |
+
</defs>
|
| 153 |
+
<rect x="25" y="35" width="570" height="350" rx="30" fill="#f6f9ff" stroke="#dbe6f7"/>
|
| 154 |
+
<text x="310" y="76" text-anchor="middle" font-size="26" font-weight="900" fill="#1e2e52">🚙 PRODUCT ANALOGY</text>
|
| 155 |
+
<path d="M145 245 L195 170 H425 L485 245 L520 255 Q550 260 550 295 V320 H85 V288 Q85 260 115 255 Z" fill="url(#gCar)"/>
|
| 156 |
+
<circle cx="170" cy="320" r="43" fill="#17213b"/><circle cx="170" cy="320" r="19" fill="#dce5f5"/>
|
| 157 |
+
<circle cx="455" cy="320" r="43" fill="#17213b"/><circle cx="455" cy="320" r="19" fill="#dce5f5"/>
|
| 158 |
+
<rect x="210" y="190" width="190" height="65" rx="12" fill="#17213b"/>
|
| 159 |
+
<text x="305" y="218" text-anchor="middle" font-size="18" font-weight="900" fill="#fff">OUR UI</text>
|
| 160 |
+
<text x="305" y="240" text-anchor="middle" font-size="13" fill="#cfe0ff">what the customer sees</text>
|
| 161 |
+
<rect x="260" y="270" width="100" height="42" rx="10" fill="#ffd166"/>
|
| 162 |
+
<text x="310" y="296" text-anchor="middle" font-size="16" font-weight="900" fill="#493800">DIFY</text>
|
| 163 |
+
<path d="M310 255 V270" stroke="#fff" stroke-width="4"/>
|
| 164 |
+
<text x="310" y="370" text-anchor="middle" font-size="14" fill="#5d6b82">Same engine. Our own vehicle.</text>
|
| 165 |
+
</svg>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="note" style="margin-top:22px">
|
| 169 |
+
<strong>Important:</strong> Similar functionality is fine as a product goal, but we should not make a pixel-for-pixel or interaction-for-interaction clone of Dify’s frontend.
|
| 170 |
+
The current Dify license specifically protects its frontend branding and notes that the product’s interactive design is protected by an appearance patent.
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</header>
|
| 174 |
+
|
| 175 |
+
<nav class="toc">
|
| 176 |
+
<div class="container toc-inner">
|
| 177 |
+
<a href="#idea">1. The Idea</a>
|
| 178 |
+
<a href="#layers">2. What We Build</a>
|
| 179 |
+
<a href="#journey">3. What Happens on Click</a>
|
| 180 |
+
<a href="#api">4. API Adapter</a>
|
| 181 |
+
<a href="#deployment">5. Customer Deployment</a>
|
| 182 |
+
<a href="#opensource">6. Existing Open Source</a>
|
| 183 |
+
<a href="#license">7. Guardrails</a>
|
| 184 |
+
<a href="#roadmap">8. Roadmap</a>
|
| 185 |
+
<a href="#mvp">9. MVP</a>
|
| 186 |
+
</div>
|
| 187 |
+
</nav>
|
| 188 |
+
|
| 189 |
+
<main>
|
| 190 |
+
|
| 191 |
+
<section id="idea">
|
| 192 |
+
<div class="container">
|
| 193 |
+
<div class="kicker">Chapter 1</div>
|
| 194 |
+
<h2>The idea in plain English</h2>
|
| 195 |
+
<p class="section-intro">
|
| 196 |
+
A customer should feel like they are using <strong>our AI automation platform</strong>. They create agents, drag workflow nodes,
|
| 197 |
+
connect company systems, add knowledge and run automations. Underneath, Dify does the heavy execution work.
|
| 198 |
+
</p>
|
| 199 |
+
|
| 200 |
+
<div class="diagram">
|
| 201 |
+
<svg viewBox="0 0 1100 450">
|
| 202 |
+
<defs>
|
| 203 |
+
<marker id="arr1" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
| 204 |
+
<path d="M0,0 L0,6 L9,3 z" fill="#52698f"/>
|
| 205 |
+
</marker>
|
| 206 |
+
</defs>
|
| 207 |
+
<rect x="30" y="32" width="1040" height="380" rx="28" fill="#f8fbff" stroke="#dce7f6"/>
|
| 208 |
+
<text x="550" y="73" text-anchor="middle" font-size="24" font-weight="900" fill="#17213b">THE PRODUCT STACK</text>
|
| 209 |
+
|
| 210 |
+
<rect x="70" y="120" width="245" height="220" rx="22" fill="#eef3ff" stroke="#afc4ff" stroke-width="2"/>
|
| 211 |
+
<text x="192" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#315bd8">OUR PRODUCT</text>
|
| 212 |
+
<text x="192" y="190" text-anchor="middle" font-size="15" fill="#465c7f">Dashboard</text>
|
| 213 |
+
<text x="192" y="218" text-anchor="middle" font-size="15" fill="#465c7f">Visual Builder</text>
|
| 214 |
+
<text x="192" y="246" text-anchor="middle" font-size="15" fill="#465c7f">Agent Setup</text>
|
| 215 |
+
<text x="192" y="274" text-anchor="middle" font-size="15" fill="#465c7f">Knowledge UI</text>
|
| 216 |
+
<text x="192" y="302" text-anchor="middle" font-size="15" fill="#465c7f">Connections + Logs</text>
|
| 217 |
+
|
| 218 |
+
<rect x="425" y="120" width="250" height="220" rx="22" fill="#f4efff" stroke="#c8b6ff" stroke-width="2"/>
|
| 219 |
+
<text x="550" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY ENGINE</text>
|
| 220 |
+
<text x="550" y="190" text-anchor="middle" font-size="15" fill="#5b4c76">Workflow runtime</text>
|
| 221 |
+
<text x="550" y="218" text-anchor="middle" font-size="15" fill="#5b4c76">Agent execution</text>
|
| 222 |
+
<text x="550" y="246" text-anchor="middle" font-size="15" fill="#5b4c76">RAG / datasets</text>
|
| 223 |
+
<text x="550" y="274" text-anchor="middle" font-size="15" fill="#5b4c76">Tools / plugins</text>
|
| 224 |
+
<text x="550" y="302" text-anchor="middle" font-size="15" fill="#5b4c76">Runs / tracing</text>
|
| 225 |
+
|
| 226 |
+
<rect x="785" y="120" width="245" height="220" rx="22" fill="#ecfbf4" stroke="#a8e4c7" stroke-width="2"/>
|
| 227 |
+
<text x="907" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#16845a">OUTSIDE WORLD</text>
|
| 228 |
+
<text x="907" y="190" text-anchor="middle" font-size="15" fill="#426b5a">OpenAI / Claude</text>
|
| 229 |
+
<text x="907" y="218" text-anchor="middle" font-size="15" fill="#426b5a">Gemini / private LLM</text>
|
| 230 |
+
<text x="907" y="246" text-anchor="middle" font-size="15" fill="#426b5a">CRM / ERP</text>
|
| 231 |
+
<text x="907" y="274" text-anchor="middle" font-size="15" fill="#426b5a">Email / SharePoint</text>
|
| 232 |
+
<text x="907" y="302" text-anchor="middle" font-size="15" fill="#426b5a">Databases / APIs</text>
|
| 233 |
+
|
| 234 |
+
<line x1="315" y1="230" x2="420" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/>
|
| 235 |
+
<line x1="675" y1="230" x2="780" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/>
|
| 236 |
+
<text x="367" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">OUR ADAPTER</text>
|
| 237 |
+
<text x="727" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">CONNECTORS</text>
|
| 238 |
+
</svg>
|
| 239 |
+
</div>
|
| 240 |
+
|
| 241 |
+
<div class="grid3" style="margin-top:18px">
|
| 242 |
+
<div class="card good"><div class="icon">🎨</div><h3>We own the experience</h3><p>Branding, page structure, workflow editor, settings, templates, onboarding and permissions are ours.</p></div>
|
| 243 |
+
<div class="card good"><div class="icon">⚙️</div><h3>Dify owns the heavy runtime</h3><p>Instead of writing an agent/workflow execution engine from scratch, we delegate execution to Dify.</p></div>
|
| 244 |
+
<div class="card good"><div class="icon">🔌</div><h3>Systems stay pluggable</h3><p>LLMs, company APIs, MCP servers, tools and knowledge sources sit behind the runtime.</p></div>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
</section>
|
| 248 |
+
|
| 249 |
+
<section id="layers">
|
| 250 |
+
<div class="container">
|
| 251 |
+
<div class="kicker">Chapter 2</div>
|
| 252 |
+
<h2>What exactly are we building?</h2>
|
| 253 |
+
<p class="section-intro">The simplest way to divide the work is: <strong>customer-facing product layer</strong> vs <strong>execution layer</strong>.</p>
|
| 254 |
+
|
| 255 |
+
<div class="grid2">
|
| 256 |
+
<div class="card good">
|
| 257 |
+
<div class="icon">👩🎨</div>
|
| 258 |
+
<h3>WE BUILD THIS</h3>
|
| 259 |
+
<ul class="checklist">
|
| 260 |
+
<li>Our login, branding and navigation</li>
|
| 261 |
+
<li>Agent creation screens</li>
|
| 262 |
+
<li>Visual drag-and-drop workflow editor</li>
|
| 263 |
+
<li>Knowledge-base management screens</li>
|
| 264 |
+
<li>Connections / credentials UI</li>
|
| 265 |
+
<li>Templates and starter workflows</li>
|
| 266 |
+
<li>Human-friendly run history and error screens</li>
|
| 267 |
+
<li>Role/permission rules appropriate for our customers</li>
|
| 268 |
+
<li>Deployment/updater tooling for each customer</li>
|
| 269 |
+
</ul>
|
| 270 |
+
</div>
|
| 271 |
+
|
| 272 |
+
<div class="card warn">
|
| 273 |
+
<div class="icon">🧠</div>
|
| 274 |
+
<h3>DIFY ALREADY DOES THIS</h3>
|
| 275 |
+
<ul class="checklist">
|
| 276 |
+
<li>Execute workflow graphs</li>
|
| 277 |
+
<li>Run LLM and agent nodes</li>
|
| 278 |
+
<li>Manage model-provider connections</li>
|
| 279 |
+
<li>Run RAG / knowledge retrieval</li>
|
| 280 |
+
<li>Execute tools and plugins</li>
|
| 281 |
+
<li>Handle node variables and outputs</li>
|
| 282 |
+
<li>Track workflow runs and traces</li>
|
| 283 |
+
<li>Publish and execute applications</li>
|
| 284 |
+
<li>Maintain internal workflow definitions</li>
|
| 285 |
+
</ul>
|
| 286 |
+
</div>
|
| 287 |
+
</div>
|
| 288 |
+
|
| 289 |
+
<div class="callout green">
|
| 290 |
+
<strong>Why this matters:</strong> a normal “build our own agent platform” project can turn into years of engine work.
|
| 291 |
+
With this architecture, our main engineering challenge becomes a much more manageable product problem:
|
| 292 |
+
<strong>build a clean frontend + stable adapter to Dify.</strong>
|
| 293 |
+
</div>
|
| 294 |
+
|
| 295 |
+
<div class="diagram">
|
| 296 |
+
<svg viewBox="0 0 1100 510">
|
| 297 |
+
<defs><marker id="arr2" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#65799d"/></marker></defs>
|
| 298 |
+
<text x="550" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">WHAT THE CUSTOMER SEES VS WHAT THEY NEVER NEED TO SEE</text>
|
| 299 |
+
|
| 300 |
+
<rect x="40" y="75" width="1020" height="150" rx="25" fill="#edf4ff" stroke="#b9ccff"/>
|
| 301 |
+
<text x="70" y="110" font-size="17" font-weight="900" fill="#315bd8">VISIBLE: OUR PRODUCT</text>
|
| 302 |
+
<g font-size="14" font-weight="800" fill="#354968">
|
| 303 |
+
<rect x="75" y="135" width="150" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="150" y="168" text-anchor="middle">Dashboard</text>
|
| 304 |
+
<rect x="245" y="135" width="160" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="325" y="168" text-anchor="middle">Agent Builder</text>
|
| 305 |
+
<rect x="425" y="135" width="170" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="510" y="168" text-anchor="middle">Workflow Canvas</text>
|
| 306 |
+
<rect x="615" y="135" width="170" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="700" y="168" text-anchor="middle">Knowledge</text>
|
| 307 |
+
<rect x="805" y="135" width="180" height="55" rx="13" fill="#fff" stroke="#cddafa"/><text x="895" y="168" text-anchor="middle">Connections / Logs</text>
|
| 308 |
+
</g>
|
| 309 |
+
|
| 310 |
+
<line x1="550" y1="225" x2="550" y2="275" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/>
|
| 311 |
+
<rect x="420" y="255" width="260" height="50" rx="14" fill="#17213b"/>
|
| 312 |
+
<text x="550" y="286" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">OUR DIFY ADAPTER API</text>
|
| 313 |
+
|
| 314 |
+
<line x1="550" y1="305" x2="550" y2="350" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/>
|
| 315 |
+
|
| 316 |
+
<rect x="40" y="345" width="1020" height="130" rx="25" fill="#f5efff" stroke="#ccbaff"/>
|
| 317 |
+
<text x="70" y="380" font-size="17" font-weight="900" fill="#6845d6">HIDDEN: DIFY RUNTIME</text>
|
| 318 |
+
<g font-size="14" font-weight="800" fill="#4a3d64">
|
| 319 |
+
<rect x="85" y="398" width="160" height="48" rx="12" fill="#fff"/><text x="165" y="428" text-anchor="middle">Workflow Engine</text>
|
| 320 |
+
<rect x="270" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="345" y="428" text-anchor="middle">Agent Runtime</text>
|
| 321 |
+
<rect x="445" y="398" width="130" height="48" rx="12" fill="#fff"/><text x="510" y="428" text-anchor="middle">RAG</text>
|
| 322 |
+
<rect x="600" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="675" y="428" text-anchor="middle">Tools / Plugins</text>
|
| 323 |
+
<rect x="775" y="398" width="180" height="48" rx="12" fill="#fff"/><text x="865" y="428" text-anchor="middle">Runs / Versions</text>
|
| 324 |
+
</g>
|
| 325 |
+
</svg>
|
| 326 |
+
</div>
|
| 327 |
+
</div>
|
| 328 |
+
</section>
|
| 329 |
+
|
| 330 |
+
<section id="journey">
|
| 331 |
+
<div class="container">
|
| 332 |
+
<div class="kicker">Chapter 3</div>
|
| 333 |
+
<h2>What happens when a user drags a node?</h2>
|
| 334 |
+
<p class="section-intro">This is the most important engineering flow for the team to understand.</p>
|
| 335 |
+
|
| 336 |
+
<div class="diagram">
|
| 337 |
+
<svg viewBox="0 0 1160 520">
|
| 338 |
+
<defs><marker id="arr3" markerWidth="11" markerHeight="11" refX="9" refY="3.5" orient="auto"><path d="M0 0 L0 7 L10 3.5z" fill="#5c6f91"/></marker></defs>
|
| 339 |
+
<text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">EXAMPLE: USER CREATES “EMAIL → AI → APPROVAL → SEND”</text>
|
| 340 |
+
|
| 341 |
+
<g font-size="14" font-weight="900" text-anchor="middle">
|
| 342 |
+
<rect x="42" y="90" width="185" height="80" rx="18" fill="#eaf2ff" stroke="#a9c0ff" stroke-width="2"/>
|
| 343 |
+
<text x="134" y="122" fill="#315bd8">1. USER ACTION</text><text x="134" y="146" fill="#4d6389" font-weight="700">drops AI node</text>
|
| 344 |
+
|
| 345 |
+
<rect x="285" y="90" width="190" height="80" rx="18" fill="#edf9ff" stroke="#a4dfec" stroke-width="2"/>
|
| 346 |
+
<text x="380" y="122" fill="#1685a0">2. OUR CANVAS</text><text x="380" y="146" fill="#4d6389" font-weight="700">updates local graph</text>
|
| 347 |
+
|
| 348 |
+
<rect x="535" y="90" width="190" height="80" rx="18" fill="#f4efff" stroke="#c5b3ff" stroke-width="2"/>
|
| 349 |
+
<text x="630" y="122" fill="#6845d6">3. ADAPTER</text><text x="630" y="146" fill="#5b4d79" font-weight="700">translates graph</text>
|
| 350 |
+
|
| 351 |
+
<rect x="785" y="90" width="155" height="80" rx="18" fill="#fff5e8" stroke="#ffd19a" stroke-width="2"/>
|
| 352 |
+
<text x="862" y="122" fill="#b56c12">4. DIFY</text><text x="862" y="146" fill="#7a654a" font-weight="700">stores draft</text>
|
| 353 |
+
|
| 354 |
+
<rect x="995" y="90" width="125" height="80" rx="18" fill="#edfbf4" stroke="#a8e4c7" stroke-width="2"/>
|
| 355 |
+
<text x="1057" y="122" fill="#16845a">5. RUN</text><text x="1057" y="146" fill="#4a6e5e" font-weight="700">executes</text>
|
| 356 |
+
</g>
|
| 357 |
+
|
| 358 |
+
<g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)">
|
| 359 |
+
<line x1="227" y1="130" x2="280" y2="130"/><line x1="475" y1="130" x2="530" y2="130"/>
|
| 360 |
+
<line x1="725" y1="130" x2="780" y2="130"/><line x1="940" y1="130" x2="990" y2="130"/>
|
| 361 |
+
</g>
|
| 362 |
+
|
| 363 |
+
<rect x="90" y="230" width="980" height="220" rx="24" fill="#fff" stroke="#dbe4f0"/>
|
| 364 |
+
<text x="580" y="270" text-anchor="middle" font-size="18" font-weight="900" fill="#233557">THE ACTUAL WORKFLOW THE USER SEES</text>
|
| 365 |
+
|
| 366 |
+
<g text-anchor="middle" font-size="14" font-weight="900">
|
| 367 |
+
<rect x="145" y="325" width="150" height="65" rx="17" fill="#eaf2ff" stroke="#9fbaff" stroke-width="2"/><text x="220" y="353" fill="#315bd8">📧 EMAIL</text><text x="220" y="375" fill="#586b8a" font-weight="700">trigger</text>
|
| 368 |
+
<rect x="365" y="325" width="150" height="65" rx="17" fill="#f2edff" stroke="#baa7ff" stroke-width="2"/><text x="440" y="353" fill="#6845d6">🤖 AI AGENT</text><text x="440" y="375" fill="#685b80" font-weight="700">understand + draft</text>
|
| 369 |
+
<rect x="585" y="325" width="150" height="65" rx="17" fill="#fff5e5" stroke="#ffd092" stroke-width="2"/><text x="660" y="353" fill="#b56c12">👤 APPROVAL</text><text x="660" y="375" fill="#806547" font-weight="700">human check</text>
|
| 370 |
+
<rect x="805" y="325" width="150" height="65" rx="17" fill="#eaf9f1" stroke="#9fdfc1" stroke-width="2"/><text x="880" y="353" fill="#16845a">✉️ SEND</text><text x="880" y="375" fill="#567262" font-weight="700">final action</text>
|
| 371 |
+
</g>
|
| 372 |
+
<g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)">
|
| 373 |
+
<line x1="295" y1="357" x2="360" y2="357"/><line x1="515" y1="357" x2="580" y2="357"/><line x1="735" y1="357" x2="800" y2="357"/>
|
| 374 |
+
</g>
|
| 375 |
+
</svg>
|
| 376 |
+
</div>
|
| 377 |
+
|
| 378 |
+
<div class="grid4" style="margin-top:18px">
|
| 379 |
+
<div class="card"><span class="pill">Frontend</span><h3 style="margin-top:8px">Canvas state</h3><p>Our UI stores nodes, positions, connections and friendly labels.</p></div>
|
| 380 |
+
<div class="card"><span class="pill">Backend</span><h3 style="margin-top:8px">Translate</h3><p>Our adapter converts our friendly graph schema into Dify’s workflow graph schema.</p></div>
|
| 381 |
+
<div class="card"><span class="pill">Dify</span><h3 style="margin-top:8px">Save + validate</h3><p>Dify receives the workflow draft, validates it and prepares it for execution.</p></div>
|
| 382 |
+
<div class="card"><span class="pill">Runtime</span><h3 style="margin-top:8px">Execute</h3><p>Dify invokes models, RAG, tools and APIs, then returns results and traces.</p></div>
|
| 383 |
+
</div>
|
| 384 |
+
</div>
|
| 385 |
+
</section>
|
| 386 |
+
|
| 387 |
+
<section id="api">
|
| 388 |
+
<div class="container">
|
| 389 |
+
<div class="kicker">Chapter 4</div>
|
| 390 |
+
<h2>The adapter is our safety wall</h2>
|
| 391 |
+
<p class="section-intro">
|
| 392 |
+
Dify’s normal public Service API is designed mainly for <em>running</em> apps. To reproduce Studio-like management functionality,
|
| 393 |
+
we need capabilities similar to the internal Console API used by Dify’s own frontend. We should hide that behind one adapter owned by us.
|
| 394 |
+
</p>
|
| 395 |
+
|
| 396 |
+
<div class="diagram">
|
| 397 |
+
<svg viewBox="0 0 1100 500">
|
| 398 |
+
<defs><marker id="arr4" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#576b90"/></marker></defs>
|
| 399 |
+
<rect x="65" y="60" width="220" height="340" rx="22" fill="#eef4ff" stroke="#afc4ff"/>
|
| 400 |
+
<text x="175" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">OUR FRONTEND</text>
|
| 401 |
+
<text x="175" y="145" text-anchor="middle" font-size="14" fill="#4d6388">Create app</text>
|
| 402 |
+
<text x="175" y="177" text-anchor="middle" font-size="14" fill="#4d6388">Edit graph</text>
|
| 403 |
+
<text x="175" y="209" text-anchor="middle" font-size="14" fill="#4d6388">Knowledge</text>
|
| 404 |
+
<text x="175" y="241" text-anchor="middle" font-size="14" fill="#4d6388">Models</text>
|
| 405 |
+
<text x="175" y="273" text-anchor="middle" font-size="14" fill="#4d6388">Plugins</text>
|
| 406 |
+
<text x="175" y="305" text-anchor="middle" font-size="14" fill="#4d6388">Versions</text>
|
| 407 |
+
<text x="175" y="337" text-anchor="middle" font-size="14" fill="#4d6388">Runs</text>
|
| 408 |
+
|
| 409 |
+
<rect x="405" y="100" width="290" height="260" rx="24" fill="#17213b"/>
|
| 410 |
+
<text x="550" y="143" text-anchor="middle" font-size="22" font-weight="900" fill="#fff">OUR DIFY ADAPTER</text>
|
| 411 |
+
<text x="550" y="187" text-anchor="middle" font-size="14" fill="#cbd8f1">Stable API for our frontend</text>
|
| 412 |
+
<text x="550" y="220" text-anchor="middle" font-size="14" fill="#cbd8f1">Authentication + session handling</text>
|
| 413 |
+
<text x="550" y="253" text-anchor="middle" font-size="14" fill="#cbd8f1">Our schema ↔ Dify schema</text>
|
| 414 |
+
<text x="550" y="286" text-anchor="middle" font-size="14" fill="#cbd8f1">Version compatibility layer</text>
|
| 415 |
+
<text x="550" y="319" text-anchor="middle" font-size="14" fill="#ffd166" font-weight="900">ONLY THIS LAYER KNOWS DIFY DETAILS</text>
|
| 416 |
+
|
| 417 |
+
<rect x="815" y="60" width="220" height="340" rx="22" fill="#f4efff" stroke="#c5b3ff"/>
|
| 418 |
+
<text x="925" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#6845d6">DIFY</text>
|
| 419 |
+
<text x="925" y="145" text-anchor="middle" font-size="14" fill="#625376">Console endpoints</text>
|
| 420 |
+
<text x="925" y="177" text-anchor="middle" font-size="14" fill="#625376">Workflow drafts</text>
|
| 421 |
+
<text x="925" y="209" text-anchor="middle" font-size="14" fill="#625376">Datasets / RAG</text>
|
| 422 |
+
<text x="925" y="241" text-anchor="middle" font-size="14" fill="#625376">Providers</text>
|
| 423 |
+
<text x="925" y="273" text-anchor="middle" font-size="14" fill="#625376">Plugins</text>
|
| 424 |
+
<text x="925" y="305" text-anchor="middle" font-size="14" fill="#625376">Publishing</text>
|
| 425 |
+
<text x="925" y="337" text-anchor="middle" font-size="14" fill="#625376">Execution</text>
|
| 426 |
+
|
| 427 |
+
<line x1="285" y1="230" x2="400" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/>
|
| 428 |
+
<line x1="695" y1="230" x2="810" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/>
|
| 429 |
+
</svg>
|
| 430 |
+
</div>
|
| 431 |
+
|
| 432 |
+
<div class="callout orange">
|
| 433 |
+
<strong>Why the adapter matters:</strong> internal Dify endpoints may change between releases.
|
| 434 |
+
If our UI calls Dify directly everywhere, every Dify upgrade can break dozens of screens.
|
| 435 |
+
If everything goes through one adapter, we update one compatibility layer.
|
| 436 |
+
</div>
|
| 437 |
+
|
| 438 |
+
<div class="grid2">
|
| 439 |
+
<div class="card good">
|
| 440 |
+
<div class="icon">🛡️</div><h3>Good architecture</h3>
|
| 441 |
+
<div class="code">Our UI
|
| 442 |
+
↓
|
| 443 |
+
/api/workflows
|
| 444 |
+
↓
|
| 445 |
+
DifyAdapter
|
| 446 |
+
↓
|
| 447 |
+
Dify console/runtime endpoints</div>
|
| 448 |
+
</div>
|
| 449 |
+
<div class="card bad">
|
| 450 |
+
<div class="icon">💥</div><h3>Fragile architecture</h3>
|
| 451 |
+
<div class="code">Page A → Dify endpoint X
|
| 452 |
+
Page B → Dify endpoint Y
|
| 453 |
+
Page C → Dify endpoint Z
|
| 454 |
+
Page D → direct DB write
|
| 455 |
+
...</div>
|
| 456 |
+
</div>
|
| 457 |
+
</div>
|
| 458 |
+
</div>
|
| 459 |
+
</section>
|
| 460 |
+
|
| 461 |
+
<section id="deployment">
|
| 462 |
+
<div class="container">
|
| 463 |
+
<div class="kicker">Chapter 5</div>
|
| 464 |
+
<h2>One dedicated environment per customer</h2>
|
| 465 |
+
<p class="section-intro">
|
| 466 |
+
Our intended commercial model is not “one Dify with many customer workspaces.” Instead, each company gets its own isolated deployment.
|
| 467 |
+
</p>
|
| 468 |
+
|
| 469 |
+
<div class="diagram">
|
| 470 |
+
<svg viewBox="0 0 1160 560">
|
| 471 |
+
<defs><marker id="arr5" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#617495"/></marker></defs>
|
| 472 |
+
<text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">DEDICATED CUSTOMER DEPLOYMENT MODEL</text>
|
| 473 |
+
|
| 474 |
+
<g>
|
| 475 |
+
<rect x="55" y="85" width="310" height="400" rx="24" fill="#eef4ff" stroke="#afc4ff" stroke-width="2"/>
|
| 476 |
+
<text x="210" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">CUSTOMER A</text>
|
| 477 |
+
<rect x="100" y="150" width="220" height="55" rx="12" fill="#fff"/><text x="210" y="184" text-anchor="middle" font-size="15" font-weight="900" fill="#263a61">Our UI</text>
|
| 478 |
+
<line x1="210" y1="205" x2="210" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
|
| 479 |
+
<rect x="100" y="240" width="220" height="55" rx="12" fill="#17213b"/><text x="210" y="274" text-anchor="middle" font-size="15" font-weight="900" fill="#fff">Our Adapter</text>
|
| 480 |
+
<line x1="210" y1="295" x2="210" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
|
| 481 |
+
<rect x="100" y="330" width="220" height="55" rx="12" fill="#f0eaff"/><text x="210" y="364" text-anchor="middle" font-size="15" font-weight="900" fill="#6845d6">Dedicated Dify A</text>
|
| 482 |
+
<text x="210" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
|
| 483 |
+
<text x="210" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
|
| 484 |
+
</g>
|
| 485 |
+
|
| 486 |
+
<g>
|
| 487 |
+
<rect x="425" y="85" width="310" height="400" rx="24" fill="#effbf5" stroke="#abe1c7" stroke-width="2"/>
|
| 488 |
+
<text x="580" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#16845a">CUSTOMER B</text>
|
| 489 |
+
<rect x="470" y="150" width="220" height="55" rx="12" fill="#fff"/><text x="580" y="184" text-anchor="middle" font-size="15" font-weight="900" fill="#263a61">Our UI</text>
|
| 490 |
+
<line x1="580" y1="205" x2="580" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
|
| 491 |
+
<rect x="470" y="240" width="220" height="55" rx="12" fill="#17213b"/><text x="580" y="274" text-anchor="middle" font-size="15" font-weight="900" fill="#fff">Our Adapter</text>
|
| 492 |
+
<line x1="580" y1="295" x2="580" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
|
| 493 |
+
<rect x="470" y="330" width="220" height="55" rx="12" fill="#eaf7f0"/><text x="580" y="364" text-anchor="middle" font-size="15" font-weight="900" fill="#16845a">Dedicated Dify B</text>
|
| 494 |
+
<text x="580" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
|
| 495 |
+
<text x="580" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
|
| 496 |
+
</g>
|
| 497 |
+
|
| 498 |
+
<g>
|
| 499 |
+
<rect x="795" y="85" width="310" height="400" rx="24" fill="#fff6e9" stroke="#ffd49f" stroke-width="2"/>
|
| 500 |
+
<text x="950" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#b56c12">CUSTOMER C</text>
|
| 501 |
+
<rect x="840" y="150" width="220" height="55" rx="12" fill="#fff"/><text x="950" y="184" text-anchor="middle" font-size="15" font-weight="900" fill="#263a61">Our UI</text>
|
| 502 |
+
<line x1="950" y1="205" x2="950" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
|
| 503 |
+
<rect x="840" y="240" width="220" height="55" rx="12" fill="#17213b"/><text x="950" y="274" text-anchor="middle" font-size="15" font-weight="900" fill="#fff">Our Adapter</text>
|
| 504 |
+
<line x1="950" y1="295" x2="950" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/>
|
| 505 |
+
<rect x="840" y="330" width="220" height="55" rx="12" fill="#fff0db"/><text x="950" y="364" text-anchor="middle" font-size="15" font-weight="900" fill="#b56c12">Dedicated Dify C</text>
|
| 506 |
+
<text x="950" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text>
|
| 507 |
+
<text x="950" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text>
|
| 508 |
+
</g>
|
| 509 |
+
</svg>
|
| 510 |
+
</div>
|
| 511 |
+
|
| 512 |
+
<div class="grid2" style="margin-top:18px">
|
| 513 |
+
<div class="card good">
|
| 514 |
+
<div class="icon">✅</div><h3>Our intended pattern</h3>
|
| 515 |
+
<p><strong>One customer = one isolated deployment.</strong> Their workflows, credentials, knowledge and runtime are separated at the infrastructure level.</p>
|
| 516 |
+
</div>
|
| 517 |
+
<div class="card bad">
|
| 518 |
+
<div class="icon">🚫</div><h3>Pattern to avoid without commercial authorization</h3>
|
| 519 |
+
<p><strong>One shared Dify = many customer workspaces.</strong> The current license defines a tenant as a workspace and restricts using the source to operate a multi-tenant environment unless authorized in writing.</p>
|
| 520 |
+
</div>
|
| 521 |
+
</div>
|
| 522 |
+
</div>
|
| 523 |
+
</section>
|
| 524 |
+
|
| 525 |
+
<section id="opensource">
|
| 526 |
+
<div class="container">
|
| 527 |
+
<div class="kicker">Chapter 6</div>
|
| 528 |
+
<h2>What has already been built by the open-source community?</h2>
|
| 529 |
+
<p class="section-intro">
|
| 530 |
+
We did not find a polished, complete “replacement Dify Studio” that we can simply clone and ship.
|
| 531 |
+
But we found projects that solve important pieces of the puzzle—especially programmatic control of Dify.
|
| 532 |
+
</p>
|
| 533 |
+
|
| 534 |
+
<div class="grid3">
|
| 535 |
+
<div class="card">
|
| 536 |
+
<div class="icon">🧰</div>
|
| 537 |
+
<h3>dify-mcp</h3>
|
| 538 |
+
<span class="pill">Most important reference</span>
|
| 539 |
+
<p>Exposes the Dify console surface programmatically through a large MCP/CLI tool registry. Its README currently documents <strong>174 tools across 19 namespaces</strong>.</p>
|
| 540 |
+
<p><strong>Why we care:</strong> it is a map of how to programmatically create apps, manipulate workflows, manage RAG, providers, plugins, runs, versions and more.</p>
|
| 541 |
+
</div>
|
| 542 |
+
|
| 543 |
+
<div class="card">
|
| 544 |
+
<div class="icon">🛠️</div>
|
| 545 |
+
<h3>PSDify</h3>
|
| 546 |
+
<span class="pill">Management automation</span>
|
| 547 |
+
<p>A community project for programmatically managing Dify resources. Useful as another reference for automation around apps, knowledge and related workspace operations.</p>
|
| 548 |
+
<p><strong>Why we care:</strong> it reinforces that Dify can be controlled beyond the public run API—but compatibility must be managed carefully.</p>
|
| 549 |
+
</div>
|
| 550 |
+
|
| 551 |
+
<div class="card">
|
| 552 |
+
<div class="icon">🔄</div>
|
| 553 |
+
<h3>coze2dify</h3>
|
| 554 |
+
<span class="pill">Graph translation example</span>
|
| 555 |
+
<p>Converts Coze workflows into Dify DSL/graphs. It has a frontend, backend, graph components and a conversion layer.</p>
|
| 556 |
+
<p><strong>Why we care:</strong> it demonstrates the exact idea of translating a foreign workflow representation into a Dify-compatible graph.</p>
|
| 557 |
+
</div>
|
| 558 |
+
</div>
|
| 559 |
+
|
| 560 |
+
<div class="callout">
|
| 561 |
+
<strong>Important distinction:</strong> these are not “our finished frontend.” They are <strong>reference implementations and building blocks</strong>.
|
| 562 |
+
We can learn from their API handling, graph translation, schema mapping and test strategies instead of reverse-engineering every Dify capability ourselves.
|
| 563 |
+
</div>
|
| 564 |
+
|
| 565 |
+
<div class="diagram">
|
| 566 |
+
<svg viewBox="0 0 1100 520">
|
| 567 |
+
<defs><marker id="arr6" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#617495"/></marker></defs>
|
| 568 |
+
<text x="550" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">HOW WE USE OPEN-SOURCE REFERENCES</text>
|
| 569 |
+
|
| 570 |
+
<rect x="60" y="100" width="230" height="90" rx="18" fill="#eef4ff" stroke="#b2c6ff"/>
|
| 571 |
+
<text x="175" y="135" text-anchor="middle" font-size="17" font-weight="900" fill="#315bd8">dify-mcp</text>
|
| 572 |
+
<text x="175" y="160" text-anchor="middle" font-size="13" fill="#526789">Console API knowledge</text>
|
| 573 |
+
|
| 574 |
+
<rect x="60" y="220" width="230" height="90" rx="18" fill="#eefbf5" stroke="#abe1c7"/>
|
| 575 |
+
<text x="175" y="255" text-anchor="middle" font-size="17" font-weight="900" fill="#16845a">PSDify</text>
|
| 576 |
+
<text x="175" y="280" text-anchor="middle" font-size="13" fill="#526789">Management patterns</text>
|
| 577 |
+
|
| 578 |
+
<rect x="60" y="340" width="230" height="90" rx="18" fill="#fff5e8" stroke="#ffd09b"/>
|
| 579 |
+
<text x="175" y="375" text-anchor="middle" font-size="17" font-weight="900" fill="#b56c12">coze2dify</text>
|
| 580 |
+
<text x="175" y="400" text-anchor="middle" font-size="13" fill="#526789">Graph conversion ideas</text>
|
| 581 |
+
|
| 582 |
+
<rect x="430" y="165" width="260" height="200" rx="24" fill="#17213b"/>
|
| 583 |
+
<text x="560" y="213" text-anchor="middle" font-size="21" font-weight="900" fill="#fff">OUR ADAPTER</text>
|
| 584 |
+
<text x="560" y="250" text-anchor="middle" font-size="13" fill="#d3dff5">Our schemas</text>
|
| 585 |
+
<text x="560" y="278" text-anchor="middle" font-size="13" fill="#d3dff5">Auth / sessions</text>
|
| 586 |
+
<text x="560" y="306" text-anchor="middle" font-size="13" fill="#d3dff5">Compatibility</text>
|
| 587 |
+
<text x="560" y="334" text-anchor="middle" font-size="13" fill="#ffd166">Tests + version gates</text>
|
| 588 |
+
|
| 589 |
+
<rect x="830" y="185" width="210" height="160" rx="24" fill="#f3edff" stroke="#c5b2ff"/>
|
| 590 |
+
<text x="935" y="230" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY</text>
|
| 591 |
+
<text x="935" y="263" text-anchor="middle" font-size="13" fill="#635476">workflow engine</text>
|
| 592 |
+
<text x="935" y="289" text-anchor="middle" font-size="13" fill="#635476">agents • RAG • tools</text>
|
| 593 |
+
<text x="935" y="315" text-anchor="middle" font-size="13" fill="#635476">runtime + persistence</text>
|
| 594 |
+
|
| 595 |
+
<g stroke="#617495" stroke-width="4" marker-end="url(#arr6)">
|
| 596 |
+
<line x1="290" y1="145" x2="425" y2="215"/>
|
| 597 |
+
<line x1="290" y1="265" x2="425" y2="265"/>
|
| 598 |
+
<line x1="290" y1="385" x2="425" y2="315"/>
|
| 599 |
+
<line x1="690" y1="265" x2="825" y2="265"/>
|
| 600 |
+
</g>
|
| 601 |
+
</svg>
|
| 602 |
+
</div>
|
| 603 |
+
</div>
|
| 604 |
+
</section>
|
| 605 |
+
|
| 606 |
+
<section id="license">
|
| 607 |
+
<div class="container">
|
| 608 |
+
<div class="kicker">Chapter 7</div>
|
| 609 |
+
<h2>Licensing and design guardrails</h2>
|
| 610 |
+
<p class="section-intro">
|
| 611 |
+
These are product-engineering guardrails, not legal advice. Before commercial launch, we should obtain written confirmation from Dify for our exact deployment model.
|
| 612 |
+
</p>
|
| 613 |
+
|
| 614 |
+
<div class="grid3">
|
| 615 |
+
<div class="card good">
|
| 616 |
+
<div class="icon">✅</div><h3>Current license explicitly allows</h3>
|
| 617 |
+
<p>Commercial use including using Dify as a <strong>backend service for other applications</strong> or as an application-development platform.</p>
|
| 618 |
+
</div>
|
| 619 |
+
<div class="card warn">
|
| 620 |
+
<div class="icon">⚠️</div><h3>Multi-tenant restriction</h3>
|
| 621 |
+
<p>The current license says operating a multi-tenant environment using Dify source requires written authorization; a tenant is defined as a workspace.</p>
|
| 622 |
+
</div>
|
| 623 |
+
<div class="card warn">
|
| 624 |
+
<div class="icon">🎨</div><h3>Frontend / appearance</h3>
|
| 625 |
+
<p>Dify’s frontend logo/copyright rules apply when using its frontend. The license also says the product’s interactive design is protected by an appearance patent.</p>
|
| 626 |
+
</div>
|
| 627 |
+
</div>
|
| 628 |
+
|
| 629 |
+
<div class="grid2" style="margin-top:18px">
|
| 630 |
+
<div class="card good">
|
| 631 |
+
<h3>✅ Our design goal</h3>
|
| 632 |
+
<ul class="checklist">
|
| 633 |
+
<li>Same category of capabilities</li>
|
| 634 |
+
<li>Our own navigation and information architecture</li>
|
| 635 |
+
<li>Our own visual node components</li>
|
| 636 |
+
<li>Our own onboarding and terminology</li>
|
| 637 |
+
<li>Our own workflow UX conventions</li>
|
| 638 |
+
<li>Dedicated Dify deployment per customer</li>
|
| 639 |
+
</ul>
|
| 640 |
+
</div>
|
| 641 |
+
<div class="card bad">
|
| 642 |
+
<h3>❌ Do not aim for</h3>
|
| 643 |
+
<ul class="checklist xlist">
|
| 644 |
+
<li>Pixel-for-pixel copy of Dify</li>
|
| 645 |
+
<li>Cloning every interaction exactly</li>
|
| 646 |
+
<li>Taking Dify frontend and simply hiding branding</li>
|
| 647 |
+
<li>One shared Dify with a workspace for every customer without authorization</li>
|
| 648 |
+
<li>UI code tightly coupled to undocumented Dify endpoints everywhere</li>
|
| 649 |
+
</ul>
|
| 650 |
+
</div>
|
| 651 |
+
</div>
|
| 652 |
+
</div>
|
| 653 |
+
</section>
|
| 654 |
+
|
| 655 |
+
<section id="roadmap">
|
| 656 |
+
<div class="container">
|
| 657 |
+
<div class="kicker">Chapter 8</div>
|
| 658 |
+
<h2>Recommended build roadmap</h2>
|
| 659 |
+
<p class="section-intro">Do not rebuild every Dify screen on day one. Prove the adapter and the visual builder first.</p>
|
| 660 |
+
|
| 661 |
+
<div class="timeline">
|
| 662 |
+
<div class="step">
|
| 663 |
+
<div class="num">1</div>
|
| 664 |
+
<div class="card" style="flex:1"><h3>Freeze one Dify version</h3><p>Pick a known Dify version for development. Do not chase every upstream release while the product architecture is still changing.</p></div>
|
| 665 |
+
</div>
|
| 666 |
+
<div class="step">
|
| 667 |
+
<div class="num">2</div>
|
| 668 |
+
<div class="card" style="flex:1"><h3>Build the Dify adapter first</h3><p>Implement app list/create, workflow draft read/write, validate, run and publish. This proves that our frontend can control Dify without depending on its frontend.</p></div>
|
| 669 |
+
</div>
|
| 670 |
+
<div class="step">
|
| 671 |
+
<div class="num">3</div>
|
| 672 |
+
<div class="card" style="flex:1"><h3>Build the simplest visual canvas</h3><p>Start with a tiny node set: Start, LLM/Agent, Knowledge, HTTP Tool, Condition, Human Approval and Output.</p></div>
|
| 673 |
+
</div>
|
| 674 |
+
<div class="step">
|
| 675 |
+
<div class="num">4</div>
|
| 676 |
+
<div class="card" style="flex:1"><h3>Add knowledge + model configuration</h3><p>Create our own screens for datasets, uploaded documents, model providers and credentials.</p></div>
|
| 677 |
+
</div>
|
| 678 |
+
<div class="step">
|
| 679 |
+
<div class="num">5</div>
|
| 680 |
+
<div class="card" style="flex:1"><h3>Add run history and debugging</h3><p>Translate Dify traces into a clean visual execution timeline so business users can understand why a workflow failed.</p></div>
|
| 681 |
+
</div>
|
| 682 |
+
<div class="step">
|
| 683 |
+
<div class="num">6</div>
|
| 684 |
+
<div class="card" style="flex:1"><h3>Build customer deployment automation</h3><p>One command or installer should provision the customer’s frontend, adapter, Dify, database, cache, storage and secrets.</p></div>
|
| 685 |
+
</div>
|
| 686 |
+
</div>
|
| 687 |
+
</div>
|
| 688 |
+
</section>
|
| 689 |
+
|
| 690 |
+
<section id="mvp">
|
| 691 |
+
<div class="container">
|
| 692 |
+
<div class="kicker">Chapter 9</div>
|
| 693 |
+
<h2>What should our first MVP actually contain?</h2>
|
| 694 |
+
<p class="section-intro">The first MVP should prove that a non-technical user can build and run a useful workflow without ever seeing Dify.</p>
|
| 695 |
+
|
| 696 |
+
<div class="grid4">
|
| 697 |
+
<div class="card"><div class="icon">🏠</div><h3>Dashboard</h3><p>Agents, workflows, recent runs, templates.</p></div>
|
| 698 |
+
<div class="card"><div class="icon">🧩</div><h3>Workflow Builder</h3><p>Drag, connect, configure, test and publish.</p></div>
|
| 699 |
+
<div class="card"><div class="icon">🤖</div><h3>Agent Setup</h3><p>Instructions, model, tools, knowledge and variables.</p></div>
|
| 700 |
+
<div class="card"><div class="icon">📚</div><h3>Knowledge</h3><p>Upload documents, see indexing status, test retrieval.</p></div>
|
| 701 |
+
<div class="card"><div class="icon">🔌</div><h3>Connections</h3><p>Model providers, APIs, credentials and MCP/tool endpoints.</p></div>
|
| 702 |
+
<div class="card"><div class="icon">🧪</div><h3>Test Run</h3><p>Run workflow from the builder with sample input.</p></div>
|
| 703 |
+
<div class="card"><div class="icon">🔎</div><h3>Run Inspector</h3><p>See every node, timing, output and error in simple language.</p></div>
|
| 704 |
+
<div class="card"><div class="icon">🚀</div><h3>Publish</h3><p>Activate a workflow/app after validation.</p></div>
|
| 705 |
+
</div>
|
| 706 |
+
|
| 707 |
+
<div class="callout green">
|
| 708 |
+
<strong>MVP success test:</strong> take a teammate who has never used Dify. Ask them to create:
|
| 709 |
+
<em>“When a support request arrives, classify it, search our documents, draft a reply, ask for approval and send it.”</em>
|
| 710 |
+
If they can build and understand it inside our UI, our product concept is working.
|
| 711 |
+
</div>
|
| 712 |
+
|
| 713 |
+
<div class="diagram">
|
| 714 |
+
<svg viewBox="0 0 1130 560">
|
| 715 |
+
<defs><marker id="arr7" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"><path d="M0 0 L0 6 L9 3z" fill="#566b91"/></marker></defs>
|
| 716 |
+
<text x="565" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">MVP WORKFLOW EXPERIENCE</text>
|
| 717 |
+
|
| 718 |
+
<rect x="70" y="80" width="990" height="375" rx="30" fill="#f8fbff" stroke="#dbe5f3"/>
|
| 719 |
+
<rect x="95" y="105" width="180" height="325" rx="20" fill="#17213b"/>
|
| 720 |
+
<text x="185" y="142" text-anchor="middle" font-size="17" font-weight="900" fill="#fff">NODE LIBRARY</text>
|
| 721 |
+
<g fill="#fff" font-size="13" font-weight="800">
|
| 722 |
+
<rect x="117" y="170" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="196" text-anchor="middle">⚡ Trigger</text>
|
| 723 |
+
<rect x="117" y="224" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="250" text-anchor="middle">🤖 AI Agent</text>
|
| 724 |
+
<rect x="117" y="278" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="304" text-anchor="middle">📚 Knowledge</text>
|
| 725 |
+
<rect x="117" y="332" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="358" text-anchor="middle">🔀 Condition</text>
|
| 726 |
+
</g>
|
| 727 |
+
|
| 728 |
+
<rect x="300" y="105" width="735" height="325" rx="20" fill="#fff" stroke="#dce5f0"/>
|
| 729 |
+
<text x="325" y="140" font-size="14" font-weight="900" fill="#50627f">WORKFLOW CANVAS</text>
|
| 730 |
+
|
| 731 |
+
<g font-size="12" text-anchor="middle" font-weight="900">
|
| 732 |
+
<rect x="350" y="200" width="130" height="60" rx="15" fill="#eaf2ff" stroke="#a7bfff"/><text x="415" y="235" fill="#315bd8">SUPPORT EMAIL</text>
|
| 733 |
+
<rect x="535" y="200" width="130" height="60" rx="15" fill="#f1ebff" stroke="#bdaaff"/><text x="600" y="235" fill="#6845d6">AI CLASSIFY</text>
|
| 734 |
+
<rect x="720" y="145" width="140" height="60" rx="15" fill="#eaf9f1" stroke="#a0dfc2"/><text x="790" y="180" fill="#16845a">KNOWLEDGE</text>
|
| 735 |
+
<rect x="720" y="270" width="140" height="60" rx="15" fill="#fff5e5" stroke="#ffd092"/><text x="790" y="305" fill="#b56c12">APPROVAL</text>
|
| 736 |
+
<rect x="910" y="200" width="95" height="60" rx="15" fill="#eaf2ff" stroke="#a7bfff"/><text x="957" y="235" fill="#315bd8">SEND</text>
|
| 737 |
+
</g>
|
| 738 |
+
|
| 739 |
+
<g stroke="#566b91" stroke-width="4" fill="none" marker-end="url(#arr7)">
|
| 740 |
+
<line x1="480" y1="230" x2="530" y2="230"/>
|
| 741 |
+
<path d="M665 230 C690 230 690 175 715 175"/>
|
| 742 |
+
<path d="M665 230 C690 230 690 300 715 300"/>
|
| 743 |
+
<path d="M860 175 C885 175 880 220 905 225"/>
|
| 744 |
+
<path d="M860 300 C890 300 880 245 905 238"/>
|
| 745 |
+
</g>
|
| 746 |
+
<rect x="772" y="470" width="263" height="55" rx="15" fill="#17213b"/>
|
| 747 |
+
<text x="903" y="504" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">▶ TEST WORKFLOW</text>
|
| 748 |
+
</svg>
|
| 749 |
+
</div>
|
| 750 |
+
</div>
|
| 751 |
+
</section>
|
| 752 |
+
|
| 753 |
+
<section>
|
| 754 |
+
<div class="container">
|
| 755 |
+
<div class="kicker">Chapter 10</div>
|
| 756 |
+
<h2>Technical structure we should aim for</h2>
|
| 757 |
+
<p class="section-intro">A simple separation of responsibilities will keep the product maintainable.</p>
|
| 758 |
+
|
| 759 |
+
<table class="compare">
|
| 760 |
+
<thead><tr><th>Layer</th><th>Suggested responsibility</th><th>Possible technology</th></tr></thead>
|
| 761 |
+
<tbody>
|
| 762 |
+
<tr><td><strong>Web UI</strong></td><td>Dashboard, agent builder, workflow canvas, knowledge, settings</td><td>React / Next.js</td></tr>
|
| 763 |
+
<tr><td><strong>Canvas</strong></td><td>Nodes, edges, zoom, selection, graph editing</td><td>React Flow / XYFlow</td></tr>
|
| 764 |
+
<tr><td><strong>Our API</strong></td><td>Auth, validation, stable product endpoints</td><td>FastAPI / Node</td></tr>
|
| 765 |
+
<tr><td><strong>Dify Adapter</strong></td><td>Translate our objects into Dify objects; handle Dify upgrades</td><td>Dedicated service/module</td></tr>
|
| 766 |
+
<tr><td><strong>Dify</strong></td><td>Workflow/agent/RAG/tool execution</td><td>Self-hosted Dify</td></tr>
|
| 767 |
+
<tr><td><strong>Customer data</strong></td><td>Runtime DB, cache, files, vector storage</td><td>Dedicated per deployment</td></tr>
|
| 768 |
+
<tr><td><strong>External systems</strong></td><td>LLMs, APIs, email, CRM, ERP, MCP, databases</td><td>Provider/plugin/tool integrations</td></tr>
|
| 769 |
+
</tbody>
|
| 770 |
+
</table>
|
| 771 |
+
</div>
|
| 772 |
+
</section>
|
| 773 |
+
|
| 774 |
+
<section>
|
| 775 |
+
<div class="container">
|
| 776 |
+
<div class="kicker">Chapter 11</div>
|
| 777 |
+
<h2>Three risks the team must design for</h2>
|
| 778 |
+
|
| 779 |
+
<div class="grid3">
|
| 780 |
+
<div class="card warn">
|
| 781 |
+
<div class="icon">🔁</div>
|
| 782 |
+
<h3>1. Dify API changes</h3>
|
| 783 |
+
<p>Some Studio-management behavior relies on console/internal surfaces, not only the stable public runtime API.</p>
|
| 784 |
+
<p><strong>Mitigation:</strong> adapter layer + pin Dify versions + compatibility tests before upgrades.</p>
|
| 785 |
+
</div>
|
| 786 |
+
<div class="card warn">
|
| 787 |
+
<div class="icon">🧱</div>
|
| 788 |
+
<h3>2. Trying to build too much UI</h3>
|
| 789 |
+
<p>Copying every Dify screen immediately will waste time and make the product complicated.</p>
|
| 790 |
+
<p><strong>Mitigation:</strong> start with the 20% of features that unlock 80% of customer workflows.</p>
|
| 791 |
+
</div>
|
| 792 |
+
<div class="card warn">
|
| 793 |
+
<div class="icon">⚖️</div>
|
| 794 |
+
<h3>3. License / design assumptions</h3>
|
| 795 |
+
<p>Licensing terms and upstream behavior can change.</p>
|
| 796 |
+
<p><strong>Mitigation:</strong> dedicated deployments, original UI, written confirmation from Dify before commercial scale.</p>
|
| 797 |
+
</div>
|
| 798 |
+
</div>
|
| 799 |
+
</div>
|
| 800 |
+
</section>
|
| 801 |
+
|
| 802 |
+
<section>
|
| 803 |
+
<div class="container">
|
| 804 |
+
<div class="kicker">Final page</div>
|
| 805 |
+
<h2>The mental model to leave with</h2>
|
| 806 |
+
|
| 807 |
+
<div class="big-idea">
|
| 808 |
+
<div class="quote" style="color:white;font-size:clamp(1.45rem,3vw,2.4rem)">
|
| 809 |
+
“Our customer should feel like they are using <span style="color:#ffd166">our platform</span>.
|
| 810 |
+
Our engineers should feel like they are using <span style="color:#9be5ff">Dify as an engine</span>.”
|
| 811 |
+
</div>
|
| 812 |
+
</div>
|
| 813 |
+
|
| 814 |
+
<div class="grid3" style="margin-top:20px">
|
| 815 |
+
<div class="card good"><div class="icon">1️⃣</div><h3>Own the UX</h3><p>We differentiate through simplicity, workflow templates, enterprise integrations, deployment and user experience.</p></div>
|
| 816 |
+
<div class="card good"><div class="icon">2️⃣</div><h3>Reuse the engine</h3><p>Dify saves us from rebuilding workflow execution, model orchestration, RAG and tool execution from scratch.</p></div>
|
| 817 |
+
<div class="card good"><div class="icon">3️⃣</div><h3>Protect the boundary</h3><p>A clean adapter between our product and Dify lets us upgrade or even replace the underlying engine later.</p></div>
|
| 818 |
+
</div>
|
| 819 |
+
|
| 820 |
+
<div class="callout green" style="margin-top:24px">
|
| 821 |
+
<strong>The strategic advantage:</strong> if we design the adapter well, our product is not permanently trapped inside Dify.
|
| 822 |
+
Our frontend speaks <em>our own workflow model</em>. Today the adapter compiles it to Dify. In the future, another adapter could target
|
| 823 |
+
LangGraph, Temporal or another runtime without redesigning the customer experience.
|
| 824 |
+
</div>
|
| 825 |
+
</div>
|
| 826 |
+
</section>
|
| 827 |
+
|
| 828 |
+
<section>
|
| 829 |
+
<div class="container">
|
| 830 |
+
<span class="stamp">Sources checked • October 2026</span>
|
| 831 |
+
<h2 style="font-size:2rem;margin-top:12px">Source notes</h2>
|
| 832 |
+
<p class="section-intro">These links are included so engineering and legal can verify the assumptions directly.</p>
|
| 833 |
+
<div class="source-list">
|
| 834 |
+
<div class="source"><strong>Dify license:</strong> <a href="https://github.com/langgenius/dify/blob/main/LICENSE">github.com/langgenius/dify/blob/main/LICENSE</a><br><small>Commercial backend use, multi-tenant restriction, frontend branding condition, appearance-patent notice.</small></div>
|
| 835 |
+
<div class="source"><strong>dify-mcp:</strong> <a href="https://github.com/alexjiaguo/dify-mcp">github.com/alexjiaguo/dify-mcp</a><br><small>Programmatic Dify console control; current README describes 174 tools across 19 namespaces.</small></div>
|
| 836 |
+
<div class="source"><strong>PSDify:</strong> <a href="https://github.com/kurokobo/psdify">github.com/kurokobo/psdify</a><br><small>Community automation/management project around Dify.</small></div>
|
| 837 |
+
<div class="source"><strong>coze2dify:</strong> <a href="https://github.com/biaoma-ty/coze2dify">github.com/biaoma-ty/coze2dify</a><br><small>Coze → Dify graph/DSL conversion project with frontend/backend and graph-mapping examples.</small></div>
|
| 838 |
+
</div>
|
| 839 |
+
<div class="note" style="margin-top:20px">
|
| 840 |
+
<strong>Not legal advice.</strong> Before selling the product, send Dify a short architecture diagram showing
|
| 841 |
+
“our UI → our adapter → one dedicated Dify deployment per customer” and obtain written confirmation that the intended commercial use is acceptable.
|
| 842 |
+
</div>
|
| 843 |
+
</div>
|
| 844 |
+
</section>
|
| 845 |
+
|
| 846 |
+
</main>
|
| 847 |
+
|
| 848 |
+
<footer class="footer">
|
| 849 |
+
<div class="container">
|
| 850 |
+
<div class="keyline"></div>
|
| 851 |
+
<strong>Internal team explainer:</strong> Dify-powered agentic platform architecture.<br>
|
| 852 |
+
Designed to be read like a visual textbook rather than a software specification.
|
| 853 |
+
</div>
|
| 854 |
+
</footer>
|
| 855 |
+
|
| 856 |
+
</body>
|
| 857 |
+
</html>
|