@mcpjam/inspector 0.1.6 → 0.2.0

package/README.md

@@ -1,5 +1,13 @@
 <div align="center">
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/MCPJam/inspector/blob/main/client/public/mcp_jam_dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://github.com/MCPJam/inspector/blob/main/client/public/mcp_jam_light.png">
+  <img width="250" alt="MCPJam logo" src="https://github.com/MCPJam/inspector/blob/main/client/public/mcp_jam_light.png">
+</picture>
+
+<br/>
+
 # MCPJam Inspector
 
 **The developer tool for testing and debugging MCP servers**
@@ -8,8 +16,7 @@
 [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=for-the-badge)](https://opensource.org/licenses/Apache-2.0)
 [![Node.js](https://img.shields.io/badge/Node.js-22.7.5+-green.svg?style=for-the-badge&logo=node.js)](https://nodejs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.8+-blue.svg?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
-
-_A powerful fork of the original [mcp-inspector](https://github.com/modelcontextprotocol/inspector) with enhanced features and modern UI_
+[![Discord](https://img.shields.io/badge/Discord-Join%20Server-5865F2.svg?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/yF7vWWkk)
 
 </div>
 
@@ -20,7 +27,7 @@ _A powerful fork of the original [mcp-inspector](https://github.com/modelcontext
 Get up and running in seconds with the MCPJam Inspector:
 
 ```bash
-npx @mcpjam/inspector
+npx @mcpjam/inspector@latest
 ```
 
 That's it! The inspector will launch automatically in your browser at `http://localhost:6274`.
@@ -40,9 +47,10 @@ That's it! The inspector will launch automatically in your browser at `http://lo
 This project is a fork of the [@modelcontextprotocol/inspector](https://github.com/modelcontextprotocol/inspector). Many of the features are the same but with some enhancements. Key features include:
 
 - **STDIO / SSE / Streamable HTTP** - This inspector supports all three protocols. Connect to any MCP server.
-- **Tool Execution** - Run server tools with live parameter input. Easily handle errors.
+- **Tool Execution** - Run server tools with live parameter input. Easily debug errors.
 - **(New) LLM tool interaction** - Test your MCP server against a real LLM.
 - **Debugging tools** - Enhanced logging experience to debug your server.
+- **Quality of life improvements** - Save requests, multi-server connection, saved connections.
 
 ## 📋 Requirements
 
@@ -176,6 +184,31 @@ We welcome contributions! We thought the original inspector repository moved too
 4. **Push** to the branch (`git push origin feature/amazing-feature`)
 5. **Open** a Pull Request
 
+## 🗺️ Our Roadmap
+
+We're continuously improving the MCPJam Inspector. Here's what's coming next:
+
+### UI/UX Improvements
+
+- **Fix dark mode styling** - Improve run tool button appearance in dark mode
+- **Enhanced logging UX** - Address misleading red color for INFO logs
+
+### Core Features
+
+- **AI parameter fill** - Smart parameter completion using AI
+- **Collections** - Organize and group your MCP servers / tools
+- **Multi Provider support** - Support for other LLMs like ChatGPT
+
+### Technical Enhancements
+
+- **Security scanning** - Built-in vulnerability scanning tools
+- **Electron App** - Desktop application for enhanced user experience
+
+### Ecosystem
+
+- **Landing page improvements** - Update MCP Jam landing page
+- **Documentation expansion** - Enhanced guides and tutorials
+
 ### Development Guidelines
 
 - Follow the existing code style (Prettier + ESLint)
@@ -202,6 +235,4 @@ This project is licensed under the **Apache License 2.0** - see the [LICENSE](LI
 
 **Made with ❤️ by the [MCPJam](https://mcpjam.com) team**
 
-_Empowering developers to build better MCP servers_
-
 </div>

package/client/dist/assets/{OAuthCallback-CBw5QXWv.js → OAuthCallback-Bn78Q1TF.js}

@@ -1,4 +1,4 @@
-import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-CV_1RAbM.js";
+import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-DJQtmX5A.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthCallback = ({ onConnect }) => {
   const { toast } = useToast();

package/client/dist/assets/{OAuthDebugCallback-wx6FGFG4.js → OAuthDebugCallback-BqpNnC48.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-CV_1RAbM.js";
+import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-DJQtmX5A.js";
 import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
 const OAuthDebugCallback = ({ onConnect }) => {
   reactExports.useEffect(() => {

package/client/dist/assets/{index-CmBOF7JI.css → index-CGJXsF8q.css}

@@ -978,6 +978,39 @@ video {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1325,6 +1358,9 @@ video {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-4xl {
+  max-width: 56rem;
+}
 .max-w-\[80\%\] {
   max-width: 80%;
 }
@@ -1430,6 +1466,9 @@ video {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-cols-\[2fr_3fr_3fr\] {
+  grid-template-columns: 2fr 3fr 3fr;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -1842,11 +1881,6 @@ video {
   --tw-gradient-to: hsl(var(--muted) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-primary {
-  --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
 .from-purple-500 {
   --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
@@ -1928,9 +1962,6 @@ video {
 .to-muted\/50 {
   --tw-gradient-to: hsl(var(--muted) / 0.5) var(--tw-gradient-to-position);
 }
-.to-primary\/90 {
-  --tw-gradient-to: hsl(var(--primary) / 0.9) var(--tw-gradient-to-position);
-}
 .to-secondary\/10 {
   --tw-gradient-to: hsl(var(--secondary) / 0.1) var(--tw-gradient-to-position);
 }
@@ -2070,6 +2101,9 @@ video {
 .pt-2 {
   padding-top: 0.5rem;
 }
+.pt-4 {
+  padding-top: 1rem;
+}
 .text-center {
   text-align: center;
 }
@@ -2112,6 +2146,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .italic {
   font-style: italic;
 }
@@ -2524,12 +2561,6 @@ h1 {
   color: hsl(var(--muted-foreground));
 }
 
-.hover\:scale-\[1\.01\]:hover {
-  --tw-scale-x: 1.01;
-  --tw-scale-y: 1.01;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .hover\:border-\[\#646cff\]:hover {
   --tw-border-opacity: 1;
   border-color: rgb(100 108 255 / var(--tw-border-opacity, 1));
@@ -2608,6 +2639,11 @@ h1 {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-red-50\/80:hover {
   background-color: rgb(254 242 242 / 0.8);
 }
@@ -2634,12 +2670,6 @@ h1 {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.hover\:from-primary\/90:hover {
-  --tw-gradient-from: hsl(var(--primary) / 0.9) var(--tw-gradient-from-position);
-  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .hover\:from-secondary\/30:hover {
   --tw-gradient-from: hsl(var(--secondary) / 0.3) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
@@ -2655,10 +2685,6 @@ h1 {
   --tw-gradient-to: hsl(var(--muted) / 0.3) var(--tw-gradient-to-position);
 }
 
-.hover\:to-primary\/80:hover {
-  --tw-gradient-to: hsl(var(--primary) / 0.8) var(--tw-gradient-to-position);
-}
-
 .hover\:to-secondary\/20:hover {
   --tw-gradient-to: hsl(var(--secondary) / 0.2) var(--tw-gradient-to-position);
 }
@@ -2689,6 +2715,11 @@ h1 {
   color: hsl(var(--primary));
 }
 
+.hover\:text-red-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-slate-900:hover {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
@@ -2794,12 +2825,6 @@ h1 {
   --tw-ring-offset-width: 2px;
 }
 
-.active\:scale-\[0\.99\]:active {
-  --tw-scale-x: 0.99;
-  --tw-scale-y: 0.99;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -3069,6 +3094,10 @@ h1 {
   --tw-enter-translate-y: -100%;
 }
 
+.dark\:border-border\/60:is(.dark *) {
+  border-color: hsl(var(--border) / 0.6);
+}
+
 .dark\:border-destructive:is(.dark *) {
   border-color: hsl(var(--destructive));
 }
@@ -3154,6 +3183,12 @@ h1 {
   background-color: rgb(15 23 42 / 0.6);
 }
 
+.dark\:from-secondary\/30:is(.dark *) {
+  --tw-gradient-from: hsl(var(--secondary) / 0.3) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .dark\:from-slate-800:is(.dark *) {
   --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
@@ -3176,6 +3211,10 @@ h1 {
   --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
 }
 
+.dark\:to-secondary\/20:is(.dark *) {
+  --tw-gradient-to: hsl(var(--secondary) / 0.2) var(--tw-gradient-to-position);
+}
+
 .dark\:to-slate-800:is(.dark *) {
   --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
 }
@@ -3259,11 +3298,20 @@ h1 {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.dark\:shadow-secondary\/10:is(.dark *) {
+  --tw-shadow-color: hsl(var(--secondary) / 0.1);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .dark\:hover\:border-blue-800:hover:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
 }
 
+.dark\:hover\:border-border\/80:hover:is(.dark *) {
+  border-color: hsl(var(--border) / 0.8);
+}
+
 .dark\:hover\:border-red-500\/60:hover:is(.dark *) {
   border-color: rgb(239 68 68 / 0.6);
 }
@@ -3285,15 +3333,35 @@ h1 {
   background-color: rgb(127 29 29 / 0.2);
 }
 
+.dark\:hover\:bg-red-950:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
+}
+
 .dark\:hover\:bg-slate-700\/30:hover:is(.dark *) {
   background-color: rgb(51 65 85 / 0.3);
 }
 
+.dark\:hover\:from-secondary\/40:hover:is(.dark *) {
+  --tw-gradient-from: hsl(var(--secondary) / 0.4) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--secondary) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dark\:hover\:to-secondary\/30:hover:is(.dark *) {
+  --tw-gradient-to: hsl(var(--secondary) / 0.3) var(--tw-gradient-to-position);
+}
+
 .dark\:hover\:text-slate-200:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity, 1));
 }
 
+.dark\:hover\:shadow-secondary\/20:hover:is(.dark *) {
+  --tw-shadow-color: hsl(var(--secondary) / 0.2);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .group:hover .dark\:group-hover\:text-gray-100:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity, 1));