diff --git a/.gitignore b/.gitignore
index 5690467..8cd4502 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # App specific
 store.json
+.story_kit_port
 
 # Rust stuff
 target
diff --git a/.ignore b/.ignore
index 8a6ebfa..5187e65 100644
--- a/.ignore
+++ b/.ignore
@@ -4,3 +4,4 @@ node_modules/
 .claude/
 .story_kit/
 store.json
+.story_kit_port
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 14c6d45..b7088b9 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -54,6 +54,8 @@ export interface CommandOutput {
 	exit_code: number;
 }
 
+declare const __STORYKIT_PORT__: string;
+
 const DEFAULT_API_BASE = "/api";
 const DEFAULT_WS_PATH = "/ws";
 
@@ -235,7 +237,7 @@ export class ChatWebSocket {
 		const protocol = window.location.protocol === "https:" ? "wss" : "ws";
 		const wsHost = resolveWsHost(
 			import.meta.env.DEV,
-			import.meta.env.VITE_STORYKIT_PORT,
+			typeof __STORYKIT_PORT__ !== "undefined" ? __STORYKIT_PORT__ : undefined,
 			window.location.host,
 		);
 		const wsUrl = `${protocol}://${wsHost}${wsPath}`;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 106910b..37e2e17 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -3,14 +3,17 @@ import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig(() => {
-  const backendPort = process.env.VITE_STORYKIT_PORT || "3001";
+  const backendPort = Number(process.env.STORYKIT_PORT || "3001");
   return {
     plugins: [react()],
+    define: {
+      __STORYKIT_PORT__: JSON.stringify(String(backendPort)),
+    },
     server: {
-      port: 5173,
+      port: backendPort + 2172,
       proxy: {
         "/api": {
-          target: `http://127.0.0.1:${backendPort}`,
+          target: `http://127.0.0.1:${String(backendPort)}`,
           timeout: 120000,
         },
       },