add server identifier

web/app/components/tools/mcp/detail/content.tsx

@@ -2,6 +2,7 @@
 import React, { useCallback, useEffect } from 'react'
 import type { FC } from 'react'
 import { useBoolean } from 'ahooks'
+import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import { useAppContext } from '@/context/app-context'
 import {
@@ -15,6 +16,7 @@ import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Indicator from '@/app/components/header/indicator'
+import Tooltip from '@/app/components/base/tooltip'
 import MCPModal from '../modal'
 import OperationDropdown from './operation-dropdown'
 import ListLoading from './list-loading'
@@ -159,7 +161,15 @@ const MCPDetailContent: FC<Props> = ({
             <div className='flex h-5 items-center'>
               <div className='system-md-semibold truncate text-text-primary' title={detail.name}>{detail.name}</div>
             </div>
-            <div className='system-xs-regular mt-0.5 truncate text-text-tertiary' title={detail.server_url}>{detail.server_url}</div>
+            <div className='mt-0.5 flex items-center gap-1'>
+              <Tooltip popupContent={t('tools.mcp.identifier')}>
+                <div className='system-xs-regular shrink-0 cursor-pointer text-text-secondary' onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
+              </Tooltip>
+              <div className='system-xs-regular shrink-0 text-text-quaternary'>·</div>
+              <Tooltip popupContent={t('tools.mcp.modal.serverUrl')}>
+                <div className='system-xs-regular truncate text-text-secondary'>{detail.server_url}</div>
+              </Tooltip>
+            </div>
           </div>
           <div className='flex gap-1'>
             <OperationDropdown

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

@@ -23,6 +23,7 @@ export type DuplicateAppModalProps = {
     icon_type: AppIconType
     icon: string
     icon_background?: string | null
+    server_identifier: string
   }) => void
   onHide: () => void
 }
@@ -53,10 +54,11 @@ const MCPModal = ({
   const { t } = useTranslation()
 
   const originalServerUrl = data?.server_url
+  const [url, setUrl] = React.useState(data?.server_url || '')
   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 [serverIdentifier, setServerIdentifier] = React.useState(data?.server_identifier || '')
 
   const isValidUrl = (string: string) => {
     try {
@@ -73,12 +75,14 @@ const MCPModal = ({
       Toast.notify({ type: 'error', message: 'invalid server url' })
       return
     }
+    // TODO server identifier validation
     await onConfirm({
-      name,
       server_url: originalServerUrl === url ? '[__HIDDEN__]' : url.trim(),
+      name,
       icon_type: appIcon.type,
       icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
       icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
+      server_identifier: serverIdentifier.trim(),
     })
     onHide()
   }
@@ -132,9 +136,20 @@ const MCPModal = ({
               />
             </div>
           </div>
+          <div>
+            <div className='flex h-6 items-center'>
+              <span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.serverIdentifier')}</span>
+            </div>
+            <div className='body-xs-regular mb-1 text-text-tertiary'>{t('tools.mcp.modal.serverIdentifierTip')}</div>
+            <Input
+              value={serverIdentifier}
+              onChange={e => setServerIdentifier(e.target.value)}
+              placeholder={t('tools.mcp.modal.serverIdentifierPlaceholder')}
+            />
+          </div>
         </div>
         <div className='flex flex-row-reverse pt-5'>
-          <Button disabled={!name || !url} className='ml-2' variant='primary' onClick={submit}>{data ? t('tools.mcp.modal.save') : t('tools.mcp.modal.confirm')}</Button>
+          <Button disabled={!name || !url || !serverIdentifier} className='ml-2' variant='primary' onClick={submit}>{data ? t('tools.mcp.modal.save') : t('tools.mcp.modal.confirm')}</Button>
           <Button onClick={onHide}>{t('tools.mcp.modal.cancel')}</Button>
         </div>
       </Modal>

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

@@ -90,7 +90,11 @@ const MCPCard = ({
         </div>
         <div className='grow'>
           <div className='system-md-semibold mb-1 truncate text-text-secondary' title={data.name}>{data.name}</div>
-          <div className='flex items-center gap-2'>
+          <div className='system-xs-regular text-text-tertiary'>{data.server_identifier}</div>
+        </div>
+      </div>
+      <div className='flex items-center gap-1 rounded-b-xl pb-2.5 pl-4 pr-2.5 pt-1.5'>
+        <div className='flex grow items-center gap-2'>
           <div className='flex items-center gap-1'>
             <RiHammerFill className='h-3 w-3 shrink-0 text-text-quaternary' />
             {data.tools.length > 0 && (
@@ -101,12 +105,8 @@ const MCPCard = ({
             )}
           </div>
           <div className='system-xs-regular text-divider-deep'>/</div>
-            <div className='system-xs-regular truncate text-text-tertiary'>{`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.updated_at! * 1000)}`}</div>
+          <div className='system-xs-regular truncate text-text-tertiary' title={`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.updated_at! * 1000)}`}>{`${t('tools.mcp.updateTime')} ${formatTimeFromNow(data.updated_at! * 1000)}`}</div>
         </div>
-        </div>
-      </div>
-      <div className='flex items-center gap-1 rounded-b-xl pb-2.5 pl-4 pr-2.5 pt-1.5'>
-        <div className='system-xs-regular grow truncate text-text-tertiary' title={data.server_url}>{data.server_url}</div>
         {data.is_team_authorization && data.tools.length > 0 && <Indicator color='green' className='shrink-0' />}
         {(!data.is_team_authorization || !data.tools.length) && (
           <div className='system-xs-medium flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 text-util-colors-red-red-500'>

web/app/components/tools/types.ts

@@ -54,6 +54,7 @@ export type Collection = {
   // MCP Server
   server_url?: string
   updated_at?: number
+  server_identifier?: string
 }
 
 export type ToolParameter = {

web/i18n/en-US/tools.ts

@@ -169,6 +169,9 @@ const translation = {
       serverUrl: 'Server URL',
       serverUrlPlaceholder: 'URL to server endpiont',
       warning: 'Updating the server address may affect applications currently using this MCP',
+      serverIdentifier: 'Server Identifier',
+      serverIdentifierTip: 'This text will be displayed on the client side, providing basic guidance on how to use the application',
+      serverIdentifierPlaceholder: 'Unique identifier for this server',
       cancel: 'Cancel',
       save: 'Save',
       confirm: 'Add & Authorize',
@@ -191,6 +194,7 @@ const translation = {
     getTools: 'Get tools',
     toolsNum: '{{count}} tools included',
     onlyTool: '1 tool included',
+    identifier: 'Server Identifier (Click to Copy)',
     server: {
       title: 'MCP Server',
       url: 'Server URL',

web/i18n/zh-Hans/tools.ts

@@ -169,6 +169,9 @@ const translation = {
       serverUrl: '服务端点 URL',
       serverUrlPlaceholder: '服务端点的 URL',
       warning: '修改服务端点 URL 可能会影响使用当前 MCP 的应用。',
+      serverIdentifier: '服务器标识符',
+      serverIdentifierTip: '此文本将在客户端显示，为如何使用应用程序提供基本指导',
+      serverIdentifierPlaceholder: '此服务器的唯一标识符',
       cancel: '取消',
       save: '保存',
       confirm: '添加并授权',
@@ -191,6 +194,7 @@ const translation = {
     getTools: '获取工具',
     toolsNum: '包含 {{count}} 个工具',
     onlyTool: '包含 1 个工具',
+    identifier: '服务器标识符 (点击复制)',
     server: {
       title: 'MCP 服务',
       url: '服务端点 URL',