diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
index 7ab28e8847..cba7d92027 100644
--- a/web/app/components/tools/types.ts
+++ b/web/app/components/tools/types.ts
@@ -172,3 +172,11 @@ export type WorkflowToolProviderResponse = {
   }
   privacy_policy: string
 }
+
+export type MCPServerDetail = {
+  id: string
+  server_code: string
+  description: string
+  status: string
+  parameters?: Record<string, string>
+}
diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts
index acec390465..b00420bd71 100644
--- a/web/service/use-tools.ts
+++ b/web/service/use-tools.ts
@@ -1,6 +1,7 @@
 import { del, get, post, put } from './base'
 import type {
   Collection,
+  MCPServerDetail,
   Tool,
 } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
@@ -175,6 +176,60 @@ export const useUpdateMCPTools = (providerID: string) => {
   })
 }
 
+export const useMCPServerDetail = (appID: string) => {
+  return useQuery<MCPServerDetail>({
+    queryKey: [NAME_SPACE, 'MCPServerDetail', appID],
+    queryFn: () => get<MCPServerDetail>(`/apps/${appID}/server`),
+  })
+}
+
+export const useCreateMCPServer = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'create-mcp-server'],
+    mutationFn: (payload: {
+      appID: string
+      description: string
+      parameters?: Record<string, string>
+    }) => {
+      const { appID, ...rest } = payload
+      return post(`apps/${appID}/server`, {
+        body: {
+          ...rest,
+        },
+      })
+    },
+    onSuccess,
+  })
+}
+
+export const useUpdateMCPServer = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'update-mcp-server'],
+    mutationFn: (payload: {
+      appID: string
+      description?: string
+      status?: string
+      parameters?: Record<string, string>
+    }) => {
+      const { appID, ...rest } = payload
+      return put(`apps/${appID}/server`, {
+        body: {
+          ...rest,
+        },
+      })
+    },
+    onSuccess,
+  })
+}
+
 export const useBuiltinProviderInfo = (providerName: string) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'builtin-provider-info', providerName],