diff --git a/web/app/(commonLayout)/try/app/[appId]/page.tsx b/web/app/(commonLayout)/try/app/[appId]/page.tsx
new file mode 100644
index 0000000000..84a21b9049
--- /dev/null
+++ b/web/app/(commonLayout)/try/app/[appId]/page.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Main from '@/app/components/try/app/index'
+
+export type IInstalledAppProps = {
+  params: {
+    appId: string
+  }
+}
+
+async function InstalledApp({ params }: IInstalledAppProps) {
+  const appId = (await params).appId
+  return (
+    <Main appId={appId} />
+  )
+}
+
+export default InstalledApp
diff --git a/web/app/components/try/app/chat.tsx b/web/app/components/try/app/chat.tsx
new file mode 100644
index 0000000000..b9f1d39fdd
--- /dev/null
+++ b/web/app/components/try/app/chat.tsx
@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
+import { useThemeContext } from '../../base/chat/embedded-chatbot/theme/theme-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import {
+  EmbeddedChatbotContext,
+} from '@/app/components/base/chat/embedded-chatbot/context'
+import {
+  useEmbeddedChatbot,
+} from '@/app/components/base/chat/embedded-chatbot/hooks'
+import cn from '@/utils/classnames'
+
+type Props = {
+  appId: string
+  className: string
+}
+
+const TryApp: FC<Props> = ({
+  appId,
+  className,
+}) => {
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const themeBuilder = useThemeContext()
+  const chatData = useEmbeddedChatbot()
+  return (
+    <EmbeddedChatbotContext.Provider value={{
+      ...chatData,
+      isMobile,
+      themeBuilder,
+    }}>
+      <div className={cn('bg-background-section-burn', className)}>
+        <ChatWrapper />
+      </div>
+    </EmbeddedChatbotContext.Provider>
+  )
+}
+export default React.memo(TryApp)
diff --git a/web/app/components/try/app/index.tsx b/web/app/components/try/app/index.tsx
new file mode 100644
index 0000000000..4005cbe675
--- /dev/null
+++ b/web/app/components/try/app/index.tsx
@@ -0,0 +1,29 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Chat from './chat'
+
+type Props = {
+  appId: string
+}
+
+const TryApp: FC<Props> = ({
+  appId,
+}) => {
+  const isChat = true
+  const isCompletion = !isChat
+  return (
+    <div className='flex h-full'>
+      {isChat && (
+        <Chat appId={appId} className='h-full grow' />
+      )}
+      {isCompletion && (
+        <div>Completion</div>
+      )}
+      <div className='w-[360px]'>
+        Right panel
+      </div>
+    </div>
+  )
+}
+export default React.memo(TryApp)