feat: implement cold start-like auto connection for MCP server and simplify status (#73)

The MCP server now connects automatically on first use and disconnects after a period of inactivity.
When you call a tool, the server will automatically reconnect, so no manual action is needed.
This change ensures that tool calls work smoothly even in deployment environments like Vercel.

Author: cgoing-bot

.github/.dangerfile.ts

@@ -1,29 +1,45 @@
 // @ts-nocheck
-import { danger, fail, warn } from "danger";
+import { danger, fail, warn, message } from "danger";
 
 const prTitle = danger.github.pr.title;
 const conventionalRegex =
-  /^(feat|fix|chore|docs|style|refactor|test|perf|build)(\(.+\))?!?: .+/;
+  /^(feat|fix|chore|docs|style|refactor|test|perf|build|ci|revert)(\(.+\))?!?: .+/;
 
-if (!conventionalRegex.test(prTitle))
+if (!conventionalRegex.test(prTitle)) {
   fail(
     `❌ The PR title does not follow the Conventional Commit format.
-  
-  Expected formats include:
-  - feat: add login functionality
-  - fix: correct redirect bug
-  - chore: update dependency xyz
-  
-  Supported prefixes:
-  - feat
-  - fix
-  - chore
-  - docs
-  - style
-  - refactor
-  - test
-  - perf
-  - build
-  
-  Please update your PR title to match one of these formats.`,
+
+**Current title:** "${prTitle}"
+
+**Expected formats:**
+- \`feat: add login functionality\`
+- \`fix: correct redirect bug\`
+- \`chore: update dependency xyz\`
+- \`feat(auth): add OAuth integration\`
+
+**Supported prefixes:**
+- \`feat\` - new features
+- \`fix\` - bug fixes
+- \`chore\` - maintenance tasks
+- \`docs\` - documentation changes
+- \`style\` - formatting changes
+- \`refactor\` - code refactoring
+- \`test\` - test additions/changes
+- \`perf\` - performance improvements
+- \`build\` - build system changes
+- \`ci\` - CI configuration changes
+- \`revert\` - reverting changes
+
+Please update your PR title to match one of these formats.`,
   );
+} else {
+  message("✅ PR title follows Conventional Commit format!");
+}
+
+if (prTitle.length > 100) {
+  warn("⚠️ PR title is quite long. Consider keeping it under 100 characters.");
+}
+
+if (prTitle.length < 10) {
+  warn("⚠️ PR title seems too short. Consider being more descriptive.");
+}

.github/workflows/pr-check.yml

@@ -1,12 +1,13 @@
 name: PR Title Check
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, edited]
 permissions:
-  contents: write
+  contents: read
   pull-requests: write
   issues: write
+  statuses: write
+  checks: write
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, edited]
 
 jobs:
   danger:
@@ -21,10 +22,7 @@ jobs:
         with:
           node-version: 20
 
-      - name: Install Danger globally
-        run: npm install -g danger
-
       - name: Run Danger
-        run: danger ci --dangerfile=./.github/.dangerfile.ts
+        run: npx danger ci --dangerfile=./.github/.dangerfile.ts
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/app/api/mcp/actions.ts

@@ -84,30 +84,6 @@ export async function removeMcpClientAction(name: string) {
   await mcpClientsManager.removeClient(name);
 }
 
-export async function connectMcpClientAction(name: string) {
-  const client = await mcpClientsManager
-    .getClients()
-    .then((clients) =>
-      clients.find((client) => client.getInfo().name === name),
-    );
-  if (client?.getInfo().status === "connected") {
-    return;
-  }
-  await client?.connect();
-}
-
-export async function disconnectMcpClientAction(name: string) {
-  const client = await mcpClientsManager
-    .getClients()
-    .then((clients) =>
-      clients.find((client) => client.getInfo().name === name),
-    );
-  if (client?.getInfo().status === "disconnected") {
-    return;
-  }
-  await client?.disconnect();
-}
-
 export async function refreshMcpClientAction(name: string) {
   await mcpClientsManager.refreshClient(name);
 }

src/components/enabled-mcp-tools.tsx

