diff --git a/playground/.env b/playground/.env
new file mode 100644
index 00000000..5f92b324
--- /dev/null
+++ b/playground/.env
@@ -0,0 +1 @@
+AGENT_SERVER_URL=http://localhost:8080
\ No newline at end of file
diff --git a/playground/.env.example b/playground/.env.example
deleted file mode 100644
index 36251c81..00000000
--- a/playground/.env.example
+++ /dev/null
@@ -1,2 +0,0 @@
-NEXT_PUBLIC_REQUEST_URL=http://localhost:8080
-AGENT_SERVER_URL=http://localhost:8080
\ No newline at end of file
diff --git a/playground/.gitignore b/playground/.gitignore
index 2b3a23bf..3bcf2bf5 100644
--- a/playground/.gitignore
+++ b/playground/.gitignore
@@ -73,7 +73,8 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
+# .env
+!.env
 .env.development.local
 .env.test.local
 .env.production.local
diff --git a/playground/Dockerfile b/playground/Dockerfile
index 1bc3ba7d..51f6a669 100644
--- a/playground/Dockerfile
+++ b/playground/Dockerfile
@@ -4,7 +4,7 @@ FROM base AS builder
 
 WORKDIR /app
 
-COPY .env.example .env
+# COPY .env.example .env
 COPY . .
 
 RUN npm i && \
diff --git a/playground/next.config.mjs b/playground/next.config.mjs
index 4a5288eb..9ce7e0db 100644
--- a/playground/next.config.mjs
+++ b/playground/next.config.mjs
@@ -1,9 +1,41 @@
 /** @type {import('next').NextConfig} */
+
+const { AGENT_SERVER_URL } = process.env;
+
+// Check if environment variables are available
+if (!AGENT_SERVER_URL) {
+  throw "Environment variables AGENT_SERVER_URL are not available";
+}
+
 const nextConfig = {
   // basePath: '/ai-agent',
   // output: 'export',
   output: 'standalone',
   reactStrictMode: false,
+  async rewrites() {
+    return [
+      // customize agents start at /app/api/agents/start.tsx
+      {
+        source: '/api/agents/start',
+        destination: '/api/agents/start',
+      },
+      // Proxy all other agents API requests
+      {
+        source: '/api/agents/:path*',
+        destination: `${AGENT_SERVER_URL}/:path*`,
+      },
+      // Proxy all other documents requests
+      {
+        source: '/api/vector/:path*',
+        destination: `${AGENT_SERVER_URL}/vector/:path*`,
+      },
+      // Proxy all other documents requests
+      {
+        source: '/api/token/:path*',
+        destination: `${AGENT_SERVER_URL}/token/:path*`,
+      },
+    ];
+  },
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>
diff --git a/playground/src/app/api/agents/stop/route.tsx b/playground/src/app/api/agents/stop/route.tsx
deleted file mode 100644
index 68eea703..00000000
--- a/playground/src/app/api/agents/stop/route.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { REQUEST_URL } from '@/common/constant';
-import { NextRequest, NextResponse } from 'next/server';
-
-/**
- * Handles the POST request to stop an agent.
- * 
- * @param request - The NextRequest object representing the incoming request.
- * @returns A NextResponse object representing the response to be sent back to the client.
- */
-export async function POST(request: NextRequest) {
-  try {
-    const { AGENT_SERVER_URL } = process.env;
-
-    // Check if environment variables are available
-    if (!AGENT_SERVER_URL) {
-      throw "Environment variables are not available";
-    }
-    const body = await request.json();
-    const {
-      channel_name,
-      request_id,
-    } = body;
-
-    // Send a POST request to stop the agent
-    const response = await fetch(`${AGENT_SERVER_URL}/stop`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        request_id,
-        channel_name
-      }),
-    });
-
-    // Get the response data
-    const responseData = await response.json();
-
-    return NextResponse.json(responseData, { status: response.status });
-  } catch (error) {
-    if (error instanceof Response) {
-      const errorData = await error.json();
-      return NextResponse.json(errorData, { status: error.status });
-    } else {
-      return NextResponse.json({ code: "1", data: null, msg: "Internal Server Error" }, { status: 500 });
-    }
-  }
-}
\ No newline at end of file
diff --git a/playground/src/common/constant.ts b/playground/src/common/constant.ts
index a2b2db83..fee0c18e 100644
--- a/playground/src/common/constant.ts
+++ b/playground/src/common/constant.ts
@@ -1,6 +1,4 @@
 import { IOptions, ColorItem, LanguageOptionItem, VoiceOptionItem, GraphOptionItem } from "@/types"
