MCP create

web/app/components/tools/mcp/create-card.tsx

@@ -7,9 +7,11 @@ import {
   RiArrowRightUpLine,
   RiBookOpenLine,
 } from '@remixicon/react'
+import MCPModal from './modal'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import { useAppContext } from '@/context/app-context'
+import { useCreateMCP } from '@/service/use-tools'
 
 type Props = {
   handleCreate: () => void
@@ -21,6 +23,10 @@ const NewMCPCard = ({ handleCreate }: Props) => {
   const language = getLanguage(locale)
   const { isCurrentWorkspaceManager } = useAppContext()
 
+  const { mutate: createMCP } = useCreateMCP({
+    onSuccess: handleCreate,
+  })
+
   const linkUrl = useMemo(() => {
     // TODO help link
     if (language.startsWith('zh_'))
@@ -51,6 +57,13 @@ const NewMCPCard = ({ handleCreate }: Props) => {
           </div>
         </div>
       )}
+      {showModal && (
+        <MCPModal
+          show={showModal}
+          onConfirm={createMCP}
+          onHide={() => setShowModal(false)}
+        />
+      )}
     </>
   )
 }

web/app/components/tools/mcp/index.tsx

@@ -4,7 +4,7 @@ import NewMCPCard from './create-card'
 import MCPCard from './provider-card'
 import MCPDetailPanel from './provider-detail'
 import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
-import type { MCPProvider } from '@/app/components/tools/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -43,7 +43,7 @@ const MCPList = ({
     })
   }, [list, searchText])
 
-  const [currentProvider, setCurrentProvider] = useState<MCPProvider>()
+  const [currentProvider, setCurrentProvider] = useState<ToolWithProvider>()
 
   return (
     <>

web/app/components/tools/mcp/modal.tsx

@@ -0,0 +1,131 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import AppIcon from '@/app/components/base/app-icon'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import type { AppIconType } from '@/types/app'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import { noop } from 'lodash-es'
+import cn from '@/utils/classnames'
+
+export type DuplicateAppModalProps = {
+  data?: ToolWithProvider
+  show: boolean
+  onConfirm: (info: {
+    name: string
+    server_url: string
+    icon_type: AppIconType
+    icon: string
+    icon_background?: string | null
+  }) => void
+  onHide: () => void
+}
+
+const DEFAULT_ICON = { type: 'emoji', icon: '🧿', background: '#EFF1F5' }
+const extractFileId = (url: string) => {
+  const match = url.match(/files\/(.+?)\/file-preview/)
+  return match ? match[1] : null
+}
+const getIcon = (data?: ToolWithProvider) => {
+  if (!data)
+    return DEFAULT_ICON as AppIconSelection
+  if (typeof data.icon === 'string')
+    return { type: 'image', url: data.icon, fileId: extractFileId(data.icon) } as AppIconSelection
+  return data.icon as unknown as AppIconSelection
+}
+
+const MCPModal = ({
+  data,
+  show,
+  onConfirm,
+  onHide,
+}: DuplicateAppModalProps) => {
+  const { t } = useTranslation()
+
+  const [name, setName] = React.useState(data?.name || '')
+  const [appIcon, setAppIcon] = useState<AppIconSelection>(getIcon(data))
+  const [url, setUrl] = React.useState(data?.server_url || '')
+  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
+
+  const submit = async () => {
+    await onConfirm({
+      name,
+      server_url: url,
+      icon_type: appIcon.type,
+      icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
+      icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
+    })
+    onHide()
+  }
+
+  return (
+    <>
+      <Modal
+        isShow={show}
+        onClose={noop}
+        className={cn('relative !max-w-[520px]', 'p-6')}
+      >
+        <div className='absolute right-5 top-5 z-10 cursor-pointer p-1.5' onClick={onHide}>
+          <RiCloseLine className='h-5 w-5 text-text-tertiary' />
+        </div>
+        <div className='title-2xl-semi-bold relative pb-3 text-xl text-text-primary'>{t('tools.mcp.modal.title')}</div>
+        <div className='space-y-5 py-3'>
+          <div className='flex space-x-3'>
+            <div className='grow pb-1'>
+              <div className='mb-1 flex h-6 items-center'>
+                <span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.name')}</span>
+              </div>
+              <Input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder={t('tools.mcp.modal.namePlaceholder')}
+              />
+            </div>
+            <div className='pt-2'>
+              <AppIcon
+                iconType={appIcon.type}
+                icon={appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId}
+                background={appIcon.type === 'emoji' ? appIcon.background : undefined}
+                imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+                size='xxl' className='cursor-pointer rounded-2xl'
+                onClick={() => { setShowAppIconPicker(true) }}
+              />
+            </div>
+          </div>
+          <div>
+            <div className='mb-1 flex h-6 items-center'>
+              <span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.serverUrl')}</span>
+            </div>
+            <Input
+              value={url}
+              onChange={e => setUrl(e.target.value)}
+              placeholder={t('tools.mcp.modal.serverUrlPlaceholder')}
+            />
+          </div>
+        </div>
+        <div className='flex flex-row-reverse pt-5'>
+          <Button disabled={!name || !url} className='ml-2' variant='primary' onClick={submit}>{t('tools.mcp.modal.confirm')}</Button>
+          <Button onClick={onHide}>{t('tools.mcp.modal.cancel')}</Button>
+        </div>
+      </Modal>
+      {showAppIconPicker && <AppIconPicker
+        onSelect={(payload) => {
+          setAppIcon(payload)
+          setShowAppIconPicker(false)
+        }}
+        onClose={() => {
+          setAppIcon(getIcon(data))
+          setShowAppIconPicker(false)
+        }}
+      />}
+    </>
+
+  )
+}
+
+export default MCPModal

web/i18n/en-US/tools.ts

@@ -162,6 +162,15 @@ const translation = {
     updateTime: 'Updated',
     toolsCount: '{{count}} tools',
     noTools: 'No tools available',
+    modal: {
+      title: 'Add MCP Server (HTTP)',
+      name: 'Name & Icon',
+      namePlaceholder: 'Name your MCP server',
+      serverUrl: 'Server URL',
+      serverUrlPlaceholder: 'URL to server endpiont',
+      cancel: 'Cancel',
+      confirm: 'Add & Authorize',
+    },
   },
 }
 

