Fixes: Bugs fixed #10703 (#11154)

### What problem does this PR solve?

Fixes: Bugs fixed
- Removed invalid code,
- Modified the user center style,
- Added an automatic data source parsing switch.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx

@@ -0,0 +1,178 @@
+import { Collapse } from '@/components/collapse';
+import { Button, ButtonLoading } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useGetMcpServer, useTestMcpServer } from '@/hooks/use-mcp-request';
+import { IModalProps } from '@/interfaces/common';
+import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
+import { cn } from '@/lib/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty, omit, pick } from 'lodash';
+import { RefreshCw } from 'lucide-react';
+import {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import {
+  EditMcpForm,
+  FormId,
+  ServerType,
+  useBuildFormSchema,
+} from './edit-mcp-form';
+import { McpToolCard } from './tool-card';
+
+function transferToolToArray(tools: IMCPToolObject) {
+  return Object.entries(tools).reduce<IMCPTool[]>((pre, [name, tool]) => {
+    pre.push({ ...tool, name });
+    return pre;
+  }, []);
+}
+
+const DefaultValues = {
+  name: '',
+  server_type: ServerType.SSE,
+  url: '',
+};
+
+export function EditMcpDialog({
+  hideModal,
+  loading,
+  onOk,
+  id,
+}: IModalProps<any> & { id: string }) {
+  const { t } = useTranslation();
+  const {
+    testMcpServer,
+    data: testData,
+    loading: testLoading,
+  } = useTestMcpServer();
+  const [isTriggeredBySaving, setIsTriggeredBySaving] = useState(false);
+  const FormSchema = useBuildFormSchema();
+  const [collapseOpen, setCollapseOpen] = useState(true);
+  const { data } = useGetMcpServer(id);
+  const [fieldChanged, setFieldChanged] = useState(false);
+
+  const tools = useMemo(() => {
+    return testData?.data || [];
+  }, [testData?.data]);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: DefaultValues,
+  });
+
+  const handleTest: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
+    e.stopPropagation();
+    setIsTriggeredBySaving(false);
+  }, []);
+
+  const handleSave: MouseEventHandler<HTMLButtonElement> = useCallback(() => {
+    setIsTriggeredBySaving(true);
+  }, []);
+
+  const handleOk = async (values: z.infer<typeof FormSchema>) => {
+    const nextValues = {
+      ...omit(values, 'authorization_token'),
+      variables: { authorization_token: values.authorization_token },
+      headers: { Authorization: 'Bearer ${authorization_token}' },
+    };
+    if (isTriggeredBySaving) {
+      onOk?.(nextValues);
+    } else {
+      const ret = await testMcpServer(nextValues);
+      if (ret.code === 0) {
+        setFieldChanged(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!isEmpty(data)) {
+      form.reset(pick(data, ['name', 'server_type', 'url']));
+    }
+  }, [data, form]);
+
+  const nextTools = useMemo(() => {
+    return isEmpty(tools)
+      ? transferToolToArray(data.variables?.tools || {})
+      : tools;
+  }, [data.variables?.tools, tools]);
+
+  const disabled = !!!tools?.length || testLoading || fieldChanged;
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{id ? t('mcp.editMCP') : t('mcp.addMCP')}</DialogTitle>
+        </DialogHeader>
+        <EditMcpForm
+          onOk={handleOk}
+          form={form}
+          setFieldChanged={setFieldChanged}
+        ></EditMcpForm>
+        <Card>
+          <CardContent className="p-3">
+            <Collapse
+              title={
+                <div>
+                  {nextTools?.length || 0} {t('mcp.toolsAvailable')}
+                </div>
+              }
+              open={collapseOpen}
+              onOpenChange={setCollapseOpen}
+              rightContent={
+                <Button
+                  variant={'transparent'}
+                  form={FormId}
+                  type="submit"
+                  onClick={handleTest}
+                  className="border-none p-0 hover:bg-transparent"
+                >
+                  <RefreshCw
+                    className={cn('text-text-secondary', {
+                      'animate-spin': testLoading,
+                    })}
+                  />
+                </Button>
+              }
+            >
+              <div className="overflow-auto max-h-80 divide-y bg-bg-card rounded-md px-2.5">
+                {nextTools?.map((x) => (
+                  <McpToolCard key={x.name} data={x}></McpToolCard>
+                ))}
+              </div>
+            </Collapse>
+          </CardContent>
+        </Card>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">{t('common.cancel')}</Button>
+          </DialogClose>
+          <ButtonLoading
+            type="submit"
+            form={FormId}
+            loading={loading}
+            onClick={handleSave}
+            disabled={disabled}
+          >
+            {t('common.save')}
+          </ButtonLoading>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/user-setting/mcp/edit-mcp-form.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { IModalProps } from '@/interfaces/common';
+import { buildOptions } from '@/utils/form';
+import { loader } from '@monaco-editor/react';
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+
+loader.config({ paths: { vs: '/vs' } });
+
+export const FormId = 'EditMcpForm';
+
+export enum ServerType {
+  SSE = 'sse',
+  StreamableHttp = 'streamable-http',
+}
+
+const ServerTypeOptions = buildOptions(ServerType);
+
+export function useBuildFormSchema() {
+  const { t } = useTranslation();
+
+  const FormSchema = z.object({
+    name: z
+      .string()
+      .min(1, {
+        message: t('common.mcp.namePlaceholder'),
+      })
+      .regex(/^[a-zA-Z0-9_-]{1,64}$/, {
+        message: t('common.mcp.nameRequired'),
+      })
+      .trim(),
+    url: z
+      .string()
+      .url()
+      .min(1, {
+        message: t('common.mcp.urlPlaceholder'),
+      })
+      .trim(),
+    server_type: z
+      .string()
+      .min(1, {
+        message: t('common.pleaseSelect'),
+      })
+      .trim(),
+    authorization_token: z.string().optional(),
+  });
+
+  return FormSchema;
+}
+
+export function EditMcpForm({
+  form,
+  onOk,
+  setFieldChanged,
+}: IModalProps<any> & {
+  form: UseFormReturn<any>;
+  setFieldChanged: Dispatch<SetStateAction<boolean>>;
+}) {
+  const { t } = useTranslation();
+  const FormSchema = useBuildFormSchema();
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    onOk?.(data);
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+        id={FormId}
+      >
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>{t('common.name')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('common.mcp.namePlaceholder')}
+                  {...field}
+                  autoComplete="off"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>{t('mcp.url')}</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('common.mcp.urlPlaceholder')}
+                  {...field}
+                  autoComplete="off"
+                  onChange={(e) => {
+                    field.onChange(e.target.value.trim());
+                    setFieldChanged(true);
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="server_type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel required>{t('mcp.serverType')}</FormLabel>
+              <FormControl>
+                <RAGFlowSelect
+                  {...field}
+                  autoComplete="off"
+                  options={ServerTypeOptions}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setFieldChanged(true);
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="authorization_token"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Authorization Token</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder={t('common.mcp.tokenPlaceholder')}
+                  {...field}
+                  autoComplete="off"
+                  type="password"
+                  onChange={(e) => {
+                    field.onChange(e.target.value.trim());
+                    setFieldChanged(true);
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}

web/src/pages/user-setting/mcp/import-mcp-dialog/import-mcp-form.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { FileUploader } from '@/components/file-uploader';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { FileMimeType, Platform } from '@/constants/common';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useTranslation } from 'react-i18next';
+
+export function ImportMcpForm({ hideModal, onOk }: IModalProps<any>) {
+  const { t } = useTranslation();
+  const FormSchema = z.object({
+    platform: z
+      .string()
+      .min(1, {
+        message: t('common.namePlaceholder'),
+      })
+      .trim(),
+    fileList: z.array(z.instanceof(File)),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { platform: Platform.RAGFlow },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    const ret = await onOk?.(data);
+    if (ret) {
+      hideModal?.();
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6"
+        id={TagRenameId}
+      >
+        <FormField
+          control={form.control}
+          name="fileList"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t('common.name')}</FormLabel>
+              <FormControl>
+                <FileUploader
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  accept={{ '*.json': [FileMimeType.Json] }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}

web/src/pages/user-setting/mcp/import-mcp-dialog/index.tsx

@@ -0,0 +1,36 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { LoadingButton } from '@/components/ui/loading-button';
+import { IModalProps } from '@/interfaces/common';
+import { TagRenameId } from '@/pages/add-knowledge/constant';
+import { useTranslation } from 'react-i18next';
+import { ImportMcpForm } from './import-mcp-form';
+
+export function ImportMcpDialog({
+  hideModal,
+  onOk,
+  loading,
+}: IModalProps<any>) {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open onOpenChange={hideModal}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('mcp.import')}</DialogTitle>
+        </DialogHeader>
+        <ImportMcpForm hideModal={hideModal} onOk={onOk}></ImportMcpForm>
+        <DialogFooter>
+          <LoadingButton type="submit" form={TagRenameId} loading={loading}>
+            {t('common.save')}
+          </LoadingButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/pages/user-setting/mcp/index.tsx

@@ -0,0 +1,157 @@
+import { CardContainer } from '@/components/card-container';
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import Spotlight from '@/components/spotlight';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { SearchInput } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
+import { useListMcpServer } from '@/hooks/use-mcp-request';
+import { pick } from 'lodash';
+import {
+  Download,
+  LayoutList,
+  ListChecks,
+  Plus,
+  Trash2,
+  Upload,
+} from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ProfileSettingWrapperCard } from '../components/user-setting-header';
+import { EditMcpDialog } from './edit-mcp-dialog';
+import { ImportMcpDialog } from './import-mcp-dialog';
+import { McpCard } from './mcp-card';
+import { useBulkOperateMCP } from './use-bulk-operate-mcp';
+import { useEditMcp } from './use-edit-mcp';
+import { useImportMcp } from './use-import-mcp';
+
+export default function McpServer() {
+  const { data, setPagination, searchString, handleInputChange, pagination } =
+    useListMcpServer();
+  const { editVisible, showEditModal, hideEditModal, handleOk, id, loading } =
+    useEditMcp();
+  const {
+    selectedList,
+    handleSelectChange,
+    handleDelete,
+    handleExportMcp,
+    handleSelectAll,
+  } = useBulkOperateMCP(data.mcp_servers);
+  const { t } = useTranslation();
+  const { importVisible, showImportModal, hideImportModal, onImportOk } =
+    useImportMcp();
+
+  const [isSelectionMode, setSelectionMode] = useState(false);
+
+  const handlePageChange = useCallback(
+    (page: number, pageSize?: number) => {
+      setPagination({ page, pageSize });
+    },
+    [setPagination],
+  );
+
+  const switchSelectionMode = useCallback(() => {
+    setSelectionMode((prev) => !prev);
+  }, []);
+
+  return (
+    <ProfileSettingWrapperCard
+      header={
+        <>
+          <div className="text-text-primary text-2xl font-medium">
+            {t('mcp.mcpServers')}
+          </div>
+          <section className="flex items-center justify-between">
+            <div className="text-text-secondary">
+              {t('mcp.customizeTheListOfMcpServers')}
+            </div>
+            <div className="flex gap-5">
+              <SearchInput
+                className="w-40"
+                value={searchString}
+                onChange={handleInputChange}
+              ></SearchInput>
+              <Button variant={'secondary'} onClick={switchSelectionMode}>
+                {isSelectionMode ? (
+                  <ListChecks className="size-3.5" />
+                ) : (
+                  <LayoutList className="size-3.5" />
+                )}
+                {t(`mcp.${isSelectionMode ? 'exitBulkManage' : 'bulkManage'}`)}
+              </Button>
+              <Button variant={'secondary'} onClick={showEditModal('')}>
+                <Plus className="size-3.5" /> {t('mcp.addMCP')}
+              </Button>
+              <Button onClick={showImportModal}>
+                <Download className="size-3.5" />
+                {t('mcp.import')}
+              </Button>
+            </div>
+          </section>
+        </>
+      }
+    >
+      {isSelectionMode && (
+        <section className="pb-5 flex items-center">
+          <Checkbox id="all" onCheckedChange={handleSelectAll} />
+          <Label
+            className="pl-2 text-text-primary cursor-pointer"
+            htmlFor="all"
+          >
+            {t('common.selectAll')}
+          </Label>
+          <span className="text-text-secondary pr-10 pl-5">
+            {t('mcp.selected')} {selectedList.length}
+          </span>
+          <div className="flex gap-10 items-center">
+            <Button variant={'secondary'} onClick={handleExportMcp}>
+              <Upload className="size-3.5"></Upload>
+              {t('mcp.export')}
+            </Button>
+            <ConfirmDeleteDialog onOk={handleDelete}>
+              <Button variant={'danger'}>
+                <Trash2 className="size-3.5 cursor-pointer" />
+                {t('common.delete')}
+              </Button>
+            </ConfirmDeleteDialog>
+          </div>
+        </section>
+      )}
+      <CardContainer>
+        {data.mcp_servers.map((item) => (
+          <McpCard
+            key={item.id}
+            data={item}
+            selectedList={selectedList}
+            handleSelectChange={handleSelectChange}
+            showEditModal={showEditModal}
+            isSelectionMode={isSelectionMode}
+          ></McpCard>
+        ))}
+      </CardContainer>
+      <div className="mt-8">
+        <RAGFlowPagination
+          {...pick(pagination, 'current', 'pageSize')}
+          total={pagination.total || 0}
+          onChange={handlePageChange}
+        ></RAGFlowPagination>
+      </div>
+      {editVisible && (
+        <EditMcpDialog
+          hideModal={hideEditModal}
+          onOk={handleOk}
+          id={id}
+          loading={loading}
+        ></EditMcpDialog>
+      )}
+      {importVisible && (
+        <ImportMcpDialog
+          hideModal={hideImportModal}
+          onOk={onImportOk}
+        ></ImportMcpDialog>
+      )}
+      <Spotlight />
+    </ProfileSettingWrapperCard>
+  );
+}

web/src/pages/user-setting/mcp/mcp-card.tsx

@@ -0,0 +1,74 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { IMcpServer } from '@/interfaces/database/mcp';
+import { formatDate } from '@/utils/date';
+import { isPlainObject } from 'lodash';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { McpOperation } from './mcp-operation';
+import { UseBulkOperateMCPReturnType } from './use-bulk-operate-mcp';
+import { UseEditMcpReturnType } from './use-edit-mcp';
+
+export type DatasetCardProps = {
+  data: IMcpServer;
+  isSelectionMode: boolean;
+} & Pick<UseBulkOperateMCPReturnType, 'handleSelectChange' | 'selectedList'> &
+  Pick<UseEditMcpReturnType, 'showEditModal'>;
+
+export function McpCard({
+  data,
+  selectedList,
+  handleSelectChange,
+  showEditModal,
+  isSelectionMode,
+}: DatasetCardProps) {
+  const { t } = useTranslation();
+  const toolLength = useMemo(() => {
+    const tools = data.variables?.tools;
+    if (isPlainObject(tools)) {
+      return Object.keys(tools || {}).length;
+    }
+    return 0;
+  }, [data.variables?.tools]);
+  const onCheckedChange = (checked: boolean) => {
+    if (typeof checked === 'boolean') {
+      handleSelectChange(data.id, checked);
+    }
+  };
+
+  return (
+    <Card key={data.id}>
+      <CardContent className="p-2.5 pt-2 group">
+        <section className="flex justify-between pb-2">
+          <h3 className="text-base font-normal truncate flex-1 text-text-primary">
+            {data.name}
+          </h3>
+          <div className="space-x-4">
+            {isSelectionMode ? (
+              <Checkbox
+                checked={selectedList.includes(data.id)}
+                onCheckedChange={onCheckedChange}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            ) : (
+              <McpOperation
+                mcpId={data.id}
+                showEditModal={showEditModal}
+              ></McpOperation>
+            )}
+          </div>
+        </section>
+        <div className="flex justify-between items-end text-xs text-text-secondary">
+          <div className="w-full">
+            <div className="line-clamp-1 pb-1">
+              {toolLength} {t('mcp.cachedTools')}
+            </div>
+            <p>{formatDate(data.update_date)}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/pages/user-setting/mcp/mcp-operation.tsx

@@ -0,0 +1,43 @@
+import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
+import { RAGFlowTooltip } from '@/components/ui/tooltip';
+import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
+import { PenLine, Trash2, Upload } from 'lucide-react';
+import { MouseEventHandler, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UseEditMcpReturnType } from './use-edit-mcp';
+import { useExportMcp } from './use-export-mcp';
+
+export function McpOperation({
+  mcpId,
+  showEditModal,
+}: { mcpId: string } & Pick<UseEditMcpReturnType, 'showEditModal'>) {
+  const { t } = useTranslation();
+  const { deleteMcpServer } = useDeleteMcpServer();
+  const { handleExportMcpJson } = useExportMcp();
+
+  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
+    deleteMcpServer([mcpId]);
+  }, [deleteMcpServer, mcpId]);
+
+  return (
+    <div className="hidden gap-3  group-hover:flex text-text-secondary">
+      <RAGFlowTooltip tooltip={t('mcp.export')}>
+        <Upload
+          className="size-3 cursor-pointer"
+          onClick={handleExportMcpJson([mcpId])}
+        />
+      </RAGFlowTooltip>
+      <RAGFlowTooltip tooltip={t('common.edit')}>
+        <PenLine
+          className="size-3 cursor-pointer"
+          onClick={showEditModal(mcpId)}
+        />
+      </RAGFlowTooltip>
+      <RAGFlowTooltip tooltip={t('common.delete')}>
+        <ConfirmDeleteDialog onOk={handleDelete}>
+          <Trash2 className="size-3 cursor-pointer" />
+        </ConfirmDeleteDialog>
+      </RAGFlowTooltip>
+    </div>
+  );
+}

web/src/pages/user-setting/mcp/tool-card.tsx

@@ -0,0 +1,16 @@
+import { IMCPTool } from '@/interfaces/database/mcp';
+
+export type McpToolCardProps = {
+  data: IMCPTool;
+};
+
+export function McpToolCard({ data }: McpToolCardProps) {
+  return (
+    <section className="group py-2.5">
+      <h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
+      <div className="text-xs font-normal text-text-secondary">
+        {data.description}
+      </div>
+    </section>
+  );
+}

web/src/pages/user-setting/mcp/use-bulk-operate-mcp.tsx

@@ -0,0 +1,56 @@
+import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
+import { IMcpServer } from '@/interfaces/database/mcp';
+import { Trash2, Upload } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useExportMcp } from './use-export-mcp';
+
+export function useBulkOperateMCP(mcpList: IMcpServer[]) {
+  const { t } = useTranslation();
+  const [selectedList, setSelectedList] = useState<Array<string>>([]);
+  const { deleteMcpServer } = useDeleteMcpServer();
+  const { handleExportMcpJson } = useExportMcp();
+
+  const handleDelete = useCallback(() => {
+    deleteMcpServer(selectedList);
+  }, [deleteMcpServer, selectedList]);
+
+  const handleSelectChange = useCallback((id: string, checked: boolean) => {
+    setSelectedList((list) => {
+      return checked ? [...list, id] : list.filter((item) => item !== id);
+    });
+  }, []);
+
+  const handleSelectAll = useCallback(
+    (checked: boolean) => {
+      setSelectedList(() => (checked ? mcpList.map((item) => item.id) : []));
+    },
+    [mcpList],
+  );
+
+  const list = [
+    {
+      id: 'export',
+      label: t('mcp.export'),
+      icon: <Upload />,
+      onClick: handleExportMcpJson(selectedList),
+    },
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      icon: <Trash2 />,
+      onClick: handleDelete,
+    },
+  ];
+
+  return {
+    list,
+    selectedList,
+    handleSelectChange,
+    handleDelete,
+    handleExportMcp: handleExportMcpJson(selectedList),
+    handleSelectAll,
+  };
+}
+
+export type UseBulkOperateMCPReturnType = ReturnType<typeof useBulkOperateMCP>;

web/src/pages/user-setting/mcp/use-edit-mcp.ts

@@ -0,0 +1,53 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import {
+  useCreateMcpServer,
+  useUpdateMcpServer,
+} from '@/hooks/use-mcp-request';
+import { useCallback, useState } from 'react';
+
+export const useEditMcp = () => {
+  const {
+    visible: editVisible,
+    hideModal: hideEditModal,
+    showModal: showEditModal,
+  } = useSetModalState();
+  const { createMcpServer, loading } = useCreateMcpServer();
+  const [id, setId] = useState('');
+
+  const { updateMcpServer, loading: updateLoading } = useUpdateMcpServer();
+
+  const handleShowModal = useCallback(
+    (id: string) => () => {
+      setId(id);
+      showEditModal();
+    },
+    [setId, showEditModal],
+  );
+
+  const handleOk = useCallback(
+    async (values: any) => {
+      let code;
+      if (id) {
+        code = await updateMcpServer({ ...values, mcp_id: id });
+      } else {
+        code = await createMcpServer(values);
+      }
+      if (code === 0) {
+        hideEditModal();
+      }
+    },
+    [createMcpServer, hideEditModal, id, updateMcpServer],
+  );
+
+  return {
+    editVisible,
+    hideEditModal,
+    showEditModal: handleShowModal,
+    loading: loading || updateLoading,
+    createMcpServer,
+    handleOk,
+    id,
+  };
+};
+
+export type UseEditMcpReturnType = ReturnType<typeof useEditMcp>;

web/src/pages/user-setting/mcp/use-export-mcp.ts

@@ -0,0 +1,21 @@
+import { useExportMcpServer } from '@/hooks/use-mcp-request';
+import { downloadJsonFile } from '@/utils/file-util';
+import { useCallback } from 'react';
+
+export function useExportMcp() {
+  const { exportMcpServer } = useExportMcpServer();
+
+  const handleExportMcpJson = useCallback(
+    (ids: string[]) => async () => {
+      const data = await exportMcpServer(ids);
+      if (data.code === 0) {
+        downloadJsonFile(data.data, `mcp.json`);
+      }
+    },
+    [exportMcpServer],
+  );
+
+  return {
+    handleExportMcpJson,
+  };
+}

web/src/pages/user-setting/mcp/use-import-mcp.ts

@@ -0,0 +1,73 @@
+import message from '@/components/ui/message';
+import { FileMimeType } from '@/constants/common';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useImportMcpServer } from '@/hooks/use-mcp-request';
+import { isEmpty } from 'lodash';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+const ServerEntrySchema = z.object({
+  authorization_token: z.string().optional(),
+  name: z.string().optional(),
+  tool_configuration: z.object({}).passthrough().optional(),
+  type: z.string(),
+  url: z.string().url(),
+});
+
+const McpConfigSchema = z.object({
+  mcpServers: z.record(ServerEntrySchema),
+});
+
+export const useImportMcp = () => {
+  const {
+    visible: importVisible,
+    hideModal: hideImportModal,
+    showModal: showImportModal,
+  } = useSetModalState();
+  const { t } = useTranslation();
+  const { importMcpServer, loading } = useImportMcpServer();
+
+  const onImportOk = useCallback(
+    async ({ fileList }: { fileList: File[] }) => {
+      if (fileList.length > 0) {
+        const file = fileList[0];
+        if (file.type !== FileMimeType.Json) {
+          message.error(t('flow.jsonUploadTypeErrorMessage'));
+          return;
+        }
+
+        const mcpStr = await file.text();
+        const errorMessage = t('flow.jsonUploadContentErrorMessage');
+        try {
+          const mcp = JSON.parse(mcpStr);
+          try {
+            McpConfigSchema.parse(mcp);
+          } catch (error) {
+            message.error('Incorrect data format');
+            return;
+          }
+          if (mcpStr && !isEmpty(mcp)) {
+            const ret = await importMcpServer(mcp);
+            if (ret.code === 0) {
+              hideImportModal();
+            }
+          } else {
+            message.error(errorMessage);
+          }
+        } catch (error) {
+          message.error(errorMessage);
+        }
+      }
+    },
+    [hideImportModal, importMcpServer, t],
+  );
+
+  return {
+    importVisible,
+    showImportModal,
+    hideImportModal,
+    onImportOk,
+    loading,
+  };
+};