Skip to content

Commit 38e1c8b

Browse files
ashwin-antashwin-ant
committed
tools
1 parent 51cde09 commit 38e1c8b

File tree

5 files changed

+189
-10
lines changed

5 files changed

+189
-10
lines changed

‎client/src/App.tsx‎

Lines changed: 48 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { useState, useEffect } from "react";
2-
import { Send, Bell, Terminal, Files, MessageSquare } from "lucide-react";
2+
import {
3+
Send,
4+
Bell,
5+
Terminal,
6+
Files,
7+
MessageSquare,
8+
Hammer,
9+
} from "lucide-react";
310
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
411

512
import ConsoleTab from "./components/ConsoleTab";
@@ -8,6 +15,7 @@ import RequestsTab from "./components/RequestsTabs";
815
import ResourcesTab, { Resource } from "./components/ResourcesTab";
916
import NotificationsTab from "./components/NotificationsTab";
1017
import PromptsTab, { Prompt } from "./components/PromptsTab";
18+
import ToolsTab, { Tool as ToolType } from "./components/ToolsTab";
1119

1220
const App = () => {
1321
const [socket, setSocket] = useState<WebSocket | null>(null);
@@ -18,6 +26,8 @@ const App = () => {
1826
const [resourceContent, setResourceContent] = useState<string>("");
1927
const [prompts, setPrompts] = useState<Prompt[]>([]);
2028
const [promptContent, setPromptContent] = useState<string>("");
29+
const [tools, setTools] = useState<ToolType[]>([]);
30+
const [toolResult, setToolResult] = useState<string>("");
2131
const [error, setError] = useState<string | null>(null);
2232

2333
useEffect(() => {
@@ -44,6 +54,12 @@ const App = () => {
4454
} else if (message.type === "prompt") {
4555
setPromptContent(JSON.stringify(message.data, null, 2));
4656
setError(null);
57+
} else if (message.type === "tools") {
58+
setTools(message.data.tools);
59+
setError(null);
60+
} else if (message.type === "toolResult") {
61+
setToolResult(JSON.stringify(message.data, null, 2));
62+
setError(null);
4763
} else if (message.type === "error") {
4864
setError(message.message);
4965
}
@@ -71,6 +87,7 @@ const App = () => {
7187
null,
7288
);
7389
const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
90+
const [selectedTool, setSelectedTool] = useState<ToolType | null>(null);
7491

7592
const listResources = () => {
7693
sendWebSocketMessage({ type: "listResources" });
@@ -88,6 +105,14 @@ const App = () => {
88105
sendWebSocketMessage({ type: "getPrompt", name });
89106
};
90107

108+
const listTools = () => {
109+
sendWebSocketMessage({ type: "listTools" });
110+
};
111+
112+
const callTool = (name: string, params: Record<string, unknown>) => {
113+
sendWebSocketMessage({ type: "callTool", name, params });
114+
};
115+
91116
return (
92117
<div className="flex h-screen bg-gray-100">
93118
<Sidebar connectionStatus={connectionStatus} />
@@ -96,14 +121,6 @@ const App = () => {
96121
<div className="flex-1 overflow-auto">
97122
<Tabs defaultValue="requests" className="w-full p-4">
98123
<TabsList className="mb-4">
99-
<TabsTrigger value="requests">
100-
<Send className="w-4 h-4 mr-2" />
101-
Requests
102-
</TabsTrigger>
103-
<TabsTrigger value="notifications">
104-
<Bell className="w-4 h-4 mr-2" />
105-
Notifications
106-
</TabsTrigger>
107124
<TabsTrigger value="resources">
108125
<Files className="w-4 h-4 mr-2" />
109126
Resources
@@ -112,7 +129,19 @@ const App = () => {
112129
<MessageSquare className="w-4 h-4 mr-2" />
113130
Prompts
114131
</TabsTrigger>
115-
<TabsTrigger value="console">
132+
<TabsTrigger value="requests" disabled>
133+
<Send className="w-4 h-4 mr-2" />
134+
Requests
135+
</TabsTrigger>
136+
<TabsTrigger value="notifications" disabled>
137+
<Bell className="w-4 h-4 mr-2" />
138+
Notifications
139+
</TabsTrigger>
140+
<TabsTrigger value="tools" disabled>
141+
<Hammer className="w-4 h-4 mr-2" />
142+
Tools
143+
</TabsTrigger>
144+
<TabsTrigger value="console" disabled>
116145
<Terminal className="w-4 h-4 mr-2" />
117146
Console
118147
</TabsTrigger>
@@ -139,6 +168,15 @@ const App = () => {
139168
promptContent={promptContent}
140169
error={error}
141170
/>
171+
<ToolsTab
172+
tools={tools}
173+
listTools={listTools}
174+
callTool={callTool}
175+
selectedTool={selectedTool}
176+
setSelectedTool={setSelectedTool}
177+
toolResult={toolResult}
178+
error={error}
179+
/>
142180
<ConsoleTab />
143181
</div>
144182
</Tabs>

‎client/src/components/ToolsTab.tsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { TabsContent } from "@/components/ui/tabs";
2+
import { Button } from "@/components/ui/button";
3+
import { Textarea } from "@/components/ui/textarea";
4+
import { Send, AlertCircle } from "lucide-react";
5+
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
6+
import { useState } from "react";
7+
8+
export type Tool = {
9+
name: string;
10+
};
11+
12+
const ToolsTab = ({
13+
tools,
14+
listTools,
15+
callTool,
16+
selectedTool,
17+
setSelectedTool,
18+
toolResult,
19+
error,
20+
}: {
21+
tools: Tool[];
22+
listTools: () => void;
23+
callTool: (name: string, params: Record<string, unknown>) => void;
24+
selectedTool: Tool | null;
25+
setSelectedTool: (tool: Tool) => void;
26+
toolResult: string;
27+
error: string | null;
28+
}) => {
29+
const [params, setParams] = useState("");
30+
31+
return (
32+
<TabsContent value="tools" className="grid grid-cols-2 gap-4">
33+
<div className="bg-white rounded-lg shadow">
34+
<div className="p-4 border-b border-gray-200">
35+
<h3 className="font-semibold">Tools</h3>
36+
</div>
37+
<div className="p-4">
38+
<Button variant="outline" className="w-full mb-4" onClick={listTools}>
39+
List Tools
40+
</Button>
41+
<div className="space-y-2">
42+
{tools.map((tool, index) => (
43+
<div
44+
key={index}
45+
className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
46+
onClick={() => setSelectedTool(tool)}
47+
>
48+
<span className="flex-1">{tool.name}</span>
49+
</div>
50+
))}
51+
</div>
52+
</div>
53+
</div>
54+
55+
<div className="bg-white rounded-lg shadow">
56+
<div className="p-4 border-b border-gray-200">
57+
<h3 className="font-semibold">
58+
{selectedTool ? selectedTool.name : "Select a tool"}
59+
</h3>
60+
</div>
61+
<div className="p-4">
62+
{error ? (
63+
<Alert variant="destructive">
64+
<AlertCircle className="h-4 w-4" />
65+
<AlertTitle>Error</AlertTitle>
66+
<AlertDescription>{error}</AlertDescription>
67+
</Alert>
68+
) : selectedTool ? (
69+
<div className="space-y-4">
70+
<Textarea
71+
placeholder="Tool parameters (JSON)"
72+
className="h-32 font-mono"
73+
value={params}
74+
onChange={(e) => setParams(e.target.value)}
75+
/>
76+
<Button
77+
onClick={() => callTool(selectedTool.name, JSON.parse(params))}
78+
>
79+
<Send className="w-4 h-4 mr-2" />
80+
Run Tool
81+
</Button>
82+
{toolResult && (
83+
<pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
84+
{JSON.stringify(toolResult, null, 2)}
85+
</pre>
86+
)}
87+
</div>
88+
) : (
89+
<Alert>
90+
<AlertDescription>
91+
Select a tool from the list to view its details and run it
92+
</AlertDescription>
93+
</Alert>
94+
)}
95+
</div>
96+
</div>
97+
</TabsContent>
98+
);
99+
};
100+
101+
export default ToolsTab;

‎client/src/components/ToolsTabs.tsx‎

Whitespace-only changes.

‎server/src/client.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ import {
1010
ListPromptsResultSchema,
1111
GetPromptResult,
1212
GetPromptResultSchema,
13+
ListToolsResult,
14+
ListToolsResultSchema,
15+
CallToolResult,
16+
CallToolResultSchema,
1317
} from "mcp-typescript/types.js";
1418

1519
export class McpClient {
@@ -86,6 +90,29 @@ export class McpClient {
8690
);
8791
}
8892

93+
// Tool Operations
94+
async listTools(): Promise<ListToolsResult> {
95+
return await this.client.request(
96+
{
97+
method: "tools/list",
98+
},
99+
ListToolsResultSchema,
100+
);
101+
}
102+
103+
async callTool(
104+
name: string,
105+
params: Record<string, unknown>,
106+
): Promise<CallToolResult> {
107+
return await this.client.request(
108+
{
109+
method: "tools/call",
110+
params: { name, ...params },
111+
},
112+
CallToolResultSchema,
113+
);
114+
}
115+
89116
getServerCapabilities() {
90117
return this.client.getServerCapabilities();
91118
}

‎server/src/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,19 @@ wss.on("connection", (ws: WebSocket) => {
3030
} else if (command.type === "getPrompt" && command.name) {
3131
const prompt = await mcpClient.getPrompt(command.name);
3232
ws.send(JSON.stringify({ type: "prompt", data: prompt }));
33+
} else if (command.type === "listTools") {
34+
const tools = await mcpClient.listTools();
35+
ws.send(JSON.stringify({ type: "tools", data: tools }));
36+
} else if (
37+
command.type === "callTool" &&
38+
command.name &&
39+
command.params
40+
) {
41+
const result = await mcpClient.callTool(
42+
command.name + "asdf",
43+
command.params,
44+
);
45+
ws.send(JSON.stringify({ type: "toolResult", data: result }));
3346
}
3447
} catch (error) {
3548
console.error("Error:", error);

0 commit comments

Comments
 (0)