diff --git a/playground/src/common/constant.ts b/playground/src/common/constant.ts
index e2195e77..b27692fb 100644
--- a/playground/src/common/constant.ts
+++ b/playground/src/common/constant.ts
@@ -128,4 +128,7 @@ export const MOBILE_ACTIVE_TAB_MAP = {
 
 export const isLLM = (extensionName: string) => {
   return extensionName === "llm" || extensionName === "v2v";
-}
\ No newline at end of file
+}
+
+// export const isProduction = process.env.NODE_ENV === "production";
+export const isProduction = true;
\ No newline at end of file
diff --git a/playground/src/common/request.ts b/playground/src/common/request.ts
index 3d3b8269..7395bc61 100644
--- a/playground/src/common/request.ts
+++ b/playground/src/common/request.ts
@@ -119,7 +119,7 @@ export const apiCheckCompatibleMessages = async (payload: {
 }
 
 export const apiFetchGraphs = async (): Promise<Graph[]> => {
-  let resp: any = await axios.get(`/api/dev/v1/graphs`)
+  let resp: any = await axios.get(`/api/agents/graphs`)
   return resp.data.data.map((graph: any) => ({
     id: graph.name,
     autoStart: graph.auto_start,
diff --git a/playground/src/components/Chat/ChatCard.tsx b/playground/src/components/Chat/ChatCard.tsx
index 713c7a50..9940a18d 100644
--- a/playground/src/components/Chat/ChatCard.tsx
+++ b/playground/src/components/Chat/ChatCard.tsx
@@ -14,6 +14,7 @@ import {
   useAppSelector,
   GRAPH_OPTIONS,
   isRagGraph,
+  isProduction,
 } from "@/common";
 import {
   setRtmConnected,
@@ -111,9 +112,14 @@ export default function ChatCard(props: { className?: string }) {
           {/* Action Bar */}
           <div className="flex w-full flex-wrap items-center justify-end gap-x-2 gap-y-2">
             <RemoteGraphSelect />
-            <RemoteModuleCfgSheet />
-            <RemotePropertyCfgSheet />
-            {isRagGraph(graphName) && <PdfSelect />}
+            {
+              !isProduction ? (
+                <>
+                  <RemoteModuleCfgSheet />
+                  <RemotePropertyCfgSheet />
+                </>
+              ) : null
+            }
           </div>
           {/* Chat messages would go here */}
           <MessageList />
diff --git a/playground/src/store/reducers/global.ts b/playground/src/store/reducers/global.ts
index 9ab2f66a..77bb8aa1 100644
--- a/playground/src/store/reducers/global.ts
+++ b/playground/src/store/reducers/global.ts
@@ -8,7 +8,8 @@ import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import {
   EMobileActiveTab,
   DEFAULT_OPTIONS,
-  COLOR_LIST
+  COLOR_LIST,
+  isProduction
 } from "@/common/constant";
 import {
   apiReloadPackage,
@@ -172,27 +173,47 @@ export const globalSlice = createSlice({
 });
 
 // Initialize graph data
-export const initializeGraphData = createAsyncThunk(
-  "global/initializeGraphData",
-  async (_, { dispatch }) => {
-    await apiReloadPackage();
-    const [fetchedGraphs, modules] = await Promise.all([
-      apiFetchGraphs(),
-      apiFetchInstalledAddons(),
-    ]);
-    dispatch(setGraphList(fetchedGraphs.map((graph) => graph.id)));
-    dispatch(setAddonModules(modules));
-  }
-);
-
+let initializeGraphData;
 // Fetch graph details
-export const fetchGraphDetails = createAsyncThunk(
-  "global/fetchGraphDetails",
-  async (graphId: string, { dispatch }) => {
-    const graph = await apiFetchGraphDetails(graphId);
-    dispatch(setGraph(graph));
-  }
-);
+let fetchGraphDetails;
+
+if (!isProduction) {
+  // only for development, below requests depend on dev-server
+  initializeGraphData = createAsyncThunk(
+    "global/initializeGraphData",
+    async (_, { dispatch }) => {
+      await apiReloadPackage();
+      const [fetchedGraphs, modules] = await Promise.all([
+        apiFetchGraphs(),
+        apiFetchInstalledAddons(),
+      ]);
+      dispatch(setGraphList(fetchedGraphs.map((graph) => graph.id)));
+      dispatch(setAddonModules(modules));
+    }
+  );
+  fetchGraphDetails = createAsyncThunk(
+    "global/fetchGraphDetails",
+    async (graphId: string, { dispatch }) => {
+      const graph = await apiFetchGraphDetails(graphId);
+      dispatch(setGraph(graph));
+    }
+  );
+} else {
+  initializeGraphData = createAsyncThunk(
+    "global/initializeGraphData",
+    async (_, { dispatch }) => {
+      const fetchedGraphs = await apiFetchGraphs();
+      dispatch(setGraphList(fetchedGraphs.map((graph) => graph.id)));
+    }
+  );
+  fetchGraphDetails = createAsyncThunk(
+    "global/fetchGraphDetails",
+    async (graphId: string, { dispatch }) => {
+      // Do nothing in production
+      return
+    }
+  );
+}
 
 // Update a graph
 export const updateGraph = createAsyncThunk(
@@ -232,4 +253,8 @@ export const {
   setAddonModules,
 } = globalSlice.actions;
 
+export {
+  initializeGraphData, fetchGraphDetails
+}
+
 export default globalSlice.reducer;
diff --git a/server/internal/http_server.go b/server/internal/http_server.go
index a333a40a..6f0669fa 100644
--- a/server/internal/http_server.go
+++ b/server/internal/http_server.go
@@ -109,6 +109,53 @@ func (s *HttpServer) handlerList(c *gin.Context) {
 	s.output(c, codeSuccess, filtered)
 }
 
+func (s *HttpServer) handleGraphs(c *gin.Context) {
+	// read the property.json file and get the graph list from predefined_graphs, return the result as response
+	// for every graph object returned, only keep the name and auto_start fields
+	content, err := os.ReadFile(PropertyJsonFile)
+	if err != nil {
+		slog.Error("failed to read property.json file", "err", err, logTag)
+		s.output(c, codeErrReadFileFailed, http.StatusInternalServerError)
+		return
+	}
+
+	var propertyJson map[string]interface{}
+	err = json.Unmarshal(content, &propertyJson)
+	if err != nil {
+		slog.Error("failed to parse property.json file", "err", err, logTag)
+		s.output(c, codeErrParseJsonFailed, http.StatusInternalServerError)
+		return
+	}
+
+	tenSection, ok := propertyJson["_ten"].(map[string]interface{})
+	if !ok {
+		slog.Error("Invalid format: _ten section missing", logTag)
+		s.output(c, codeErrParseJsonFailed, http.StatusInternalServerError)
+		return
+	}
+
+	predefinedGraphs, ok := tenSection["predefined_graphs"].([]interface{})
+	if !ok {
+		slog.Error("Invalid format: predefined_graphs missing or not an array", logTag)
+		s.output(c, codeErrParseJsonFailed, http.StatusInternalServerError)
+		return
+	}
+
+	// Filter the graph with the matching name
+	var graphs []map[string]interface{}
+	for _, graph := range predefinedGraphs {
+		graphMap, ok := graph.(map[string]interface{})
+		if ok {
+			graphs = append(graphs, map[string]interface{}{
+				"name":       graphMap["name"],
+				"auto_start": graphMap["auto_start"],
+			})
+		}
+	}
+
+	s.output(c, codeSuccess, graphs)
+}
+
 func (s *HttpServer) handleAddonDefaultProperties(c *gin.Context) {
 	// Get the base directory path
 	baseDir := "./agents/ten_packages/extension"
@@ -623,6 +670,7 @@ func (s *HttpServer) Start() {
 	r.POST("/start", s.handlerStart)
 	r.POST("/stop", s.handlerStop)
 	r.POST("/ping", s.handlerPing)
+	r.GET("/graphs", s.handleGraphs)
 	r.GET("/dev-tmp/addons/default-properties", s.handleAddonDefaultProperties)
 	r.POST("/token/generate", s.handlerGenerateToken)
 	r.GET("/vector/document/preset/list", s.handlerVectorDocumentPresetList)