web/i18n/zh-Hans/tools.ts

@@ -162,6 +162,15 @@ const translation = {
     updateTime: '更新于',
     toolsCount: '{{count}} 个工具',
     noTools: '没有可用的工具',
+    modal: {
+      title: '添加 MCP 服务 (HTTP)',
+      name: '名称和图标',
+      namePlaceholder: '命名你的 MCP 服务',
+      serverUrl: '服务端点 URL',
+      serverUrlPlaceholder: '服务端点的 URL',
+      cancel: '取消',
+      confirm: '添加并授权',
+    },
   },
 }
 

web/service/use-tools.ts

@@ -4,6 +4,7 @@ import type {
   Tool,
 } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { AppIconType } from '@/types/app'
 import { useInvalid } from './use-base'
 import {
   useMutation,
@@ -78,6 +79,32 @@ export const useInvalidateAllMCPTools = () => {
   return useInvalid(useAllMCPToolsKey)
 }
 
+export const useCreateMCP = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'create-mcp'],
+    mutationFn: (payload: {
+      name: string
+      server_url: string
+      icon_type: AppIconType
+      icon: string
+      icon_background?: string | null
+    }) => {
+      console.log('payload', payload)
+      return Promise.resolve(payload)
+      // return post('/console/api/workspaces/current/tool-provider/mcp', {
+      //   body: {
+      //     ...payload,
+      //   },
+      // })
+    },
+    onSuccess,
+  })
+}
+
 export const useBuiltinProviderInfo = (providerName: string) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'builtin-provider-info', providerName],