extract transport logic

Author: ashwin-ant

client/src/components/ResourcesTab.tsx

@@ -6,6 +6,7 @@ import ListPane from "./ListPane";
 
 export type Resource = {
   uri: string;
+  name: string;
 };
 
 const ResourcesTab = ({
@@ -37,7 +38,7 @@ const ResourcesTab = ({
         <div className="flex items-center w-full">
           <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
           <span className="flex-1 truncate" title={resource.uri}>
-            {resource.uri}
+            {resource.name}
           </span>
           <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
         </div>
@@ -48,8 +49,8 @@ const ResourcesTab = ({
 
     <div className="bg-white rounded-lg shadow">
       <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-        <h3 className="font-semibold truncate" title={selectedResource?.uri}>
-          {selectedResource ? selectedResource.uri : "Select a resource"}
+        <h3 className="font-semibold truncate" title={selectedResource?.name}>
+          {selectedResource ? selectedResource.name : "Select a resource"}
         </h3>
         {selectedResource && (
           <Button

server/src/index.ts

@@ -16,33 +16,44 @@ app.use(cors());
 
 let webAppTransports: SSEServerTransport[] = [];
 
-app.get("/sse", async (req, res) => {
-  console.log("New SSE connection");
-  const transportType = req.query.transportType as string;
-  console.log(`Transport type: ${transportType}`);
+const createTransport = async (query: express.Request["query"]) => {
+  console.log("Query parameters:", query);
 
-  let backingServerTransport;
-  console.log("Query parameters:", req.query);
+  const transportType = query.transportType as string;
 
   if (transportType === "stdio") {
-    const command = decodeURIComponent(req.query.command as string);
-    const args = decodeURIComponent(req.query.args as string).split(",");
+    const command = decodeURIComponent(query.command as string);
+    const args = decodeURIComponent(query.args as string).split(",");
     console.log(`Stdio transport: command=${command}, args=${args}`);
-    backingServerTransport = new StdioClientTransport();
-    await backingServerTransport.spawn({ command, args });
+    const transport = new StdioClientTransport();
+    await transport.spawn({ command, args });
     console.log("Spawned stdio transport");
+    return transport;
   } else if (transportType === "sse") {
-    const url = decodeURIComponent(req.query.url as string);
+    const url = decodeURIComponent(query.url as string);
     console.log(`SSE transport: url=${url}`);
-    backingServerTransport = new SSEClientTransport();
-    await backingServerTransport.connect(new URL(url));
+    const transport = new SSEClientTransport();
+    await transport.connect(new URL(url));
     console.log("Connected to SSE transport");
+    return transport;
   } else {
     console.error(`Invalid transport type: ${transportType}`);
     throw new Error("Invalid transport type specified");
   }
+};
+
+app.get("/sse", async (req, res) => {
+  console.log("New SSE connection");
+  const transportType = req.query.transportType as string;
+  console.log(`Transport type: ${transportType}`);
+
+  const backingServerTransport = await createTransport(req.query);
+
+  console.log("Connected MCP client to backing server transport");
 
   const webAppTransport = new SSEServerTransport("/message");
+  console.log("Created web app transport");
+
   webAppTransports.push(webAppTransport);
   console.log("Created web app transport");