Merge pull request #11 from modelcontextprotocol/ashwin/tools

get tools working

client/src/components/PromptsTab.tsx

@@ -5,6 +5,7 @@ import { TabsContent } from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useState } from "react";
+import { Label } from "@/components/ui/label";
 
 export type Prompt = {
   name: string;
@@ -98,7 +99,9 @@ const PromptsTab = ({
               )}
               {selectedPrompt.arguments?.map((arg) => (
                 <div key={arg.name}>
+                  <Label htmlFor={arg.name}>{arg.name}</Label>
                   <Input
+                    id={arg.name}
                     placeholder={`Enter ${arg.name}`}
                     value={promptArgs[arg.name] || ""}
                     onChange={(e) =>

client/src/components/ToolsTab.tsx

@@ -1,12 +1,18 @@
 import { TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
 import { Send, AlertCircle } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useState } from "react";
+import { Label } from "@/components/ui/label";
 
 export type Tool = {
   name: string;
+  description: string;
+  inputSchema: {
+    type: string;
+    properties: Record<string, { type: string; description: string }>;
+  };
 };
 
 const ToolsTab = ({
@@ -26,7 +32,7 @@ const ToolsTab = ({
   toolResult: string;
   error: string | null;
 }) => {
-  const [params, setParams] = useState("");
+  const [params, setParams] = useState<Record<string, unknown>>({});
 
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
@@ -46,6 +52,9 @@ const ToolsTab = ({
                 onClick={() => setSelectedTool(tool)}
               >
                 <span className="flex-1">{tool.name}</span>
+                <span className="text-sm text-gray-500">
+                  {tool.description}
+                </span>
               </div>
             ))}
           </div>
@@ -67,22 +76,47 @@ const ToolsTab = ({
             </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))}
-              >
+              <p className="text-sm text-gray-600">
+                {selectedTool.description}
+              </p>
+              {Object.entries(selectedTool.inputSchema.properties).map(
+                ([key, value]) => (
+                  <div key={key}>
+                    <Label
+                      htmlFor={key}
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      {key}
+                    </Label>
+                    <Input
+                      type={value.type === "number" ? "number" : "text"}
+                      id={key}
+                      name={key}
+                      placeholder={value.description}
+                      onChange={(e) =>
+                        setParams({
+                          ...params,
+                          [key]:
+                            value.type === "number"
+                              ? Number(e.target.value)
+                              : e.target.value,
+                        })
+                      }
+                    />
+                  </div>
+                ),
+              )}
+              <Button onClick={() => callTool(selectedTool.name, 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>
+                <>
+                  <h4 className="font-semibold mb-2">Tool Result:</h4>
+                  <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+                    {toolResult}
+                  </pre>
+                </>
               )}
             </div>
           ) : (

client/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }