style: Format test files with Prettier

Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>

.github/workflows/main.yml

@@ -4,6 +4,8 @@ on:
       - main
 
   pull_request:
+  release:
+    types: [published]
 
 jobs:
   build:
@@ -12,26 +14,42 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Check formatting
+        run: npx prettier --check .
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: npm
 
-      - uses: actions/checkout@v4
-        with:
-          repository: modelcontextprotocol/typescript-sdk
-          ssh-key: ${{ secrets.TYPESCRIPT_SDK_KEY }}
-          path: packages/@modelcontextprotocol/sdk
-
-      - run: npm ci
-        working-directory: packages/@modelcontextprotocol/sdk
-
-      - run: npm pack
-        working-directory: packages/@modelcontextprotocol/sdk
-
-      - run: npm install --save packages/@modelcontextprotocol/sdk/modelcontextprotocol-sdk-*.tgz
-
       # Working around https://github.com/npm/cli/issues/4828
       # - run: npm ci
       - run: npm install --no-package-lock
       - run: npm run build
+
+  publish:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release'
+    environment: release
+    needs: build
+
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+          registry-url: "https://registry.npmjs.org"
+
+      # Working around https://github.com/npm/cli/issues/4828
+      # - run: npm ci
+      - run: npm install --no-package-lock
+
+      # TODO: Add --provenance once the repo is public
+      - run: npm run publish-all
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmrc

@@ -1 +1,2 @@
-registry = "https://registry.npmjs.org/"
+registry="https://registry.npmjs.org/"
+@modelcontextprotocol:registry="https://registry.npmjs.org/"

.prettierignore

@@ -1,2 +1,4 @@
 packages
 server/build
