From 38e1c8b2b9b92609358f5549548b9f40fde7fb32 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Tue, 8 Oct 2024 07:33:47 -0700
Subject: [PATCH] tools

---
 client/src/App.tsx                  |  58 +++++++++++++---
 client/src/components/ToolsTab.tsx  | 101 ++++++++++++++++++++++++++++
 client/src/components/ToolsTabs.tsx |   0
 server/src/client.ts                |  27 ++++++++
 server/src/index.ts                 |  13 ++++
 5 files changed, 189 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/ToolsTab.tsx
 delete mode 100644 client/src/components/ToolsTabs.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index f89c8e8..6768047 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,5 +1,12 @@
 import { useState, useEffect } from "react";
-import { Send, Bell, Terminal, Files, MessageSquare } from "lucide-react";
+import {
+  Send,
+  Bell,
+  Terminal,
+  Files,
+  MessageSquare,
+  Hammer,
+} from "lucide-react";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import ConsoleTab from "./components/ConsoleTab";
@@ -8,6 +15,7 @@ import RequestsTab from "./components/RequestsTabs";
 import ResourcesTab, { Resource } from "./components/ResourcesTab";
 import NotificationsTab from "./components/NotificationsTab";
 import PromptsTab, { Prompt } from "./components/PromptsTab";
