diff --git a/site/src/Main.tsx b/site/src/Main.tsx
index 261068ef6bf9c..14c062ef4e485 100644
--- a/site/src/Main.tsx
+++ b/site/src/Main.tsx
@@ -1,7 +1,21 @@
+import { inspect } from "@xstate/inspect"
 import { createRoot } from "react-dom/client"
+import { Interpreter } from "xstate"
 import { App } from "./app"
 import "./i18n"
 
+// if this is a development build and the developer wants to inspect
+// helpful to see realtime changes on the services
+if (process.env.NODE_ENV === "development" && process.env.INSPECT_XSTATE === "true") {
+  // configure the XState inspector to open in a new tab
+  inspect({
+    url: "https://stately.ai/viz?inspect",
+    iframe: false,
+  })
+  // configure all XServices to use the inspector
+  Interpreter.defaultOptions.devTools = true
+}
+
 // This is the entry point for the app - where everything start.
 // In the future, we'll likely bring in more bootstrapping logic -
 // like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32
diff --git a/site/vite.config.ts b/site/vite.config.ts
index c37579a09380f..907a40f083677 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
   define: {
     "process.env": {
       NODE_ENV: process.env.NODE_ENV,
+      INSPECT_XSTATE: process.env.INSPECT_XSTATE,
     },
   },
   server: {