platform_explained / index.html
bardd's picture
Update index.html
48c0f3a verified
Raw History Blame Contribute Delete
54.5 kB
<!DOCTYPE html>
<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>