Add server description and instructions support

aiqlcom · aiqlcom · commit 6725e5a1c040 · 2025-11-17T22:16:07.000+08:00
Introduces support for displaying server instructions and implementation details in configuration cards and metadata. Updates types and components to handle and render these new fields, including Markdown rendering for instructions and improved localization handling.
diff --git a/src/main/IPCs.ts b/src/main/IPCs.ts
@@ -361,5 +361,15 @@ export function registerIpcHandlers({
     }
   }
 
-  return feature
+  const instructions = connection.client.getInstructions()
+
+  const implementation = connection.client.getServerVersion()
+
+  return {
+    ...feature,
+    description: {
+      instructions,
+      implementation
+    }
+  }
 }
diff --git a/src/main/mcp/types.ts b/src/main/mcp/types.ts
@@ -15,7 +15,7 @@ import {
   StdioServerParameters
 } from '@modelcontextprotocol/sdk/client/stdio.js'
 
-import { McpMetadata } from '@/types/mcp'
+import { McpMetadata, McpServerDescription } from '@/types/mcp'
 
 export const McpServerCapabilitySchemas = {
   tools: {
@@ -67,4 +67,5 @@ export type McpClientObject = {
 export type McpFeatureObject = {
   name: string
   config: McpClientObject['configJson']
+  description?: McpServerDescription
 }
diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -178,17 +178,18 @@ const api = {
 }
 
 function buildClientAPI(client: ClientProfile): MCPAPI[string] {
-  const { name, tools, prompts, resources, config } = client
+  const { name, tools, prompts, resources, config, description } = client
   const apiItem: MCPAPI[string] = {}
 
   if (tools) apiItem.tools = createAPIMethods(tools)
   if (prompts) apiItem.prompts = createAPIMethods(prompts)
   if (resources) apiItem.resources = createAPIMethods(resources)
 
   const metadata = {
-    name: name,
+    name,
     type: 'metadata__stdio_config' as const,
-    config: config
+    config,
+    description
   }
 
   apiItem.metadata = metadata
diff --git a/src/renderer/components/common/ConfigDxtCard.vue b/src/renderer/components/common/ConfigDxtCard.vue
@@ -5,6 +5,7 @@ import { getDxtUrl, openDxtFilePath } from '@/renderer/utils'
 import { useDxtStore, validateNumberRange } from '@/renderer/store/dxt'
 import type { McpMetadataDxt, userConfigValue, McpbManifest, McpDxtErrors } from '@/types/mcp'
 import { useI18n } from 'vue-i18n'
+import MarkdownCard from '@/renderer/components/common/MarkdownCard.vue'
 const { t } = useI18n()
 
 const dxtStore = useDxtStore()
@@ -114,24 +115,13 @@ function hasErrors(config: McpbManifest | McpDxtErrors): config is McpDxtErrors
     </v-card>
   </div>
   <div v-else>
-    <v-card>
-      <template #title>
-        <div class="d-flex">
-          {{ $t('dxt.title') + ' - ' + metadata.name }}
-          <v-chip size="small" class="ml-2 mt-1 font-weight-bold" color="primary">
-            {{ manifest.version }}
-          </v-chip>
-        </div>
-      </template>
+    <v-card :title="$t('dxt.title')" :subtitle="metadata.name">
       <template #append>
-        <v-btn
-          color="primary"
-          variant="text"
-          rounded="lg"
-          icon="mdi-folder-open"
-          @click="openDxtFilePath(metadata.name)"
-        ></v-btn>
+        <v-chip size="small" class="font-weight-bold" color="primary">
+          {{ manifest.version }}
+        </v-chip>
       </template>
+
       <v-divider></v-divider>
       <v-card
         class="mx-auto"
@@ -144,8 +134,17 @@ function hasErrors(config: McpbManifest | McpDxtErrors): config is McpDxtErrors
             <v-img :src="getIcon(metadata)"></v-img>
           </v-avatar>
         </template>
-        <v-card-text class="wrap-text">
-          {{ manifest.long_description }}
+        <template #append>
+          <v-btn
+            color="primary"
+            variant="text"
+            rounded="lg"
+            icon="mdi-folder-open"
+            @click="openDxtFilePath(metadata.name)"
+          ></v-btn>
+        </template>
+        <v-card-text v-if="manifest.long_description">
+          <MarkdownCard :model-value="manifest.long_description"></MarkdownCard>
         </v-card-text>
       </v-card>
     </v-card>
diff --git a/src/renderer/components/common/ConfigStdioCard.vue b/src/renderer/components/common/ConfigStdioCard.vue
@@ -3,11 +3,17 @@ import { McpMetadataStdio } from '@/types/mcp'
 import { reactive, ref } from 'vue'
 import { useStdioStore } from '@/renderer/store/stdio'
 import { getRawServers } from '@/renderer/store/mcp'
+
 import McpEditPage from '@/renderer/components/pages/McpEditPage.vue'
+
+import MarkdownCard from '@/renderer/components/common/MarkdownCard.vue'
+
 const stdioStore = useStdioStore()
 
 const editDialog = ref(false)
 
+const show = ref(false)
+
 const showPassword = reactive<Record<string, boolean>>({})
 
 const props = defineProps({
@@ -33,7 +39,15 @@ const editConfig = () => {
 </script>
 
 <template>
-  <v-card title="Stdio Config">
+  <v-card :title="$t('mcp.stdio')">
+    <template v-if="metadata.description?.implementation" #subtitle>
+      {{ metadata.description?.implementation.title ?? metadata.description?.implementation.name }}
+    </template>
+    <template v-if="metadata.description?.implementation.version" #append>
+      <v-chip size="small" class="font-weight-bold" color="primary">{{
+        metadata.description.implementation.version
+      }}</v-chip>
+    </template>
     <v-divider></v-divider>
     <v-card-text>
       <div v-for="(value, key) in metadata.config" :key="key" class="ma-2">
@@ -104,6 +118,11 @@ const editConfig = () => {
     </v-card-text>
     <v-divider></v-divider>
     <v-card-actions>
+      <v-btn
+        v-if="metadata.description?.instructions"
+        :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+        @click="show = !show"
+      ></v-btn>
       <v-spacer> </v-spacer>
       <v-btn
         v-if="metadata.name in (getRawServers() ?? {})"
@@ -133,6 +152,15 @@ const editConfig = () => {
       >
       </v-btn>
     </v-card-actions>
+    <v-expand-transition v-if="metadata.description?.instructions">
+      <div v-show="show">
+        <v-divider></v-divider>
+
+        <v-card-text class="ma-2">
+          <MarkdownCard :model-value="metadata.description.instructions"></MarkdownCard
+        ></v-card-text>
+      </div>
+    </v-expand-transition>
   </v-card>
   <McpEditPage v-model="editDialog" v-model:name="metadata.name"></McpEditPage>
 </template>
diff --git a/src/renderer/components/common/MarkdownCard.vue b/src/renderer/components/common/MarkdownCard.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { MdPreview, config } from 'md-editor-v3'
+import { useI18n } from 'vue-i18n'
+const { locale } = useI18n()
+
 import 'md-editor-v3/lib/style.css'
 
 import katex from 'katex'
@@ -39,7 +42,6 @@ config({
 interface Props {
   modelValue: string
   codeFoldable?: boolean
-  language?: string
   autoFoldThreshold?: number
 }
 
@@ -54,7 +56,7 @@ withDefaults(defineProps<Props>(), {
   <md-preview
     :model-value="modelValue"
     :code-foldable="codeFoldable"
-    :language="language"
+    :language="locale === 'zh' ? 'zh-CN' : 'en-US'"
     :auto-fold-threshold="autoFoldThreshold"
   />
 </template>
diff --git a/src/renderer/components/pages/ChatPage.vue b/src/renderer/components/pages/ChatPage.vue
@@ -30,7 +30,6 @@ const { smAndUp } = useDisplay()
 
 const props = defineProps<{
   messages: Message[]
-  language: string
 }>()
 
 const emit = defineEmits<{
@@ -185,10 +184,7 @@ const groupMessages = computed<Group[]>(() => {
                 />
               </v-card-text>
               <v-card-text v-else class="md-preview pt-3">
-                <MarkdownCard
-                  :model-value="group.message!.content"
-                  :language="language === 'zh' ? 'zh-CN' : 'en-US'"
-                ></MarkdownCard>
+                <MarkdownCard :model-value="group.message!.content"></MarkdownCard>
               </v-card-text>
             </template>
           </chat-card>
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
@@ -42,6 +42,7 @@
   },
   "mcp": {
     "config": "Server Config",
+    "stdio": "Stdio Config",
     "file": "Archive File",
     "add": "Add MCP Server",
     "init": "Start MCP Servers",
diff --git a/src/renderer/locales/zh.json b/src/renderer/locales/zh.json
@@ -1,7 +1,7 @@
 {
   "desc": {},
   "dxt": {
-    "title": "MCP扩展包",
+    "title": "MCP 扩展包",
     "name": "名称",
     "version": "版本",
     "description": "介绍",
@@ -42,6 +42,7 @@
   },
   "mcp": {
     "config": "服务端配置",
+    "stdio": "Stdio 配置",
     "file": "文件压缩包",
     "add": "新增 MCP 服务端",
     "init": "启动 MCP 服务端",
diff --git a/src/renderer/screens/chat/ChatScreen.vue b/src/renderer/screens/chat/ChatScreen.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import ChatPage from '@/renderer/components/pages/ChatPage.vue'
 import CommandCard from '@/renderer/components/common/CommandCard.vue'
 import { useMessageStore } from '@/renderer/store/message'
 import RobotJSON from '@/public/lotties/robot.json'
 
 const messageStore = useMessageStore()
-
-const { locale } = useI18n()
 </script>
 
 <template>
   <CommandCard></CommandCard>
   <ChatPage
     v-if="messageStore.conversation.messages.length > 0"
     :messages="messageStore.conversation.messages"
-    :language="locale"
     @request-delete="messageStore.deleteMessage"
   >
   </ChatPage>
diff --git a/src/renderer/store/mcp.ts b/src/renderer/store/mcp.ts
@@ -71,6 +71,31 @@ function getObjectKeys(o: unknown) {
   return o && typeof o === 'object' && !Array.isArray(o) ? Object.keys(o) : []
 }
 
+function getSelectedByServer(
+  serverName: string,
+  selectedIndex: number | undefined,
+  _version: number
+): McpCoreType | null {
+  const mcpServers = getServers()
+  if (!mcpServers || !mcpServers[serverName]) return null
+  console.log(mcpServers[serverName])
+  if (typeof selectedIndex === 'number') {
+    const selectedPrimitive = {
+      server: serverName,
+      primitive: Object.keys(mcpServers[serverName])[selectedIndex] as McpPrimitiveType,
+      method: Object.values(mcpServers[serverName])[selectedIndex] as McpMethodType
+    }
+    console.log(selectedPrimitive)
+    return selectedPrimitive
+  } else {
+    return {
+      server: serverName,
+      primitive: 'metadata',
+      method: JSON.stringify(mcpServers[serverName].metadata, null, 2)
+    }
+  }
+}
+
 export const useMcpStore = defineStore('mcpStore', {
   // TODO: fix any to type
   state: (): any => ({
@@ -85,32 +110,12 @@ export const useMcpStore = defineStore('mcpStore', {
   getters: {
     getSelected(state): McpCoreType | null {
       if (state.selected) {
-        return this.getSelectedByServer(state.selected[0])
+        const serverName = state.selected[0]
+        const selectedIndex = state.selectedChips[serverName]
+        return getSelectedByServer(serverName, selectedIndex, state.version)
       } else {
         return null
       }
-    },
-    getSelectedByServer(state) {
-      return (serverName: string): McpCoreType | null => {
-        const mcpServers = getServers()
-        if (!mcpServers || !mcpServers[serverName]) return null
-        const selectedIndex = state.selectedChips[serverName]
-        if (typeof selectedIndex === 'number') {
-          const selectedPrimitive = {
-            server: serverName,
-            primitive: Object.keys(mcpServers[serverName])[selectedIndex] as McpPrimitiveType,
-            method: Object.values(mcpServers[serverName])[selectedIndex] as McpMethodType
-          }
-          console.log(selectedPrimitive)
-          return selectedPrimitive
-        } else {
-          return {
-            server: serverName,
-            primitive: 'metadata',
-            method: JSON.stringify(mcpServers[serverName].metadata, null, 2)
-          }
-        }
-      }
     }
   },
 
diff --git a/src/types/mcp.d.ts b/src/types/mcp.d.ts
@@ -10,7 +10,8 @@ import type {
   ListPromptsRequest,
   ListPromptsResult,
   GetPromptRequest,
-  GetPromptResult
+  GetPromptResult,
+  Implementation as McpServerImplementation
 } from '@modelcontextprotocol/sdk/types.d.ts'
 
 import { StdioServerParameters } from '@modelcontextprotocol/sdk/client/stdio.js'
@@ -42,6 +43,7 @@ export type McpMetadataStdio = {
   name: string
   type: 'metadata__stdio_config'
   config: StdioServerParameters
+  description?: McpServerDescription
 }
 
 type McpDxtError = {
@@ -99,4 +101,10 @@ export type ClientProfile = {
   prompts?: Record<string, string>
   resources?: Record<string, string>
   config?: StdioServerParameters
+  description?: McpServerDescription
+}
+
+export type McpServerDescription = {
+  instructions: string
+  implementation: McpServerImplementation
 }

Original file line number	Diff line number	Diff line change
`@@ -361,5 +361,15 @@ export function registerIpcHandlers({`
`361`	`361`	`}`
`362`	`362`	`}`
`363`	`363`
`364`		`- return feature`
	`364`	`+ const instructions = connection.client.getInstructions()`
	`365`	`+`
	`366`	`+ const implementation = connection.client.getServerVersion()`
	`367`	`+`
	`368`	`+ return {`
	`369`	`+ ...feature,`
	`370`	`+ description: {`
	`371`	`+ instructions,`
	`372`	`+ implementation`
	`373`	`+ }`
	`374`	`+ }`
`365`	`375`	`}`