-
-export const REQUEST_URL = process.env.NEXT_PUBLIC_REQUEST_URL ?? ""
 export const GITHUB_URL = "https://github.com/TEN-framework/ASTRA.ai"
 export const OPTIONS_KEY = "__options__"
 export const DEFAULT_OPTIONS: IOptions = {
diff --git a/playground/src/common/request.ts b/playground/src/common/request.ts
index 3b759255..7e6e094f 100644
--- a/playground/src/common/request.ts
+++ b/playground/src/common/request.ts
@@ -1,5 +1,3 @@
-import { AnyObject } from "antd/es/_util/type"
-import { REQUEST_URL } from "./constant"
 import { genUUID } from "./utils"
 import { Language } from "@/types"
 
@@ -17,7 +15,8 @@ interface GenAgoraDataConfig {
 }
 
 export const apiGenAgoraData = async (config: GenAgoraDataConfig) => {
-  const url = `${REQUEST_URL}/token/generate`
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
+  const url = `/api/token/generate`
   const { userId, channel } = config
   const data = {
     request_id: genUUID(),
@@ -59,7 +58,7 @@ export const apiStartService = async (config: StartRequestConfig): Promise<any>
 }
 
 export const apiStopService = async (channel: string) => {
-  // look at app/api/agents/stop/route.tsx for the server-side implementation
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
   const url = `/api/agents/stop`
   const data = {
     request_id: genUUID(),
@@ -77,7 +76,7 @@ export const apiStopService = async (channel: string) => {
 }
 
 export const apiGetDocumentList = async () => {
-  const url = `${REQUEST_URL}/vector/document/preset/list`
+  const url = `/api/vector/document/preset/list`
   let resp: any = await fetch(url, {
     method: "GET",
     headers: {
@@ -92,7 +91,8 @@ export const apiGetDocumentList = async () => {
 }
 
 export const apiUpdateDocument = async (options: { channel: string, collection: string, fileName: string }) => {
-  const url = `${REQUEST_URL}/vector/document/update`
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
+  const url = `/api/vector/document/update`
   const { channel, collection, fileName } = options
   const data = {
     request_id: genUUID(),
@@ -114,7 +114,8 @@ export const apiUpdateDocument = async (options: { channel: string, collection:
 
 // ping/pong 
 export const apiPing = async (channel: string) => {
-  const url = `${REQUEST_URL}/ping`
+  // the request will be rewrite at next.config.mjs to send to $AGENT_SERVER_URL
+  const url = `/api/agents/ping`
   const data = {
     request_id: genUUID(),
     channel_name: channel
diff --git a/playground/src/components/pdfSelect/upload/index.tsx b/playground/src/components/pdfSelect/upload/index.tsx
index 043d054b..734b4a07 100644
--- a/playground/src/components/pdfSelect/upload/index.tsx
+++ b/playground/src/components/pdfSelect/upload/index.tsx
@@ -1,7 +1,7 @@
 import { Select, Button, message, Upload, UploadProps } from "antd"
 import { useState } from "react"
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
-import { REQUEST_URL, useAppSelector, genUUID } from "@/common"
+import { useAppSelector, genUUID } from "@/common"
 import { IPdfData } from "@/types"
 
 import styles from "./index.module.scss"
@@ -22,7 +22,7 @@ const PdfUpload = (props: PdfSelectProps) => {
     accept: "application/pdf",
     maxCount: 1,
     showUploadList: false,
-    action: `${REQUEST_URL}/vector/document/upload`,
+    action: `/api/vector/document/upload`,
     data: {
       channel_name: channel,
       uid: String(userId),