Support selective startup of MCP servers

Author: aiqlcom

src/main/IPCs.ts

@@ -79,18 +79,23 @@ export default class IPCs {
           mcpServersCallback({ name, message, status })
         }
 
+        const configs = await loadConfig()
+
         try {
           const newClients = await initClients(metadata, progressCallback)
-          const features = newClients.map((params) => {
-            return registerIpcHandlers(params)
-          })
-
+          const activeClientNames = newClients.map((client) => client.name)
+          const inactiveConfigs = configs.filter(
+            (config) => !activeClientNames.includes(config.name)
+          )
+
+          const features = [
+            ...newClients.map((params) => registerIpcHandlers(params)),
+            ...inactiveConfigs.map((params) => registerIpcHandlers(params))
+          ]
           IPCs.updateMCP(features)
           this.clients = newClients
           return features
         } catch (error) {
-          const configs = await loadConfig()
-
           const features = configs.map((params) => {
             return registerIpcHandlers(params)
           })

src/renderer/components/layouts/HeaderLayout.vue

@@ -1,4 +1,4 @@
-<script setup lang="tsx">
+<script setup lang="ts">
 import { watchEffect, computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useLayoutStore, getScreenFromPath } from '@/renderer/store/layout'

src/renderer/components/pages/McpProcessPage.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { McpEvent } from '@/renderer/utils'
+import { useMcpStore } from '@/renderer/store/mcp'
 import { useLayoutStore } from '@/renderer/store/layout'
 import { ref, watch, computed } from 'vue'
 
 const layoutStore = useLayoutStore()
+const mcpStore = useMcpStore()
 
 interface ProgressItem {
   messages: string[]
@@ -40,7 +42,9 @@ McpEvent.watch(handleProgress)
 const isLoading = computed(() => layoutStore.mcpLoading)
 
 const allSuccess = computed(() => {
-  return Object.values(progressMap.value).every((item) => item.status === 'success')
+  return Object.entries(progressMap.value).every(
+    ([key, item]) => item.status === 'success' || !mcpStore.checkList.includes(key)
+  )
 })
 
 watch(isLoading, (newVal, oldVal) => {

src/renderer/screens/mcp/McpSideDock.vue

@@ -6,6 +6,7 @@ import { useLayoutStore } from '@/renderer/store/layout'
 import { useSnackbarStore } from '@/renderer/store/snackbar'
 import McpDxtPage from '@/renderer/components/pages/McpDxtPage.vue'
 import McpAddPage from '@/renderer/components/pages/McpAddPage.vue'
+import { pick } from 'lodash'
 
 const snackbarStore = useSnackbarStore()
 
@@ -34,8 +35,11 @@ async function stopAllMcpServers() {
 async function activeAllMcpServers() {
   layoutStore.mcpLoading = 'start'
   try {
-    const configs = getServers()
-    const result = await McpEvent.init(configs)
+    const configs = getServers() ?? {}
+
+    const filteredConfigs = pick(configs, mcpStore.checkList)
+
+    const result = await McpEvent.init(filteredConfigs)
     console.log(result)
     await mcpStore.updateServers()
     if (result.status == 'error') {

src/renderer/screens/mcp/McpSideDrawer.vue

@@ -1,26 +1,38 @@
 <script setup lang="ts">
 import { useMcpStore, getAllowedPrimitive, getServers } from '@/renderer/store/mcp'
 const mcpStore = useMcpStore()
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  mcpStore.watchServerUpdate()
+})
 </script>
 
 <template>
-  <v-list :key="mcpStore.version" v-model:selected="mcpStore.selected" nav mandatory>
-    <v-list-item
-      v-for="(item, key) in getServers()"
-      :key="key"
-      two-line
-      :value="key"
-      link
-      :ripple="false"
-    >
+  <v-list
+    :key="mcpStore.version"
+    v-model:selected="mcpStore.selected"
+    nav
+    mandatory
+    density="compact"
+  >
+    <v-list-item v-for="(item, key) in getServers()" :key="key" :value="key" :ripple="false">
       <template #title>
         <div class="d-flex align-center">
-          <v-list-item-title class="pt-1">
+          <v-checkbox
+            v-model="mcpStore.checkList"
+            class="pr-1"
+            density="compact"
+            glow
+            hide-details
+            color="secondary"
+            :value="key"
+          ></v-checkbox>
+          <v-list-item-title>
             {{ key }}
           </v-list-item-title>
           <v-spacer></v-spacer>
           <v-btn
-            class="mt-1"
             size="small"
             color="primary"
             icon="mdi-cog"
@@ -29,22 +41,25 @@ const mcpStore = useMcpStore()
           ></v-btn>
         </div>
       </template>
-      <v-chip-group
-        v-model="mcpStore.selectedChips[key]"
-        :direction="mcpStore.selected?.[0] === key ? 'vertical' : undefined"
-        mandatory
-      >
-        <v-chip
-          v-for="name in getAllowedPrimitive(item)"
-          :key="`${key}-${name}`"
-          class="mr-1 my-1"
-          label
-          color="secondary"
-          size="small"
+      <div v-if="getAllowedPrimitive(item).length > 0">
+        <v-divider></v-divider>
+        <v-chip-group
+          v-model="mcpStore.selectedChips[key]"
+          :direction="mcpStore.selected?.[0] === key ? 'vertical' : undefined"
+          mandatory
         >
-          {{ name }}
-        </v-chip>
-      </v-chip-group>
+          <v-chip
+            v-for="name in getAllowedPrimitive(item)"
+            :key="`${key}-${name}`"
+            class="ma-1"
+            label
+            color="secondary"
+            size="small"
+          >
+            {{ name }}
+          </v-chip>
+        </v-chip-group>
+      </div>
     </v-list-item>
   </v-list>
 </template>

src/renderer/store/mcp.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { watch } from 'vue'
 import type {
   ChatCompletionRequestContent,
   ChatCompletionPromptMessage
@@ -18,6 +19,7 @@ type McpMethodType =
   | { type: 'call'; fn: () => any }
   | { type: 'templates/list'; fn: () => any }
   | string
+export type McpServerApi = MCPAPI | undefined
 
 export function getAllowedPrimitive(item: McpObject): AllowedPrimitive[] {
   if (!item) return []
@@ -27,11 +29,11 @@ export function getAllowedPrimitive(item: McpObject): AllowedPrimitive[] {
   ) as AllowedPrimitive[]
 }
 
-export function getRawServers(): MCPAPI | undefined {
+export function getRawServers(): McpServerApi {
   return window.mcpServers?.get()
 }
 
-export function getServers(): MCPAPI | undefined {
+export function getServers(): McpServerApi {
   const mcpServers = getRawServers()
   const stdioServers = useStdioStore().configValues
 
@@ -65,12 +67,17 @@ export interface McpCoreType {
   method: McpMethodType
 }
 
+function getObjectKeys(o: unknown) {
+  return o && typeof o === 'object' && !Array.isArray(o) ? Object.keys(o) : []
+}
+
 export const useMcpStore = defineStore('mcpStore', {
   // TODO: fix any to type
   state: (): any => ({
     version: 1,
     serverTools: [],
     loading: true,
+    checkList: getObjectKeys(getServers()) as string[],
     selected: undefined as string[] | undefined,
     selectedChips: {} // { key : 0 | 1 | 2}
   }),
@@ -108,6 +115,16 @@ export const useMcpStore = defineStore('mcpStore', {
   },
 
   actions: {
+    watchServerUpdate() {
+      watch(getServers, (newVal: McpServerApi, oldVal: McpServerApi) => {
+        const newKeys = getObjectKeys(newVal)
+        const oldKeys = getObjectKeys(oldVal)
+        const retainedKeys = this.checkList.filter((key: string) => newKeys.includes(key))
+        const addedKeys = newKeys.filter((key) => !oldKeys.includes(key))
+        this.checkList = [...retainedKeys, ...addedKeys]
+      })
+    },
+
     getAllByServer: function (serverName: string): McpCoreType[] {
       const mcpServers = getServers()
       if (!mcpServers) {

src/renderer/utils/index.ts

@@ -1,4 +1,4 @@
-import type { MCPAPI } from '@/preload/mcp'
+import type { McpServerApi } from '@/renderer/store/mcp'
 import { useDxtStore } from '@/renderer/store/dxt'
 
 function isValidValue(value: any): boolean {
@@ -139,7 +139,7 @@ export const CommandEvent = {
 }
 
 class Mcp {
-  static async msgMcpServersInit(configs: MCPAPI | undefined): Promise<any> {
+  static async msgMcpServersInit(configs: McpServerApi): Promise<any> {
     if (!configs) return
     const dxtStore = useDxtStore()
     const filteredConfigs = Object.fromEntries(