@mcpjam/inspector 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +124 -175
  2. package/client/dist/assets/{OAuthCallback-DGHeh45g.js → OAuthCallback-CHBqWOc7.js} +1 -1
  3. package/client/dist/assets/{OAuthDebugCallback-D_tK6y_H.js → OAuthDebugCallback-BuULQ2Jc.js} +1 -1
  4. package/client/dist/assets/{index-0M1YGFzn.js → index-DCuo5o9C.js} +64 -27
  5. package/client/dist/index.html +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,258 +1,207 @@
1
- # MCPJam Inspector
2
-
3
- The MCPJam inspector is a dev tool for testing and debugging MCP servers. The MCPJam inspector is a fork of the mcp-inspector with additional improvements.
4
-
5
- ## Running the Inspector
6
-
7
- ### Requirements
8
-
9
- - Node.js: ^22.7.5
10
-
11
- ### From an MCP server repository
1
+ <div align="center">
12
2
 
13
- 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`:
3
+ # MCPJam Inspector
14
4
 
15
- ```bash
16
- npx @mcpjam/inspector node build/index.js
17
- ```
5
+ **The developer tool for testing and debugging MCP servers**
18
6
 
19
- 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:
7
+ [![npm version](https://img.shields.io/npm/v/@mcpjam/inspector?style=for-the-badge&color=blue)](https://www.npmjs.com/package/@mcpjam/inspector)
8
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
9
+ [![Node.js](https://img.shields.io/badge/Node.js-22.7.5+-green.svg?style=for-the-badge&logo=node.js)](https://nodejs.org/)
10
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.8+-blue.svg?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
20
11
 
21
- ```bash
22
- # Pass arguments only
23
- npx @mcpjam/inspector node build/index.js arg1 arg2
12
+ _A powerful fork of the original [mcp-inspector](https://github.com/modelcontextprotocol/inspector) with enhanced features and modern UI_
24
13
 
25
- # Pass environment variables only
26
- npx @mcpjam/inspector -e key=value -e key2=$VALUE2 node build/index.js
14
+ </div>
27
15
 
28
- # Pass both environment variables and arguments
29
- npx @modelcontextprotocol/inspector -e key=value -e key2=$VALUE2 node build/index.js arg1 arg2
16
+ ---
30
17
 
31
- # Use -- to separate inspector flags from server arguments
32
- npx @modelcontextprotocol/inspector -e key=$VALUE -- node build/index.js -e server-flag
33
- ```
18
+ ## Quick Start
34
19
 
35
- The inspector runs both an MCP Inspector (MCPI) client UI (default port 6274) and an MCP Proxy (MCPP) server (default port 6277). Open the MCPI client UI in your browser to use the inspector. (These ports are derived from the T9 dialpad mapping of MCPI and MCPP respectively, as a mnemonic). You can customize the ports if needed:
20
+ Get up and running in seconds with the MCPJam Inspector:
36
21
 
37
22
  ```bash
38
- CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
23
+ npx @mcpjam/inspector
39
24
  ```
40
25
 
41
- 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).
26
+ That's it! The inspector will launch automatically in your browser at `http://localhost:6274`.
42
27
 
43
- ### Servers File Export
28
+ ---
44
29
 
45
- The MCP Inspector provides convenient buttons to export server launch configurations for use in clients such as Cursor, Claude Code, or the Inspector's CLI. The file is usually called `mcp.json`.
30
+ ## 📸 Screenshots
46
31
 
47
- - **Server Entry** - Copies a single server configuration entry to your clipboard. This can be added to your `mcp.json` file inside the `mcpServers` object with your preferred server name.
32
+ <div align="center">
33
+ <img width="1511" alt="MCPJam Inspector Interface" src="https://github.com/user-attachments/assets/ade8a46a-f738-4d32-ac85-260a5e22b90f" />
34
+ </div>
48
35
 
49
- **STDIO transport example:**
36
+ ---
50
37
 
51
- ```json
52
- {
53
- "command": "node",
54
- "args": ["build/index.js", "--debug"],
55
- "env": {
56
- "API_KEY": "your-api-key",
57
- "DEBUG": "true"
58
- }
59
- }
60
- ```
61
-
62
- **SSE transport example:**
63
-
64
- ```json
65
- {
66
- "type": "sse",
67
- "url": "http://localhost:3000/events",
68
- "note": "For SSE connections, add this URL directly in Client"
69
- }
70
- ```
71
-
72
- - **Servers File** - Copies a complete MCP configuration file structure to your clipboard, with your current server configuration added as `default-server`. This can be saved directly as `mcp.json`.
73
-
74
- **STDIO transport example:**
75
-
76
- ```json
77
- {
78
- "mcpServers": {
79
- "default-server": {
80
- "command": "node",
81
- "args": ["build/index.js", "--debug"],
82
- "env": {
83
- "API_KEY": "your-api-key",
84
- "DEBUG": "true"
85
- }
86
- }
87
- }
88
- }
89
- ```
90
-
91
- **SSE transport example:**
38
+ ## ✨ Core Features
92
39
 
93
- ```json
94
- {
95
- "mcpServers": {
96
- "default-server": {
97
- "type": "sse",
98
- "url": "http://localhost:3000/events",
99
- "note": "For SSE connections, add this URL directly in Client"
100
- }
101
- }
102
- }
103
- ```
40
+ 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:
104
41
 
105
- These buttons appear in the Inspector UI after you've configured your server settings, making it easy to save and reuse your configurations.
42
+ - **STDIO / SSE / Streamable HTTP** - This inspector supports all three protocols. Connect to any MCP server.
43
+ - **Tool Execution** - Run server tools with live parameter input. Easily handle errors.
44
+ - **(New) LLM tool interaction** - Test your MCP server against a real LLM.
45
+ - **Debugging tools** - Enhanced logging experience to debug your server.
106
46
 
107
- For SSE transport connections, the Inspector provides similar functionality for both buttons. The "Server Entry" button copies the SSE URL configuration that can be added to your existing configuration file, while the "Servers File" button creates a complete configuration file containing the SSE URL for direct use in clients.
47
+ ## 📋 Requirements
108
48
 
109
- You can paste the Server Entry into your existing `mcp.json` file under your chosen server name, or use the complete Servers File payload to create a new configuration file.
49
+ - **Node.js**: `^22.7.5` or higher
50
+ - **npm**: `^10.0.0` or higher (comes with Node.js)
110
51
 
111
- ### Authentication
52
+ ---
112
53
 
113
- The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header. You can override the header name using the input field in the sidebar.
54
+ ## 🎯 Usage Examples
114
55
 
115
- ### Security Considerations
56
+ ### Basic Usage
116
57
 
117
- The MCP Inspector includes a proxy server that can run and communicate with local MCP processes. The proxy server should not be exposed to untrusted networks as it has permissions to spawn local processes and can connect to any specified MCP server.
58
+ ```bash
59
+ # Launch inspector with default settings
60
+ npx @mcpjam/inspector
61
+ ```
118
62
 
119
- ### Configuration
63
+ ### Connect to Local Server
120
64
 
121
- The MCP Inspector supports the following configuration settings. To change them, click on the `Configuration` button in the MCP Inspector UI:
65
+ ```bash
66
+ # Connect to a server built at build/index.js
67
+ npx @mcpjam/inspector node build/index.js
68
+ ```
122
69
 
123
- | Setting | Description | Default |
124
- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------- |
125
- | `MCP_SERVER_REQUEST_TIMEOUT` | Timeout for requests to the MCP server (ms) | 10000 |
126
- | `MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS` | Reset timeout on progress notifications | true |
127
- | `MCP_REQUEST_MAX_TOTAL_TIMEOUT` | Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications) | 60000 |
128
- | `MCP_PROXY_FULL_ADDRESS` | Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577 | "" |
129
- | `MCP_AUTO_OPEN_ENABLED` | Enable automatic browser opening when inspector starts. Only as environment var, not configurable in browser. | true |
70
+ ### Connect with Arguments
130
71
 
