From f0fca59f315b86e6b87654ff243efb8bd41f65f4 Mon Sep 17 00:00:00 2001 From: jZonG Date: Tue, 27 May 2025 16:42:51 +0800 Subject: [PATCH] MCP server create & update --- .../components/tools/mcp/mcp-server-modal.tsx | 92 ++++++++++++++----- .../components/tools/mcp/mcp-service-card.tsx | 21 +++-- web/service/use-tools.ts | 25 ++--- 3 files changed, 97 insertions(+), 41 deletions(-) diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx index 3783291172..1b4c2475df 100644 --- a/web/app/components/tools/mcp/mcp-server-modal.tsx +++ b/web/app/components/tools/mcp/mcp-server-modal.tsx @@ -7,30 +7,75 @@ import Button from '@/app/components/base/button' import Textarea from '@/app/components/base/textarea' import Divider from '@/app/components/base/divider' import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item' +import type { + MCPServerDetail, +} from '@/app/components/tools/types' +import { + useCreateMCPServer, + useInvalidateMCPServerDetail, + useUpdateMCPServer, +} from '@/service/use-tools' import cn from '@/utils/classnames' export type ModalProps = { - latestParams?: any - data?: any + appID: string + latestParams?: any[] + data?: MCPServerDetail show: boolean - onConfirm: () => void onHide: () => void } const MCPServerModal = ({ - // latestParams, + appID, + latestParams = [], data, show, - onConfirm, onHide, }: ModalProps) => { const { t } = useTranslation() + const { mutateAsync: createMCPServer, isPending: creating } = useCreateMCPServer() + const { mutateAsync: updateMCPServer, isPending: updating } = useUpdateMCPServer() + const invalidateMCPServerDetail = useInvalidateMCPServerDetail() - const [description, setDescription] = React.useState('') + const [description, setDescription] = React.useState(data?.description || '') + const [params, setParams] = React.useState(data?.parameters || {}) + + const handleParamChange = (variable: string, value: string) => { + setParams(prev => ({ + ...prev, + [variable]: value, + })) + } + + const getParamValue = () => { + const res = {} as any + latestParams.map((param) => { + res[param.variable] = params[param.variable] + return param + }) + return res + } const submit = async () => { - await onConfirm() - onHide() + if (!data) { + await createMCPServer({ + appID, + description, + parameters: getParamValue(), + }) + invalidateMCPServerDetail(appID) + onHide() + } + else { + await updateMCPServer({ + appID, + id: data.id, + description, + parameters: getParamValue(), + }) + invalidateMCPServerDetail(appID) + onHide() + } } return ( @@ -58,22 +103,27 @@ const MCPServerModal = ({ onChange={e => setDescription(e.target.value)} > -
-
-
{t('tools.mcp.server.modal.parameters')}
- + {latestParams.length > 0 && ( +
+
+
{t('tools.mcp.server.modal.parameters')}
+ +
+
{t('tools.mcp.server.modal.parametersTip')}
+
+ {latestParams.map(paramItem => ( + handleParamChange(paramItem.variable, value)} + /> + ))} +
-
{t('tools.mcp.server.modal.parametersTip')}
-
- ({})} - /> -
-
+ )}
- +
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx index 1d3a191425..96afc7cc73 100644 --- a/web/app/components/tools/mcp/mcp-service-card.tsx +++ b/web/app/components/tools/mcp/mcp-service-card.tsx @@ -1,5 +1,5 @@ 'use client' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { RiLoopLeftLine, @@ -23,6 +23,7 @@ import { useAppWorkflow } from '@/service/use-workflow' import { useMCPServerDetail, } from '@/service/use-tools' +import { BlockEnum } from '@/app/components/workflow/types' import cn from '@/utils/classnames' export type IAppCardProps = { @@ -48,11 +49,17 @@ function MCPServiceCard({ const serverPublished = !!id const serverActivated = status === 'active' const serverURL = serverPublished ? `${globalThis.location.protocol}//${globalThis.location.host}/api/server/${server_code}/mcp` : '***********' - const toggleDisabled = !isCurrentWorkspaceEditor || appUnpublished const [activated, setActivated] = useState(serverActivated) + const latestParams = useMemo(() => { + if (!currentWorkflow?.graph) + return [] + const startNode = currentWorkflow?.graph.nodes.find(node => node.data.type === BlockEnum.Start) as any + return startNode?.data.variables as any[] || [] + }, [currentWorkflow]) + const onGenCode = async () => { if (onGenerateCode) { setGenLoading(true) @@ -80,10 +87,6 @@ function MCPServiceCard({ setActivated(false) } - const handleServerModalConfirm = () => { - setShowMCPServerModal(false) - } - useEffect(() => { setActivated(serverActivated) }, [serverActivated]) @@ -164,7 +167,7 @@ function MCPServiceCard({ variant='ghost' onClick={() => setShowMCPServerModal(true)} > - {serverPublished ? t('tools.mcp.server.editDescription') : t('tools.mcp.server.addDescription')} + {serverPublished ? t('tools.mcp.server.edit') : t('tools.mcp.server.addDescription')} @@ -172,7 +175,9 @@ function MCPServiceCard({ {showMCPServerModal && ( )} diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts index b00420bd71..9c5363e23e 100644 --- a/web/service/use-tools.ts +++ b/web/service/use-tools.ts @@ -183,11 +183,17 @@ export const useMCPServerDetail = (appID: string) => { }) } -export const useCreateMCPServer = ({ - onSuccess, -}: { - onSuccess?: () => void -}) => { +export const useInvalidateMCPServerDetail = () => { + const queryClient = useQueryClient() + return (appID: string) => { + queryClient.invalidateQueries( + { + queryKey: [NAME_SPACE, 'MCPServerDetail', appID], + }) + } +} + +export const useCreateMCPServer = () => { return useMutation({ mutationKey: [NAME_SPACE, 'create-mcp-server'], mutationFn: (payload: { @@ -202,19 +208,15 @@ export const useCreateMCPServer = ({ }, }) }, - onSuccess, }) } -export const useUpdateMCPServer = ({ - onSuccess, -}: { - onSuccess?: () => void -}) => { +export const useUpdateMCPServer = () => { return useMutation({ mutationKey: [NAME_SPACE, 'update-mcp-server'], mutationFn: (payload: { appID: string + id: string description?: string status?: string parameters?: Record @@ -226,7 +228,6 @@ export const useUpdateMCPServer = ({ }, }) }, - onSuccess, }) }