@@ -43,7 +43,6 @@ export function EnabledMcpTools({
 
   const enabledMcpTools = useMemo(() => {
     const mcpTools = mcpList
-      .filter((mcp) => mcp.status == "connected")
       .map((mcp) => {
         const serverName = mcp.name;
         const allowedMcpServerTools = allowedMcpServers?.[serverName]?.tools;

src/components/mcp-card.tsx

@@ -13,7 +13,6 @@ import { Alert, AlertDescription, AlertTitle } from "ui/alert";
 import { Button } from "ui/button";
 import { Card, CardContent, CardHeader } from "ui/card";
 import JsonView from "ui/json-view";
-import { Separator } from "ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "ui/tooltip";
 import { memo, useCallback, useMemo, useState } from "react";
 import Link from "next/link";
@@ -22,14 +21,11 @@ import { safe } from "ts-safe";
 
 import { handleErrorWithToast } from "ui/shared-toast";
 import {
-  connectMcpClientAction,
-  disconnectMcpClientAction,
   refreshMcpClientAction,
   removeMcpClientAction,
 } from "@/app/api/mcp/actions";
 import type { MCPServerInfo, MCPToolInfo } from "app-types/mcp";
-import { Switch } from "ui/switch";
-import { Label } from "ui/label";
+
 import { ToolDetailPopup } from "./tool-detail-popup";
 import { useTranslations } from "next-intl";
 
@@ -109,14 +105,6 @@ export const MCPCard = memo(function MCPCard({
     await pipeProcessing(() => removeMcpClientAction(name));
   }, [name]);
 
-  const handleToggleConnection = useCallback(async () => {
-    await pipeProcessing(() =>
-      status === "connected"
-        ? disconnectMcpClientAction(name)
-        : connectMcpClientAction(name),
-    );
-  }, [name, status]);
-
   return (
     <Card className="relative hover:border-foreground/20 transition-colors bg-secondary/40">
       {isLoading && (
@@ -127,22 +115,6 @@ export const MCPCard = memo(function MCPCard({
 
         <h4 className="font-bold text-xs sm:text-lg">{name}</h4>
         <div className="flex-1" />
-
-        <Label
-          htmlFor={`mcp-card-switch-${name}`}
-          className="mr-2 text-xs text-muted-foreground"
-        >
-          {status === "connected" ? "enabled" : "disabled"}
-        </Label>
-        <Switch
-          id={`mcp-card-switch-${name}`}
-          checked={status === "connected"}
-          onCheckedChange={handleToggleConnection}
-          className="mr-2 hidden sm:block"
-        />
-        <div className="h-4 hidden sm:block">
-          <Separator orientation="vertical" />
-        </div>
         <Tooltip>
           <TooltipTrigger asChild>
             <Link

src/components/prompt-input.tsx

@@ -90,23 +90,21 @@ export default function PromptInput({
 
   const toolList = useMemo(() => {
     return (
-      mcpList
-        ?.filter((mcp) => mcp.status === "connected")
-        .flatMap((mcp) => [
-          {
-            id: mcp.name,
-            label: mcp.name,
-            type: "server",
-          },
-          ...mcp.toolInfo.map((tool) => {
-            const id = createMCPToolId(mcp.name, tool.name);
-            return {
-              id,
-              label: id,
-              type: "tool",
-            };
-          }),
-        ]) ?? []
+      mcpList?.flatMap((mcp) => [
+        {
+          id: mcp.name,
+          label: mcp.name,
+          type: "server",
+        },
+        ...mcp.toolInfo.map((tool) => {
+          const id = createMCPToolId(mcp.name, tool.name);
+          return {
+            id,
+            label: id,
+            type: "tool",
+          };
+        }),
+      ]) ?? []
     );
   }, [mcpList]);
 

src/components/tool-selector.tsx

@@ -359,10 +359,7 @@ function McpServerSelector() {
         selectedMcpServerList.map((server) => (
           <DropdownMenuSub key={server.id}>
             <DropdownMenuSubTrigger
-              className={cn(
-                server.status === "disconnected" && "opacity-40",
-                "flex items-center gap-2 font-semibold cursor-pointer",
-              )}
+              className="flex items-center gap-2 font-semibold cursor-pointer"
               icon={
                 <div className="flex items-center gap-2 ml-auto">
                   {server.tools.filter((t) => t.checked).length > 0 ? (
@@ -395,14 +392,6 @@ function McpServerSelector() {
                 >
                   error
                 </span>
-              ) : server.status === "disconnected" ? (
-                <span
-                  className={cn(
-                    "text-xs text-muted-foreground ml-1 p-1 rounded",
-                  )}
-                >
-                  disabled
-                </span>
               ) : null}
             </DropdownMenuSubTrigger>
             <DropdownMenuPortal>

src/lib/ai/mcp/create-mcp-client.ts

@@ -203,6 +203,15 @@ export class MCPClient {
   }
   async callTool(toolName: string, input?: unknown) {
     return safe(() => this.log.info("tool call", toolName))
+
+      .ifOk(() => {
+        if (this.error) {
+          throw new Error(
+            "MCP Server is currently in an error state. Please check the configuration and try refreshing the server.",
+          );
+        }
+      })
+      .ifOk(() => this.scheduleAutoDisconnect()) // disconnect if autoDisconnectSeconds is set
       .map(async () => {
         const client = await this.connect();
         return client?.callTool({

src/lib/ai/mcp/create-mcp-clients-manager.ts

@@ -55,7 +55,7 @@ export class MCPClientsManager {
   tools() {
     return Object.fromEntries(
       Array.from(this.clients.values())
-        .filter((client) => client.getInfo().status === "connected")
+        .filter((client) => client.getInfo().toolInfo.length > 0)
         .flatMap((client) =>
           Object.entries(client.tools).map(([name, tool]) => [
             createMCPToolId(client.getInfo().name, name),
@@ -79,7 +79,9 @@ export class MCPClientsManager {
       void prevClient.disconnect();
     }
 
-    const client = createMCPClient(name, serverConfig);
+    const client = createMCPClient(name, serverConfig, {
+      autoDisconnectSeconds: 60 * 30, // 30 minutes
+    });
     this.clients.set(name, client);
     return client.connect();
   }