docs/assets/architecture.svg

1<svg xmlns="http://www.w3.org/2000/svg" width="940" height="500" viewBox="0 0 940 500" role="img" aria-labelledby="title desc">
2  <title id="title">Cloudflare OS deployment architecture</title>
3  <desc id="desc">Users reach the deployment through one public route, owned by the Router Worker. The Router serves the Workshop frontend, sends /api to the Workshop backend, and sends /gatekeeper/&lt;name&gt; to whichever Gatekeeper the binding name matches. Behind it is the pinned Cloudflare OS release, containing the Workshop kernel, Gadgets, Blueprints, and the default Gatekeepers including Context. Service bindings connect that to the Workers and resources this repository owns and deploys: AI Gateway, enabled by default and needing no API token, any number of custom Gatekeepers, the Error Reporter, and KV and R2 storage.</desc>
4  <style>
5    .bg{fill:#f6f8fa}
6    .group{fill:#fff;fill-opacity:.5;stroke:#d0d7de;stroke-dasharray:6 4}
7    .repo{fill:#ddf4ff;fill-opacity:.4;stroke:#0969da;stroke-opacity:.55;stroke-width:1.4}
8    .card{fill:#fff;stroke:#d0d7de}
9    .core{fill:#fff;stroke:#f6821f;stroke-width:1.6}
10    .stack{fill:#fff;stroke:#d0d7de;opacity:.6}
11    .sep{fill:none;stroke:#d0d7de}
12    .t{fill:#1f2328;font:600 13px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
13    .g{fill:#1f2328;font:600 14px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
14    .s{fill:#656d76;font:11.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
15    .line{fill:none;stroke:#afb8c1;stroke-width:1.5}
16    .accent{stroke:#f6821f}
17    .pill{fill:#fff1e5;stroke:#f6821f;stroke-opacity:.35}
18    .pill-t{fill:#a2551a;font:600 9.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.6px}
19    .pill-b{fill:#ddf4ff;stroke:#0969da;stroke-opacity:.4}
20    .pill-bt{fill:#0a3069;font:600 9.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.6px}
21    @media(prefers-color-scheme:dark){
22      .bg{fill:#0d1117}
23      .group{fill:#161b22;fill-opacity:.4;stroke:#30363d}
24      .repo{fill:#0c2d6b;fill-opacity:.22;stroke:#388bfd;stroke-opacity:.55}
25      .card{fill:#161b22;stroke:#30363d}
26      .core{fill:#161b22}
27      .stack{fill:#161b22;stroke:#30363d}
28      .sep{stroke:#30363d}
29      .t,.g{fill:#e6edf3}
30      .s{fill:#8b949e}
31      .line{stroke:#484f58}
32      .accent{stroke:#f6821f}
33      .pill{fill:#2a1a0c}
34      .pill-t{fill:#ffa657}
35      .pill-b{fill:#0d2847}
36      .pill-bt{fill:#79c0ff}
37    }
38  </style>
39  <defs>
40    <marker id="ao" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
41      <path d="M0 0 8 4 0 8z" fill="#f6821f"/>
42    </marker>
43  </defs>
44
45  <rect class="bg" width="940" height="500" rx="12"/>
46
47  <rect class="card" x="24" y="88" width="214" height="60" rx="8"/>
48  <text class="t" x="44" y="113">Users</text>
49  <text class="s" x="44" y="131">Access, password, or OAuth</text>
50
51  <path class="line accent" d="M131 148V176" marker-end="url(#ao)"/>
52
53  <rect class="core" x="24" y="180" width="214" height="150" rx="8"/>
54  <path class="pill" d="M141 180H230A8 8 0 0 1 238 188V200H146A5 5 0 0 1 141 195Z"/>
55  <text class="pill-t" x="189.5" y="193.5" text-anchor="middle">PUBLIC ORIGIN</text>
56  <text class="t" x="44" y="225">Router</text>
57  <text class="s" x="44" y="243">The only public route</text>
58  <path class="sep" d="M44 256h174"/>
59  <text class="s" x="44" y="274">/api → Workshop backend</text>
60  <text class="s" x="44" y="292">/gatekeeper/* → Gatekeepers</text>
61  <text class="s" x="44" y="310">Everything else → frontend</text>
62
63  <path class="line accent" d="M238 255h42" marker-end="url(#ao)"/>
64
65  <rect class="group" x="288" y="48" width="288" height="414" rx="12"/>
66  <text class="g" x="308" y="78">Cloudflare OS</text>
67  <text class="s" x="308" y="96">Pinned upstream release</text>
68
69  <rect class="core" x="308" y="112" width="248" height="64" rx="8"/>
70  <text class="t" x="326" y="140">Workshop kernel</text>
71  <text class="s" x="326" y="158">Overseer, policy, and RPC</text>
72
73  <rect class="card" x="308" y="196" width="248" height="64" rx="8"/>
74  <text class="t" x="326" y="224">Gadgets</text>
75  <text class="s" x="326" y="242">Sandboxed Durable Objects</text>
76
77  <rect class="card" x="308" y="280" width="248" height="64" rx="8"/>
78  <text class="t" x="326" y="308">Blueprints</text>
79  <text class="s" x="326" y="326">Shareable Gadget templates</text>
80
81  <rect class="stack" x="316" y="372" width="248" height="64" rx="8"/>
82  <rect class="stack" x="312" y="368" width="248" height="64" rx="8"/>
83  <rect class="card" x="308" y="364" width="248" height="64" rx="8"/>
84  <text class="t" x="326" y="392">Default Gatekeepers</text>
85  <text class="s" x="326" y="410">Context and the rest of the set</text>
86
87  <path class="line accent" d="M576 255h42" marker-end="url(#ao)"/>
88
89  <rect class="repo" x="628" y="48" width="288" height="414" rx="12"/>
90  <text class="g" x="648" y="78">Your deployment</text>
91  <text class="s" x="648" y="96">Workers and resources you own</text>
92  <path class="pill-b" d="M832 48H904A12 12 0 0 1 916 60V70H838A6 6 0 0 1 832 64Z"/>
93  <text class="pill-bt" x="874" y="62.5" text-anchor="middle">THIS REPO</text>
94
95  <rect class="card" x="648" y="112" width="248" height="64" rx="8"/>
96  <text class="t" x="666" y="140">AI Gateway</text>
97  <text class="s" x="666" y="158">Workers AI models, no API token</text>
98  <path class="pill" d="M820 112H888A8 8 0 0 1 896 120V132H825A5 5 0 0 1 820 127Z"/>
99  <text class="pill-t" x="858" y="125.5" text-anchor="middle">DEFAULT ON</text>
100
101  <rect class="stack" x="656" y="204" width="248" height="64" rx="8"/>
102  <rect class="stack" x="652" y="200" width="248" height="64" rx="8"/>
103  <rect class="card" x="648" y="196" width="248" height="64" rx="8"/>
104  <text class="t" x="666" y="224">Custom Gatekeepers</text>
105  <text class="s" x="666" y="242">Your organization's APIs</text>
106
107  <rect class="card" x="648" y="290" width="248" height="64" rx="8"/>
108  <text class="t" x="666" y="318">Error Reporter</text>
109  <text class="s" x="666" y="336">Workers Logs or your collector</text>
110
111  <rect class="card" x="648" y="374" width="248" height="64" rx="8"/>
112  <text class="t" x="666" y="402">KV + R2</text>
113  <text class="s" x="666" y="420">Provisioned in your account</text>
114</svg>
115