131
- These settings can be adjusted in real-time through the UI and will persist across sessions.
72
+ ```bash
73
+ # Pass custom arguments to your server
74
+ npx @mcpjam/inspector node server.js --port 3000 --debug
75
+ ```
132
76
 
133
- The inspector also supports configuration files to store settings for different MCP servers. This is useful when working with multiple servers or complex configurations:
77
+ ### Using Configuration File
134
78
 
135
79
  ```bash
136
- npx @modelcontextprotocol/inspector --config path/to/config.json --server everything
80
+ # Load servers from a config file
81
+ npx @mcpjam/inspector --config ./my-config.json
137
82
  ```
138
83
 
139
- Example server configuration file:
84
+ ### Example Configuration File
140
85
 
141
86
  ```json
142
87
  {
143
88
  "mcpServers": {
144
- "everything": {
145
- "command": "npx",
146
- "args": ["@modelcontextprotocol/server-everything"],
89
+ "my-awesome-server": {
90
+ "command": "node",
91
+ "args": ["build/index.js"],
147
92
  "env": {
148
- "hello": "Hello MCP!"
93
+ "API_KEY": "your-api-key",
94
+ "DEBUG": "true"
149
95
  }
150
96
  },
151
- "my-server": {
152
- "command": "node",
153
- "args": ["build/index.js", "arg1", "arg2"],
97
+ "python-server": {
98
+ "command": "python",
99
+ "args": ["-m", "my_mcp_server"],
154
100
  "env": {
155
- "key": "value",
156
- "key2": "value2"
101
+ "PYTHONPATH": "./src"
157
102
  }
158
103
  }
159
104
  }
160
105
  }
161
106
  ```