+import ToolsTab, { Tool as ToolType } from "./components/ToolsTab";
 
 const App = () => {
   const [socket, setSocket] = useState<WebSocket | null>(null);
@@ -18,6 +26,8 @@ const App = () => {
   const [resourceContent, setResourceContent] = useState<string>("");
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [promptContent, setPromptContent] = useState<string>("");
+  const [tools, setTools] = useState<ToolType[]>([]);
+  const [toolResult, setToolResult] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -44,6 +54,12 @@ const App = () => {
       } else if (message.type === "prompt") {
         setPromptContent(JSON.stringify(message.data, null, 2));
         setError(null);
+      } else if (message.type === "tools") {
+        setTools(message.data.tools);
+        setError(null);
+      } else if (message.type === "toolResult") {
+        setToolResult(JSON.stringify(message.data, null, 2));
+        setError(null);
       } else if (message.type === "error") {
         setError(message.message);
       }
@@ -71,6 +87,7 @@ const App = () => {
     null,
   );
   const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
+  const [selectedTool, setSelectedTool] = useState<ToolType | null>(null);
 
   const listResources = () => {
     sendWebSocketMessage({ type: "listResources" });
@@ -88,6 +105,14 @@ const App = () => {
     sendWebSocketMessage({ type: "getPrompt", name });
   };
 
+  const listTools = () => {
+    sendWebSocketMessage({ type: "listTools" });
+  };
+
+  const callTool = (name: string, params: Record<string, unknown>) => {
+    sendWebSocketMessage({ type: "callTool", name, params });
+  };
+
   return (
     <div className="flex h-screen bg-gray-100">
       <Sidebar connectionStatus={connectionStatus} />
@@ -96,14 +121,6 @@ const App = () => {
         <div className="flex-1 overflow-auto">
           <Tabs defaultValue="requests" className="w-full p-4">
             <TabsList className="mb-4">
-              <TabsTrigger value="requests">
-                <Send className="w-4 h-4 mr-2" />
-                Requests
-              </TabsTrigger>
-              <TabsTrigger value="notifications">
-                <Bell className="w-4 h-4 mr-2" />
-                Notifications
-              </TabsTrigger>
               <TabsTrigger value="resources">
                 <Files className="w-4 h-4 mr-2" />
                 Resources
@@ -112,7 +129,19 @@ const App = () => {
                 <MessageSquare className="w-4 h-4 mr-2" />
                 Prompts
               </TabsTrigger>
-              <TabsTrigger value="console">
+              <TabsTrigger value="requests" disabled>
+                <Send className="w-4 h-4 mr-2" />
+                Requests
+              </TabsTrigger>
+              <TabsTrigger value="notifications" disabled>
+                <Bell className="w-4 h-4 mr-2" />
+                Notifications
+              </TabsTrigger>
+              <TabsTrigger value="tools" disabled>
+                <Hammer className="w-4 h-4 mr-2" />
+                Tools
+              </TabsTrigger>
+              <TabsTrigger value="console" disabled>
                 <Terminal className="w-4 h-4 mr-2" />
                 Console
               </TabsTrigger>
@@ -139,6 +168,15 @@ const App = () => {
                 promptContent={promptContent}
                 error={error}
               />
+              <ToolsTab
+                tools={tools}
+                listTools={listTools}
+                callTool={callTool}
+                selectedTool={selectedTool}
+                setSelectedTool={setSelectedTool}
+                toolResult={toolResult}
+                error={error}
+              />
               <ConsoleTab />
             </div>
           </Tabs>
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
new file mode 100644
index 0000000..11bee39
--- /dev/null
+++ b/client/src/components/ToolsTab.tsx
@@ -0,0 +1,101 @@
+import { TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Send, AlertCircle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { useState } from "react";
+
+export type Tool = {
+  name: string;
+};
+
+const ToolsTab = ({
+  tools,
+  listTools,
+  callTool,
+  selectedTool,
+  setSelectedTool,
+  toolResult,
+  error,
+}: {
+  tools: Tool[];
+  listTools: () => void;
+  callTool: (name: string, params: Record<string, unknown>) => void;
+  selectedTool: Tool | null;
+  setSelectedTool: (tool: Tool) => void;
+  toolResult: string;
+  error: string | null;
+}) => {
+  const [params, setParams] = useState("");
+
+  return (
+    <TabsContent value="tools" 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">Tools</h3>
+        </div>
+        <div className="p-4">
+          <Button variant="outline" className="w-full mb-4" onClick={listTools}>
+            List Tools
+          </Button>
+          <div className="space-y-2">
+            {tools.map((tool, index) => (
+              <div
+                key={index}
+                className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+                onClick={() => setSelectedTool(tool)}
+              >
+                <span className="flex-1">{tool.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">
+            {selectedTool ? selectedTool.name : "Select a tool"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedTool ? (
+            <div className="space-y-4">
+              <Textarea
+                placeholder="Tool parameters (JSON)"
+                className="h-32 font-mono"
+                value={params}
+                onChange={(e) => setParams(e.target.value)}
+              />
+              <Button
+                onClick={() => callTool(selectedTool.name, JSON.parse(params))}
+              >
+                <Send className="w-4 h-4 mr-2" />
+                Run Tool
+              </Button>
+              {toolResult && (
+                <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+                  {JSON.stringify(toolResult, null, 2)}
+                </pre>
+              )}
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a tool from the list to view its details and run it
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default ToolsTab;
diff --git a/client/src/components/ToolsTabs.tsx b/client/src/components/ToolsTabs.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/server/src/client.ts b/server/src/client.ts
index 44cbebd..fdc7f1c 100644
--- a/server/src/client.ts
+++ b/server/src/client.ts
@@ -10,6 +10,10 @@ import {
   ListPromptsResultSchema,
   GetPromptResult,
   GetPromptResultSchema,
+  ListToolsResult,
+  ListToolsResultSchema,
+  CallToolResult,
+  CallToolResultSchema,
 } from "mcp-typescript/types.js";
 
 export class McpClient {
@@ -86,6 +90,29 @@ export class McpClient {
     );
   }
 
+  // Tool Operations
+  async listTools(): Promise<ListToolsResult> {
+    return await this.client.request(
+      {
+        method: "tools/list",
+      },
+      ListToolsResultSchema,
+    );
+  }
+
+  async callTool(
+    name: string,
+    params: Record<string, unknown>,
+  ): Promise<CallToolResult> {
+    return await this.client.request(
+      {
+        method: "tools/call",
+        params: { name, ...params },
+      },
+      CallToolResultSchema,
+    );
+  }
+
   getServerCapabilities() {
     return this.client.getServerCapabilities();
   }
diff --git a/server/src/index.ts b/server/src/index.ts
index 0652c08..ae6ed06 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -30,6 +30,19 @@ wss.on("connection", (ws: WebSocket) => {
       } else if (command.type === "getPrompt" && command.name) {
         const prompt = await mcpClient.getPrompt(command.name);
         ws.send(JSON.stringify({ type: "prompt", data: prompt }));
+      } else if (command.type === "listTools") {
+        const tools = await mcpClient.listTools();
+        ws.send(JSON.stringify({ type: "tools", data: tools }));
+      } else if (
+        command.type === "callTool" &&
+        command.name &&
+        command.params
+      ) {
+        const result = await mcpClient.callTool(
+          command.name + "asdf",
+          command.params,
+        );
+        ws.send(JSON.stringify({ type: "toolResult", data: result }));
       }
     } catch (error) {
       console.error("Error:", error);