diff --git a/.gitignore b/.gitignore index 3e71bf2..0f4928e 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules server/build client/dist client/tsconfig.app.tsbuildinfo +client/tsconfig.node.tsbuildinfo diff --git a/client/package.json b/client/package.json index cf896a8..1199b41 100644 --- a/client/package.json +++ b/client/package.json @@ -22,7 +22,8 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.3", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "zod": "^3.23.8" }, "devDependencies": { "@eslint/js": "^9.11.1", diff --git a/client/src/App.tsx b/client/src/App.tsx index deba38d..5747b9d 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -7,6 +7,7 @@ import { ReadResourceResultSchema, CallToolResultSchema, ListPromptsResultSchema, + Resource, Tool, ClientRequest, } from "mcp-typescript/types.js"; @@ -34,12 +35,12 @@ import { import ConsoleTab from "./components/ConsoleTab"; import Sidebar from "./components/Sidebar"; import RequestsTab from "./components/RequestsTabs"; -import ResourcesTab, { Resource } from "./components/ResourcesTab"; +import ResourcesTab from "./components/ResourcesTab"; import NotificationsTab from "./components/NotificationsTab"; import PromptsTab, { Prompt } from "./components/PromptsTab"; import ToolsTab from "./components/ToolsTab"; import History from "./components/History"; -import { AnyZodObject } from "node_modules/zod/lib"; +import { AnyZodObject } from "zod"; const App = () => { const [connectionStatus, setConnectionStatus] = useState< @@ -108,7 +109,7 @@ const App = () => { } }; - const readResource = async (uri: string) => { + const readResource = async (uri: URL) => { const response = await makeRequest( { method: "resources/read" as const, @@ -168,7 +169,6 @@ const App = () => { version: "0.0.1", }); - const clientTransport = new SSEClientTransport(); const backendUrl = new URL("http://localhost:3000/sse"); backendUrl.searchParams.append("transportType", transportType); @@ -179,7 +179,7 @@ const App = () => { backendUrl.searchParams.append("url", url); } - await clientTransport.connect(backendUrl); + const clientTransport = new SSEClientTransport(backendUrl); await client.connect(clientTransport); setMcpClient(client); diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx index 0fca352..f315933 100644 --- a/client/src/components/ResourcesTab.tsx +++ b/client/src/components/ResourcesTab.tsx @@ -2,13 +2,9 @@ import { FileText, ChevronRight, AlertCircle, RefreshCw } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { TabsContent } from "@/components/ui/tabs"; +import { Resource } from "mcp-typescript/types.js"; import ListPane from "./ListPane"; -export type Resource = { - uri: string; - name: string; -}; - const ResourcesTab = ({ resources, listResources, @@ -20,7 +16,7 @@ const ResourcesTab = ({ }: { resources: Resource[]; listResources: () => void; - readResource: (uri: string) => void; + readResource: (uri: URL) => void; selectedResource: Resource | null; setSelectedResource: (resource: Resource) => void; resourceContent: string; @@ -37,7 +33,7 @@ const ResourcesTab = ({ renderItem={(resource) => (
- + {resource.name} diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index d6da683..60f8381 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -61,7 +61,7 @@ const ToolsTab = ({

{selectedTool.description}

- {Object.entries(selectedTool.inputSchema.properties).map( + {Object.entries(selectedTool.inputSchema.properties ?? []).map( ([key, value]) => (