162
107
 
163
- > **Tip:** You can easily generate this configuration format using the **Server Entry** and **Servers File** buttons in the Inspector UI, as described in the Servers File Export section above.
108
+ ---
164
109
 
165
- You can also set the initial `transport` type, `serverUrl`, `serverCommand`, and `serverArgs` via query params, for example:
166
-
167
- ```
168
- http://localhost:6274/?transport=sse&serverUrl=http://localhost:8787/sse
169
- http://localhost:6274/?transport=streamable-http&serverUrl=http://localhost:8787/mcp
170
- http://localhost:6274/?transport=stdio&serverCommand=npx&serverArgs=arg1%20arg2
171
- ```
110
+ ## 🏗️ Architecture
172
111
 
173
- You can also set initial config settings via query params, for example:
112
+ The MCPJam Inspector is built as a modern monorepo with three main components:
174
113
 
175
114
  ```
176
- http://localhost:6274/?MCP_SERVER_REQUEST_TIMEOUT=10000&MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS=false&MCP_PROXY_FULL_ADDRESS=http://10.1.1.22:5577
115
+ 📦 @mcpjam/inspector
116
+ ├── 🖥️ client/ # React + TypeScript frontend
117
+ ├── 🔧 server/ # Express.js backend with WebSocket support
118
+ └── 🚀 cli/ # Command-line interface
177
119
  ```
178
120
 
179
- Note that if both the query param and the corresponding localStorage item are set, the query param will take precedence.
121
+ ### Tech Stack
180
122
 
181
- ### From this repository
123
+ - **Frontend**: React 18, TypeScript, Tailwind CSS, Radix UI
124
+ - **Backend**: Express.js, WebSocket (ws), CORS support
125
+ - **CLI**: Node.js with shell integration
126
+ - **Build Tools**: Vite, TSC, Concurrently
182
127
 
183
- If you're working on the inspector itself:
128
+ ---
184
129
 
185
- Development mode:
130
+ ## 🛠️ Development
131
+
132
+ ### Local Development Setup
186
133
 
187
134
  ```bash
135
+ # Clone the repository
136
+ git clone https://github.com/mcpjam/inspector.git
137
+ cd inspector
138
+
139
+ # Install dependencies
140
+ npm install
141
+
142
+ # Start development servers
188
143
  npm run dev
189
144
  ```
190
145
 
191
- > **Note for Windows users:**
192
- > On Windows, use the following command instead:
193
- >
194
- > ```bash
195
- > npm run dev:windows
196
- > ```
197
-
198
- Production mode:
146
+ ### Build for Production
199
147
 
200
148
  ```bash
149
+ # Build all components
201
150
  npm run build
202
- npm start
151
+
152
+ # Test the build
153
+ npm run start
203
154
  ```
204
155
 
205
- ### CLI Mode
156
+ ### Scripts for development
206
157
 
207
- CLI mode enables programmatic interaction with MCP servers from the command line, ideal for scripting, automation, and integration with coding assistants. This creates an efficient feedback loop for MCP server development.
158
+ We put together these commands to help you build locally:
159
+ | Script | Description |
160
+ | ---------------------- | ------------------------------------------- |
161
+ | `npm run dev` | Start development servers (client + server) |
162
+ | `npm run build` | Build all components for production |
163
+ | `npm run test` | Run test suite |
164
+ | `npm run prettier-fix` | Format code with Prettier |
165
+ | `npm run clean` | Clean all build artifacts and reinstall |
208
166
 
209
- ```bash
210
- npx @modelcontextprotocol/inspector --cli node build/index.js
211
- ```
167
+ ---
212
168
 
