Skip to content

Commit 0a7f5f9

Browse files
ashwin-antashwin-ant
committed
add prompts tab
1 parent af16a53 commit 0a7f5f9

File tree

5 files changed

+198
-28
lines changed

5 files changed

+198
-28
lines changed

‎client/src/App.tsx‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import { useState, useEffect } from "react";
2-
import { Send, Bell, Terminal, Files } from "lucide-react";
2+
import { Send, Bell, Terminal, Files, MessageSquare } from "lucide-react";
33
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
44

55
import ConsoleTab from "./components/ConsoleTab";
66
import Sidebar from "./components/Sidebar";
77
import RequestsTab from "./components/RequestsTabs";
88
import ResourcesTab, { Resource } from "./components/ResourcesTab";
99
import NotificationsTab from "./components/NotificationsTab";
10+
import PromptsTab, { Prompt } from "./components/PromptsTab";
1011

1112
const App = () => {
1213
const [socket, setSocket] = useState<WebSocket | null>(null);
13-
const [resources, setResources] = useState<Resource[]>([]);
14-
const [selectedResource, setSelectedResource] = useState<Resource | null>(
15-
null,
16-
);
17-
const [resourceContent, setResourceContent] = useState<string>("");
1814
const [connectionStatus, setConnectionStatus] = useState<
1915
"disconnected" | "connected" | "error"
2016
>("disconnected");
17+
const [resources, setResources] = useState<Resource[]>([]);
18+
const [resourceContent, setResourceContent] = useState<string>("");
19+
const [prompts, setPrompts] = useState<Prompt[]>([]);
20+
const [promptContent, setPromptContent] = useState<string>("");
2121
const [error, setError] = useState<string | null>(null);
2222

2323
useEffect(() => {
@@ -38,6 +38,12 @@ const App = () => {
3838
} else if (message.type === "resource") {
3939
setResourceContent(JSON.stringify(message.data, null, 2));
4040
setError(null);
41+
} else if (message.type === "prompts") {
42+
setPrompts(message.data.prompts);
43+
setError(null);
44+
} else if (message.type === "prompt") {
45+
setPromptContent(JSON.stringify(message.data, null, 2));
46+
setError(null);
4147
} else if (message.type === "error") {
4248
setError(message.message);
4349
}
@@ -54,24 +60,41 @@ const App = () => {
5460
return () => ws.close();
5561
}, []);
5662

57-
const listResources = () => {
63+
const sendWebSocketMessage = (message: object) => {
5864
if (socket) {
59-
socket.send(JSON.stringify({ type: "listResources" }));
65+
console.log("Sending WebSocket message:", message);
66+
socket.send(JSON.stringify(message));
6067
}
6168
};
6269

70+
const [selectedResource, setSelectedResource] = useState<Resource | null>(
71+
null,
72+
);
73+
const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
74+
75+
const listResources = () => {
76+
sendWebSocketMessage({ type: "listResources" });
77+
};
78+
6379
const readResource = (uri: string) => {
64-
if (socket) {
65-
socket.send(JSON.stringify({ type: "readResource", uri }));
66-
}
80+
sendWebSocketMessage({ type: "readResource", uri });
81+
};
82+
83+
const listPrompts = () => {
84+
sendWebSocketMessage({ type: "listPrompts" });
85+
};
86+
87+
const getPrompt = (name: string) => {
88+
sendWebSocketMessage({ type: "getPrompt", name });
6789
};
6890

6991
return (
7092
<div className="flex h-screen bg-gray-100">
7193
<Sidebar connectionStatus={connectionStatus} />
72-
<div className="flex-1 flex flex-col">
73-
<div className="flex-1 p-6">
74-
<Tabs defaultValue="requests">
94+
<div className="flex-1 flex flex-col overflow-hidden">
95+
<h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
96+
<div className="flex-1 overflow-auto">
97+
<Tabs defaultValue="requests" className="w-full">
7598
<TabsList className="mb-4">
7699
<TabsTrigger value="requests">
77100
<Send className="w-4 h-4 mr-2" />
@@ -85,24 +108,39 @@ const App = () => {
85108
<Files className="w-4 h-4 mr-2" />
86109
Resources
87110
</TabsTrigger>
111+
<TabsTrigger value="prompts">
112+
<MessageSquare className="w-4 h-4 mr-2" />
113+
Prompts
114+
</TabsTrigger>
88115
<TabsTrigger value="console">
89116
<Terminal className="w-4 h-4 mr-2" />
90117
Console
91118
</TabsTrigger>
92119
</TabsList>
93120

94-
<RequestsTab />
95-
<ResourcesTab
96-
resources={resources}
97-
listResources={listResources}
98-
readResource={readResource}
99-
selectedResource={selectedResource}
100-
setSelectedResource={setSelectedResource}
101-
resourceContent={resourceContent}
102-
error={error}
103-
/>
104-
<NotificationsTab />
105-
<ConsoleTab />
121+
<div className="w-full">
122+
<RequestsTab />
123+
<ResourcesTab
124+
resources={resources}
125+
listResources={listResources}
126+
readResource={readResource}
127+
selectedResource={selectedResource}
128+
setSelectedResource={setSelectedResource}
129+
resourceContent={resourceContent}
130+
error={error}
131+
/>
132+
<NotificationsTab />
133+
<PromptsTab
134+
prompts={prompts}
135+
listPrompts={listPrompts}
136+
getPrompt={getPrompt}
137+
selectedPrompt={selectedPrompt}
138+
setSelectedPrompt={setSelectedPrompt}
139+
promptContent={promptContent}
140+
error={error}
141+
/>
142+
<ConsoleTab />
143+
</div>
106144
</Tabs>
107145
</div>
108146
</div>

‎client/src/components/PromptsTab.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { Send, AlertCircle } from "lucide-react";
2+
import { Button } from "@/components/ui/button";
3+
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
4+
import { TabsContent } from "@/components/ui/tabs";
5+
import { Input } from "@/components/ui/input";
6+
import { Textarea } from "@/components/ui/textarea";
7+
8+
export type Prompt = {
9+
id: string;
10+
name: string;
11+
};
12+
13+
const PromptsTab = ({
14+
prompts,
15+
listPrompts,
16+
getPrompt,
17+
selectedPrompt,
18+
setSelectedPrompt,
19+
promptContent,
20+
error,
21+
}: {
22+
prompts: Prompt[];
23+
listPrompts: () => void;
24+
getPrompt: (name: string) => void;
25+
selectedPrompt: Prompt | null;
26+
setSelectedPrompt: (prompt: Prompt) => void;
27+
promptContent: string;
28+
error: string | null;
29+
}) => {
30+
console.log("prompts", prompts);
31+
return (
32+
<TabsContent value="prompts" 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">Prompts</h3>
36+
</div>
37+
<div className="p-4">
38+
<Button
39+
variant="outline"
40+
className="w-full mb-4"
41+
onClick={listPrompts}
42+
>
43+
List Prompts
44+
</Button>
45+
<div className="space-y-2">
46+
{prompts.map((prompt) => (
47+
<div
48+
key={prompt.id}
49+
className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
50+
onClick={() => {
51+
setSelectedPrompt(prompt);
52+
getPrompt(prompt.name);
53+
}}
54+
>
55+
<span className="flex-1">{prompt.name}</span>
56+
</div>
57+
))}
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div className="bg-white rounded-lg shadow">
63+
<div className="p-4 border-b border-gray-200">
64+
<h3 className="font-semibold">
65+
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
66+
</h3>
67+
</div>
68+
<div className="p-4">
69+
{error ? (
70+
<Alert variant="destructive">
71+
<AlertCircle className="h-4 w-4" />
72+
<AlertTitle>Error</AlertTitle>
73+
<AlertDescription>{error}</AlertDescription>
74+
</Alert>
75+
) : selectedPrompt ? (
76+
<div className="space-y-4">
77+
<Textarea
78+
value={promptContent}
79+
readOnly
80+
className="h-64 font-mono"
81+
/>
82+
<div className="flex space-x-2">
83+
<Input placeholder="Enter your message" />
84+
<Button>
85+
<Send className="w-4 h-4 mr-2" />
86+
Send
87+
</Button>
88+
</div>
89+
</div>
90+
) : (
91+
<Alert>
92+
<AlertDescription>
93+
Select a prompt from the list to view and use it
94+
</AlertDescription>
95+
</Alert>
96+
)}
97+
</div>
98+
</div>
99+
</TabsContent>
100+
);
101+
};
102+
103+
export default PromptsTab;

‎client/src/components/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
55
<div className="w-64 bg-white border-r border-gray-200">
66
<div className="flex items-center p-4 border-b border-gray-200">
77
<Menu className="w-6 h-6 text-gray-500" />
8-
<h1 className="ml-2 text-lg font-semibold">MCP Client</h1>
8+
<h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
99
</div>
1010

1111
<div className="p-4">

‎server/src/client.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {
66
ReadResourceResult,
77
ListResourcesResultSchema,
88
ReadResourceResultSchema,
9+
ListPromptsResult,
10+
ListPromptsResultSchema,
11+
GetPromptResult,
12+
GetPromptResultSchema,
913
} from "mcp-typescript/types.js";
1014

1115
export class McpClient {
@@ -62,6 +66,26 @@ export class McpClient {
6266
);
6367
}
6468

69+
// Prompt Operations
70+
async listPrompts(): Promise<ListPromptsResult> {
71+
return await this.client.request(
72+
{
73+
method: "prompts/list",
74+
},
75+
ListPromptsResultSchema,
76+
);
77+
}
78+
79+
async getPrompt(name: string): Promise<GetPromptResult> {
80+
return await this.client.request(
81+
{
82+
method: "prompts/get",
83+
params: { name },
84+
},
85+
GetPromptResultSchema,
86+
);
87+
}
88+
6589
getServerCapabilities() {
6690
return this.client.getServerCapabilities();
6791
}

‎server/src/index.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const app = express();
77
const server = http.createServer(app);
88
const wss = new WebSocketServer({ server });
99

10-
// Create and connect the MCP client
1110
const mcpClient = new McpClient("MyApp", "1.0.0");
1211
await mcpClient.connectStdio(
1312
"/Users/ashwin/.nvm/versions/node/v18.20.4/bin/node",
@@ -25,6 +24,12 @@ wss.on("connection", (ws: WebSocket) => {
2524
} else if (command.type === "readResource" && command.uri) {
2625
const resource = await mcpClient.readResource(command.uri);
2726
ws.send(JSON.stringify({ type: "resource", data: resource }));
27+
} else if (command.type === "listPrompts") {
28+
const prompts = await mcpClient.listPrompts();
29+
ws.send(JSON.stringify({ type: "prompts", data: prompts }));
30+
} else if (command.type === "getPrompt" && command.name) {
31+
const prompt = await mcpClient.getPrompt(command.name);
32+
ws.send(JSON.stringify({ type: "prompt", data: prompt }));
2833
}
2934
} catch (error) {
3035
console.error("Error:", error);

0 commit comments

Comments
 (0)