diff --git a/.env b/.env
new file mode 100644
index 0000000..ad7261a
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_ENABLE_SVG_IO=true
\ No newline at end of file
diff --git a/build.mjs b/build.mjs
index 6830065..583f576 100644
--- a/build.mjs
+++ b/build.mjs
@@ -16,6 +16,7 @@ const buildOptions = {
   loader: { '.svg': 'file' },
   define: {
     IS_WEB: process.env.IS_WEB ?? '0',
+    REACT_APP_ENABLE_SVG_IO: process.env.REACT_APP_ENABLE_SVG_IO ?? 'false',
   },
   plugins: [ inlineWorker(),
     html({
diff --git a/package-lock.json b/package-lock.json
index 57adda8..5e3344a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "AGPL-3.0-only",
       "dependencies": {
         "cors": "^2.8.5",
+        "dotenv": "^16.4.7",
         "express": "^4.17.9",
         "flatten-svg": "^0.3.0",
         "optimize-paths": "^1.2.2",
@@ -3774,6 +3775,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "dev": true,
diff --git a/package.json b/package.json
index b033d8e..3e3798e 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "lint": "eslint --cache --ext .ts,.tsx src && eslint --format stylish --fix src",
     "build": "npm run build:server && npm run build:ui",
     "build:server": "tsc",
-    "build:ui": "node --experimental-modules build.mjs",
+    "build:ui": "node --experimental-modules -r dotenv/config build.mjs",
     "prepare": "rimraf dist && npm run build",
     "start": "npm run build && node cli.js",
     "dev": "BUILD_MODE=development npm start",
@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
     "express": "^4.17.9",
     "flatten-svg": "^0.3.0",
     "optimize-paths": "^1.2.2",
diff --git a/src/global.d.ts b/src/global.d.ts
index 8828700..61439ea 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -23,3 +23,4 @@ declare module 'flatten-svg' {
 }
 
 declare const IS_WEB: boolean
+declare const REACT_APP_ENABLE_SVG_IO: boolean;
diff --git a/src/ui.tsx b/src/ui.tsx
index 7744233..3b57775 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -72,9 +72,9 @@ function reducer(state: State, action: any): State {
     case "SET_PLAN_OPTION":
       return { ...state, planOptions: { ...state.planOptions, ...action.value } };
     case "SET_VISUALIZATION_OPTION":
-      return {...state, visualizationOptions: {...state.visualizationOptions, ...action.value }};
+      return { ...state, visualizationOptions: { ...state.visualizationOptions, ...action.value } };
     case "SET_SVGIO_OPTION":
-      return {...state, svgIoOptions: {...state.svgIoOptions, ...action.value }}
+      return { ...state, svgIoOptions: { ...state.svgIoOptions, ...action.value } }
     case "SET_DEVICE_INFO":
       return { ...state, deviceInfo: action.value };
     case "SET_PAUSED":
@@ -334,7 +334,7 @@ class SaxiDriver implements Driver {
     fetch("/plot", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: new Blob([ JSON.stringify(plan.serialize()) ], { type: 'application/json' })
+      body: new Blob([JSON.stringify(plan.serialize())], { type: 'application/json' })
     });
   }
 
@@ -658,7 +658,7 @@ function PaperConfig({ state }: { state: State }) {
               if (Number(value) < 0) { (e.target as HTMLInputElement).value = "270"; }
               if (Number(value) > 270) { (e.target as HTMLInputElement).value = "0"; }
             }}
-            onChange={(e) => dispatch({ type: "SET_PLAN_OPTION", value: { rotateDrawing: e.target.value } })}/>
+            onChange={(e) => dispatch({ type: "SET_PLAN_OPTION", value: { rotateDrawing: e.target.value } })} />
         </div>
       </label>
     </div>
@@ -1271,12 +1271,14 @@ function Root() {
             <VisualizationOptions state={state} />
           </div>
         </details>
-        <details>
-          <summary className="section-header">AI</summary>
-          <div className="section-body">
-            <SvgIoOptions state={state} />
-          </div>
-        </details>
+        {REACT_APP_ENABLE_SVG_IO
+          ? <details>
+            <summary className="section-header">AI</summary>
+            <div className="section-body">
+              <SvgIoOptions state={state} />
+            </div>
+          </details>
+          : ''}
         <div className="spacer" />
         <div className="control-panel-bottom">
           <div className="section-header">plot</div>