diff --git a/web/app/components/tools/mcp/create-card.tsx b/web/app/components/tools/mcp/create-card.tsx
index 314735d547..37be90e02c 100644
--- a/web/app/components/tools/mcp/create-card.tsx
+++ b/web/app/components/tools/mcp/create-card.tsx
@@ -12,9 +12,9 @@ import { useDocLink } from '@/context/i18n'
 import { useCreateMCP } from '@/service/use-tools'
 import MCPModal from './modal'
 
-type Props = {
+type Props = Readonly<{
   handleCreate: (provider: ToolWithProvider) => void
-}
+}>
 
 const NewMCPCard = ({ handleCreate }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index e78d88b783..92d259bf6a 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -37,13 +37,13 @@ import ListLoading from './list-loading'
 import OperationDropdown from './operation-dropdown'
 import ToolItem from './tool-item'
 
-type Props = {
+type Props = Readonly<{
   detail: ToolWithProvider
   onUpdate: (isDelete?: boolean) => void
   onHide: () => void
   isTriggerAuthorize: boolean
   onFirstCreate: () => void
-}
+}>
 
 type MCPModalConfirmPayload = Parameters<ComponentProps<typeof MCPModal>['onConfirm']>[0]
 type MutationResult = {
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index 0c21e280a1..a7231f01a1 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -16,12 +16,12 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   inCard?: boolean
   onOpenChange?: (open: boolean) => void
   onEdit: () => void
   onRemove: () => void
-}
+}>
 
 const OperationDropdown: FC<Props> = ({
   inCard,
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index e704e6d262..8e24640019 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -13,13 +13,13 @@ import {
 import * as React from 'react'
 import MCPDetailContent from './content'
 
-type Props = {
+type Props = Readonly<{
   detail?: ToolWithProvider
   onUpdate: () => void
   onHide: () => void
   isTriggerAuthorize: boolean
   onFirstCreate: () => void
-}
+}>
 
 const MCPDetailPanel: FC<Props> = ({
   detail,
diff --git a/web/app/components/tools/mcp/detail/tool-item.tsx b/web/app/components/tools/mcp/detail/tool-item.tsx
index f05890aee2..15877c3cef 100644
--- a/web/app/components/tools/mcp/detail/tool-item.tsx
+++ b/web/app/components/tools/mcp/detail/tool-item.tsx
@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 
-type Props = {
+type Props = Readonly<{
   tool: Tool
-}
+}>
 
 const MCPToolItem = ({
   tool,
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index 58641d384b..14bb2261fd 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -14,12 +14,12 @@ export type HeaderItem = {
   value: string
 }
 
-type Props = {
+type Props = Readonly<{
   headersItems: HeaderItem[]
   onChange: (headerItems: HeaderItem[]) => void
   readonly?: boolean
   isMasked?: boolean
-}
+}>
 
 const HeadersInput = ({
   headersItems,
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index c634085c54..1d135242d1 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -10,9 +10,9 @@ import NewMCPCard from './create-card'
 import MCPDetailPanel from './detail/provider-detail'
 import MCPCard from './provider-card'
 
-type Props = {
+type Props = Readonly<{
   searchText: string
-}
+}>
 
 const MCPList = ({
   searchText,
diff --git a/web/app/components/tools/mcp/mcp-server-param-item.tsx b/web/app/components/tools/mcp/mcp-server-param-item.tsx
index aed4378ebf..8971d767f0 100644
--- a/web/app/components/tools/mcp/mcp-server-param-item.tsx
+++ b/web/app/components/tools/mcp/mcp-server-param-item.tsx
@@ -3,11 +3,11 @@ import { Textarea } from '@langgenius/dify-ui/textarea'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   data?: any
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const MCPServerParamItem = ({
   data,
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 4536d96cad..99d5a6a2b4 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -21,13 +21,13 @@ import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
 import OperationDropdown from './detail/operation-dropdown'
 import MCPModal from './modal'
 
-type Props = {
+type Props = Readonly<{
   currentProvider?: ToolWithProvider
   data: ToolWithProvider
   handleSelect: (providerID: string) => void
   onUpdate: (providerID: string) => void
   onDeleted: () => void
-}
+}>
 
 const MCPCard = ({
   currentProvider,