feat(inspector): enhance MCP Inspector with new features and improvements

- Add support for new dependencies including @hono/node-server and @modelcontextprotocol/sdk
- Implement OAuth authentication flow handling in the main application
- Update README with detailed usage instructions and server configurations
- Refactor components to utilize context for managing MCP connections
- Improve UI with new animations and status indicators for server connections
- Enhance error handling and retry logic for tool execution
- Update package configurations and dependencies for better performance

Author: tonxxd

packages/inspector/README.md

@@ -1,84 +1,144 @@
 # MCP Inspector
 
-A web-based interface for connecting to and managing MCP (Model Context Protocol) servers.
+A web-based interface for connecting to and managing MCP (Model Context Protocol) servers using the `useMcp` React hook.
 
 ## 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
+- **Server Management**: Add, connect to, and manage multiple MCP servers simultaneously
+- **Real-time Connection Status**: See live connection states and errors
+- **OAuth Authentication**: Automatic OAuth flow handling with popup support
+- **Tool Execution**: Inspect and execute MCP tools directly from the UI
+- **Resource & Prompt Browsing**: View available resources and prompts from connected servers
+- **Browser-Compatible**: Works entirely in the browser using the `useMcp` React hook
 - **Multiple Connection Types**: Support for HTTP/SSE and WebSocket connections
+- **Persistent Storage**: Connections are saved to localStorage and automatically reconnect
 
 ## 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
+1. Go to the main dashboard
+2. In the "Add New MCP Server" section:
+   - **Server Name** (optional): A friendly name for your server
+   - **Server URL**: The URL to connect to (e.g., `https://mcp.linear.app/sse`)
+3. Click "Connect" to add the server
+4. The server will automatically attempt to connect
 
-### Connecting to Servers
+### Server States
 
-1. Select a server from the dropdown
-2. The system will automatically attempt to connect
-3. Once connected, you'll see a "Connected" badge
+The inspector displays various connection states:
+
+- **discovering**: Finding the server
+- **connecting**: Establishing connection
+- **authenticating**: Going through OAuth flow (if required)
+- **loading**: Loading tools, resources, and prompts
+- **ready**: Connected and ready to use
+- **failed**: Connection failed (with retry option)
+- **pending_auth**: Waiting for OAuth authentication
+
+### Authentication
+
+For servers requiring OAuth (like Linear):
+
+1. Click the "Authenticate" button when prompted
+2. Complete the OAuth flow in the popup window
+3. If the popup is blocked, click the "open auth page" link to authenticate manually
+4. Once authenticated, the connection will automatically complete
+
+### Inspecting a Server
+
+1. Click the "Inspect" button on any connected server
+2. View all available tools, resources, and prompts
+3. Execute tools by clicking "Execute" and providing JSON input
+4. Copy resource URIs to clipboard
+5. View detailed schema information for each tool
 
 ## Example Server Configurations
 
-### Linear Server
+### Linear MCP Server
 
-For connecting to a Linear MCP server:
+For connecting to Linear's official MCP server:
 
 - **Server Name**: Linear
-- **Connection Type**: HTTP/SSE
-- **Server URL**: `https://your-linear-mcp-server.com`
-- **Description**: Linear project management integration
+- **Server URL**: `https://mcp.linear.app/sse`
+
+This server requires OAuth authentication and provides tools for managing Linear issues, projects, teams, and more.
 
 ### Local Development Server
 
-For local development:
+For local development using HTTP/SSE:
 
 - **Server Name**: Local Dev
-- **Connection Type**: HTTP/SSE
-- **Server URL**: `http://localhost:3000`
-- **Description**: Local development server
+- **Server URL**: `http://localhost:3000/sse`
 
 ### 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:
+The inspector is built using:
+
+- **React**: UI framework
+- **useMcp Hook**: From `mcp-use/react` for managing MCP connections
+- **React Router**: For navigation between dashboard and server detail views
+- **Tailwind CSS**: For styling
+- **shadcn/ui**: UI component library
 
-- HTTP/SSE connections
-- WebSocket connections
-- OAuth authentication (when configured)
+### Architecture
 
-The client automatically handles:
+- **McpContext**: Context provider that manages multiple MCP connections using `useMcp` hooks
+- **InspectorDashboard**: Main dashboard showing all connections and stats
+- **ServerList**: List view of all servers with detailed information
+- **ServerDetail**: Detailed view of a single server with tool execution capabilities
 
-- Connection testing before adding servers
-- Session management
-- Error handling and reporting
+The `useMcp` hook automatically handles:
+
+- Connection lifecycle management
+- OAuth authentication flows
+- Tool, resource, and prompt discovery
+- Error handling and retry logic
+- Session persistence via localStorage
 
 ## Development
 
 To run the inspector in development mode:
 
 ```bash
-cd inspector
+cd packages/inspector
 yarn install
 yarn dev
 ```
 
 The inspector will be available at `http://localhost:5173`.
+
+### Project Structure
+
+```
+src/
+├── client/
+│   ├── components/
+│   │   ├── InspectorDashboard.tsx  # Main dashboard
+│   │   ├── ServerList.tsx          # Server list view
+│   │   ├── ServerDetail.tsx        # Server detail view
+│   │   └── Layout.tsx              # App layout
+│   ├── context/
+│   │   └── McpContext.tsx          # MCP connection context
+│   ├── App.tsx                     # Root app component
+│   └── main.tsx                    # Entry point
+└── components/
+    └── ui/                         # shadcn/ui components
+```
+
+## Building
+
+To build the inspector for production:
+
+```bash
+yarn build
+```
+
+The built files will be in the `dist/` directory.

packages/inspector/components.json

@@ -18,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
+  }
 }

packages/inspector/package.json

@@ -30,6 +30,8 @@
     "lint:pnpm": "pnpm lint:fix"
   },
   "dependencies": {
+    "@hono/node-server": "^1.19.5",
+    "@modelcontextprotocol/sdk": "1.12.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -38,6 +40,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/cli": "^4.1.14",
     "@tailwindcss/vite": "^4.1.14",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.22",
@@ -48,6 +51,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.3",
+    "react-syntax-highlighter": "^15.6.6",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

packages/inspector/src/client/App.tsx

@@ -3,18 +3,21 @@ import { InspectorDashboard } from './components/InspectorDashboard'
 import { Layout } from './components/Layout'
 import { ServerDetail } from './components/ServerDetail'
 import { ServerList } from './components/ServerList'
+import { McpProvider } from './context/McpContext'
 
 function App() {
   return (
-    <Router>
-      <Layout>
-        <Routes>
-          <Route path="/" element={<InspectorDashboard />} />
-          <Route path="/servers" element={<ServerList />} />
-          <Route path="/servers/:serverId" element={<ServerDetail />} />
-        </Routes>
-      </Layout>
-    </Router>
+    <McpProvider>
+      <Router>
+        <Layout>
+          <Routes>
+            <Route path="/" element={<InspectorDashboard />} />
+            <Route path="/servers" element={<ServerList />} />
+            <Route path="/servers/:serverId" element={<ServerDetail />} />
+          </Routes>
+        </Layout>
+      </Router>
+    </McpProvider>
   )
 }