From 0a7f5f9f2280754434ad7588528ba8a9a0cebf7d Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Mon, 7 Oct 2024 17:09:13 -0700
Subject: [PATCH] add prompts tab

---
 client/src/App.tsx                   |  90 ++++++++++++++++-------
 client/src/components/PromptsTab.tsx | 103 +++++++++++++++++++++++++++
 client/src/components/Sidebar.tsx    |   2 +-
 server/src/client.ts                 |  24 +++++++
 server/src/index.ts                  |   7 +-
 5 files changed, 198 insertions(+), 28 deletions(-)
 create mode 100644 client/src/components/PromptsTab.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 693f015..7a506b9 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Send, Bell, Terminal, Files } from "lucide-react";
+import { Send, Bell, Terminal, Files, MessageSquare } from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import ConsoleTab from "./components/ConsoleTab";
@@ -7,17 +7,17 @@ import Sidebar from "./components/Sidebar";
 import RequestsTab from "./components/RequestsTabs";
 import ResourcesTab, { Resource } from "./components/ResourcesTab";
 import NotificationsTab from "./components/NotificationsTab";
+import PromptsTab, { Prompt } from "./components/PromptsTab";
 
 const App = () => {
   const [socket, setSocket] = useState<WebSocket | null>(null);
-  const [resources, setResources] = useState<Resource[]>([]);
-  const [selectedResource, setSelectedResource] = useState<Resource | null>(
-    null,
-  );
-  const [resourceContent, setResourceContent] = useState<string>("");
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
   >("disconnected");
+  const [resources, setResources] = useState<Resource[]>([]);
+  const [resourceContent, setResourceContent] = useState<string>("");
+  const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [promptContent, setPromptContent] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -38,6 +38,12 @@ const App = () => {
       } else if (message.type === "resource") {
         setResourceContent(JSON.stringify(message.data, null, 2));
         setError(null);
+      } else if (message.type === "prompts") {
+        setPrompts(message.data.prompts);
+        setError(null);
+      } else if (message.type === "prompt") {
+        setPromptContent(JSON.stringify(message.data, null, 2));
+        setError(null);
       } else if (message.type === "error") {
         setError(message.message);
       }
@@ -54,24 +60,41 @@ const App = () => {
     return () => ws.close();
   }, []);
 
