diff --git a/web/package-lock.json b/web/package-lock.json
index eb29df8c6..f52dc0a01 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -23,6 +23,7 @@
                 "@polymer/paper-input": "^3.2.1",
                 "@rollup/plugin-babel": "^5.3.0",
                 "@rollup/plugin-replace": "^2.4.2",
+                "@rollup/plugin-typescript": "^8.2.1",
                 "@sentry/browser": "^6.5.1",
                 "@sentry/tracing": "^6.5.1",
                 "@types/chart.js": "^2.9.32",
@@ -60,7 +61,8 @@
                 "typescript": "^4.3.2",
                 "webcomponent-qr-code": "^1.0.5",
                 "yaml": "^1.10.2"
-            }
+            },
+            "devDependencies": {}
         },
         "api": {
             "name": "authentik-api",
@@ -1990,6 +1992,18 @@
                 "magic-string": "^0.25.7"
             }
         },
+        "node_modules/@rollup/plugin-typescript": {
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.2.1.tgz",
+            "integrity": "sha512-Qd2E1pleDR4bwyFxqbjt4eJf+wB0UKVMLc7/BAFDGVdAXQMCsD4DUv5/7/ww47BZCYxWtJqe1Lo0KVNswBJlRw==",
+            "dependencies": {
+                "@rollup/pluginutils": "^3.1.0",
+                "resolve": "^1.17.0"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
         "node_modules/@rollup/pluginutils": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -9417,6 +9431,15 @@
                 "magic-string": "^0.25.7"
             }
         },
+        "@rollup/plugin-typescript": {
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.2.1.tgz",
+            "integrity": "sha512-Qd2E1pleDR4bwyFxqbjt4eJf+wB0UKVMLc7/BAFDGVdAXQMCsD4DUv5/7/ww47BZCYxWtJqe1Lo0KVNswBJlRw==",
+            "requires": {
+                "@rollup/pluginutils": "^3.1.0",
+                "resolve": "^1.17.0"
+            }
+        },
         "@rollup/pluginutils": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
diff --git a/web/package.json b/web/package.json
index b7a5476cc..de9f6a3d1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -52,6 +52,7 @@
         "@polymer/paper-input": "^3.2.1",
         "@rollup/plugin-babel": "^5.3.0",
         "@rollup/plugin-replace": "^2.4.2",
+        "@rollup/plugin-typescript": "^8.2.1",
         "@sentry/browser": "^6.5.1",
         "@sentry/tracing": "^6.5.1",
         "@types/chart.js": "^2.9.32",
@@ -89,5 +90,6 @@
         "typescript": "^4.3.2",
         "webcomponent-qr-code": "^1.0.5",
         "yaml": "^1.10.2"
-    }
+    },
+    "devDependencies": {}
 }
diff --git a/web/rollup.config.js b/web/rollup.config.js
index 5c4616c80..7e9a7650e 100644
--- a/web/rollup.config.js
+++ b/web/rollup.config.js
@@ -2,6 +2,7 @@ import resolve from "rollup-plugin-node-resolve";
 import commonjs from "rollup-plugin-commonjs";
 import { terser } from "rollup-plugin-terser";
 import sourcemaps from "rollup-plugin-sourcemaps";
+import typescript from "@rollup/plugin-typescript";
 import cssimport from "rollup-plugin-cssimport";
 import copy from "rollup-plugin-copy";
 import babel from "@rollup/plugin-babel";
@@ -47,6 +48,31 @@ function manualChunks(id) {
 }
 
 export default [
+    // Autogenerated API Client
+    {
+        input: "./api/src/index.ts",
+        output: [
+            {
+                format: "es",
+                dir: "./api/dist/",
+                sourcemap: true,
+            },
+        ],
+        plugins: [
+            typescript({
+                "declaration": true,
+                "outDir": "./api/dist/",
+            }),
+            isProdBuild && terser(),
+            copy({
+                targets: [...resources],
+                copyOnce: false,
+            }),
+        ].filter(p => p),
+        watch: {
+            clearScreen: false,
+        },
+    },
     // Polyfills (imported first)
     {
         input: "./poly.ts",
@@ -58,10 +84,6 @@ export default [
             }
         ],
         plugins: [
-            copy({
-                targets: [...resources],
-                copyOnce: false,
-            }),
             cssimport(),
             resolve({ browser: true }),
             commonjs(),