refactor(inspector): update package.json and tsconfig, enhance build scripts, and remove unused index.ts

Author: tonxxd

packages/inspector/.npmrc

@@ -0,0 +1 @@
+package-manager-strict=false

packages/inspector/.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "always",
+    "source.fixAll.eslint": "always",
+    "source.organizeImports": "always"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "npm.packageManager": "auto",
+  "yarn.packageManager": "auto",
+  "pnpm.packageManager": "auto",
+  "typescript.preferences.includePackageJsonAutoImports": "auto",
+  "typescript.suggest.autoImports": true
+}

packages/inspector/.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+packageManager: yarn

packages/inspector/README.md

@@ -0,0 +1,84 @@
+# MCP Inspector
+
+A web-based interface for connecting to and managing MCP (Model Context Protocol) servers.
+
+## Features
+
+- **Server Management**: Add, connect to, and manage MCP servers
+- **Real-time Connection**: Test connections before adding servers
+- **Browser-Compatible**: Works entirely in the browser using the MCP client
+- **Multiple Connection Types**: Support for HTTP/SSE and WebSocket connections
+
+## Usage
+
+### Adding a New Server
+
+1. Click the server selection dropdown in the top-left corner
+2. Click "Add Server" button
+3. Fill in the server details:
+   - **Server Name**: A friendly name for your server
+   - **Connection Type**: Choose between HTTP/SSE or WebSocket
+   - **Server URL**: The URL to connect to (e.g., `http://localhost:3000` or `ws://localhost:3000`)
+   - **Description** (optional): Brief description of the server
+4. Click "Add Server" to test the connection and add the server
+
+### Connecting to Servers
+
+1. Select a server from the dropdown
+2. The system will automatically attempt to connect
+3. Once connected, you'll see a "Connected" badge
+
+## Example Server Configurations
+
+### Linear Server
+
+For connecting to a Linear MCP server:
+
+- **Server Name**: Linear
+- **Connection Type**: HTTP/SSE
+- **Server URL**: `https://your-linear-mcp-server.com`
+- **Description**: Linear project management integration
+
+### Local Development Server
+
+For local development:
+
+- **Server Name**: Local Dev
+- **Connection Type**: HTTP/SSE
+- **Server URL**: `http://localhost:3000`
+- **Description**: Local development server
+
+### WebSocket Server
+
+For WebSocket-based servers:
+
+- **Server Name**: WebSocket Server
+- **Connection Type**: WebSocket
+- **Server URL**: `ws://localhost:8080`
+- **Description**: WebSocket-based MCP server
+
+## Technical Details
+
+The inspector uses the browser-compatible MCP client from `mcp-use/browser`, which supports:
+
+- HTTP/SSE connections
+- WebSocket connections
+- OAuth authentication (when configured)
+
+The client automatically handles:
+
+- Connection testing before adding servers
+- Session management
+- Error handling and reporting
+
+## Development
+
+To run the inspector in development mode:
+
+```bash
+cd inspector
+yarn install
+yarn dev
+```
+
+The inspector will be available at `http://localhost:5173`.

packages/inspector/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/client/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

packages/inspector/eslint.config.js

@@ -0,0 +1,10 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  formatters: true,
+  typescript: true,
+  react: false,
+  rules: {
+    'node/prefer-global/process': 'off',
+  },
+})

packages/inspector/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>MCP Inspector</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/client/main.tsx"></script>
+  </body>
+</html>

packages/inspector/package.json

@@ -1,23 +1,71 @@
 {
   "name": "@mcp-use/inspector",
+  "type": "module",
   "version": "0.1.0",
-  "description": "MCP Inspector package for debugging and inspecting MCP servers",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "description": "MCP Inspector - A tool for inspecting and debugging MCP servers",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "mcp",
+    "inspector",
+    "debug",
+    "tools"
+  ],
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest"
+    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
+    "dev:client": "vite",
+    "dev:server": "tsx watch src/server/index.ts",
+    "build": "npm run build:client && npm run build:server",
+    "build:client": "vite build",
+    "build:server": "tsc -p tsconfig.server.json",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "install:yarn": "yarn install",
+    "install:pnpm": "pnpm install",
+    "install:npm": "npm install",
+    "lint:yarn": "yarn eslint . --fix",
+    "lint:npm": "npm run lint:fix",
+    "lint:pnpm": "pnpm lint:fix"
   },
   "dependencies": {
-    "mcp-use": "workspace:*"
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/cli": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.22",
+    "hono": "^4.0.0",
+    "lucide-react": "^0.545.0",
+    "mcp-use": "^0.2.0",
+    "motion": "^12.23.22",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.3",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@types/node": "^20.0.0",
-    "typescript": "^5.0.0",
-    "vitest": "^1.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@antfu/eslint-config": "^5.4.1",
+    "@eslint-react/eslint-plugin": "^1.38.4",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@types/node": "^24.7.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@vitejs/plugin-react": "^5.0.4",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.6.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9"
   }
 }