213
- The CLI mode supports most operations across tools, resources, and prompts. A few examples:
169
+ ## 🤝 Contributing
214
170
 
215
- ```bash
216
- # Basic usage
217
- npx @modelcontextprotocol/inspector --cli node build/index.js
171
+ We welcome contributions! We thought the original inspector repository moved too slowly, so we wanted to build this project ourselves.
218
172
 
219
- # With config file
220
- npx @modelcontextprotocol/inspector --cli --config path/to/config.json --server myserver
173
+ 1. **Clone** the repository
174
+ 2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
175
+ 3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
176
+ 4. **Push** to the branch (`git push origin feature/amazing-feature`)
177
+ 5. **Open** a Pull Request
221
178
 
222
- # List available tools
223
- npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/list
179
+ ### Development Guidelines
224
180
 
225
- # Call a specific tool
226
- npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/call --tool-name mytool --tool-arg key=value --tool-arg another=value2
181
+ - Follow the existing code style (Prettier + ESLint)
182
+ - Update documentation as needed
227
183
 
228
- # List available resources
229
- npx @modelcontextprotocol/inspector --cli node build/index.js --method resources/list
184
+ ---
230
185
 
231
- # List available prompts
232
- npx @modelcontextprotocol/inspector --cli node build/index.js --method prompts/list
186
+ ## 📚 Resources
233
187
 
234
- # Connect to a remote MCP server
235
- npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com
188
+ - **🌐 Website**: [mcpjam.com](https://mcpjam.com)
189
+ - **📖 Documentation**: [MCP Protocol Docs](https://modelcontextprotocol.io/)
190
+ - **🐛 Issues**: [GitHub Issues](https://github.com/mcpjam/inspector/issues)
191
+ - **💬 Discussions**: [GitHub Discussions](https://github.com/mcpjam/inspector/discussions)
236
192
 
237
- # Call a tool on a remote server
238
- npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method tools/call --tool-name remotetool --tool-arg param=value
193
+ ---
239
194
 
240
- # List resources from a remote server
241
- npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method resources/list
242
- ```
195
+ ## 📄 License
196
+
197
+ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
198
+
199
+ ---
243
200
 
244
- ### UI Mode vs CLI Mode: When to Use Each
201
+ <div align="center">
245
202
 
246
- | Use Case | UI Mode | CLI Mode |
247
- | ------------------------ | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
248
- | **Server Development** | Visual interface for interactive testing and debugging during development | Scriptable commands for quick testing and continuous integration; creates feedback loops with AI coding assistants like Cursor for rapid development |
249
- | **Resource Exploration** | Interactive browser with hierarchical navigation and JSON visualization | Programmatic listing and reading for automation and scripting |
250
- | **Tool Testing** | Form-based parameter input with real-time response visualization | Command-line tool execution with JSON output for scripting |
251
- | **Prompt Engineering** | Interactive sampling with streaming responses and visual comparison | Batch processing of prompts with machine-readable output |
252
- | **Debugging** | Request history, visualized errors, and real-time notifications | Direct JSON output for log analysis and integration with other tools |
253
- | **Automation** | N/A | Ideal for CI/CD pipelines, batch processing, and integration with coding assistants |
254
- | **Learning MCP** | Rich visual interface helps new users understand server capabilities | Simplified commands for focused learning of specific endpoints |
203
+ **Made with ❤️ by the [MCPJam](https://mcpjam.com) team**
255
204
 
256
- ## License
205
+ _Empowering developers to build better MCP servers_
257
206
 
258
- This project is licensed under the MIT License—see the [LICENSE](LICENSE) file for details.
207
+ </div>
package/client/dist/assets/{OAuthCallback-DGHeh45g.js → OAuthCallback-CHBqWOc7.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-0M1YGFzn.js";
1
+ import { u as useToast, r as reactExports, j as jsxRuntimeExports, S as SESSION_KEYS, I as InspectorOAuthClientProvider, a as auth } from "./index-DCuo5o9C.js";
2
2
  import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
3
3
  const OAuthCallback = ({ onConnect }) => {
4
4
  const { toast } = useToast();
package/client/dist/assets/{OAuthDebugCallback-D_tK6y_H.js → OAuthDebugCallback-BuULQ2Jc.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-0M1YGFzn.js";
1
+ import { r as reactExports, S as SESSION_KEYS, j as jsxRuntimeExports } from "./index-DCuo5o9C.js";
2
2
  import { p as parseOAuthCallbackParams, g as generateOAuthErrorDescription } from "./oauthUtils-DTcoXpSP.js";
3
3
  const OAuthDebugCallback = ({ onConnect }) => {
4
4
  reactExports.useEffect(() => {
package/client/dist/assets/{index-0M1YGFzn.js → index-DCuo5o9C.js} RENAMED
@@ -1,4 +1,4 @@
1
- const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-DGHeh45g.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-D_tK6y_H.js"])))=>i.map(i=>d[i]);
1
+ const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/OAuthCallback-CHBqWOc7.js","assets/oauthUtils-DTcoXpSP.js","assets/OAuthDebugCallback-BuULQ2Jc.js"])))=>i.map(i=>d[i]);
2
2
  var __defProp = Object.defineProperty;
3
3
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
4
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -23935,7 +23935,7 @@ class DebugInspectorOAuthClientProvider extends InspectorOAuthClientProvider {
23935
23935
  );
23936
23936
  }
23937
23937
  }
23938
- const version$1 = "0.1.3";
23938
+ const version$1 = "0.1.5";
23939
23939
  const packageJson = {
23940
23940
  version: version$1
23941
23941
  };
@@ -28862,22 +28862,52 @@ const OAuthStepDetails = ({
28862
28862
  ] })
28863
28863
  ] });
28864
28864
  };
