diff --git a/.env b/.env
new file mode 100644
index 000000000..7f42d08cc
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+# Vite prefix is required for Vite to load the env variables
+# Plz modify below two env variables on your needs
+VITE_CHAT_WIDGET_APP_ID=AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67
+VITE_CHAT_WIDGET_BOT_ID=khan-academy-bot
diff --git a/.gitignore b/.gitignore
index 464e637e9..576a71b38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,4 +25,4 @@ package-lock.json
 *.njsproj
 *.sln
 *.sw?
-.env
+
diff --git a/src/App.tsx b/src/App.tsx
index d416d2c51..9b08d8faa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,8 +2,8 @@ import ChatAiWidget from './components/ChatAiWidget'; //import { ChatAiWidget }
 import { Constant } from './const';
 
 interface Props extends Partial<Constant> {
-  applicationId: string;
-  botId: string;
+  applicationId?: string;
+  botId?: string;
 }
 
 const App = (props: Props) => {
diff --git a/src/components/ChatAiWidget.tsx b/src/components/ChatAiWidget.tsx
index d2094c025..854a57765 100644
--- a/src/components/ChatAiWidget.tsx
+++ b/src/components/ChatAiWidget.tsx
@@ -8,6 +8,7 @@ import { Constant } from '../const';
 import { ConstantStateProvider } from '../context/ConstantContext';
 import { ReactComponent as ArrowDownIcon } from '../icons/ic-arrow-down.svg';
 import { ReactComponent as ChatBotIcon } from '../icons/icon-widget-chatbot.svg';
+import { assert } from '../utils';
 
 const StyledWidgetButtonWrapper = styled.button`
   position: fixed;
@@ -103,9 +104,12 @@ const getCookie = (cookieName: string) => {
   return cookies.filter((cookie) => cookie.includes(`${cookieName}=`));
 };
 
+const CHAT_WIDGET_APP_ID = import.meta.env.VITE_CHAT_WIDGET_APP_ID;
+const CHAT_WIDGET_BOT_ID = import.meta.env.VITE_CHAT_WIDGET_BOT_ID;
+
 interface Props extends Partial<Constant> {
-  applicationId: string;
-  botId: string;
+  applicationId?: string;
+  botId?: string;
 }
 
 const ChatAiWidget = ({ applicationId, botId, ...constantProps }: Props) => {
@@ -125,10 +129,18 @@ const ChatAiWidget = ({ applicationId, botId, ...constantProps }: Props) => {
       setCookie('chatbot');
     }
   }, []);
+
+  assert(
+    applicationId !== null && botId !== null,
+    'applicationId and botId must be provided'
+  );
+
   return (
     <ConstantStateProvider
-      applicationId={applicationId}
-      botId={botId}
+      // If env is not provided, prop will be used instead.
+      // But Either should be provided.
+      applicationId={CHAT_WIDGET_APP_ID ?? applicationId}
+      botId={CHAT_WIDGET_BOT_ID ?? botId}
       {...constantProps}
     >
       <Fragment>
diff --git a/src/main.tsx b/src/main.tsx
index ff71b448b..f7703243b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,14 +3,8 @@ import ReactDOM from 'react-dom/client';
 
 import App from './App';
 
-const CHAT_WIDGET_APP_ID = import.meta.env.VITE_CHAT_WIDGET_APP_ID;
-const CHAT_WIDGET_BOT_ID = import.meta.env.VITE_CHAT_WIDGET_BOT_ID;
-
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App
-      applicationId={CHAT_WIDGET_APP_ID}
-      botId={CHAT_WIDGET_BOT_ID}
-    />
+    <App />
   </React.StrictMode>
 );