add ability to connect manually

client/src/App.tsx

@@ -6,8 +6,11 @@ import {
   Files,
   MessageSquare,
   Hammer,
+  Play,
 } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 import ConsoleTab from "./components/ConsoleTab";
 import Sidebar from "./components/Sidebar";
@@ -29,6 +32,13 @@ const App = () => {
   const [tools, setTools] = useState<ToolType[]>([]);
   const [toolResult, setToolResult] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
+  const [command, setCommand] = useState<string>(
+    "/Users/ashwin/.nvm/versions/node/v18.20.4/bin/node",
+  );
+  const [args, setArgs] = useState<string>(
+    "/Users/ashwin/code/example-servers/build/everything/index.js",
+  );
+  const [mcpConnected, setMcpConnected] = useState<boolean>(false);
 
   useEffect(() => {
     const ws = new WebSocket("ws://localhost:3000");
@@ -62,6 +72,8 @@ const App = () => {
         setError(null);
       } else if (message.type === "error") {
         setError(message.message);
+      } else if (message.type === "connected") {
+        setMcpConnected(true);
       }
     };
 
@@ -71,6 +83,7 @@ const App = () => {
 
     ws.onclose = () => {
       setConnectionStatus("disconnected");
+      setMcpConnected(false);
     };
 
     return () => ws.close();
@@ -113,14 +126,39 @@ const App = () => {
     sendWebSocketMessage({ type: "callTool", name, params });
   };
 
+  const connectMcpServer = () => {
+    const argsArray = args.split(" ").filter((arg) => arg.trim() !== "");
+    sendWebSocketMessage({ type: "connect", command, args: argsArray });
+  };
+
   return (
     <div className="flex h-screen bg-gray-100">
       <Sidebar connectionStatus={connectionStatus} />
       <div className="flex-1 flex flex-col overflow-hidden">
         <h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
         <div className="flex-1 overflow-auto">
-          <Tabs defaultValue="requests" className="w-full p-4">
+          <div className="p-4 bg-white shadow-md m-4 rounded-md">
-            <TabsList className="mb-4">
+            <h2 className="text-lg font-semibold mb-2">Connect MCP Server</h2>
+            <div className="flex space-x-2 mb-2">
+              <Input
+                placeholder="Command"
+                value={command}
+                onChange={(e) => setCommand(e.target.value)}
+              />
+              <Input
+                placeholder="Arguments (space-separated)"
+                value={args}
+                onChange={(e) => setArgs(e.target.value)}
+              />
+              <Button onClick={connectMcpServer}>
+                <Play className="w-4 h-4 mr-2" />
+                Connect
+              </Button>
+            </div>
+          </div>
+          {mcpConnected ? (
+            <Tabs defaultValue="resources" className="w-full p-4">
+              <TabsList className="mb-4 p-0">
                 <TabsTrigger value="resources">
                   <Files className="w-4 h-4 mr-2" />
                   Resources
@@ -148,7 +186,6 @@ const App = () => {
               </TabsList>
 
               <div className="w-full">
-              <RequestsTab />
                 <ResourcesTab
                   resources={resources}
                   listResources={listResources}
@@ -168,6 +205,7 @@ const App = () => {
                   promptContent={promptContent}
                   error={error}
                 />
+                <RequestsTab />
                 <ToolsTab
                   tools={tools}
                   listTools={listTools}
@@ -180,6 +218,13 @@ const App = () => {
                 <ConsoleTab />
               </div>
             </Tabs>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-lg text-gray-500">
+                Connect to an MCP server to start inspecting
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </div>

server/src/index.ts

@@ -7,18 +7,25 @@ const app = express();
 const server = http.createServer(app);
 const wss = new WebSocketServer({ server });
 
-const mcpClient = new McpClient("MyApp", "1.0.0");
+let mcpClient: McpClient | null = null;
-await mcpClient.connectStdio(
-  "/Users/ashwin/.nvm/versions/node/v18.20.4/bin/node",
-  ["/Users/ashwin/code/example-servers/build/everything/index.js"],
-);
 
 wss.on("connection", (ws: WebSocket) => {
   ws.on("message", async (message: string) => {
     try {
       const command = JSON.parse(message);
 
-      if (command.type === "listResources") {
+      if (command.type === "connect" && command.command && command.args) {
+        mcpClient = new McpClient("MyApp", "1.0.0");
+        await mcpClient.connectStdio(command.command, command.args);
+        ws.send(JSON.stringify({ type: "connected" }));
+      } else if (!mcpClient) {
+        ws.send(
+          JSON.stringify({
+            type: "error",
+            message: "Not connected to MCP server",
+          }),
+        );
+      } else if (command.type === "listResources") {
         const resources = await mcpClient.listResources();
         ws.send(JSON.stringify({ type: "resources", data: resources }));
       } else if (command.type === "readResource" && command.uri) {
@@ -58,6 +65,8 @@ server.listen(PORT, () => {
 
 // Close the client when the server is shutting down
 process.on("SIGINT", async () => {
+  if (mcpClient) {
     await mcpClient.close();
+  }
   process.exit();
 });