28865
+ const steps = [
28866
+ "metadata_discovery",
28867
+ "client_registration",
28868
+ "authorization_redirect",
28869
+ "authorization_code",
28870
+ "token_request",
28871
+ "complete"
28872
+ ];
28865
28873
  const OAuthFlowProgress = ({
28866
28874
  serverUrl,
28867
28875
  authState,
28868
28876
  updateAuthState,
28869
28877
  proceedToNextStep
28870
28878
  }) => {
28871
- const provider = new DebugInspectorOAuthClientProvider(serverUrl);
28872
- const steps = [
28873
- "metadata_discovery",
28874
- "client_registration",
28875
- "authorization_redirect",
28876
- "authorization_code",
28877
- "token_request",
28878
- "complete"
28879
- ];
28879
+ const provider = reactExports.useMemo(
28880
+ () => new DebugInspectorOAuthClientProvider(serverUrl),
28881
+ [serverUrl]
28882
+ );
28883
+ const [clientInfo, setClientInfo] = reactExports.useState(
28884
+ null
28885
+ );
28880
28886
  const currentStepIdx = steps.findIndex((s) => s === authState.oauthStep);
28887
+ reactExports.useEffect(() => {
28888
+ const fetchClientInfo = async () => {
28889
+ if (authState.oauthClientInfo) {
28890
+ setClientInfo(authState.oauthClientInfo);
28891
+ } else {
28892
+ try {
28893
+ const info = await provider.clientInformation();
28894
+ if (info) {
28895
+ setClientInfo(info);
28896
+ }
28897
+ } catch (error) {
28898
+ console.error("Failed to fetch client information:", error);
28899
+ }
28900
+ }
28901
+ };
28902
+ if (currentStepIdx > steps.indexOf("client_registration")) {
28903
+ fetchClientInfo();
28904
+ }
28905
+ }, [
28906
+ provider,
28907
+ authState.oauthStep,
28908
+ authState.oauthClientInfo,
28909
+ currentStepIdx
28910
+ ]);
28881
28911
  const getStepProps = (stepName) => ({
28882
28912
  isComplete: currentStepIdx > steps.indexOf(stepName) || currentStepIdx === steps.length - 1,
28883
28913
  // last step is "complete"
@@ -28908,9 +28938,9 @@ const OAuthFlowProgress = ({
28908
28938
  {
28909
28939
  label: "Client Registration",
28910
28940
  ...getStepProps("client_registration"),
28911
- children: authState.oauthClientInfo && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "text-xs mt-2", children: [
28941
+ children: clientInfo && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "text-xs mt-2", children: [
28912
28942
  /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "cursor-pointer text-muted-foreground font-medium", children: "Registered Client Information" }),
28913
- /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]", children: JSON.stringify(authState.oauthClientInfo, null, 2) })
28943
+ /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]", children: JSON.stringify(clientInfo, null, 2) })
28914
28944
  ] })
28915
28945
  }
28916
28946
  ),