-  const listResources = () => {
+  const sendWebSocketMessage = (message: object) => {
     if (socket) {
-      socket.send(JSON.stringify({ type: "listResources" }));
+      console.log("Sending WebSocket message:", message);
+      socket.send(JSON.stringify(message));
     }
   };
 
+  const [selectedResource, setSelectedResource] = useState<Resource | null>(
+    null,
+  );
+  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+
+  const listResources = () => {
+    sendWebSocketMessage({ type: "listResources" });
+  };
+
   const readResource = (uri: string) => {
-    if (socket) {
-      socket.send(JSON.stringify({ type: "readResource", uri }));
-    }
+    sendWebSocketMessage({ type: "readResource", uri });
+  };
+
+  const listPrompts = () => {
+    sendWebSocketMessage({ type: "listPrompts" });
+  };
+
+  const getPrompt = (name: string) => {
+    sendWebSocketMessage({ type: "getPrompt", name });
   };
 
   return (
     <div className="flex h-screen bg-gray-100">
       <Sidebar connectionStatus={connectionStatus} />
-      <div className="flex-1 flex flex-col">
-        <div className="flex-1 p-6">
-          <Tabs defaultValue="requests">
+      <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">
             <TabsList className="mb-4">
               <TabsTrigger value="requests">
                 <Send className="w-4 h-4 mr-2" />
@@ -85,24 +108,39 @@ const App = () => {
                 <Files className="w-4 h-4 mr-2" />
                 Resources
               </TabsTrigger>
+              <TabsTrigger value="prompts">
+                <MessageSquare className="w-4 h-4 mr-2" />
+                Prompts
+              </TabsTrigger>
               <TabsTrigger value="console">
                 <Terminal className="w-4 h-4 mr-2" />
                 Console
               </TabsTrigger>
             </TabsList>
 
-            <RequestsTab />
-            <ResourcesTab
-              resources={resources}
-              listResources={listResources}
-              readResource={readResource}
-              selectedResource={selectedResource}
-              setSelectedResource={setSelectedResource}
-              resourceContent={resourceContent}
-              error={error}
-            />
-            <NotificationsTab />
-            <ConsoleTab />
+            <div className="w-full">
+              <RequestsTab />
+              <ResourcesTab
+                resources={resources}
+                listResources={listResources}
+                readResource={readResource}
+                selectedResource={selectedResource}
+                setSelectedResource={setSelectedResource}
+                resourceContent={resourceContent}
+                error={error}
+              />
+              <NotificationsTab />
+              <PromptsTab
+                prompts={prompts}
+                listPrompts={listPrompts}
+                getPrompt={getPrompt}
+                selectedPrompt={selectedPrompt}
+                setSelectedPrompt={setSelectedPrompt}
+                promptContent={promptContent}
+                error={error}
+              />
+              <ConsoleTab />
+            </div>
           </Tabs>
         </div>
       </div>
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
new file mode 100644
index 0000000..fd25634
--- /dev/null
+++ b/client/src/components/PromptsTab.tsx
@@ -0,0 +1,103 @@
+import { Send, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TabsContent } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+export type Prompt = {
+  id: string;
+  name: string;
+};
+
+const PromptsTab = ({
+  prompts,
+  listPrompts,
+  getPrompt,
+  selectedPrompt,
+  setSelectedPrompt,
+  promptContent,
+  error,
+}: {
+  prompts: Prompt[];
+  listPrompts: () => void;
+  getPrompt: (name: string) => void;
+  selectedPrompt: Prompt | null;
+  setSelectedPrompt: (prompt: Prompt) => void;
+  promptContent: string;
+  error: string | null;
+}) => {
+  console.log("prompts", prompts);
+  return (
+    <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
+      <div className="bg-white rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">Prompts</h3>
+        </div>
+        <div className="p-4">
+          <Button
+            variant="outline"
+            className="w-full mb-4"
+            onClick={listPrompts}
+          >
+            List Prompts
+          </Button>
+          <div className="space-y-2">
+            {prompts.map((prompt) => (
+              <div
+                key={prompt.id}
+                className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+                onClick={() => {
+                  setSelectedPrompt(prompt);
+                  getPrompt(prompt.name);
+                }}
+              >
+                <span className="flex-1">{prompt.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedPrompt ? (
+            <div className="space-y-4">
+              <Textarea
+                value={promptContent}
+                readOnly
+                className="h-64 font-mono"
+              />
+              <div className="flex space-x-2">
+                <Input placeholder="Enter your message" />
+                <Button>
+                  <Send className="w-4 h-4 mr-2" />
+                  Send
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a prompt from the list to view and use it
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default PromptsTab;
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 06ae82c..654b336 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -5,7 +5,7 @@ const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
   <div className="w-64 bg-white border-r border-gray-200">
     <div className="flex items-center p-4 border-b border-gray-200">
       <Menu className="w-6 h-6 text-gray-500" />
-      <h1 className="ml-2 text-lg font-semibold">MCP Client</h1>
+      <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
     </div>
 
     <div className="p-4">
diff --git a/server/src/client.ts b/server/src/client.ts
index 71c452b..44cbebd 100644
--- a/server/src/client.ts
+++ b/server/src/client.ts
@@ -6,6 +6,10 @@ import {
   ReadResourceResult,
   ListResourcesResultSchema,
   ReadResourceResultSchema,
+  ListPromptsResult,
+  ListPromptsResultSchema,
+  GetPromptResult,
+  GetPromptResultSchema,
 } from "mcp-typescript/types.js";
 
 export class McpClient {
@@ -62,6 +66,26 @@ export class McpClient {
     );
   }
 
+  // Prompt Operations
+  async listPrompts(): Promise<ListPromptsResult> {
+    return await this.client.request(
+      {
+        method: "prompts/list",
+      },
+      ListPromptsResultSchema,
+    );
+  }
+
+  async getPrompt(name: string): Promise<GetPromptResult> {
+    return await this.client.request(
+      {
+        method: "prompts/get",
+        params: { name },
+      },
+      GetPromptResultSchema,
+    );
+  }
+
   getServerCapabilities() {
     return this.client.getServerCapabilities();
   }
diff --git a/server/src/index.ts b/server/src/index.ts
index 1c92301..0652c08 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -7,7 +7,6 @@ const app = express();
 const server = http.createServer(app);
 const wss = new WebSocketServer({ server });
 
-// Create and connect the MCP client
 const mcpClient = new McpClient("MyApp", "1.0.0");
 await mcpClient.connectStdio(
   "/Users/ashwin/.nvm/versions/node/v18.20.4/bin/node",
@@ -25,6 +24,12 @@ wss.on("connection", (ws: WebSocket) => {
       } else if (command.type === "readResource" && command.uri) {
         const resource = await mcpClient.readResource(command.uri);
         ws.send(JSON.stringify({ type: "resource", data: resource }));
+      } else if (command.type === "listPrompts") {
+        const prompts = await mcpClient.listPrompts();
+        ws.send(JSON.stringify({ type: "prompts", data: prompts }));
+      } else if (command.type === "getPrompt" && command.name) {
+        const prompt = await mcpClient.getPrompt(command.name);
+        ws.send(JSON.stringify({ type: "prompt", data: prompt }));
       }
     } catch (error) {
       console.error("Error:", error);