diff --git a/client/src/App.tsx b/client/src/App.tsx index 4c0af5a..0193872 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -7,6 +7,8 @@ import { ReadResourceResultSchema, CallToolResultSchema, ListPromptsResultSchema, + Tool, + ClientRequest, } from "mcp-typescript/types.js"; import { useState } from "react"; import { @@ -28,8 +30,9 @@ 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"; +import ToolsTab from "./components/ToolsTab"; import History from "./components/History"; +import { AnyZodObject } from "node_modules/zod/lib"; const App = () => { const [connectionStatus, setConnectionStatus] = useState< @@ -39,7 +42,7 @@ const App = () => { const [resourceContent, setResourceContent] = useState(""); const [prompts, setPrompts] = useState([]); const [promptContent, setPromptContent] = useState(""); - const [tools, setTools] = useState([]); + const [tools, setTools] = useState([]); const [toolResult, setToolResult] = useState(""); const [error, setError] = useState(null); const [command, setCommand] = useState( @@ -57,7 +60,7 @@ const App = () => { null, ); const [selectedPrompt, setSelectedPrompt] = useState(null); - const [selectedTool, setSelectedTool] = useState(null); + const [selectedTool, setSelectedTool] = useState(null); const pushHistory = (request: object, response: object) => { setRequestHistory((prev) => [ @@ -66,10 +69,10 @@ const App = () => { ]); }; - const makeRequest = async ( - request: Parameters[0], - schema: Parameters[1], - ): Promise> => { + const makeRequest = async ( + request: ClientRequest, + schema: T, + ) => { if (!mcpClient) { throw new Error("MCP client not connected"); } @@ -114,9 +117,7 @@ const App = () => { }, ListPromptsResultSchema, ); - if (response.prompts) { - setPrompts(response.prompts); - } + setPrompts(response.prompts); }; const getPrompt = async (name: string, args: Record = {}) => { @@ -137,9 +138,7 @@ const App = () => { }, ListToolsResultSchema, ); - if (response.tools) { - setTools(response.tools); - } + setTools(response.tools); }; const callTool = async (name: string, params: Record) => { diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index cd9e8f7..d6da683 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -3,19 +3,11 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Send, AlertCircle } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { Tool } from "mcp-typescript/types.js"; import { useState } from "react"; import { Label } from "@/components/ui/label"; import ListPane from "./ListPane"; -export type Tool = { - name: string; - description?: string | undefined; - inputSchema: { - type: string; - properties?: Record; - }; -}; - const ToolsTab = ({ tools, listTools, diff --git a/server/src/index.ts b/server/src/index.ts index 902ee03..240ef2c 100644 --- a/server/src/index.ts +++ b/server/src/index.ts @@ -1,48 +1,32 @@ import cors from "cors"; -import { Server } from "mcp-typescript/server/index.js"; import { SSEServerTransport } from "mcp-typescript/server/sse.js"; import express from "express"; -import { Client } from "mcp-typescript/client/index.js"; import { StdioClientTransport } from "mcp-typescript/client/stdio.js"; import mcpProxy from "./mcpProxy.js"; const app = express(); app.use(cors()); -let servers: Server[] = []; +let transports: SSEServerTransport[] = []; app.get("/sse", async (req, res) => { console.log("New SSE connection"); const command = decodeURIComponent(req.query.command as string); const args = decodeURIComponent(req.query.args as string).split(","); - const mcpClient = new Client({ name: "MyApp", version: "1.0.0" }); const backingServerTransport = new StdioClientTransport(); await backingServerTransport.spawn({ command, args }); - await mcpClient.connect(backingServerTransport); const webAppTransport = new SSEServerTransport("/message"); - const server = new Server({ - name: "mcp-server-inspector", - version: "0.0.1", - }); - servers.push(server); - - server.onclose = async () => { - console.log("SSE connection closed"); - servers = servers.filter((s) => s !== server); - await mcpClient.close(); - }; + transports.push(webAppTransport); await webAppTransport.connectSSE(req, res); - await server.connect(webAppTransport); mcpProxy({ transportToClient: webAppTransport, transportToServer: backingServerTransport, onerror: (error) => { console.error(error); - server.close(); }, }); }); @@ -50,9 +34,7 @@ app.get("/sse", async (req, res) => { app.post("/message", async (req, res) => { console.log("Received message"); - const transport = servers - .map((s) => s.transport as SSEServerTransport) - .find((t) => true); + const transport = transports.find((t) => true); if (!transport) { res.status(404).send("Session not found"); return;