+
Tools
@@ -243,7 +243,10 @@ const App = () => {
listTools={listTools}
callTool={callTool}
selectedTool={selectedTool}
- setSelectedTool={setSelectedTool}
+ setSelectedTool={(tool) => {
+ setSelectedTool(tool);
+ setToolResult("");
+ }}
toolResult={toolResult}
error={error}
/>
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 7b3c35856..97cb926d9 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/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) => (
+
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 11bee3976..9cd090c77 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/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;
+ };
};
const ToolsTab = ({
@@ -26,7 +32,7 @@ const ToolsTab = ({
toolResult: string;
error: string | null;
}) => {
- const [params, setParams] = useState("");
+ const [params, setParams] = useState>({});
return (
@@ -46,6 +52,9 @@ const ToolsTab = ({
onClick={() => setSelectedTool(tool)}
>
{tool.name}
+
+ {tool.description}
+
))}
@@ -67,22 +76,47 @@ const ToolsTab = ({
) : selectedTool ? (
) : (
diff --git a/client/src/components/ui/label.tsx b/client/src/components/ui/label.tsx
new file mode 100644
index 000000000..683faa793
--- /dev/null
+++ b/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,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/client/yarn.lock b/client/yarn.lock
index b3c4e88f9..21ffba4b3 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -499,6 +499,13 @@
dependencies:
"@radix-ui/react-use-layout-effect" "1.1.0"
+"@radix-ui/react-label@^2.1.0":
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.1.0.tgz#3aa2418d70bb242be37c51ff5e51a2adcbc372e3"
+ integrity sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==
+ dependencies:
+ "@radix-ui/react-primitive" "2.0.0"
+
"@radix-ui/react-presence@1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
diff --git a/server/src/client.ts b/server/src/client.ts
index 969bbf16a..b6e6cb937 100644
--- a/server/src/client.ts
+++ b/server/src/client.ts
@@ -109,7 +109,7 @@ export class McpClient {
return await this.client.request(
{
method: "tools/call",
- params: { name, ...params },
+ params: { name, arguments: params },
},
CallToolResultSchema,
);
diff --git a/server/src/index.ts b/server/src/index.ts
index afd043351..e6970b40b 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -45,11 +45,10 @@ wss.on("connection", (ws: WebSocket) => {
command.name &&
command.params
) {
- const result = await mcpClient.callTool(
- command.name + "asdf",
- command.params,
+ const result = await mcpClient.callTool(command.name, command.params);
+ ws.send(
+ JSON.stringify({ type: "toolResult", data: result.toolResult }),
);
- ws.send(JSON.stringify({ type: "toolResult", data: result }));
}
} catch (error) {
console.error("Error:", error);