diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index ec595ea2473..e7e6e5edde7 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -9,13 +9,13 @@ import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import useGetRequirements from './use-get-requirements'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   appDetail: TryAppInfo
   categories?: string[]
   className?: string
   onCreate: () => void
-}
+}>
 
 const headerClassName = 'system-sm-semibold-uppercase text-text-secondary mb-3'
 const requirementIconSize = 20
diff --git a/web/app/components/explore/try-app/app/chat.tsx b/web/app/components/explore/try-app/app/chat.tsx
index c1c404e49e0..0078a3b22d7 100644
--- a/web/app/components/explore/try-app/app/chat.tsx
+++ b/web/app/components/explore/try-app/app/chat.tsx
@@ -26,11 +26,11 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { AppSourceType } from '@/service/share'
 import { useThemeContext } from '../../../base/chat/embedded-chatbot/theme/theme-context'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   appDetail: TryAppInfo
   className: string
-}
+}>
 
 const TryApp: FC<Props> = ({
   appId,
diff --git a/web/app/components/explore/try-app/app/index.tsx b/web/app/components/explore/try-app/app/index.tsx
index 4224719bbd8..ecb894b6db7 100644
--- a/web/app/components/explore/try-app/app/index.tsx
+++ b/web/app/components/explore/try-app/app/index.tsx
@@ -7,10 +7,10 @@ import useDocumentTitle from '@/hooks/use-document-title'
 import Chat from './chat'
 import TextGeneration from './text-generation'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   appDetail: TryAppInfo
-}
+}>
 
 const TryApp: FC<Props> = ({
   appId,
diff --git a/web/app/components/explore/try-app/app/text-generation.tsx b/web/app/components/explore/try-app/app/text-generation.tsx
index 5a51199d864..7c1f77acb3d 100644
--- a/web/app/components/explore/try-app/app/text-generation.tsx
+++ b/web/app/components/explore/try-app/app/text-generation.tsx
@@ -24,12 +24,12 @@ import { Resolution, TransferMethod } from '@/types/app'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import RunOnce from '../../../share/text-generation/run-once'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   className?: string
   isWorkflow?: boolean
   appData: AppData | null
-}
+}>
 
 const TextGeneration: FC<Props> = ({
   appId,
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 3a19075cdad..04c08e8e330 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -19,13 +19,13 @@ import AppInfo from './app-info'
 import Preview from './preview'
 import { TypeEnum } from './types'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   app?: AppType
   categories?: string[]
   onClose: () => void
   onCreate: () => void
-}
+}>
 
 const TryApp: FC<Props> = ({
   appId,