@@ -29240,20 +29270,27 @@ const AuthDebugger = ({
29240
29270
  }
29241
29271
  updateAuthState({ isInitiatingAuth: true, statusMessage: null });
29242
29272
  try {
29243
- const serverAuthProvider = new DebugInspectorOAuthClientProvider(
29244
- serverUrl
29245
- );
29246
- const metadata = await discoverOAuthMetadata(serverUrl);
29247
- if (!metadata) {
29248
- throw new Error("Failed to discover OAuth metadata");
29273
+ let currentState = {
29274
+ ...authState,
29275
+ oauthStep: "metadata_discovery",
29276
+ authorizationUrl: null,
29277
+ latestError: null
29278
+ };
29279
+ const oauthMachine = new OAuthStateMachine(serverUrl, (updates) => {
29280
+ currentState = { ...currentState, ...updates };
29281
+ });
29282
+ while (currentState.oauthStep !== "complete") {
29283
+ await oauthMachine.executeStep(currentState);
29284
+ if (currentState.oauthStep === "authorization_code" && currentState.authorizationUrl) {
29285
+ window.location.href = currentState.authorizationUrl;
29286
+ break;
29287
+ }
29249
29288
  }
29250
- const parsedMetadata = await OAuthMetadataSchema.parseAsync(metadata);
29251
- serverAuthProvider.saveServerMetadata(parsedMetadata);
29252
- await auth(serverAuthProvider, { serverUrl });
29253
29289
  updateAuthState({
29290
+ ...currentState,
29254
29291
  statusMessage: {
29255
29292
  type: "info",
29256
- message: "Starting OAuth authentication process..."
29293
+ message: currentState.oauthStep === "complete" ? "Authentication completed successfully" : "Please complete authentication in the opened window and enter the code"
29257
29294
  }
29258
29295
  });
29259
29296
  } catch (error) {
@@ -29267,7 +29304,7 @@ const AuthDebugger = ({
29267
29304
  } finally {
29268
29305
  updateAuthState({ isInitiatingAuth: false });
29269
29306
  }
29270
- }, [serverUrl, updateAuthState]);
29307
+ }, [serverUrl, updateAuthState, authState]);
29271
29308
  const handleClearOAuth = reactExports.useCallback(() => {
29272
29309
  if (serverUrl) {
29273
29310
  const serverAuthProvider = new DebugInspectorOAuthClientProvider(
@@ -39128,7 +39165,7 @@ const useTheme = () => {
39128
39165
  [theme, setThemeWithSideEffect]
39129
39166
  );
39130
39167
  };
39131
- const version = "0.1.3";
39168
+ const version = "0.1.5";
39132
39169
  const Sidebar = ({
39133
39170
  currentPage,
39134
39171
  onPageChange,
@@ -40924,7 +40961,7 @@ const App = () => {
40924
40961
  };
40925
40962
  if (window.location.pathname === "/oauth/callback") {
40926
40963
  const OAuthCallback = React.lazy(
40927
- () => __vitePreload(() => import("./OAuthCallback-DGHeh45g.js"), true ? __vite__mapDeps([0,1]) : void 0)
40964
+ () => __vitePreload(() => import("./OAuthCallback-CHBqWOc7.js"), true ? __vite__mapDeps([0,1]) : void 0)
40928
40965
  );
40929
40966
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40930
40967
  reactExports.Suspense,
@@ -40939,7 +40976,7 @@ const App = () => {
40939
40976
  }
40940
40977
  if (window.location.pathname === "/oauth/callback/debug") {
40941
40978
  const OAuthDebugCallback = React.lazy(
40942
- () => __vitePreload(() => import("./OAuthDebugCallback-D_tK6y_H.js"), true ? __vite__mapDeps([2,1]) : void 0)
40979
+ () => __vitePreload(() => import("./OAuthDebugCallback-BuULQ2Jc.js"), true ? __vite__mapDeps([2,1]) : void 0)
40943
40980
  );
40944
40981
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
40945
40982
  reactExports.Suspense,
package/client/dist/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <link rel="icon" type="image/svg+xml" href="/mcp_jam.svg" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <title>MCPJam Inspector</title>
8
- <script type="module" crossorigin src="/assets/index-0M1YGFzn.js"></script>
8
+ <script type="module" crossorigin src="/assets/index-DCuo5o9C.js"></script>
9
9
  <link rel="stylesheet" crossorigin href="/assets/index-DfXL7p_B.css">
10
10
  </head>
11
11
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcpjam/inspector",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "MCPJam inspector",
5
5
  "license": "MIT",
6
6
  "author": "MCPJam (https://mcpjam.com)",