Spaces:
Running
Running
Download index.html from bardd/platform_explained: direct link, hf CLI and curl.
- Browser
- Download file 54.5 kB
-
https://huggingface.co/spaces/bardd/platform_explained/resolve/main/index.html
- Command line
-
hf download hf://spaces/bardd/platform_explained/index.html
-
curl -L -o index.html https://huggingface.co/spaces/bardd/platform_explained/resolve/main/index.html
54.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Our Dify-Powered Agentic Platform — Team Explainer</title> | |
| <style> | |
| :root{ | |
| --ink:#14213d;--muted:#5d6b82;--paper:#fffdf8;--card:#ffffff; | |
| --blue:#4f7cff;--purple:#7c5cff;--cyan:#18b7d4;--green:#29b473; | |
| --orange:#ff9f43;--red:#ee5d68;--yellow:#ffd166;--pink:#ef6fb5; | |
| --line:#dce5f2;--soft:#f3f7fc;--navy:#15203b; | |
| --shadow:0 12px 30px rgba(26,45,82,.10); | |
| } | |
| *{box-sizing:border-box} | |
| html{scroll-behavior:smooth} | |
| body{ | |
| margin:0;background: | |
| linear-gradient(180deg,#f7fbff 0,#fffdf8 23rem,#fffdf8 100%); | |
| color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; | |
| line-height:1.6; | |
| } | |
| a{color:#315bd8;text-decoration:none} | |
| a:hover{text-decoration:underline} | |
| .container{max-width:1180px;margin:auto;padding:0 22px} | |
| .hero{padding:52px 0 32px;position:relative;overflow:hidden} | |
| .hero:before,.hero:after{content:"";position:absolute;border-radius:999px;filter:blur(0);opacity:.22;z-index:-1} | |
| .hero:before{width:320px;height:320px;background:#6d5cff;right:-80px;top:-90px} | |
| .hero:after{width:240px;height:240px;background:#18b7d4;left:-90px;top:100px} | |
| .badge{ | |
| display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px; | |
| background:#edf3ff;border:1px solid #cfddff;color:#315bd8;font-weight:800;font-size:.84rem; | |
| } | |
| h1{font-size:clamp(2.25rem,5vw,5rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 20px;max-width:1000px} | |
| h1 span{color:var(--purple)} | |
| .lead{font-size:clamp(1.06rem,1.8vw,1.35rem);max-width:900px;color:var(--muted)} | |
| .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;margin-top:35px} | |
| @media(max-width:860px){.hero-grid{grid-template-columns:1fr}} | |
| .paper{ | |
| background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow); | |
| } | |
| .hero-card{padding:18px} | |
| .note{ | |
| padding:16px 18px;border-radius:16px;background:#fff8dc;border:1px solid #ffe29a;color:#684e00; | |
| } | |
| .toc{ | |
| position:sticky;top:0;z-index:30;background:rgba(255,253,248,.94);backdrop-filter:blur(12px); | |
| border-top:1px solid #edf1f7;border-bottom:1px solid #dde4ef; | |
| } | |
| .toc-inner{display:flex;gap:10px;overflow:auto;padding:11px 0;scrollbar-width:none} | |
| .toc a{ | |
| white-space:nowrap;padding:8px 11px;border-radius:10px;color:#40506b;font-weight:800;font-size:.83rem; | |
| background:#fff;border:1px solid #e0e7f1; | |
| } | |
| section{padding:58px 0} | |
| .kicker{text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--purple);font-size:.77rem} | |
| h2{font-size:clamp(1.8rem,3.4vw,3.15rem);letter-spacing:-.04em;line-height:1.05;margin:8px 0 15px} | |
| h3{font-size:1.27rem;margin:0 0 8px} | |
| .section-intro{color:var(--muted);font-size:1.05rem;max-width:900px;margin-bottom:26px} | |
| .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} | |
| .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} | |
| .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} | |
| @media(max-width:900px){.grid4,.grid3{grid-template-columns:repeat(2,1fr)}} | |
| @media(max-width:650px){.grid2,.grid3,.grid4{grid-template-columns:1fr}} | |
| .card{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 7px 22px rgba(24,46,88,.06)} | |
| .icon{ | |
| width:46px;height:46px;border-radius:14px;display:grid;place-items:center; | |
| background:#eef3ff;font-size:1.5rem;margin-bottom:12px;border:1px solid #d7e2ff | |
| } | |
| .pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#f0f4fb;color:#51627b;font-size:.77rem;font-weight:900} | |
| .good{background:#ebfbf3;border-color:#c6efd9} | |
| .warn{background:#fff6e8;border-color:#ffddb2} | |
| .bad{background:#fff0f0;border-color:#fac8cc} | |
| .good .icon{background:#dcf8ea}.warn .icon{background:#ffefd4}.bad .icon{background:#ffe2e4} | |
| .big-idea{padding:26px;background:linear-gradient(120deg,#17223e,#283b72);color:white;border-radius:24px;box-shadow:var(--shadow)} | |
| .big-idea strong{color:#ffd166} | |
| .checklist{display:grid;gap:11px;margin:0;padding:0;list-style:none} | |
| .checklist li{display:flex;gap:10px;align-items:flex-start} | |
| .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} | |
| .xlist li:before{content:"×";background:#ffe1e3;color:#b2323c} | |
| .diagram{padding:18px;background:#fbfdff;border:1px solid #dfe8f5;border-radius:22px;overflow:auto} | |
| .diagram svg{display:block;width:100%;height:auto;min-width:680px} | |
| .caption{color:var(--muted);font-size:.88rem;margin-top:9px} | |
| .callout{border-left:5px solid var(--blue);padding:16px 18px;background:#f4f7ff;border-radius:0 14px 14px 0;margin:22px 0} | |
| .callout.orange{border-left-color:var(--orange);background:#fff7ea} | |
| .callout.green{border-left-color:var(--green);background:#effbf5} | |
| .callout.red{border-left-color:var(--red);background:#fff2f3} | |
| .compare{width:100%;border-collapse:separate;border-spacing:0;background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden} | |
| .compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} | |
| .compare th{background:#f3f6fb;color:#31415d;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em} | |
| .compare tr:last-child td{border-bottom:0} | |
| .num{ | |
| width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#263968;color:white;font-weight:900;flex:0 0 38px | |
| } | |
| .step{display:flex;gap:15px;align-items:flex-start} | |
| .step+.step{margin-top:19px} | |
| .timeline{position:relative;padding-left:12px} | |
| .timeline:before{content:"";position:absolute;left:30px;top:24px;bottom:24px;width:3px;background:#dfe7f5} | |
| .timeline .step{position:relative} | |
| .timeline .num{z-index:2} | |
| .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} | |
| .legend{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0} | |
| .legend span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#52627b;font-weight:800} | |
| .dot{width:10px;height:10px;border-radius:50%;display:inline-block} | |
| .code{ | |
| font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#10182b;color:#eaf1ff;border-radius:15px;padding:16px;overflow:auto;font-size:.86rem | |
| } | |
| .quote{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;color:#293a5b} | |
| .footer{padding:36px 0 70px;color:#62718a;font-size:.9rem} | |
| .source-list{display:grid;gap:10px} | |
| .source{background:white;border:1px solid var(--line);border-radius:12px;padding:12px 14px} | |
| .stamp{ | |
| display:inline-block;background:#eaf8ff;color:#176b82;border:1px solid #c7e8f2;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:900 | |
| } | |
| .keyline{height:1px;background:linear-gradient(90deg,transparent,#d6dfec,transparent);margin:15px 0} | |
| @media print{ | |
| .toc{display:none}.hero{padding-top:20px}section{break-inside:avoid;padding:28px 0} | |
| body{background:white}.paper,.card,.diagram{box-shadow:none} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="hero"> | |
| <div class="container"> | |
| <span class="badge">📘 Team Explainer • Dify-powered product strategy</span> | |
| <h1>We build the <span>experience.</span><br>Dify runs the engine.</h1> | |
| <p class="lead"> | |
| This document explains, in simple visual terms, how we can create our own branded no-code AI agent/workflow platform | |
| while using Dify underneath for workflow execution, agents, RAG, tools, model connections and runtime operations. | |
| </p> | |
| <div class="hero-grid"> | |
| <div class="big-idea"> | |
| <div style="font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;opacity:.75;font-weight:900">The one sentence everyone should remember</div> | |
| <div style="font-size:clamp(1.5rem,3vw,2.55rem);line-height:1.1;font-weight:900;margin-top:10px"> | |
| We are <strong>not rebuilding Dify.</strong><br> | |
| We are building <strong>our own product UI</strong> on top of Dify. | |
| </div> | |
| <div style="margin-top:18px;color:#dce7ff"> | |
| Think of Dify as the engine, gearbox and electronics inside a car. Our product is the dashboard, controls, | |
| body design and customer experience. | |
| </div> | |
| </div> | |
| <div class="paper hero-card"> | |
| <svg viewBox="0 0 620 430" role="img" aria-label="Car analogy diagram"> | |
| <defs> | |
| <linearGradient id="gCar" x1="0" x2="1"> | |
| <stop offset="0" stop-color="#4f7cff"/><stop offset="1" stop-color="#7c5cff"/> | |
| </linearGradient> | |
| </defs> | |
| <rect x="25" y="35" width="570" height="350" rx="30" fill="#f6f9ff" stroke="#dbe6f7"/> | |
| <text x="310" y="76" text-anchor="middle" font-size="26" font-weight="900" fill="#1e2e52">🚙 PRODUCT ANALOGY</text> | |
| <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)"/> | |
| <circle cx="170" cy="320" r="43" fill="#17213b"/><circle cx="170" cy="320" r="19" fill="#dce5f5"/> | |
| <circle cx="455" cy="320" r="43" fill="#17213b"/><circle cx="455" cy="320" r="19" fill="#dce5f5"/> | |
| <rect x="210" y="190" width="190" height="65" rx="12" fill="#17213b"/> | |
| <text x="305" y="218" text-anchor="middle" font-size="18" font-weight="900" fill="#fff">OUR UI</text> | |
| <text x="305" y="240" text-anchor="middle" font-size="13" fill="#cfe0ff">what the customer sees</text> | |
| <rect x="260" y="270" width="100" height="42" rx="10" fill="#ffd166"/> | |
| <text x="310" y="296" text-anchor="middle" font-size="16" font-weight="900" fill="#493800">DIFY</text> | |
| <path d="M310 255 V270" stroke="#fff" stroke-width="4"/> | |
| <text x="310" y="370" text-anchor="middle" font-size="14" fill="#5d6b82">Same engine. Our own vehicle.</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="note" style="margin-top:22px"> | |
| <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. | |
| The current Dify license specifically protects its frontend branding and notes that the product’s interactive design is protected by an appearance patent. | |
| </div> | |
| </div> | |
| </header> | |
| <nav class="toc"> | |
| <div class="container toc-inner"> | |
| <a href="#idea">1. The Idea</a> | |
| <a href="#layers">2. What We Build</a> | |
| <a href="#journey">3. What Happens on Click</a> | |
| <a href="#api">4. API Adapter</a> | |
| <a href="#deployment">5. Customer Deployment</a> | |
| <a href="#opensource">6. Existing Open Source</a> | |
| <a href="#license">7. Guardrails</a> | |
| <a href="#roadmap">8. Roadmap</a> | |
| <a href="#mvp">9. MVP</a> | |
| </div> | |
| </nav> | |
| <main> | |
| <section id="idea"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 1</div> | |
| <h2>The idea in plain English</h2> | |
| <p class="section-intro"> | |
| A customer should feel like they are using <strong>our AI automation platform</strong>. They create agents, drag workflow nodes, | |
| connect company systems, add knowledge and run automations. Underneath, Dify does the heavy execution work. | |
| </p> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1100 450"> | |
| <defs> | |
| <marker id="arr1" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"> | |
| <path d="M0,0 L0,6 L9,3 z" fill="#52698f"/> | |
| </marker> | |
| </defs> | |
| <rect x="30" y="32" width="1040" height="380" rx="28" fill="#f8fbff" stroke="#dce7f6"/> | |
| <text x="550" y="73" text-anchor="middle" font-size="24" font-weight="900" fill="#17213b">THE PRODUCT STACK</text> | |
| <rect x="70" y="120" width="245" height="220" rx="22" fill="#eef3ff" stroke="#afc4ff" stroke-width="2"/> | |
| <text x="192" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#315bd8">OUR PRODUCT</text> | |
| <text x="192" y="190" text-anchor="middle" font-size="15" fill="#465c7f">Dashboard</text> | |
| <text x="192" y="218" text-anchor="middle" font-size="15" fill="#465c7f">Visual Builder</text> | |
| <text x="192" y="246" text-anchor="middle" font-size="15" fill="#465c7f">Agent Setup</text> | |
| <text x="192" y="274" text-anchor="middle" font-size="15" fill="#465c7f">Knowledge UI</text> | |
| <text x="192" y="302" text-anchor="middle" font-size="15" fill="#465c7f">Connections + Logs</text> | |
| <rect x="425" y="120" width="250" height="220" rx="22" fill="#f4efff" stroke="#c8b6ff" stroke-width="2"/> | |
| <text x="550" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY ENGINE</text> | |
| <text x="550" y="190" text-anchor="middle" font-size="15" fill="#5b4c76">Workflow runtime</text> | |
| <text x="550" y="218" text-anchor="middle" font-size="15" fill="#5b4c76">Agent execution</text> | |
| <text x="550" y="246" text-anchor="middle" font-size="15" fill="#5b4c76">RAG / datasets</text> | |
| <text x="550" y="274" text-anchor="middle" font-size="15" fill="#5b4c76">Tools / plugins</text> | |
| <text x="550" y="302" text-anchor="middle" font-size="15" fill="#5b4c76">Runs / tracing</text> | |
| <rect x="785" y="120" width="245" height="220" rx="22" fill="#ecfbf4" stroke="#a8e4c7" stroke-width="2"/> | |
| <text x="907" y="158" text-anchor="middle" font-size="22" font-weight="900" fill="#16845a">OUTSIDE WORLD</text> | |
| <text x="907" y="190" text-anchor="middle" font-size="15" fill="#426b5a">OpenAI / Claude</text> | |
| <text x="907" y="218" text-anchor="middle" font-size="15" fill="#426b5a">Gemini / private LLM</text> | |
| <text x="907" y="246" text-anchor="middle" font-size="15" fill="#426b5a">CRM / ERP</text> | |
| <text x="907" y="274" text-anchor="middle" font-size="15" fill="#426b5a">Email / SharePoint</text> | |
| <text x="907" y="302" text-anchor="middle" font-size="15" fill="#426b5a">Databases / APIs</text> | |
| <line x1="315" y1="230" x2="420" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/> | |
| <line x1="675" y1="230" x2="780" y2="230" stroke="#52698f" stroke-width="4" marker-end="url(#arr1)"/> | |
| <text x="367" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">OUR ADAPTER</text> | |
| <text x="727" y="210" text-anchor="middle" font-size="13" font-weight="800" fill="#52698f">CONNECTORS</text> | |
| </svg> | |
| </div> | |
| <div class="grid3" style="margin-top:18px"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="layers"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 2</div> | |
| <h2>What exactly are we building?</h2> | |
| <p class="section-intro">The simplest way to divide the work is: <strong>customer-facing product layer</strong> vs <strong>execution layer</strong>.</p> | |
| <div class="grid2"> | |
| <div class="card good"> | |
| <div class="icon">👩🎨</div> | |
| <h3>WE BUILD THIS</h3> | |
| <ul class="checklist"> | |
| <li>Our login, branding and navigation</li> | |
| <li>Agent creation screens</li> | |
| <li>Visual drag-and-drop workflow editor</li> | |
| <li>Knowledge-base management screens</li> | |
| <li>Connections / credentials UI</li> | |
| <li>Templates and starter workflows</li> | |
| <li>Human-friendly run history and error screens</li> | |
| <li>Role/permission rules appropriate for our customers</li> | |
| <li>Deployment/updater tooling for each customer</li> | |
| </ul> | |
| </div> | |
| <div class="card warn"> | |
| <div class="icon">🧠</div> | |
| <h3>DIFY ALREADY DOES THIS</h3> | |
| <ul class="checklist"> | |
| <li>Execute workflow graphs</li> | |
| <li>Run LLM and agent nodes</li> | |
| <li>Manage model-provider connections</li> | |
| <li>Run RAG / knowledge retrieval</li> | |
| <li>Execute tools and plugins</li> | |
| <li>Handle node variables and outputs</li> | |
| <li>Track workflow runs and traces</li> | |
| <li>Publish and execute applications</li> | |
| <li>Maintain internal workflow definitions</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="callout green"> | |
| <strong>Why this matters:</strong> a normal “build our own agent platform” project can turn into years of engine work. | |
| With this architecture, our main engineering challenge becomes a much more manageable product problem: | |
| <strong>build a clean frontend + stable adapter to Dify.</strong> | |
| </div> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1100 510"> | |
| <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> | |
| <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> | |
| <rect x="40" y="75" width="1020" height="150" rx="25" fill="#edf4ff" stroke="#b9ccff"/> | |
| <text x="70" y="110" font-size="17" font-weight="900" fill="#315bd8">VISIBLE: OUR PRODUCT</text> | |
| <g font-size="14" font-weight="800" fill="#354968"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </g> | |
| <line x1="550" y1="225" x2="550" y2="275" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/> | |
| <rect x="420" y="255" width="260" height="50" rx="14" fill="#17213b"/> | |
| <text x="550" y="286" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">OUR DIFY ADAPTER API</text> | |
| <line x1="550" y1="305" x2="550" y2="350" stroke="#65799d" stroke-width="4" marker-end="url(#arr2)"/> | |
| <rect x="40" y="345" width="1020" height="130" rx="25" fill="#f5efff" stroke="#ccbaff"/> | |
| <text x="70" y="380" font-size="17" font-weight="900" fill="#6845d6">HIDDEN: DIFY RUNTIME</text> | |
| <g font-size="14" font-weight="800" fill="#4a3d64"> | |
| <rect x="85" y="398" width="160" height="48" rx="12" fill="#fff"/><text x="165" y="428" text-anchor="middle">Workflow Engine</text> | |
| <rect x="270" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="345" y="428" text-anchor="middle">Agent Runtime</text> | |
| <rect x="445" y="398" width="130" height="48" rx="12" fill="#fff"/><text x="510" y="428" text-anchor="middle">RAG</text> | |
| <rect x="600" y="398" width="150" height="48" rx="12" fill="#fff"/><text x="675" y="428" text-anchor="middle">Tools / Plugins</text> | |
| <rect x="775" y="398" width="180" height="48" rx="12" fill="#fff"/><text x="865" y="428" text-anchor="middle">Runs / Versions</text> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="journey"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 3</div> | |
| <h2>What happens when a user drags a node?</h2> | |
| <p class="section-intro">This is the most important engineering flow for the team to understand.</p> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1160 520"> | |
| <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> | |
| <text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">EXAMPLE: USER CREATES “EMAIL → AI → APPROVAL → SEND”</text> | |
| <g font-size="14" font-weight="900" text-anchor="middle"> | |
| <rect x="42" y="90" width="185" height="80" rx="18" fill="#eaf2ff" stroke="#a9c0ff" stroke-width="2"/> | |
| <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> | |
| <rect x="285" y="90" width="190" height="80" rx="18" fill="#edf9ff" stroke="#a4dfec" stroke-width="2"/> | |
| <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> | |
| <rect x="535" y="90" width="190" height="80" rx="18" fill="#f4efff" stroke="#c5b3ff" stroke-width="2"/> | |
| <text x="630" y="122" fill="#6845d6">3. ADAPTER</text><text x="630" y="146" fill="#5b4d79" font-weight="700">translates graph</text> | |
| <rect x="785" y="90" width="155" height="80" rx="18" fill="#fff5e8" stroke="#ffd19a" stroke-width="2"/> | |
| <text x="862" y="122" fill="#b56c12">4. DIFY</text><text x="862" y="146" fill="#7a654a" font-weight="700">stores draft</text> | |
| <rect x="995" y="90" width="125" height="80" rx="18" fill="#edfbf4" stroke="#a8e4c7" stroke-width="2"/> | |
| <text x="1057" y="122" fill="#16845a">5. RUN</text><text x="1057" y="146" fill="#4a6e5e" font-weight="700">executes</text> | |
| </g> | |
| <g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)"> | |
| <line x1="227" y1="130" x2="280" y2="130"/><line x1="475" y1="130" x2="530" y2="130"/> | |
| <line x1="725" y1="130" x2="780" y2="130"/><line x1="940" y1="130" x2="990" y2="130"/> | |
| </g> | |
| <rect x="90" y="230" width="980" height="220" rx="24" fill="#fff" stroke="#dbe4f0"/> | |
| <text x="580" y="270" text-anchor="middle" font-size="18" font-weight="900" fill="#233557">THE ACTUAL WORKFLOW THE USER SEES</text> | |
| <g text-anchor="middle" font-size="14" font-weight="900"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </g> | |
| <g stroke="#5c6f91" stroke-width="4" marker-end="url(#arr3)"> | |
| <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"/> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="grid4" style="margin-top:18px"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="api"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 4</div> | |
| <h2>The adapter is our safety wall</h2> | |
| <p class="section-intro"> | |
| Dify’s normal public Service API is designed mainly for <em>running</em> apps. To reproduce Studio-like management functionality, | |
| 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. | |
| </p> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1100 500"> | |
| <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> | |
| <rect x="65" y="60" width="220" height="340" rx="22" fill="#eef4ff" stroke="#afc4ff"/> | |
| <text x="175" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">OUR FRONTEND</text> | |
| <text x="175" y="145" text-anchor="middle" font-size="14" fill="#4d6388">Create app</text> | |
| <text x="175" y="177" text-anchor="middle" font-size="14" fill="#4d6388">Edit graph</text> | |
| <text x="175" y="209" text-anchor="middle" font-size="14" fill="#4d6388">Knowledge</text> | |
| <text x="175" y="241" text-anchor="middle" font-size="14" fill="#4d6388">Models</text> | |
| <text x="175" y="273" text-anchor="middle" font-size="14" fill="#4d6388">Plugins</text> | |
| <text x="175" y="305" text-anchor="middle" font-size="14" fill="#4d6388">Versions</text> | |
| <text x="175" y="337" text-anchor="middle" font-size="14" fill="#4d6388">Runs</text> | |
| <rect x="405" y="100" width="290" height="260" rx="24" fill="#17213b"/> | |
| <text x="550" y="143" text-anchor="middle" font-size="22" font-weight="900" fill="#fff">OUR DIFY ADAPTER</text> | |
| <text x="550" y="187" text-anchor="middle" font-size="14" fill="#cbd8f1">Stable API for our frontend</text> | |
| <text x="550" y="220" text-anchor="middle" font-size="14" fill="#cbd8f1">Authentication + session handling</text> | |
| <text x="550" y="253" text-anchor="middle" font-size="14" fill="#cbd8f1">Our schema ↔ Dify schema</text> | |
| <text x="550" y="286" text-anchor="middle" font-size="14" fill="#cbd8f1">Version compatibility layer</text> | |
| <text x="550" y="319" text-anchor="middle" font-size="14" fill="#ffd166" font-weight="900">ONLY THIS LAYER KNOWS DIFY DETAILS</text> | |
| <rect x="815" y="60" width="220" height="340" rx="22" fill="#f4efff" stroke="#c5b3ff"/> | |
| <text x="925" y="98" text-anchor="middle" font-size="20" font-weight="900" fill="#6845d6">DIFY</text> | |
| <text x="925" y="145" text-anchor="middle" font-size="14" fill="#625376">Console endpoints</text> | |
| <text x="925" y="177" text-anchor="middle" font-size="14" fill="#625376">Workflow drafts</text> | |
| <text x="925" y="209" text-anchor="middle" font-size="14" fill="#625376">Datasets / RAG</text> | |
| <text x="925" y="241" text-anchor="middle" font-size="14" fill="#625376">Providers</text> | |
| <text x="925" y="273" text-anchor="middle" font-size="14" fill="#625376">Plugins</text> | |
| <text x="925" y="305" text-anchor="middle" font-size="14" fill="#625376">Publishing</text> | |
| <text x="925" y="337" text-anchor="middle" font-size="14" fill="#625376">Execution</text> | |
| <line x1="285" y1="230" x2="400" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/> | |
| <line x1="695" y1="230" x2="810" y2="230" stroke="#576b90" stroke-width="4" marker-end="url(#arr4)"/> | |
| </svg> | |
| </div> | |
| <div class="callout orange"> | |
| <strong>Why the adapter matters:</strong> internal Dify endpoints may change between releases. | |
| If our UI calls Dify directly everywhere, every Dify upgrade can break dozens of screens. | |
| If everything goes through one adapter, we update one compatibility layer. | |
| </div> | |
| <div class="grid2"> | |
| <div class="card good"> | |
| <div class="icon">🛡️</div><h3>Good architecture</h3> | |
| <div class="code">Our UI | |
| ↓ | |
| /api/workflows | |
| ↓ | |
| DifyAdapter | |
| ↓ | |
| Dify console/runtime endpoints</div> | |
| </div> | |
| <div class="card bad"> | |
| <div class="icon">💥</div><h3>Fragile architecture</h3> | |
| <div class="code">Page A → Dify endpoint X | |
| Page B → Dify endpoint Y | |
| Page C → Dify endpoint Z | |
| Page D → direct DB write | |
| ...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="deployment"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 5</div> | |
| <h2>One dedicated environment per customer</h2> | |
| <p class="section-intro"> | |
| Our intended commercial model is not “one Dify with many customer workspaces.” Instead, each company gets its own isolated deployment. | |
| </p> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1160 560"> | |
| <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> | |
| <text x="580" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">DEDICATED CUSTOMER DEPLOYMENT MODEL</text> | |
| <g> | |
| <rect x="55" y="85" width="310" height="400" rx="24" fill="#eef4ff" stroke="#afc4ff" stroke-width="2"/> | |
| <text x="210" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#315bd8">CUSTOMER A</text> | |
| <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> | |
| <line x1="210" y1="205" x2="210" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/> | |
| <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> | |
| <line x1="210" y1="295" x2="210" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/> | |
| <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> | |
| <text x="210" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text> | |
| <text x="210" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text> | |
| </g> | |
| <g> | |
| <rect x="425" y="85" width="310" height="400" rx="24" fill="#effbf5" stroke="#abe1c7" stroke-width="2"/> | |
| <text x="580" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#16845a">CUSTOMER B</text> | |
| <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> | |
| <line x1="580" y1="205" x2="580" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/> | |
| <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> | |
| <line x1="580" y1="295" x2="580" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/> | |
| <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> | |
| <text x="580" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text> | |
| <text x="580" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text> | |
| </g> | |
| <g> | |
| <rect x="795" y="85" width="310" height="400" rx="24" fill="#fff6e9" stroke="#ffd49f" stroke-width="2"/> | |
| <text x="950" y="122" text-anchor="middle" font-size="20" font-weight="900" fill="#b56c12">CUSTOMER C</text> | |
| <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> | |
| <line x1="950" y1="205" x2="950" y2="235" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/> | |
| <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> | |
| <line x1="950" y1="295" x2="950" y2="325" stroke="#617495" stroke-width="3" marker-end="url(#arr5)"/> | |
| <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> | |
| <text x="950" y="423" text-anchor="middle" font-size="13" fill="#506486">Own DB • Redis • files</text> | |
| <text x="950" y="447" text-anchor="middle" font-size="13" fill="#506486">Own credentials • LLMs</text> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="grid2" style="margin-top:18px"> | |
| <div class="card good"> | |
| <div class="icon">✅</div><h3>Our intended pattern</h3> | |
| <p><strong>One customer = one isolated deployment.</strong> Their workflows, credentials, knowledge and runtime are separated at the infrastructure level.</p> | |
| </div> | |
| <div class="card bad"> | |
| <div class="icon">🚫</div><h3>Pattern to avoid without commercial authorization</h3> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="opensource"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 6</div> | |
| <h2>What has already been built by the open-source community?</h2> | |
| <p class="section-intro"> | |
| We did not find a polished, complete “replacement Dify Studio” that we can simply clone and ship. | |
| But we found projects that solve important pieces of the puzzle—especially programmatic control of Dify. | |
| </p> | |
| <div class="grid3"> | |
| <div class="card"> | |
| <div class="icon">🧰</div> | |
| <h3>dify-mcp</h3> | |
| <span class="pill">Most important reference</span> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="card"> | |
| <div class="icon">🛠️</div> | |
| <h3>PSDify</h3> | |
| <span class="pill">Management automation</span> | |
| <p>A community project for programmatically managing Dify resources. Useful as another reference for automation around apps, knowledge and related workspace operations.</p> | |
| <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> | |
| </div> | |
| <div class="card"> | |
| <div class="icon">🔄</div> | |
| <h3>coze2dify</h3> | |
| <span class="pill">Graph translation example</span> | |
| <p>Converts Coze workflows into Dify DSL/graphs. It has a frontend, backend, graph components and a conversion layer.</p> | |
| <p><strong>Why we care:</strong> it demonstrates the exact idea of translating a foreign workflow representation into a Dify-compatible graph.</p> | |
| </div> | |
| </div> | |
| <div class="callout"> | |
| <strong>Important distinction:</strong> these are not “our finished frontend.” They are <strong>reference implementations and building blocks</strong>. | |
| We can learn from their API handling, graph translation, schema mapping and test strategies instead of reverse-engineering every Dify capability ourselves. | |
| </div> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1100 520"> | |
| <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> | |
| <text x="550" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">HOW WE USE OPEN-SOURCE REFERENCES</text> | |
| <rect x="60" y="100" width="230" height="90" rx="18" fill="#eef4ff" stroke="#b2c6ff"/> | |
| <text x="175" y="135" text-anchor="middle" font-size="17" font-weight="900" fill="#315bd8">dify-mcp</text> | |
| <text x="175" y="160" text-anchor="middle" font-size="13" fill="#526789">Console API knowledge</text> | |
| <rect x="60" y="220" width="230" height="90" rx="18" fill="#eefbf5" stroke="#abe1c7"/> | |
| <text x="175" y="255" text-anchor="middle" font-size="17" font-weight="900" fill="#16845a">PSDify</text> | |
| <text x="175" y="280" text-anchor="middle" font-size="13" fill="#526789">Management patterns</text> | |
| <rect x="60" y="340" width="230" height="90" rx="18" fill="#fff5e8" stroke="#ffd09b"/> | |
| <text x="175" y="375" text-anchor="middle" font-size="17" font-weight="900" fill="#b56c12">coze2dify</text> | |
| <text x="175" y="400" text-anchor="middle" font-size="13" fill="#526789">Graph conversion ideas</text> | |
| <rect x="430" y="165" width="260" height="200" rx="24" fill="#17213b"/> | |
| <text x="560" y="213" text-anchor="middle" font-size="21" font-weight="900" fill="#fff">OUR ADAPTER</text> | |
| <text x="560" y="250" text-anchor="middle" font-size="13" fill="#d3dff5">Our schemas</text> | |
| <text x="560" y="278" text-anchor="middle" font-size="13" fill="#d3dff5">Auth / sessions</text> | |
| <text x="560" y="306" text-anchor="middle" font-size="13" fill="#d3dff5">Compatibility</text> | |
| <text x="560" y="334" text-anchor="middle" font-size="13" fill="#ffd166">Tests + version gates</text> | |
| <rect x="830" y="185" width="210" height="160" rx="24" fill="#f3edff" stroke="#c5b2ff"/> | |
| <text x="935" y="230" text-anchor="middle" font-size="22" font-weight="900" fill="#6845d6">DIFY</text> | |
| <text x="935" y="263" text-anchor="middle" font-size="13" fill="#635476">workflow engine</text> | |
| <text x="935" y="289" text-anchor="middle" font-size="13" fill="#635476">agents • RAG • tools</text> | |
| <text x="935" y="315" text-anchor="middle" font-size="13" fill="#635476">runtime + persistence</text> | |
| <g stroke="#617495" stroke-width="4" marker-end="url(#arr6)"> | |
| <line x1="290" y1="145" x2="425" y2="215"/> | |
| <line x1="290" y1="265" x2="425" y2="265"/> | |
| <line x1="290" y1="385" x2="425" y2="315"/> | |
| <line x1="690" y1="265" x2="825" y2="265"/> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="license"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 7</div> | |
| <h2>Licensing and design guardrails</h2> | |
| <p class="section-intro"> | |
| These are product-engineering guardrails, not legal advice. Before commercial launch, we should obtain written confirmation from Dify for our exact deployment model. | |
| </p> | |
| <div class="grid3"> | |
| <div class="card good"> | |
| <div class="icon">✅</div><h3>Current license explicitly allows</h3> | |
| <p>Commercial use including using Dify as a <strong>backend service for other applications</strong> or as an application-development platform.</p> | |
| </div> | |
| <div class="card warn"> | |
| <div class="icon">⚠️</div><h3>Multi-tenant restriction</h3> | |
| <p>The current license says operating a multi-tenant environment using Dify source requires written authorization; a tenant is defined as a workspace.</p> | |
| </div> | |
| <div class="card warn"> | |
| <div class="icon">🎨</div><h3>Frontend / appearance</h3> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="grid2" style="margin-top:18px"> | |
| <div class="card good"> | |
| <h3>✅ Our design goal</h3> | |
| <ul class="checklist"> | |
| <li>Same category of capabilities</li> | |
| <li>Our own navigation and information architecture</li> | |
| <li>Our own visual node components</li> | |
| <li>Our own onboarding and terminology</li> | |
| <li>Our own workflow UX conventions</li> | |
| <li>Dedicated Dify deployment per customer</li> | |
| </ul> | |
| </div> | |
| <div class="card bad"> | |
| <h3>❌ Do not aim for</h3> | |
| <ul class="checklist xlist"> | |
| <li>Pixel-for-pixel copy of Dify</li> | |
| <li>Cloning every interaction exactly</li> | |
| <li>Taking Dify frontend and simply hiding branding</li> | |
| <li>One shared Dify with a workspace for every customer without authorization</li> | |
| <li>UI code tightly coupled to undocumented Dify endpoints everywhere</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="roadmap"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 8</div> | |
| <h2>Recommended build roadmap</h2> | |
| <p class="section-intro">Do not rebuild every Dify screen on day one. Prove the adapter and the visual builder first.</p> | |
| <div class="timeline"> | |
| <div class="step"> | |
| <div class="num">1</div> | |
| <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> | |
| </div> | |
| <div class="step"> | |
| <div class="num">2</div> | |
| <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> | |
| </div> | |
| <div class="step"> | |
| <div class="num">3</div> | |
| <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> | |
| </div> | |
| <div class="step"> | |
| <div class="num">4</div> | |
| <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> | |
| </div> | |
| <div class="step"> | |
| <div class="num">5</div> | |
| <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> | |
| </div> | |
| <div class="step"> | |
| <div class="num">6</div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="mvp"> | |
| <div class="container"> | |
| <div class="kicker">Chapter 9</div> | |
| <h2>What should our first MVP actually contain?</h2> | |
| <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> | |
| <div class="grid4"> | |
| <div class="card"><div class="icon">🏠</div><h3>Dashboard</h3><p>Agents, workflows, recent runs, templates.</p></div> | |
| <div class="card"><div class="icon">🧩</div><h3>Workflow Builder</h3><p>Drag, connect, configure, test and publish.</p></div> | |
| <div class="card"><div class="icon">🤖</div><h3>Agent Setup</h3><p>Instructions, model, tools, knowledge and variables.</p></div> | |
| <div class="card"><div class="icon">📚</div><h3>Knowledge</h3><p>Upload documents, see indexing status, test retrieval.</p></div> | |
| <div class="card"><div class="icon">🔌</div><h3>Connections</h3><p>Model providers, APIs, credentials and MCP/tool endpoints.</p></div> | |
| <div class="card"><div class="icon">🧪</div><h3>Test Run</h3><p>Run workflow from the builder with sample input.</p></div> | |
| <div class="card"><div class="icon">🔎</div><h3>Run Inspector</h3><p>See every node, timing, output and error in simple language.</p></div> | |
| <div class="card"><div class="icon">🚀</div><h3>Publish</h3><p>Activate a workflow/app after validation.</p></div> | |
| </div> | |
| <div class="callout green"> | |
| <strong>MVP success test:</strong> take a teammate who has never used Dify. Ask them to create: | |
| <em>“When a support request arrives, classify it, search our documents, draft a reply, ask for approval and send it.”</em> | |
| If they can build and understand it inside our UI, our product concept is working. | |
| </div> | |
| <div class="diagram"> | |
| <svg viewBox="0 0 1130 560"> | |
| <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> | |
| <text x="565" y="38" text-anchor="middle" font-size="23" font-weight="900" fill="#17213b">MVP WORKFLOW EXPERIENCE</text> | |
| <rect x="70" y="80" width="990" height="375" rx="30" fill="#f8fbff" stroke="#dbe5f3"/> | |
| <rect x="95" y="105" width="180" height="325" rx="20" fill="#17213b"/> | |
| <text x="185" y="142" text-anchor="middle" font-size="17" font-weight="900" fill="#fff">NODE LIBRARY</text> | |
| <g fill="#fff" font-size="13" font-weight="800"> | |
| <rect x="117" y="170" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="196" text-anchor="middle">⚡ Trigger</text> | |
| <rect x="117" y="224" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="250" text-anchor="middle">🤖 AI Agent</text> | |
| <rect x="117" y="278" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="304" text-anchor="middle">📚 Knowledge</text> | |
| <rect x="117" y="332" width="136" height="42" rx="10" fill="#263659"/><text x="185" y="358" text-anchor="middle">🔀 Condition</text> | |
| </g> | |
| <rect x="300" y="105" width="735" height="325" rx="20" fill="#fff" stroke="#dce5f0"/> | |
| <text x="325" y="140" font-size="14" font-weight="900" fill="#50627f">WORKFLOW CANVAS</text> | |
| <g font-size="12" text-anchor="middle" font-weight="900"> | |
| <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> | |
| <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> | |
| <rect x="720" y="145" width="140" height="60" rx="15" fill="#eaf9f1" stroke="#a0dfc2"/><text x="790" y="180" fill="#16845a">KNOWLEDGE</text> | |
| <rect x="720" y="270" width="140" height="60" rx="15" fill="#fff5e5" stroke="#ffd092"/><text x="790" y="305" fill="#b56c12">APPROVAL</text> | |
| <rect x="910" y="200" width="95" height="60" rx="15" fill="#eaf2ff" stroke="#a7bfff"/><text x="957" y="235" fill="#315bd8">SEND</text> | |
| </g> | |
| <g stroke="#566b91" stroke-width="4" fill="none" marker-end="url(#arr7)"> | |
| <line x1="480" y1="230" x2="530" y2="230"/> | |
| <path d="M665 230 C690 230 690 175 715 175"/> | |
| <path d="M665 230 C690 230 690 300 715 300"/> | |
| <path d="M860 175 C885 175 880 220 905 225"/> | |
| <path d="M860 300 C890 300 880 245 905 238"/> | |
| </g> | |
| <rect x="772" y="470" width="263" height="55" rx="15" fill="#17213b"/> | |
| <text x="903" y="504" text-anchor="middle" font-size="16" font-weight="900" fill="#fff">▶ TEST WORKFLOW</text> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="container"> | |
| <div class="kicker">Chapter 10</div> | |
| <h2>Technical structure we should aim for</h2> | |
| <p class="section-intro">A simple separation of responsibilities will keep the product maintainable.</p> | |
| <table class="compare"> | |
| <thead><tr><th>Layer</th><th>Suggested responsibility</th><th>Possible technology</th></tr></thead> | |
| <tbody> | |
| <tr><td><strong>Web UI</strong></td><td>Dashboard, agent builder, workflow canvas, knowledge, settings</td><td>React / Next.js</td></tr> | |
| <tr><td><strong>Canvas</strong></td><td>Nodes, edges, zoom, selection, graph editing</td><td>React Flow / XYFlow</td></tr> | |
| <tr><td><strong>Our API</strong></td><td>Auth, validation, stable product endpoints</td><td>FastAPI / Node</td></tr> | |
| <tr><td><strong>Dify Adapter</strong></td><td>Translate our objects into Dify objects; handle Dify upgrades</td><td>Dedicated service/module</td></tr> | |
| <tr><td><strong>Dify</strong></td><td>Workflow/agent/RAG/tool execution</td><td>Self-hosted Dify</td></tr> | |
| <tr><td><strong>Customer data</strong></td><td>Runtime DB, cache, files, vector storage</td><td>Dedicated per deployment</td></tr> | |
| <tr><td><strong>External systems</strong></td><td>LLMs, APIs, email, CRM, ERP, MCP, databases</td><td>Provider/plugin/tool integrations</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="container"> | |
| <div class="kicker">Chapter 11</div> | |
| <h2>Three risks the team must design for</h2> | |
| <div class="grid3"> | |
| <div class="card warn"> | |
| <div class="icon">🔁</div> | |
| <h3>1. Dify API changes</h3> | |
| <p>Some Studio-management behavior relies on console/internal surfaces, not only the stable public runtime API.</p> | |
| <p><strong>Mitigation:</strong> adapter layer + pin Dify versions + compatibility tests before upgrades.</p> | |
| </div> | |
| <div class="card warn"> | |
| <div class="icon">🧱</div> | |
| <h3>2. Trying to build too much UI</h3> | |
| <p>Copying every Dify screen immediately will waste time and make the product complicated.</p> | |
| <p><strong>Mitigation:</strong> start with the 20% of features that unlock 80% of customer workflows.</p> | |
| </div> | |
| <div class="card warn"> | |
| <div class="icon">⚖️</div> | |
| <h3>3. License / design assumptions</h3> | |
| <p>Licensing terms and upstream behavior can change.</p> | |
| <p><strong>Mitigation:</strong> dedicated deployments, original UI, written confirmation from Dify before commercial scale.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="container"> | |
| <div class="kicker">Final page</div> | |
| <h2>The mental model to leave with</h2> | |
| <div class="big-idea"> | |
| <div class="quote" style="color:white;font-size:clamp(1.45rem,3vw,2.4rem)"> | |
| “Our customer should feel like they are using <span style="color:#ffd166">our platform</span>. | |
| Our engineers should feel like they are using <span style="color:#9be5ff">Dify as an engine</span>.” | |
| </div> | |
| </div> | |
| <div class="grid3" style="margin-top:20px"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="callout green" style="margin-top:24px"> | |
| <strong>The strategic advantage:</strong> if we design the adapter well, our product is not permanently trapped inside Dify. | |
| Our frontend speaks <em>our own workflow model</em>. Today the adapter compiles it to Dify. In the future, another adapter could target | |
| LangGraph, Temporal or another runtime without redesigning the customer experience. | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="container"> | |
| <span class="stamp">Sources checked • October 2026</span> | |
| <h2 style="font-size:2rem;margin-top:12px">Source notes</h2> | |
| <p class="section-intro">These links are included so engineering and legal can verify the assumptions directly.</p> | |
| <div class="source-list"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="note" style="margin-top:20px"> | |
| <strong>Not legal advice.</strong> Before selling the product, send Dify a short architecture diagram showing | |
| “our UI → our adapter → one dedicated Dify deployment per customer” and obtain written confirmation that the intended commercial use is acceptable. | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="keyline"></div> | |
| <strong>Internal team explainer:</strong> Dify-powered agentic platform architecture.<br> | |
| Designed to be read like a visual textbook rather than a software specification. | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |