diff --git a/Composer/packages/client/src/shell/lgApi.ts b/Composer/packages/client/src/shell/lgApi.ts
index 2b4d32da82..23d6aec7a9 100644
--- a/Composer/packages/client/src/shell/lgApi.ts
+++ b/Composer/packages/client/src/shell/lgApi.ts
@@ -10,7 +10,7 @@ import formatMessage from 'format-message';
 import { useResolvers } from '../hooks/useResolver';
 import { Dispatcher } from '../recoilModel/dispatchers';
 
-import { dispatcherState, focusPathState } from './../recoilModel';
+import { designPageLocationState, dispatcherState } from './../recoilModel';
 
 const fileNotFound = (id: string) => formatMessage('LG file {id} not found', { id });
 const TEMPLATE_ERROR = formatMessage('templateName is missing or empty');
@@ -31,13 +31,13 @@ const memoizedDebounce = (func, wait, options = {}) => {
 };
 
 function createLgApi(
-  state: { focusPath: string; projectId: string },
+  state: { dialogId: string; projectId: string },
   actions: Dispatcher,
   lgFileResolver: (id: string) => LgFile | undefined
 ): LgContextApi {
   const getLgTemplates = (id) => {
     if (id === undefined) throw new Error('must have a file id');
-    const focusedDialogId = state.focusPath.split('#').shift() || id;
+    const focusedDialogId = state.dialogId || id;
     const file = lgFileResolver(focusedDialogId);
     if (!file) throw new Error(fileNotFound(id));
     return file.templates;
@@ -148,15 +148,14 @@ function createLgApi(
 }
 
 export function useLgApi(projectId: string) {
-  const focusPath = useRecoilValue(focusPathState(projectId));
+  const { dialogId } = useRecoilValue(designPageLocationState(projectId));
   const actions: Dispatcher = useRecoilValue(dispatcherState);
   const { lgFileResolver } = useResolvers(projectId);
-  const [api, setApi] = useState(createLgApi({ focusPath, projectId }, actions, lgFileResolver));
+  const [api, setApi] = useState(createLgApi({ dialogId, projectId }, actions, lgFileResolver));
 
   useEffect(() => {
-    const newApi = createLgApi({ focusPath, projectId }, actions, lgFileResolver);
+    const newApi = createLgApi({ dialogId, projectId }, actions, lgFileResolver);
     setApi(newApi);
-
     return () => {
       Object.keys(newApi).forEach((apiName) => {
         if (typeof newApi[apiName].flush === 'function') {
@@ -164,7 +163,7 @@ export function useLgApi(projectId: string) {
         }
       });
     };
-  }, [projectId, focusPath]);
+  }, [projectId, dialogId]);
 
   return api;
 }
diff --git a/Composer/packages/client/src/shell/luApi.ts b/Composer/packages/client/src/shell/luApi.ts
index d6ed5ed1a6..5599b025ec 100644
--- a/Composer/packages/client/src/shell/luApi.ts
+++ b/Composer/packages/client/src/shell/luApi.ts
@@ -8,14 +8,14 @@ import formatMessage from 'format-message';
 import debounce from 'lodash/debounce';
 
 import { useResolvers } from '../hooks/useResolver';
-import { dispatcherState, focusPathState } from '../recoilModel';
+import { designPageLocationState, dispatcherState } from '../recoilModel';
 import { Dispatcher } from '../recoilModel/dispatchers';
 
 const fileNotFound = (id: string) => formatMessage(`LU file {id} not found`, { id });
 const INTENT_ERROR = formatMessage('intentName is missing or empty');
 
 function createLuApi(
-  state: { focusPath: string; projectId: string },
+  state: { dialogId: string; projectId: string },
   dispatchers: Dispatcher,
   luFileResolver: (id: string) => LuFile | undefined
 ): LuContextApi {
@@ -65,7 +65,7 @@ function createLuApi(
 
   const getLuIntents = (id: string): LuIntentSection[] => {
     if (id === undefined) throw new Error('must have a file id');
-    const focusedDialogId = state.focusPath.split('#').shift() || id;
+    const focusedDialogId = state.dialogId || id;
     const file = luFileResolver(focusedDialogId);
     if (!file) throw new Error(fileNotFound(id));
     return file.intents;
@@ -90,13 +90,13 @@ function createLuApi(
 }
 
 export function useLuApi(projectId: string) {
-  const focusPath = useRecoilValue(focusPathState(projectId));
+  const { dialogId } = useRecoilValue(designPageLocationState(projectId));
   const dispatchers = useRecoilValue(dispatcherState);
   const { luFileResolver } = useResolvers(projectId);
-  const [api, setApi] = useState(createLuApi({ focusPath, projectId }, dispatchers, luFileResolver));
+  const [api, setApi] = useState(createLuApi({ dialogId, projectId }, dispatchers, luFileResolver));
 
   useEffect(() => {
-    const newApi = createLuApi({ focusPath, projectId }, dispatchers, luFileResolver);
+    const newApi = createLuApi({ dialogId, projectId }, dispatchers, luFileResolver);
     setApi(newApi);
 
     return () => {
@@ -106,7 +106,7 @@ export function useLuApi(projectId: string) {
         }
       });
     };
-  }, [projectId, focusPath]);
+  }, [projectId, dialogId]);
 
   return api;
 }