+CODE_OF_CONDUCT.md
+SECURITY.md

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mcp-coc@anthropic.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,37 @@
+# Contributing to Model Context Protocol Inspector
+
+Thanks for your interest in contributing! This guide explains how to get involved.
+
+## Getting Started
+
+1. Fork the repository and clone it locally
+2. Install dependencies with `npm install`
+3. Run `npm run dev` to start both client and server in development mode
+4. Use the web UI at http://localhost:5173 to interact with the inspector
+
+## Development Process & Pull Requests
+
+1. Create a new branch for your changes
+2. Make your changes following existing code style and conventions
+3. Test changes locally
+4. Update documentation as needed
+5. Use clear commit messages explaining your changes
+6. Verify all changes work as expected
+7. Submit a pull request
+8. PRs will be reviewed by maintainers
+
+## Code of Conduct
+
+This project follows our [Code of Conduct](CODE_OF_CONDUCT.md). Please read it before contributing.
+
+## Security
+
+If you find a security vulnerability, please refer to our [Security Policy](SECURITY.md) for reporting instructions.
+
+## Questions?
+
+Feel free to [open an issue](https://github.com/modelcontextprotocol/mcp-inspector/issues) for questions or create a discussion for general topics.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the MIT license.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Anthropic, PBC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,30 +2,59 @@
 
 The MCP inspector is a developer tool for testing and debugging MCP servers.
 
-## Getting started
+![MCP Inspector Screenshot](mcp-inspector.png)
 
-This repository depends on the [MCP TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk/). Until these repositories are made public and published to npm, the SDK has to be preinstalled manually:
+## Running the Inspector
 
-1. Download the [latest release of the SDK](https://github.com/modelcontextprotocol/typescript-sdk/releases) (the file named something like `modelcontextprotocol-sdk-0.1.0.tgz`). You don't need to extract it.
-2. From within your checkout of _this_ repository, run `npm install --save path/to/sdk.tgz`. This will overwrite the expected location for the SDK to allow you to proceed.
+### From an MCP server repository
 
-Then, you should be able to install the rest of the dependencies normally:
+To inspect an MCP server implementation, there's no need to clone this repo. Instead, use `npx`. For example, if your server is built at `build/index.js`:
 
-```sh
-npm install
+```bash
+npx @modelcontextprotocol/inspector build/index.js
 ```
 
-You can run it in dev mode via:
+You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
+
+```bash
+# Pass arguments only
+npx @modelcontextprotocol/inspector build/index.js arg1 arg2
+
+# Pass environment variables only
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js
+
+# Pass both environment variables and arguments
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2
+
+# Use -- to separate inspector flags from server arguments
+npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag
+```
+
+The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
+
+```bash
+CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
+```
+
+For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
+
+### From this repository
+
+If you're working on the inspector itself:
+
+Development mode:
 
 ```bash
 npm run dev
 ```
 
-This will start both the client and server.
-
-To run in production mode:
+Production mode:
 
 ```bash
 npm run build
 npm start
 ```
+
+## License
+
+This project is licensed under the MIT License—see the [LICENSE](LICENSE) file for details.

SECURITY.md

@@ -0,0 +1,14 @@
+# Security Policy
+Thank you for helping us keep the inspector secure.
+
+## Reporting Security Issues
+
+This project is maintained by [Anthropic](https://www.anthropic.com/) as part of the Model Context Protocol project.
+
+The security of our systems and user data is Anthropic’s top priority. We appreciate the work of security researchers acting in good faith in identifying and reporting potential vulnerabilities.
+
+Our security program is managed on HackerOne and we ask that any validated vulnerability in this functionality be reported through their [submission form](https://hackerone.com/anthropic-vdp/reports/new?type=team&report_type=vulnerability).
+
+## Vulnerability Disclosure Program
+
+Our Vulnerability Program Guidelines are defined on our [HackerOne program page](https://hackerone.com/anthropic-vdp).

bin/cli.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+import { resolve, dirname } from "path";
+import { spawnPromise } from "spawn-rx";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function main() {
+  // Parse command line arguments
+  const args = process.argv.slice(2);
+  const envVars = {};
+  const mcpServerArgs = [];
+  let command = null;
+  let parsingFlags = true;
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (parsingFlags && arg === "--") {
+      parsingFlags = false;
+      continue;
+    }
+
+    if (parsingFlags && arg === "-e" && i + 1 < args.length) {
+      const [key, value] = args[++i].split("=");
+      if (key && value) {
+        envVars[key] = value;
+      }
+    } else if (!command) {
+      command = arg;
+    } else {
+      mcpServerArgs.push(arg);
+    }
+  }
+
+  const inspectorServerPath = resolve(
+    __dirname,
+    "..",
+    "server",
+    "build",
+    "index.js",
+  );
+
+  // Path to the client entry point
+  const inspectorClientPath = resolve(
+    __dirname,
+    "..",
+    "client",
+    "bin",
+    "cli.js",
+  );
+
+  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
+  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";
+
+  console.log("Starting MCP inspector...");
+
+  const abort = new AbortController();
+
+  let cancelled = false;
+  process.on("SIGINT", () => {
+    cancelled = true;
+    abort.abort();
+  });
+
+  const server = spawnPromise(
+    "node",
+    [
+      inspectorServerPath,
+      ...(command ? [`--env`, command] : []),
+      ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
+    ],
+    {
+      env: {
+        ...process.env,
+        PORT: SERVER_PORT,
+        MCP_ENV_VARS: JSON.stringify(envVars),
+      },
+      signal: abort.signal,
+      echoOutput: true,
+    },
+  );
+
+  const client = spawnPromise("node", [inspectorClientPath], {
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+    echoOutput: true,
+  });
+
+  // Make sure our server/client didn't immediately fail
+  await Promise.any([server, client, delay(2 * 1000)]);
+  const portParam = SERVER_PORT === "3000" ? "" : `?proxyPort=${SERVER_PORT}`;
+  console.log(
+    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
+  );
+
+  try {
+    await Promise.any([server, client]);
+  } catch (e) {
+    if (!cancelled || process.env.DEBUG) throw e;
+  }
+
+  return 0;
+}
+
+main()
+  .then((_) => process.exit(0))
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });

client/bin/cli.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import handler from "serve-handler";
+import http from "http";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distPath = join(__dirname, "../dist");
+
+const server = http.createServer((request, response) => {
+  return handler(request, response, { public: distPath });
+});
+
+const port = process.env.PORT || 5173;
+server.listen(port, () => {});

client/components.json

@@ -17,4 +17,4 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   }
-}
+}

client/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/mcp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCP Inspector</title>
   </head>

client/package.json

@@ -1,16 +1,28 @@
 {
-  "name": "client",
-  "private": true,
-  "version": "0.0.0",
+  "name": "@modelcontextprotocol/inspector-client",
+  "version": "0.3.0",
+  "description": "Client-side application for the Model Context Protocol inspector",
+  "license": "MIT",
+  "author": "Anthropic, PBC (https://anthropic.com)",
+  "homepage": "https://modelcontextprotocol.io",
+  "bugs": "https://github.com/modelcontextprotocol/inspector/issues",
   "type": "module",
+  "bin": {
+    "mcp-inspector-client": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "*",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
@@ -21,25 +33,32 @@
     "lucide-react": "^0.447.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.6",
+    "serve-handler": "^6.1.6",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "@types/serve-handler": "^6.1.4",
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vitest": "^3.0.0"
   }
 }

client/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

client/public/mcp.svg

@@ -0,0 +1,12 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19_13)">
+<path d="M18 84.8528L85.8822 16.9706C95.2548 7.59798 110.451 7.59798 119.823 16.9706V16.9706C129.196 26.3431 129.196 41.5391 119.823 50.9117L68.5581 102.177" stroke="black" stroke-width="12" stroke-linecap="round"/>
+<path d="M69.2652 101.47L119.823 50.9117C129.196 41.5391 144.392 41.5391 153.765 50.9117L154.118 51.2652C163.491 60.6378 163.491 75.8338 154.118 85.2063L92.7248 146.6C89.6006 149.724 89.6006 154.789 92.7248 157.913L105.331 170.52" stroke="black" stroke-width="12" stroke-linecap="round"/>
+<path d="M102.853 33.9411L52.6482 84.1457C43.2756 93.5183 43.2756 108.714 52.6482 118.087V118.087C62.0208 127.459 77.2167 127.459 86.5893 118.087L136.794 67.8822" stroke="black" stroke-width="12" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_19_13">
+<rect width="180" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>

client/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

client/src/App.tsx

@@ -1,86 +1,84 @@
-import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useConnection } from "./lib/hooks/useConnection";
 import {
-  CallToolResultSchema,
   ClientRequest,
-  CreateMessageRequestSchema,
+  CompatibilityCallToolResult,
+  CompatibilityCallToolResultSchema,
   CreateMessageResult,
   EmptyResultSchema,
   GetPromptResultSchema,
   ListPromptsResultSchema,
   ListResourcesResultSchema,
-  ListToolsResultSchema,
-  ProgressNotificationSchema,
+  ListResourceTemplatesResultSchema,
   ReadResourceResultSchema,
+  ListToolsResultSchema,
   Resource,
+  ResourceTemplate,
+  Root,
   ServerNotification,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useEffect, useRef, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { StdErrNotification } from "./lib/notificationTypes";
+
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Bell,
   Files,
+  FolderTree,
   Hammer,
   Hash,
   MessageSquare,
-  Play,
-  Send,
-  Terminal,
 } from "lucide-react";
 
-import { AnyZodObject } from "zod";
+import { z } from "zod";
 import "./App.css";
 import ConsoleTab from "./components/ConsoleTab";
 import HistoryAndNotifications from "./components/History";
 import PingTab from "./components/PingTab";
 import PromptsTab, { Prompt } from "./components/PromptsTab";
-import RequestsTab from "./components/RequestsTabs";
 import ResourcesTab from "./components/ResourcesTab";
+import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
+const params = new URLSearchParams(window.location.search);
+const PROXY_PORT = params.get("proxyPort") ?? "3000";
+const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
+
 const App = () => {
-  const [connectionStatus, setConnectionStatus] = useState<
-    "disconnected" | "connected" | "error"
-  >("disconnected");
   const [resources, setResources] = useState<Resource[]>([]);
+  const [resourceTemplates, setResourceTemplates] = useState<
+    ResourceTemplate[]
+  >([]);
   const [resourceContent, setResourceContent] = useState<string>("");
   const [prompts, setPrompts] = useState<Prompt[]>([]);
   const [promptContent, setPromptContent] = useState<string>("");
   const [tools, setTools] = useState<Tool[]>([]);
-  const [toolResult, setToolResult] = useState<string>("");
-  const [error, setError] = useState<string | null>(null);
+  const [toolResult, setToolResult] =
+    useState<CompatibilityCallToolResult | null>(null);
+  const [errors, setErrors] = useState<Record<string, string | null>>({
+    resources: null,
+    prompts: null,
+    tools: null,
+  });
   const [command, setCommand] = useState<string>(() => {
-    return (
-      localStorage.getItem("lastCommand") ||
-      "/Users/ashwin/.nvm/versions/node/v18.20.4/bin/node"
-    );
+    return localStorage.getItem("lastCommand") || "mcp-server-everything";
   });
   const [args, setArgs] = useState<string>(() => {
-    return (
-      localStorage.getItem("lastArgs") ||
-      "/Users/ashwin/code/mcp/example-servers/build/everything/stdio.js"
-    );
+    return localStorage.getItem("lastArgs") || "";
   });
-  const [url, setUrl] = useState<string>("http://localhost:3001/sse");
+
+  const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
   const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
-  const [requestHistory, setRequestHistory] = useState<
-    { request: string; response: string }[]
-  >([]);
-  const [mcpClient, setMcpClient] = useState<Client | null>(null);
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
+  const [stdErrNotifications, setStdErrNotifications] = useState<
+    StdErrNotification[]
+  >([]);
+  const [roots, setRoots] = useState<Root[]>([]);
+  const [env, setEnv] = useState<Record<string, string>>({});
 
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
@@ -91,6 +89,7 @@ const App = () => {
     >
   >([]);
   const nextRequestId = useRef(0);
+  const rootsRef = useRef<Root[]>([]);
 
   const handleApproveSampling = (id: number, result: CreateMessageResult) => {
     setPendingSampleRequests((prev) => {
@@ -116,12 +115,73 @@ const App = () => {
   const [nextResourceCursor, setNextResourceCursor] = useState<
     string | undefined
   >();
+  const [nextResourceTemplateCursor, setNextResourceTemplateCursor] = useState<
+    string | undefined
+  >();
   const [nextPromptCursor, setNextPromptCursor] = useState<
     string | undefined
   >();
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
 
+  const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
+
+  const {
+    connectionStatus,
+    serverCapabilities,
+    mcpClient,
+    requestHistory,
+    makeRequest: makeConnectionRequest,
+    sendNotification,
+    connect: connectMcpServer,
+  } = useConnection({
+    transportType,
+    command,
+    args,
+    sseUrl,
+    env,
+    proxyServerUrl: PROXY_SERVER_URL,
+    onNotification: (notification) => {
+      setNotifications((prev) => [...prev, notification as ServerNotification]);
+    },
+    onStdErrNotification: (notification) => {
+      setStdErrNotifications((prev) => [
+        ...prev,
+        notification as StdErrNotification,
+      ]);
+    },
+    onPendingRequest: (request, resolve, reject) => {
+      setPendingSampleRequests((prev) => [
+        ...prev,
+        { id: nextRequestId.current++, request, resolve, reject },
+      ]);
+    },
+    getRoots: () => rootsRef.current,
+  });
+
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T,
+    tabKey?: keyof typeof errors,
+  ) => {
+    try {
+      const response = await makeConnectionRequest(request, schema);
+      if (tabKey !== undefined) {
+        clearError(tabKey);
+      }
+      return response;
+    } catch (e) {
+      const errorString = (e as Error).message ?? String(e);
+      if (tabKey !== undefined) {
+        setErrors((prev) => ({
+          ...prev,
+          [tabKey]: errorString,
+        }));
+      }
+      throw e;
+    }
+  };
+
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
   }, [command]);
@@ -130,29 +190,35 @@ const App = () => {
     localStorage.setItem("lastArgs", args);
   }, [args]);
 
-  const pushHistory = (request: object, response: object) => {
-    setRequestHistory((prev) => [
-      ...prev,
-      { request: JSON.stringify(request), response: JSON.stringify(response) },
-    ]);
-  };
+  useEffect(() => {
+    fetch(`${PROXY_SERVER_URL}/config`)
+      .then((response) => response.json())
+      .then((data) => {
+        setEnv(data.defaultEnvironment);
+        if (data.defaultCommand) {
+          setCommand(data.defaultCommand);
+        }
+        if (data.defaultArgs) {
+          setArgs(data.defaultArgs);
+        }
+      })
+      .catch((error) =>
+        console.error("Error fetching default environment:", error),
+      );
+  }, []);
 
-  const makeRequest = async <T extends AnyZodObject>(
-    request: ClientRequest,
-    schema: T,
-  ) => {
-    if (!mcpClient) {
-      throw new Error("MCP client not connected");
-    }
+  useEffect(() => {
+    rootsRef.current = roots;
+  }, [roots]);
 
-    try {
-      const response = await mcpClient.request(request, schema);
-      pushHistory(request, response);
-      return response;
-    } catch (e: unknown) {
-      setError((e as Error).message);
-      throw e;
+  useEffect(() => {
+    if (!window.location.hash) {
+      window.location.hash = "resources";
     }
+  }, []);
+
+  const clearError = (tabKey: keyof typeof errors) => {
+    setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
 
   const listResources = async () => {
@@ -162,11 +228,29 @@ const App = () => {
         params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
       },
       ListResourcesResultSchema,
+      "resources",
     );
     setResources(resources.concat(response.resources ?? []));
     setNextResourceCursor(response.nextCursor);
   };
 
+  const listResourceTemplates = async () => {
+    const response = await makeRequest(
+      {
+        method: "resources/templates/list" as const,
+        params: nextResourceTemplateCursor
+          ? { cursor: nextResourceTemplateCursor }
+          : {},
+      },
+      ListResourceTemplatesResultSchema,
+      "resources",
+    );
+    setResourceTemplates(
+      resourceTemplates.concat(response.resourceTemplates ?? []),
+    );
+    setNextResourceTemplateCursor(response.nextCursor);
+  };
+
   const readResource = async (uri: string) => {
     const response = await makeRequest(
       {
@@ -174,6 +258,7 @@ const App = () => {
         params: { uri },
       },
       ReadResourceResultSchema,
+      "resources",
     );
     setResourceContent(JSON.stringify(response, null, 2));
   };
@@ -185,6 +270,7 @@ const App = () => {
         params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
       },
       ListPromptsResultSchema,
+      "prompts",
     );
     setPrompts(response.prompts);
     setNextPromptCursor(response.nextCursor);
@@ -197,6 +283,7 @@ const App = () => {
         params: { name, arguments: args },
       },
       GetPromptResultSchema,
+      "prompts",
     );
     setPromptContent(JSON.stringify(response, null, 2));
   };
@@ -208,6 +295,7 @@ const App = () => {
         params: nextToolCursor ? { cursor: nextToolCursor } : {},
       },
       ListToolsResultSchema,
+      "tools",
     );
     setTools(response.tools);
     setNextToolCursor(response.nextCursor);
@@ -225,213 +313,238 @@ const App = () => {
           },
         },
       },
-      CallToolResultSchema,
+      CompatibilityCallToolResultSchema,
+      "tools",
     );
-    setToolResult(JSON.stringify(response.toolResult, null, 2));
+    setToolResult(response);
   };
 
-  const connectMcpServer = async () => {
-    try {
-      const client = new Client({
-        name: "mcp-inspector",
-        version: "0.0.1",
-      });
-
-      const backendUrl = new URL("http://localhost:3000/sse");
-
-      backendUrl.searchParams.append("transportType", transportType);
-      if (transportType === "stdio") {
-        backendUrl.searchParams.append("command", command);
-        backendUrl.searchParams.append("args", args);
-      } else {
-        backendUrl.searchParams.append("url", url);
-      }
-
-      const clientTransport = new SSEClientTransport(backendUrl);
-      await client.connect(clientTransport);
-
-      client.setNotificationHandler(
-        ProgressNotificationSchema,
-        (notification) => {
-          setNotifications((prevNotifications) => [
-            ...prevNotifications,
-            notification,
-          ]);
-        },
-      );
-
-      client.setRequestHandler(CreateMessageRequestSchema, (request) => {
-        return new Promise<CreateMessageResult>((resolve, reject) => {
-          setPendingSampleRequests((prev) => [
-            ...prev,
-            { id: nextRequestId.current++, request, resolve, reject },
-          ]);
-        });
-      });
-
-      setMcpClient(client);
-      setConnectionStatus("connected");
-    } catch (e) {
-      console.error(e);
-      setConnectionStatus("error");
-    }
+  const handleRootsChange = async () => {
+    await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
   return (
-    <div className="flex h-screen bg-gray-100">
-      <Sidebar connectionStatus={connectionStatus} />
+    <div className="flex h-screen bg-background">
+      <Sidebar
+        connectionStatus={connectionStatus}
+        transportType={transportType}
+        setTransportType={setTransportType}
+        command={command}
+        setCommand={setCommand}
+        args={args}
+        setArgs={setArgs}
+        sseUrl={sseUrl}
+        setSseUrl={setSseUrl}
+        env={env}
+        setEnv={setEnv}
+        onConnect={connectMcpServer}
+        stdErrNotifications={stdErrNotifications}
+      />
       <div className="flex-1 flex flex-col overflow-hidden">
-        <h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
-        <div className="flex-1 overflow-auto flex">
-          <div className="flex-1">
-            <div className="p-4 bg-white shadow-md m-4 rounded-md">
-              <h2 className="text-lg font-semibold mb-2">Connect MCP Server</h2>
-              <div className="flex space-x-2 mb-2">
-                <Select
-                  value={transportType}
-                  onValueChange={(value: "stdio" | "sse") =>
-                    setTransportType(value)
-                  }
+        <div className="flex-1 overflow-auto">
+          {mcpClient ? (
+            <Tabs
+              defaultValue={
+                Object.keys(serverCapabilities ?? {}).includes(
+                  window.location.hash.slice(1),
+                )
+                  ? window.location.hash.slice(1)
+                  : serverCapabilities?.resources
+                    ? "resources"
+                    : serverCapabilities?.prompts
+                      ? "prompts"
+                      : serverCapabilities?.tools
+                        ? "tools"
+                        : "ping"
+              }
+              className="w-full p-4"
+              onValueChange={(value) => (window.location.hash = value)}
+            >
+              <TabsList className="mb-4 p-0">
+                <TabsTrigger
+                  value="resources"
+                  disabled={!serverCapabilities?.resources}
                 >
-                  <SelectTrigger className="w-[180px]">
-                    <SelectValue placeholder="Select transport type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="stdio">STDIO</SelectItem>
-                    <SelectItem value="sse">SSE</SelectItem>
-                  </SelectContent>
-                </Select>
-                {transportType === "stdio" ? (
+                  <Files className="w-4 h-4 mr-2" />
+                  Resources
+                </TabsTrigger>
+                <TabsTrigger
+                  value="prompts"
+                  disabled={!serverCapabilities?.prompts}
+                >
+                  <MessageSquare className="w-4 h-4 mr-2" />
+                  Prompts
+                </TabsTrigger>
+                <TabsTrigger
+                  value="tools"
+                  disabled={!serverCapabilities?.tools}
+                >
+                  <Hammer className="w-4 h-4 mr-2" />
+                  Tools
+                </TabsTrigger>
+                <TabsTrigger value="ping">
+                  <Bell className="w-4 h-4 mr-2" />
+                  Ping
+                </TabsTrigger>
+                <TabsTrigger value="sampling" className="relative">
+                  <Hash className="w-4 h-4 mr-2" />
+                  Sampling
+                  {pendingSampleRequests.length > 0 && (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                      {pendingSampleRequests.length}
+                    </span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="roots">
+                  <FolderTree className="w-4 h-4 mr-2" />
+                  Roots
+                </TabsTrigger>
+              </TabsList>
+
+              <div className="w-full">
+                {!serverCapabilities?.resources &&
+                !serverCapabilities?.prompts &&
+                !serverCapabilities?.tools ? (
+                  <div className="flex items-center justify-center p-4">
+                    <p className="text-lg text-gray-500">
+                      The connected server does not support any MCP capabilities
+                    </p>
+                  </div>
+                ) : (
                   <>
-                    <Input
-                      placeholder="Command"
-                      value={command}
-                      onChange={(e) => setCommand(e.target.value)}
+                    <ResourcesTab
+                      resources={resources}
+                      resourceTemplates={resourceTemplates}
+                      listResources={() => {
+                        clearError("resources");
+                        listResources();
+                      }}
+                      clearResources={() => {
+                        setResources([]);
+                        setNextResourceCursor(undefined);
+                      }}
+                      listResourceTemplates={() => {
+                        clearError("resources");
+                        listResourceTemplates();
+                      }}
+                      clearResourceTemplates={() => {
+                        setResourceTemplates([]);
+                        setNextResourceTemplateCursor(undefined);
+                      }}
+                      readResource={(uri) => {
+                        clearError("resources");
+                        readResource(uri);
+                      }}
+                      selectedResource={selectedResource}
+                      setSelectedResource={(resource) => {
+                        clearError("resources");
+                        setSelectedResource(resource);
+                      }}
+                      resourceContent={resourceContent}
+                      nextCursor={nextResourceCursor}
+                      nextTemplateCursor={nextResourceTemplateCursor}
+                      error={errors.resources}
                     />
-                    <Input
-                      placeholder="Arguments (space-separated)"
-                      value={args}
-                      onChange={(e) => setArgs(e.target.value)}
+                    <PromptsTab
+                      prompts={prompts}
+                      listPrompts={() => {
+                        clearError("prompts");
+                        listPrompts();
+                      }}
+                      clearPrompts={() => {
+                        setPrompts([]);
+                        setNextPromptCursor(undefined);
+                      }}
+                      getPrompt={(name, args) => {
+                        clearError("prompts");
+                        getPrompt(name, args);
+                      }}
+                      selectedPrompt={selectedPrompt}
+                      setSelectedPrompt={(prompt) => {
+                        clearError("prompts");
+                        setSelectedPrompt(prompt);
+                      }}
+                      promptContent={promptContent}
+                      nextCursor={nextPromptCursor}
+                      error={errors.prompts}
+                    />
+                    <ToolsTab
+                      tools={tools}
+                      listTools={() => {
+                        clearError("tools");
+                        listTools();
+                      }}
+                      clearTools={() => {
+                        setTools([]);
+                        setNextToolCursor(undefined);
+                      }}
+                      callTool={(name, params) => {
+                        clearError("tools");
+                        callTool(name, params);
+                      }}
+                      selectedTool={selectedTool}
+                      setSelectedTool={(tool) => {
+                        clearError("tools");
+                        setSelectedTool(tool);
+                        setToolResult(null);
+                      }}
+                      toolResult={toolResult}
+                      nextCursor={nextToolCursor}
+                      error={errors.tools}
+                    />
+                    <ConsoleTab />
+                    <PingTab
+                      onPingClick={() => {
+                        void makeRequest(
+                          {
+                            method: "ping" as const,
+                          },
+                          EmptyResultSchema,
+                        );
+                      }}
+                    />
+                    <SamplingTab
+                      pendingRequests={pendingSampleRequests}
+                      onApprove={handleApproveSampling}
+                      onReject={handleRejectSampling}
+                    />
+                    <RootsTab
+                      roots={roots}
+                      setRoots={setRoots}
+                      onRootsChange={handleRootsChange}
                     />
                   </>
-                ) : (
-                  <Input
-                    placeholder="URL"
-                    value={url}
-                    onChange={(e) => setUrl(e.target.value)}
-                  />
                 )}
-                <Button onClick={connectMcpServer}>
-                  <Play className="w-4 h-4 mr-2" />
-                  Connect
-                </Button>
               </div>
+            </Tabs>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-lg text-gray-500">
+                Connect to an MCP server to start inspecting
+              </p>
             </div>
-            {mcpClient ? (
-              <Tabs defaultValue="resources" className="w-full p-4">
-                <TabsList className="mb-4 p-0">
-                  <TabsTrigger value="resources">
-                    <Files className="w-4 h-4 mr-2" />
-                    Resources
-                  </TabsTrigger>
-                  <TabsTrigger value="prompts">
-                    <MessageSquare className="w-4 h-4 mr-2" />
-                    Prompts
-                  </TabsTrigger>
-                  <TabsTrigger value="requests" disabled>
-                    <Send className="w-4 h-4 mr-2" />
-                    Requests
-                  </TabsTrigger>
-                  <TabsTrigger value="tools">
-                    <Hammer className="w-4 h-4 mr-2" />
-                    Tools
-                  </TabsTrigger>
-                  <TabsTrigger value="console" disabled>
-                    <Terminal className="w-4 h-4 mr-2" />
-                    Console
-                  </TabsTrigger>
-                  <TabsTrigger value="ping">
-                    <Bell className="w-4 h-4 mr-2" />
-                    Ping
-                  </TabsTrigger>
-                  <TabsTrigger value="sampling" className="relative">
-                    <Hash className="w-4 h-4 mr-2" />
-                    Sampling
-                    {pendingSampleRequests.length > 0 && (
-                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                        {pendingSampleRequests.length}
-                      </span>
-                    )}
-                  </TabsTrigger>
-                </TabsList>
-
-                <div className="w-full">
-                  <ResourcesTab
-                    resources={resources}
-                    listResources={listResources}
-                    readResource={readResource}
-                    selectedResource={selectedResource}
-                    setSelectedResource={setSelectedResource}
-                    resourceContent={resourceContent}
-                    nextCursor={nextResourceCursor}
-                    error={error}
-                  />
-                  <PromptsTab
-                    prompts={prompts}
-                    listPrompts={listPrompts}
-                    getPrompt={getPrompt}
-                    selectedPrompt={selectedPrompt}
-                    setSelectedPrompt={setSelectedPrompt}
-                    promptContent={promptContent}
-                    nextCursor={nextPromptCursor}
-                    error={error}
-                  />
-                  <RequestsTab />
-                  <ToolsTab
-                    tools={tools}
-                    listTools={listTools}
-                    callTool={callTool}
-                    selectedTool={selectedTool}
-                    setSelectedTool={(tool) => {
-                      setSelectedTool(tool);
-                      setToolResult("");
-                    }}
-                    toolResult={toolResult}
-                    nextCursor={nextToolCursor}
-                    error={error}
-                  />
-                  <ConsoleTab />
-                  <PingTab
-                    onPingClick={() => {
-                      void makeRequest(
-                        {
-                          method: "ping" as const,
-                        },
-                        EmptyResultSchema,
-                      );
-                    }}
-                  />
-                  <SamplingTab
-                    pendingRequests={pendingSampleRequests}
-                    onApprove={handleApproveSampling}
-                    onReject={handleRejectSampling}
-                  />
-                </div>
-              </Tabs>
-            ) : (
-              <div className="flex items-center justify-center h-full">
-                <p className="text-lg text-gray-500">
-                  Connect to an MCP server to start inspecting
-                </p>
-              </div>
-            )}
+          )}
+        </div>
+        <div
+          className="relative border-t border-border"
+          style={{
+            height: `${historyPaneHeight}px`,
+          }}
+        >
+          <div
+            className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
+            onMouseDown={handleDragStart}
+          >
+            <div className="w-8 h-1 rounded-full bg-border" />
+          </div>
+          <div className="h-full overflow-auto">
+            <HistoryAndNotifications
+              requestHistory={requestHistory}
+              serverNotifications={notifications}
+            />
           </div>
         </div>
       </div>
-      <HistoryAndNotifications
-        requestHistory={requestHistory}
-        serverNotifications={notifications}
-      />
     </div>
   );
 };

client/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

client/src/components/History.tsx

@@ -6,7 +6,7 @@ const HistoryAndNotifications = ({
   requestHistory,
   serverNotifications,
 }: {
-  requestHistory: Array<{ request: string; response: string | null }>;
+  requestHistory: Array<{ request: string; response?: string }>;
   serverNotifications: ServerNotification[];
 }) => {
   const [expandedRequests, setExpandedRequests] = useState<{
@@ -29,8 +29,8 @@ const HistoryAndNotifications = ({
   };
 
   return (
-    <div className="w-64 bg-white shadow-md p-4 overflow-hidden flex flex-col h-full">
-      <div className="flex-1 overflow-y-auto mb-4 border-b pb-4">
+    <div className="bg-card overflow-hidden flex h-full">
+      <div className="flex-1 overflow-y-auto p-4 border-r">
         <h2 className="text-lg font-semibold mb-4">History</h2>
         {requestHistory.length === 0 ? (
           <p className="text-sm text-gray-500 italic">No history yet</p>
@@ -42,7 +42,7 @@ const HistoryAndNotifications = ({
               .map((request, index) => (
                 <li
                   key={index}
-                  className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
+                  className="text-sm text-foreground bg-secondary p-2 rounded"
                 >
                   <div
                     className="flex justify-between items-center cursor-pointer"
@@ -74,7 +74,7 @@ const HistoryAndNotifications = ({
                             <Copy size={16} />
                           </button>
                         </div>
-                        <pre className="whitespace-pre-wrap break-words bg-blue-50 p-2 rounded">
+                        <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
                           {JSON.stringify(JSON.parse(request.request), null, 2)}
                         </pre>
                       </div>
@@ -91,7 +91,7 @@ const HistoryAndNotifications = ({
                               <Copy size={16} />
                             </button>
                           </div>
-                          <pre className="whitespace-pre-wrap break-words bg-green-50 p-2 rounded">
+                          <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
                             {JSON.stringify(
                               JSON.parse(request.response),
                               null,
@@ -107,7 +107,7 @@ const HistoryAndNotifications = ({
           </ul>
         )}
       </div>
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto p-4">
         <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
         {serverNotifications.length === 0 ? (
           <p className="text-sm text-gray-500 italic">No notifications yet</p>
@@ -119,7 +119,7 @@ const HistoryAndNotifications = ({
               .map((notification, index) => (
                 <li
                   key={index}
-                  className="text-sm text-gray-600 bg-gray-100 p-2 rounded"
+                  className="text-sm text-foreground bg-secondary p-2 rounded"
                 >
                   <div
                     className="flex justify-between items-center cursor-pointer"
@@ -146,7 +146,7 @@ const HistoryAndNotifications = ({
                           <Copy size={16} />
                         </button>
                       </div>
-                      <pre className="whitespace-pre-wrap break-words bg-purple-50 p-2 rounded">
+                      <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
                         {JSON.stringify(notification, null, 2)}
                       </pre>
                     </div>

client/src/components/ListPane.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListPane from "./ListPane";
+import { describe, it, expect, vi } from "vitest";
+
+describe("ListPane", () => {
+  const defaultProps = {
+    items: [
+      { id: 1, name: "Item 1" },
+      { id: 2, name: "Item 2" },
+    ],
+    listItems: vi.fn(),
+    clearItems: vi.fn(),
+    setSelectedItem: vi.fn(),
+    renderItem: (item: { name: string }) => <span>{item.name}</span>,
+    title: "Test List",
+    buttonText: "List Items",
+  };
+
+  it("renders title correctly", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Test List")).toBeInTheDocument();
+  });
+
+  it("renders list items using renderItem prop", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("calls listItems when List Items button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("List Items"));
+    expect(defaultProps.listItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls clearItems when Clear button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Clear"));
+    expect(defaultProps.clearItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls setSelectedItem when an item is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Item 1"));
+    expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(
+      defaultProps.items[0],
+    );
+  });
+
+  it("disables Clear button when items array is empty", () => {
+    render(<ListPane {...defaultProps} items={[]} />);
+    expect(screen.getByText("Clear")).toBeDisabled();
+  });
+
+  it("respects isButtonDisabled prop for List Items button", () => {
+    render(<ListPane {...defaultProps} isButtonDisabled={true} />);
+    expect(screen.getByText("List Items")).toBeDisabled();
+  });
+});

client/src/components/ListPane.tsx

@@ -3,6 +3,7 @@ import { Button } from "./ui/button";
 type ListPaneProps<T> = {
   items: T[];
   listItems: () => void;
+  clearItems: () => void;
   setSelectedItem: (item: T) => void;
   renderItem: (item: T) => React.ReactNode;
   title: string;
@@ -13,15 +14,16 @@ type ListPaneProps<T> = {
 const ListPane = <T extends object>({
   items,
   listItems,
+  clearItems,
   setSelectedItem,
   renderItem,
   title,
   buttonText,
   isButtonDisabled,
 }: ListPaneProps<T>) => (
-  <div className="bg-white rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200">
-      <h3 className="font-semibold">{title}</h3>
+  <div className="bg-card rounded-lg shadow">
+    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+      <h3 className="font-semibold dark:text-white">{title}</h3>
     </div>
     <div className="p-4">
       <Button
@@ -32,11 +34,19 @@ const ListPane = <T extends object>({
       >
         {buttonText}
       </Button>
+      <Button
+        variant="outline"
+        className="w-full mb-4"
+        onClick={clearItems}
+        disabled={items.length === 0}
+      >
+        Clear
+      </Button>
       <div className="space-y-2 overflow-y-auto max-h-96">
         {items.map((item, index) => (
           <div
             key={index}
-            className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+            className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
             onClick={() => setSelectedItem(item)}
           >
             {renderItem(item)}

client/src/components/PromptsTab.tsx

@@ -22,6 +22,7 @@ export type Prompt = {
 const PromptsTab = ({
   prompts,
   listPrompts,
+  clearPrompts,
   getPrompt,
   selectedPrompt,
   setSelectedPrompt,
@@ -31,6 +32,7 @@ const PromptsTab = ({
 }: {
   prompts: Prompt[];
   listPrompts: () => void;
+  clearPrompts: () => void;
   getPrompt: (name: string, args: Record<string, string>) => void;
   selectedPrompt: Prompt | null;
   setSelectedPrompt: (prompt: Prompt) => void;
@@ -55,6 +57,7 @@ const PromptsTab = ({
       <ListPane
         items={prompts}
         listItems={listPrompts}
+        clearItems={clearPrompts}
         setSelectedItem={(prompt) => {
           setSelectedPrompt(prompt);
           setPromptArgs({});
@@ -70,7 +73,7 @@ const PromptsTab = ({
         isButtonDisabled={!nextCursor && prompts.length > 0}
       />
 
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-card rounded-lg shadow">
         <div className="p-4 border-b border-gray-200">
           <h3 className="font-semibold">
             {selectedPrompt ? selectedPrompt.name : "Select a prompt"}

client/src/components/RequestsTabs.tsx

@@ -1,33 +0,0 @@
-import { TabsContent } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Send } from "lucide-react";
-
-const RequestsTab = () => (
-  <TabsContent value="requests" className="space-y-4">
-    <div className="grid grid-cols-2 gap-4">
-      <div className="space-y-4">
-        <div className="flex space-x-2">
-          <Input placeholder="Method name" />
-          <Button>
-            <Send className="w-4 h-4 mr-2" />
-            Send
-          </Button>
-        </div>
-        <Textarea
-          placeholder="Request parameters (JSON)"
-          className="h-64 font-mono"
-        />
-      </div>
-      <div>
-        <div className="bg-gray-50 p-4 rounded-lg h-96 font-mono text-sm overflow-auto">
-          <div className="text-gray-500 mb-2">Response:</div>
-          {/* Response content would go here */}
-        </div>
-      </div>
-    </div>
-  </TabsContent>
-);
-
-export default RequestsTab;

client/src/components/ResourcesTab.tsx

@@ -1,88 +1,205 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
-import { ListResourcesResult, Resource } from "@modelcontextprotocol/sdk/types.js";
+import {
+  ListResourcesResult,
+  Resource,
+  ResourceTemplate,
+  ListResourceTemplatesResult,
+} from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
+import { useState } from "react";
 
 const ResourcesTab = ({
   resources,
+  resourceTemplates,
   listResources,
+  clearResources,
+  listResourceTemplates,
+  clearResourceTemplates,
   readResource,
   selectedResource,
   setSelectedResource,
   resourceContent,
   nextCursor,
+  nextTemplateCursor,
   error,
 }: {
   resources: Resource[];
+  resourceTemplates: ResourceTemplate[];
   listResources: () => void;
+  clearResources: () => void;
+  listResourceTemplates: () => void;
+  clearResourceTemplates: () => void;
   readResource: (uri: string) => void;
   selectedResource: Resource | null;
-  setSelectedResource: (resource: Resource) => void;
+  setSelectedResource: (resource: Resource | null) => void;
   resourceContent: string;
   nextCursor: ListResourcesResult["nextCursor"];
+  nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
   error: string | null;
-}) => (
-  <TabsContent value="resources" className="grid grid-cols-2 gap-4">
-    <ListPane
-      items={resources}
-      listItems={listResources}
-      setSelectedItem={(resource) => {
-        setSelectedResource(resource);
-        readResource(resource.uri);
-      }}
-      renderItem={(resource) => (
-        <div className="flex items-center w-full">
-          <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-          <span className="flex-1 truncate" title={resource.uri.toString()}>
-            {resource.name}
-          </span>
-          <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-        </div>
-      )}
-      title="Resources"
-      buttonText={nextCursor ? "List More Resources" : "List Resources"}
-      isButtonDisabled={!nextCursor && resources.length > 0}
-    />
+}) => {
+  const [selectedTemplate, setSelectedTemplate] =
+    useState<ResourceTemplate | null>(null);
+  const [templateValues, setTemplateValues] = useState<Record<string, string>>(
+    {},
+  );
 
-    <div className="bg-white rounded-lg shadow">
-      <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-        <h3 className="font-semibold truncate" title={selectedResource?.name}>
-          {selectedResource ? selectedResource.name : "Select a resource"}
-        </h3>
-        {selectedResource && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => readResource(selectedResource.uri)}
+  const fillTemplate = (
+    template: string,
+    values: Record<string, string>,
+  ): string => {
+    return template.replace(
+      /{([^}]+)}/g,
+      (_, key) => values[key] || `{${key}}`,
+    );
+  };
+
+  const handleReadTemplateResource = () => {
+    if (selectedTemplate) {
+      const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
+      readResource(uri);
+      setSelectedTemplate(null);
+      // We don't have the full Resource object here, so we create a partial one
+      setSelectedResource({ uri, name: uri } as Resource);
+    }
+  };
+
+  return (
+    <TabsContent value="resources" className="grid grid-cols-3 gap-4">
+      <ListPane
+        items={resources}
+        listItems={listResources}
+        clearItems={clearResources}
+        setSelectedItem={(resource) => {
+          setSelectedResource(resource);
+          readResource(resource.uri);
+          setSelectedTemplate(null);
+        }}
+        renderItem={(resource) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={resource.uri.toString()}>
+              {resource.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+          </div>
+        )}
+        title="Resources"
+        buttonText={nextCursor ? "List More Resources" : "List Resources"}
+        isButtonDisabled={!nextCursor && resources.length > 0}
+      />
+
+      <ListPane
+        items={resourceTemplates}
+        listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
+        setSelectedItem={(template) => {
+          setSelectedTemplate(template);
+          setSelectedResource(null);
+          setTemplateValues({});
+        }}
+        renderItem={(template) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={template.uriTemplate}>
+              {template.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+          </div>
+        )}
+        title="Resource Templates"
+        buttonText={
+          nextTemplateCursor ? "List More Templates" : "List Templates"
+        }
+        isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+      />
+
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+          <h3
+            className="font-semibold truncate"
+            title={selectedResource?.name || selectedTemplate?.name}
           >
-            <RefreshCw className="w-4 h-4 mr-2" />
-            Refresh
-          </Button>
-        )}
+            {selectedResource
+              ? selectedResource.name
+              : selectedTemplate
+                ? selectedTemplate.name
+                : "Select a resource or template"}
+          </h3>
+          {selectedResource && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => readResource(selectedResource.uri)}
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
+          )}
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedResource ? (
+            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
+              {resourceContent}
+            </pre>
+          ) : selectedTemplate ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTemplate.description}
+              </p>
+              {selectedTemplate.uriTemplate
+                .match(/{([^}]+)}/g)
+                ?.map((param) => {
+                  const key = param.slice(1, -1);
+                  return (
+                    <div key={key}>
+                      <label
+                        htmlFor={key}
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        {key}
+                      </label>
+                      <Input
+                        id={key}
+                        value={templateValues[key] || ""}
+                        onChange={(e) =>
+                          setTemplateValues({
+                            ...templateValues,
+                            [key]: e.target.value,
+                          })
+                        }
+                        className="mt-1"
+                      />
+                    </div>
+                  );
+                })}
+              <Button
+                onClick={handleReadTemplateResource}
+                disabled={Object.keys(templateValues).length === 0}
+              >
+                Read Resource
+              </Button>
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a resource or template from the list to view its contents
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
       </div>
-      <div className="p-4">
-        {error ? (
-          <Alert variant="destructive">
-            <AlertCircle className="h-4 w-4" />
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        ) : selectedResource ? (
-          <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words">
-            {resourceContent}
-          </pre>
-        ) : (
-          <Alert>
-            <AlertDescription>
-              Select a resource from the list to view its contents
-            </AlertDescription>
-          </Alert>
-        )}
-      </div>
-    </div>
-  </TabsContent>
-);
+    </TabsContent>
+  );
+};
 
 export default ResourcesTab;

client/src/components/RootsTab.tsx

@@ -0,0 +1,77 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+import { Root } from "@modelcontextprotocol/sdk/types.js";
+import { Plus, Minus, Save } from "lucide-react";
+
+const RootsTab = ({
+  roots,
+  setRoots,
+  onRootsChange,
+}: {
+  roots: Root[];
+  setRoots: React.Dispatch<React.SetStateAction<Root[]>>;
+  onRootsChange: () => void;
+}) => {
+  const addRoot = () => {
+    setRoots((currentRoots) => [...currentRoots, { uri: "file://", name: "" }]);
+  };
+
+  const removeRoot = (index: number) => {
+    setRoots((currentRoots) => currentRoots.filter((_, i) => i !== index));
+  };
+
+  const updateRoot = (index: number, field: keyof Root, value: string) => {
+    setRoots((currentRoots) =>
+      currentRoots.map((root, i) =>
+        i === index ? { ...root, [field]: value } : root,
+      ),
+    );
+  };
+
+  const handleSave = () => {
+    onRootsChange();
+  };
+
+  return (
+    <TabsContent value="roots" className="space-y-4">
+      <Alert>
+        <AlertDescription>
+          Configure the root directories that the server can access
+        </AlertDescription>
+      </Alert>
+
+      {roots.map((root, index) => (
+        <div key={index} className="flex gap-2 items-center">
+          <Input
+            placeholder="file:// URI"
+            value={root.uri}
+            onChange={(e) => updateRoot(index, "uri", e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => removeRoot(index)}
+          >
+            <Minus className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+
+      <div className="flex gap-2">
+        <Button variant="outline" onClick={addRoot}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Root
+        </Button>
+        <Button onClick={handleSave}>
+          <Save className="h-4 w-4 mr-2" />
+          Save Changes
+        </Button>
+      </div>
+    </TabsContent>
+  );
+};
+
+export default RootsTab;

client/src/components/Sidebar.tsx

@@ -1,39 +1,338 @@
-import { Menu, Settings } from "lucide-react";
+import { useState } from "react";
+import {
+  Play,
+  ChevronDown,
+  ChevronRight,
+  CircleHelp,
+  Bug,
+  Github,
+  Eye,
+  EyeOff,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { StdErrNotification } from "@/lib/notificationTypes";
 
-const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
-  <div className="w-64 bg-white border-r border-gray-200">
-    <div className="flex items-center p-4 border-b border-gray-200">
-      <Menu className="w-6 h-6 text-gray-500" />
-      <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
-    </div>
+import useTheme from "../lib/useTheme";
+import { version } from "../../../package.json";
 
-    <div className="p-4">
-      <div className="flex items-center space-x-2 mb-4">
-        <div
-          className={`w-2 h-2 rounded-full ${
-            connectionStatus === "connected"
-              ? "bg-green-500"
-              : connectionStatus === "error"
-                ? "bg-red-500"
-                : "bg-gray-500"
-          }`}
-        />
-        <span className="text-sm text-gray-600">
-          {connectionStatus === "connected"
-            ? "Connected"
-            : connectionStatus === "error"
-              ? "Connection Error"
-              : "Disconnected"}
-        </span>
+interface SidebarProps {
+  connectionStatus: "disconnected" | "connected" | "error";
+  transportType: "stdio" | "sse";
+  setTransportType: (type: "stdio" | "sse") => void;
+  command: string;
+  setCommand: (command: string) => void;
+  args: string;
+  setArgs: (args: string) => void;
+  sseUrl: string;
+  setSseUrl: (url: string) => void;
+  env: Record<string, string>;
+  setEnv: (env: Record<string, string>) => void;
+  onConnect: () => void;
+  stdErrNotifications: StdErrNotification[];
+}
+
+const Sidebar = ({
+  connectionStatus,
+  transportType,
+  setTransportType,
+  command,
+  setCommand,
+  args,
+  setArgs,
+  sseUrl,
+  setSseUrl,
+  env,
+  setEnv,
+  onConnect,
+  stdErrNotifications,
+}: SidebarProps) => {
+  const [theme, setTheme] = useTheme();
+  const [showEnvVars, setShowEnvVars] = useState(false);
+  const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
+
+  return (
+    <div className="w-80 bg-card border-r border-border flex flex-col h-full">
+      <div className="flex items-center justify-between p-4 border-b border-gray-200">
+        <div className="flex items-center">
+          <h1 className="ml-2 text-lg font-semibold">
+            MCP Inspector v{version}
+          </h1>
+        </div>
       </div>
 
-      <Button variant="outline" className="w-full justify-start">
-        <Settings className="w-4 h-4 mr-2" />
-        Connection Settings
-      </Button>
+      <div className="p-4 flex-1 overflow-auto">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Transport Type</label>
+            <Select
+              value={transportType}
+              onValueChange={(value: "stdio" | "sse") =>
+                setTransportType(value)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select transport type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="stdio">STDIO</SelectItem>
+                <SelectItem value="sse">SSE</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {transportType === "stdio" ? (
+            <>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Command</label>
+                <Input
+                  placeholder="Command"
+                  value={command}
+                  onChange={(e) => setCommand(e.target.value)}
+                  className="font-mono"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Arguments</label>
+                <Input
+                  placeholder="Arguments (space-separated)"
+                  value={args}
+                  onChange={(e) => setArgs(e.target.value)}
+                  className="font-mono"
+                />
+              </div>
+            </>
+          ) : (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">URL</label>
+              <Input
+                placeholder="URL"
+                value={sseUrl}
+                onChange={(e) => setSseUrl(e.target.value)}
+                className="font-mono"
+              />
+            </div>
+          )}
+          {transportType === "stdio" && (
+            <div className="space-y-2">
+              <Button
+                variant="outline"
+                onClick={() => setShowEnvVars(!showEnvVars)}
+                className="flex items-center w-full"
+              >
+                {showEnvVars ? (
+                  <ChevronDown className="w-4 h-4 mr-2" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 mr-2" />
+                )}
+                Environment Variables
+              </Button>
+              {showEnvVars && (
+                <div className="space-y-2">
+                  {Object.entries(env).map(([key, value], idx) => (
+                    <div key={idx} className="space-y-2 pb-4">
+                      <div className="flex gap-2">
+                        <Input
+                          placeholder="Key"
+                          value={key}
+                          onChange={(e) => {
+                            const newKey = e.target.value;
+                            const newEnv = { ...env };
+                            delete newEnv[key];
+                            newEnv[newKey] = value;
+                            setEnv(newEnv);
+                            setShownEnvVars((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                                next.add(newKey);
+                              }
+                              return next;
+                            });
+                          }}
+                          className="font-mono"
+                        />
+                        <Button
+                          variant="destructive"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { [key]: _removed, ...rest } = env;
+                            setEnv(rest);
+                          }}
+                        >
+                          ×
+                        </Button>
+                      </div>
+                      <div className="flex gap-2">
+                        <Input
+                          type={shownEnvVars.has(key) ? "text" : "password"}
+                          placeholder="Value"
+                          value={value}
+                          onChange={(e) => {
+                            const newEnv = { ...env };
+                            newEnv[key] = e.target.value;
+                            setEnv(newEnv);
+                          }}
+                          className="font-mono"
+                        />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            setShownEnvVars((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                              } else {
+                                next.add(key);
+                              }
+                              return next;
+                            });
+                          }}
+                          aria-label={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
+                          aria-pressed={shownEnvVars.has(key)}
+                          title={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
+                        >
+                          {shownEnvVars.has(key) ? (
+                            <Eye className="h-4 w-4" aria-hidden="true" />
+                          ) : (
+                            <EyeOff className="h-4 w-4" aria-hidden="true" />
+                          )}
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                  <Button
+                    variant="outline"
+                    className="w-full mt-2"
+                    onClick={() => {
+                      const key = "";
+                      const newEnv = { ...env };
+                      newEnv[key] = "";
+                      setEnv(newEnv);
+                    }}
+                  >
+                    Add Environment Variable
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Button className="w-full" onClick={onConnect}>
+              <Play className="w-4 h-4 mr-2" />
+              Connect
+            </Button>
+
+            <div className="flex items-center justify-center space-x-2 mb-4">
+              <div
+                className={`w-2 h-2 rounded-full ${
+                  connectionStatus === "connected"
+                    ? "bg-green-500"
+                    : connectionStatus === "error"
+                      ? "bg-red-500"
+                      : "bg-gray-500"
+                }`}
+              />
+              <span className="text-sm text-gray-600">
+                {connectionStatus === "connected"
+                  ? "Connected"
+                  : connectionStatus === "error"
+                    ? "Connection Error"
+                    : "Disconnected"}
+              </span>
+            </div>
+            {stdErrNotifications.length > 0 && (
+              <>
+                <div className="mt-4 border-t border-gray-200 pt-4">
+                  <h3 className="text-sm font-medium">
+                    Error output from MCP server
+                  </h3>
+                  <div className="mt-2 max-h-80 overflow-y-auto">
+                    {stdErrNotifications.map((notification, index) => (
+                      <div
+                        key={index}
+                        className="text-sm text-red-500 font-mono py-2 border-b border-gray-200 last:border-b-0"
+                      >
+                        {notification.params.content}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="p-4 border-t">
+        <div className="flex items-center justify-between">
+          <Select
+            value={theme}
+            onValueChange={(value: string) =>
+              setTheme(value as "system" | "light" | "dark")
+            }
+          >
+            <SelectTrigger className="w-[100px]" id="theme-select">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">System</SelectItem>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <div className="flex items-center space-x-2">
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="ghost" title="Inspector Documentation">
+                <CircleHelp className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/debugging"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="ghost" title="Debugging Guide">
+                <Bug className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a
+              href="https://github.com/modelcontextprotocol/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="ghost"
+                title="Report bugs or contribute on GitHub"
+              >
+                <Github className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Sidebar;

client/src/components/ToolsTab.tsx

@@ -3,14 +3,22 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
-import { ListToolsResult, Tool } from "@modelcontextprotocol/sdk/types.js";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  ListToolsResult,
+  Tool,
+  CallToolResultSchema,
+} from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 
+import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+
 const ToolsTab = ({
   tools,
   listTools,
+  clearTools,
   callTool,
   selectedTool,
   setSelectedTool,
@@ -20,20 +28,95 @@ const ToolsTab = ({
 }: {
   tools: Tool[];
   listTools: () => void;
+  clearTools: () => void;
   callTool: (name: string, params: Record<string, unknown>) => void;
   selectedTool: Tool | null;
-  setSelectedTool: (tool: Tool) => void;
-  toolResult: string;
+  setSelectedTool: (tool: Tool | null) => void;
+  toolResult: CompatibilityCallToolResult | null;
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
+  useEffect(() => {
+    setParams({});
+  }, [selectedTool]);
+
+  const renderToolResult = () => {
+    if (!toolResult) return null;
+
+    if ("content" in toolResult) {
+      const parsedResult = CallToolResultSchema.safeParse(toolResult);
+      if (!parsedResult.success) {
+        return (
+          <>
+            <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
+            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+              {JSON.stringify(toolResult, null, 2)}
+            </pre>
+            <h4 className="font-semibold mb-2">Errors:</h4>
+            {parsedResult.error.errors.map((error, idx) => (
+              <pre
+                key={idx}
+                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
+              >
+                {JSON.stringify(error, null, 2)}
+              </pre>
+            ))}
+          </>
+        );
+      }
+      const structuredResult = parsedResult.data;
+      const isError = structuredResult.isError ?? false;
+
+      return (
+        <>
+          <h4 className="font-semibold mb-2">
+            Tool Result: {isError ? "Error" : "Success"}
+          </h4>
+          {structuredResult.content.map((item, index) => (
+            <div key={index} className="mb-2">
+              {item.type === "text" && (
+                <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+                  {item.text}
+                </pre>
+              )}
+              {item.type === "image" && (
+                <img
+                  src={`data:${item.mimeType};base64,${item.data}`}
+                  alt="Tool result image"
+                  className="max-w-full h-auto"
+                />
+              )}
+              {item.type === "resource" && (
+                <pre className="bg-gray-50  dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
+                  {JSON.stringify(item.resource, null, 2)}
+                </pre>
+              )}
+            </div>
+          ))}
+        </>
+      );
+    } else if ("toolResult" in toolResult) {
+      return (
+        <>
+          <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
+          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+            {JSON.stringify(toolResult.toolResult, null, 2)}
+          </pre>
+        </>
+      );
+    }
+  };
 
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
       <ListPane
         items={tools}
         listItems={listTools}
+        clearItems={() => {
+          clearTools();
+          setSelectedTool(null);
+        }}
         setSelectedItem={setSelectedTool}
         renderItem={(tool) => (
           <>
@@ -48,7 +131,7 @@ const ToolsTab = ({
         isButtonDisabled={!nextCursor && tools.length > 0}
       />
 
-      <div className="bg-white rounded-lg shadow">
+      <div className="bg-card rounded-lg shadow">
         <div className="p-4 border-b border-gray-200">
           <h3 className="font-semibold">
             {selectedTool ? selectedTool.name : "Select a tool"}
@@ -75,24 +158,68 @@ const ToolsTab = ({
                     >
                       {key}
                     </Label>
-                    <Input
-                      // @ts-expect-error value type is currently unknown
-                      type={value.type === "number" ? "number" : "text"}
-                      id={key}
-                      name={key}
-                      // @ts-expect-error value type is currently unknown
-                      placeholder={value.description}
-                      onChange={(e) =>
-                        setParams({
-                          ...params,
-                          [key]:
-                            // @ts-expect-error value type is currently unknown
-                            value.type === "number"
-                              ? Number(e.target.value)
-                              : e.target.value,
-                        })
-                      }
-                    />
+                    {
+                      /* @ts-expect-error value type is currently unknown */
+                      value.type === "string" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]: e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      ) : /* @ts-expect-error value type is currently unknown */
+                      value.type === "object" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) => {
+                            try {
+                              const parsed = JSON.parse(e.target.value);
+                              setParams({
+                                ...params,
+                                [key]: parsed,
+                              });
+                            } catch (err) {
+                              // If invalid JSON, store as string - will be validated on submit
+                              setParams({
+                                ...params,
+                                [key]: e.target.value,
+                              });
+                            }
+                          }}
+                          className="mt-1"
+                        />
+                      ) : (
+                        <Input
+                          // @ts-expect-error value type is currently unknown
+                          type={value.type === "number" ? "number" : "text"}
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]:
+                                // @ts-expect-error value type is currently unknown
+                                value.type === "number"
+                                  ? Number(e.target.value)
+                                  : e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      )
+                    }
                   </div>
                 ),
               )}
@@ -100,14 +227,7 @@ const ToolsTab = ({
                 <Send className="w-4 h-4 mr-2" />
                 Run Tool
               </Button>
-              {toolResult && (
-                <>
-                  <h4 className="font-semibold mb-2">Tool Result:</h4>
-                  <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
-                    {toolResult}
-                  </pre>
-                </>
-              )}
+              {toolResult && renderToolResult()}
             </div>
           ) : (
             <Alert>

client/src/components/ui/Button.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "./button";
+import { describe, it, expect, vi } from "vitest";
+import { createRef } from "react";
+
+describe("Button", () => {
+  it("renders children correctly", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("handles click events", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    fireEvent.click(screen.getByText("Click me"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies different variants correctly", () => {
+    const { rerender } = render(<Button variant="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("bg-primary");
+
+    rerender(<Button variant="outline">Outline</Button>);
+    expect(screen.getByText("Outline")).toHaveClass("border-input");
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByText("Secondary")).toHaveClass("bg-secondary");
+  });
+
+  it("applies different sizes correctly", () => {
+    const { rerender } = render(<Button size="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("h-9");
+
+    rerender(<Button size="sm">Small</Button>);
+    expect(screen.getByText("Small")).toHaveClass("h-8");
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByText("Large")).toHaveClass("h-10");
+  });
+
+  it("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Button with ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("renders as a different element when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="#">Link Button</a>
+      </Button>,
+    );
+    expect(screen.getByText("Link Button").tagName).toBe("A");
+  });
+});

client/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

client/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
@@ -31,27 +31,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

client/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -12,14 +12,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

client/src/components/ui/label.tsx

@@ -1,12 +1,12 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+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"
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -18,7 +18,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };

client/src/components/ui/select.tsx

@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from "react";
 import {
   CaretSortIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
-} from "@radix-ui/react-icons"
-import * as SelectPrimitive from "@radix-ui/react-select"
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -32,8 +32,8 @@ const SelectTrigger = React.forwardRef<
       <CaretSortIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -43,14 +43,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUpIcon />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -60,15 +60,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDownIcon />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -81,7 +81,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -91,7 +91,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -99,8 +99,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -111,8 +111,8 @@ const SelectLabel = React.forwardRef<
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -122,7 +122,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -133,8 +133,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -145,8 +145,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -159,4 +159,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};

client/src/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -13,12 +13,12 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -27,13 +27,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -43,11 +43,11 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };

client/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };

client/src/lib/hooks/useConnection.ts

@@ -0,0 +1,199 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+  ClientNotification,
+  ClientRequest,
+  CreateMessageRequestSchema,
+  ListRootsRequestSchema,
+  ProgressNotificationSchema,
+  Request,
+  Result,
+  ServerCapabilities,
+} from "@modelcontextprotocol/sdk/types.js";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { Notification, StdErrNotificationSchema } from "../notificationTypes";
+import { z } from "zod";
+
+const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
+
+interface UseConnectionOptions {
+  transportType: "stdio" | "sse";
+  command: string;
+  args: string;
+  sseUrl: string;
+  env: Record<string, string>;
+  proxyServerUrl: string;
+  requestTimeout?: number;
+  onNotification?: (notification: Notification) => void;
+  onStdErrNotification?: (notification: Notification) => void;
+  onPendingRequest?: (request: any, resolve: any, reject: any) => void;
+  getRoots?: () => any[];
+}
+
+export function useConnection({
+  transportType,
+  command,
+  args,
+  sseUrl,
+  env,
+  proxyServerUrl,
+  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC,
+  onNotification,
+  onStdErrNotification,
+  onPendingRequest,
+  getRoots,
+}: UseConnectionOptions) {
+  const [connectionStatus, setConnectionStatus] = useState<
+    "disconnected" | "connected" | "error"
+  >("disconnected");
+  const [serverCapabilities, setServerCapabilities] =
+    useState<ServerCapabilities | null>(null);
+  const [mcpClient, setMcpClient] = useState<Client | null>(null);
+  const [requestHistory, setRequestHistory] = useState<
+    { request: string; response?: string }[]
+  >([]);
+
+  const pushHistory = (request: object, response?: object) => {
+    setRequestHistory((prev) => [
+      ...prev,
+      {
+        request: JSON.stringify(request),
+        response: response !== undefined ? JSON.stringify(response) : undefined,
+      },
+    ]);
+  };
+
+  const makeRequest = async <T extends z.ZodType>(
+    request: ClientRequest,
+    schema: T,
+  ) => {
+    if (!mcpClient) {
+      throw new Error("MCP client not connected");
+    }
+
+    try {
+      const abortController = new AbortController();
+      const timeoutId = setTimeout(() => {
+        abortController.abort("Request timed out");
+      }, requestTimeout);
+
+      let response;
+      try {
+        response = await mcpClient.request(request, schema, {
+          signal: abortController.signal,
+        });
+        pushHistory(request, response);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
+        pushHistory(request, { error: errorMessage });
+        throw error;
+      } finally {
+        clearTimeout(timeoutId);
+      }
+
+      return response;
+    } catch (e: unknown) {
+      const errorString = (e as Error).message ?? String(e);
+      toast.error(errorString);
+
+      throw e;
+    }
+  };
+
+  const sendNotification = async (notification: ClientNotification) => {
+    if (!mcpClient) {
+      throw new Error("MCP client not connected");
+    }
+
+    try {
+      await mcpClient.notification(notification);
+      pushHistory(notification);
+    } catch (e: unknown) {
+      toast.error((e as Error).message ?? String(e));
+      throw e;
+    }
+  };
+
+  const connect = async () => {
+    try {
+      const client = new Client<Request, Notification, Result>(
+        {
+          name: "mcp-inspector",
+          version: "0.0.1",
+        },
+        {
+          capabilities: {
+            sampling: {},
+            roots: {
+              listChanged: true,
+            },
+          },
+        },
+      );
+
+      const backendUrl = new URL(`${proxyServerUrl}/sse`);
+
+      backendUrl.searchParams.append("transportType", transportType);
+      if (transportType === "stdio") {
+        backendUrl.searchParams.append("command", command);
+        backendUrl.searchParams.append("args", args);
+        backendUrl.searchParams.append("env", JSON.stringify(env));
+      } else {
+        backendUrl.searchParams.append("url", sseUrl);
+      }
+
+      const clientTransport = new SSEClientTransport(backendUrl);
+
+      if (onNotification) {
+        client.setNotificationHandler(
+          ProgressNotificationSchema,
+          onNotification,
+        );
+      }
+
+      if (onStdErrNotification) {
+        client.setNotificationHandler(
+          StdErrNotificationSchema,
+          onStdErrNotification,
+        );
+      }
+
+      await client.connect(clientTransport);
+
+      const capabilities = client.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+
+      if (onPendingRequest) {
+        client.setRequestHandler(CreateMessageRequestSchema, (request) => {
+          return new Promise((resolve, reject) => {
+            onPendingRequest(request, resolve, reject);
+          });
+        });
+      }
+
+      if (getRoots) {
+        client.setRequestHandler(ListRootsRequestSchema, async () => {
+          return { roots: getRoots() };
+        });
+      }
+
+      setMcpClient(client);
+      setConnectionStatus("connected");
+    } catch (e) {
+      console.error(e);
+      setConnectionStatus("error");
+    }
+  };
+
+  return {
+    connectionStatus,
+    serverCapabilities,
+    mcpClient,
+    requestHistory,
+    makeRequest,
+    sendNotification,
+    connect,
+  };
+}

client/src/lib/hooks/useDraggablePane.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useDraggablePane(initialHeight: number) {
+  const [height, setHeight] = useState(initialHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartY = useRef<number>(0);
+  const dragStartHeight = useRef<number>(0);
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      dragStartHeight.current = height;
+      document.body.style.userSelect = "none";
+    },
+    [height],
+  );
+
+  const handleDragMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      const deltaY = dragStartY.current - e.clientY;
+      const newHeight = Math.max(
+        100,
+        Math.min(800, dragStartHeight.current + deltaY),
+      );
+      setHeight(newHeight);
+    },
+    [isDragging],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleDragMove);
+      window.addEventListener("mouseup", handleDragEnd);
+      return () => {
+        window.removeEventListener("mousemove", handleDragMove);
+        window.removeEventListener("mouseup", handleDragEnd);
+      };
+    }
+  }, [isDragging, handleDragMove, handleDragEnd]);
+
+  return {
+    height,
+    isDragging,
+    handleDragStart,
+  };
+}

client/src/lib/notificationTypes.ts

@@ -0,0 +1,19 @@
+import {
+  NotificationSchema as BaseNotificationSchema,
+  ClientNotificationSchema,
+} from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod";
+
+export const StdErrNotificationSchema = BaseNotificationSchema.extend({
+  method: z.literal("notifications/stderr"),
+  params: z.object({
+    content: z.string(),
+  }),
+});
+
+export const NotificationSchema = ClientNotificationSchema.or(
+  StdErrNotificationSchema,
+);
+
+export type StdErrNotification = z.infer<typeof StdErrNotificationSchema>;
+export type Notification = z.infer<typeof NotificationSchema>;

client/src/lib/useTheme.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const useTheme = (): [Theme, (mode: Theme) => void] => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem("theme") as Theme;
+    return savedTheme || "system";
+  });
+
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    const handleDarkModeChange = (e: MediaQueryListEvent) => {
+      if (theme === "system") {
+        updateDocumentTheme(e.matches ? "dark" : "light");
+      }
+    };
+
+    const updateDocumentTheme = (newTheme: "light" | "dark") => {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    };
+
+    // Set initial theme based on current mode
+    if (theme === "system") {
+      updateDocumentTheme(darkModeMediaQuery.matches ? "dark" : "light");
+    } else {
+      updateDocumentTheme(theme);
+    }
+
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, [theme]);
+
+  return [
+    theme,
+    useCallback((newTheme: Theme) => {
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme);
+      if (newTheme !== "system") {
+        document.documentElement.classList.toggle("dark", newTheme === "dark");
+      }
+    }, []),
+  ];
+};
+
+export default useTheme;

client/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

client/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
+    <ToastContainer />
   </StrictMode>,
 );

client/src/test.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+
+import "@testing-library/jest-dom";
+
+declare global {
+  namespace Vi {
+    interface JestAssertion<T = any> extends jest.Matchers<void, T> {}
+  }
+}
+
+export {};

client/tailwind.config.js

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import animate from "tailwindcss-animate";
 export default {
   darkMode: ["class"],
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -53,5 +54,5 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [animate],
 };

client/test/setupTests.ts

@@ -0,0 +1,6 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+import "@testing-library/jest-dom/vitest";
+
+// Add any additional test setup, custom matchers, or global mocks here
+// This file runs before each test file

client/tsconfig.app.json

@@ -2,10 +2,9 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
 
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -25,7 +24,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src", "test"]
 }

client/tsconfig.json

@@ -2,7 +2,8 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.test.json" }
   ],
   "compilerOptions": {
     "baseUrl": ".",

client/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.test.tsx", "src/**/*.test.ts", "test/**/*.ts"]
+}

client/vite.config.ts

@@ -10,4 +10,12 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  build: {
+    minify: false,
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
 });

client/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./test/setupTests.ts"],
+    typecheck: {
+      tsconfig: "./tsconfig.test.json",
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package.json

@@ -1,8 +1,21 @@
 {
-  "name": "mcp-inspector",
-  "private": true,
-  "version": "0.0.1",
+  "name": "@modelcontextprotocol/inspector",
+  "version": "0.3.0",
+  "description": "Model Context Protocol inspector",
+  "license": "MIT",
+  "author": "Anthropic, PBC (https://anthropic.com)",
+  "homepage": "https://modelcontextprotocol.io",
+  "bugs": "https://github.com/modelcontextprotocol/inspector/issues",
   "type": "module",
+  "bin": {
+    "mcp-inspector": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "client/bin",
+    "client/dist",
+    "server/build"
+  ],
   "workspaces": [
     "client",
     "server"
@@ -14,11 +27,22 @@
     "build": "npm run build-server && npm run build-client",
     "start-server": "cd server && npm run start",
     "start-client": "cd client && npm run preview",
-    "start": "concurrently \"npm run start-server\" \"npm run start-client\"",
-    "prettier-fix": "prettier --write ."
+    "start": "node ./bin/cli.js",
+    "prepare": "npm run build",
+    "prettier-fix": "prettier --write .",
+    "publish-all": "npm publish --workspaces --access public && npm publish --access public"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/inspector-client": "0.3.0",
+    "@modelcontextprotocol/inspector-server": "0.3.0",
+    "concurrently": "^9.0.1",
+    "shell-quote": "^1.8.2",
+    "spawn-rx": "^5.1.0",
+    "ts-node": "^10.9.2"
   },
   "devDependencies": {
-    "concurrently": "^9.0.1",
+    "@types/node": "^22.7.5",
+    "@types/shell-quote": "^1.7.5",
     "prettier": "3.3.3"
   }
 }

server/package.json

@@ -1,8 +1,18 @@
 {
-  "name": "mcp-inspector",
-  "version": "0.0.1",
-  "main": "build/index.js",
+  "name": "@modelcontextprotocol/inspector-server",
+  "version": "0.3.0",
+  "description": "Server-side application for the Model Context Protocol inspector",
+  "license": "MIT",
+  "author": "Anthropic, PBC (https://anthropic.com)",
+  "homepage": "https://modelcontextprotocol.io",
+  "bugs": "https://github.com/modelcontextprotocol/inspector/issues",
   "type": "module",
+  "bin": {
+    "mcp-inspector-server": "build/index.js"
+  },
+  "files": [
+    "build"
+  ],
   "scripts": {
     "build": "tsc",
     "start": "node build/index.js",
@@ -17,7 +27,7 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "*",
+    "@modelcontextprotocol/sdk": "^1.0.3",
     "cors": "^2.8.5",
     "eventsource": "^2.0.2",
     "express": "^4.21.0",

server/src/index.ts

@@ -1,16 +1,37 @@
+#!/usr/bin/env node
+
 import cors from "cors";
 import EventSource from "eventsource";
+import { parseArgs } from "node:util";
+import { parse as shellParseArgs } from "shell-quote";
 
 import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+import {
+  StdioClientTransport,
+  getDefaultEnvironment,
+} from "@modelcontextprotocol/sdk/client/stdio.js";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
 import mcpProxy from "./mcpProxy.js";
+import { findActualExecutable } from "spawn-rx";
+
+const defaultEnvironment = {
+  ...getDefaultEnvironment(),
+  ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
+};
 
 // Polyfill EventSource for an SSE client in Node.js
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (global as any).EventSource = EventSource;
 
+const { values } = parseArgs({
+  args: process.argv.slice(2),
+  options: {
+    env: { type: "string", default: "" },
+    args: { type: "string", default: "" },
+  },
+});
+
 const app = express();
 app.use(cors());
 
@@ -23,17 +44,32 @@ const createTransport = async (query: express.Request["query"]) => {
 
   if (transportType === "stdio") {
     const command = query.command as string;
-    const args = (query.args as string).split(/\s+/);
-    console.log(`Stdio transport: command=${command}, args=${args}`);
-    const transport = new StdioClientTransport({ command, args });
+    const origArgs = shellParseArgs(query.args as string) as string[];
+    const queryEnv = query.env ? JSON.parse(query.env as string) : {};
+    const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
+
+    const { cmd, args } = findActualExecutable(command, origArgs);
+
+    console.log(`Stdio transport: command=${cmd}, args=${args}`);
+
+    const transport = new StdioClientTransport({
+      command: cmd,
+      args,
+      env,
+      stderr: "pipe",
+    });
+
     await transport.start();
+
     console.log("Spawned stdio transport");
     return transport;
   } else if (transportType === "sse") {
     const url = query.url as string;
     console.log(`SSE transport: url=${url}`);
+
     const transport = new SSEClientTransport(new URL(url));
     await transport.start();
+
     console.log("Connected to SSE transport");
     return transport;
   } else {
@@ -43,43 +79,77 @@ const createTransport = async (query: express.Request["query"]) => {
 };
 
 app.get("/sse", async (req, res) => {
-  console.log("New SSE connection");
+  try {
+    console.log("New SSE connection");
 
-  const backingServerTransport = await createTransport(req.query);
+    const backingServerTransport = await createTransport(req.query);
 
-  console.log("Connected MCP client to backing server transport");
+    console.log("Connected MCP client to backing server transport");
 
-  const webAppTransport = new SSEServerTransport("/message", res);
-  console.log("Created web app transport");
+    const webAppTransport = new SSEServerTransport("/message", res);
+    console.log("Created web app transport");
 
-  webAppTransports.push(webAppTransport);
-  console.log("Created web app transport");
+    webAppTransports.push(webAppTransport);
+    console.log("Created web app transport");
 
-  await webAppTransport.start();
+    await webAppTransport.start();
 
-  mcpProxy({
-    transportToClient: webAppTransport,
-    transportToServer: backingServerTransport,
-    onerror: (error) => {
-      console.error(error);
-    },
-  });
-  console.log("Set up MCP proxy");
+    if (backingServerTransport instanceof StdioClientTransport) {
+      backingServerTransport.stderr!.on("data", (chunk) => {
+        webAppTransport.send({
+          jsonrpc: "2.0",
+          method: "notifications/stderr",
+          params: {
+            content: chunk.toString(),
+          },
+        });
+      });
+    }
+
+    mcpProxy({
+      transportToClient: webAppTransport,
+      transportToServer: backingServerTransport,
+      onerror: (error) => {
+        console.error(error);
+      },
+    });
+
+    console.log("Set up MCP proxy");
+  } catch (error) {
+    console.error("Error in /sse route:", error);
+    res.status(500).json(error);
+  }
 });
 
 app.post("/message", async (req, res) => {
-  const sessionId = req.query.sessionId;
-  console.log(`Received message for sessionId ${sessionId}`);
+  try {
+    const sessionId = req.query.sessionId;
+    console.log(`Received message for sessionId ${sessionId}`);
 
-  const transport = webAppTransports.find((t) => t.sessionId === sessionId);
-  if (!transport) {
-    res.status(404).send("Session not found");
-    return;
+    const transport = webAppTransports.find((t) => t.sessionId === sessionId);
+    if (!transport) {
+      res.status(404).end("Session not found");
+      return;
+    }
+    await transport.handlePostMessage(req, res);
+  } catch (error) {
+    console.error("Error in /message route:", error);
+    res.status(500).json(error);
+  }
+});
+
+app.get("/config", (req, res) => {
+  try {
+    res.json({
+      defaultEnvironment,
+      defaultCommand: values.env,
+      defaultArgs: values.args,
+    });
+  } catch (error) {
+    console.error("Error in /config route:", error);
+    res.status(500).json(error);
   }
-  await transport.handlePostMessage(req, res);
 });
 
 const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => {
-  console.log(`Server is running on port ${PORT}`);
-});
+app.listen(PORT, () => {});