{!serverCapabilities?.resources &&
- !serverCapabilities?.prompts &&
- !serverCapabilities?.tools ? (
+ !serverCapabilities?.prompts &&
+ !serverCapabilities?.tools ? (
The connected server does not support any MCP capabilities
From fce6644e30e25cc9bc85d17048fa33ad5c4d7c93 Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers
Date: Fri, 24 Jan 2025 15:22:40 +0000
Subject: [PATCH 25/45] Fix double fetching
---
client/src/components/OAuthCallback.tsx | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/client/src/components/OAuthCallback.tsx b/client/src/components/OAuthCallback.tsx
index 3887be1..4729e71 100644
--- a/client/src/components/OAuthCallback.tsx
+++ b/client/src/components/OAuthCallback.tsx
@@ -1,10 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
import { handleOAuthCallback } from '../lib/auth';
import { SESSION_KEYS } from '../lib/constants';
const OAuthCallback = () => {
+ const hasProcessedRef = useRef(false);
+
useEffect(() => {
const handleCallback = async () => {
+ // Skip if we've already processed this callback
+ if (hasProcessedRef.current) {
+ return;
+ }
+ hasProcessedRef.current = true;
+
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
From 0882a3e0e59d20ce98fb6af6a234bcdb951453c5 Mon Sep 17 00:00:00 2001
From: Justin Spahr-Summers
Date: Fri, 24 Jan 2025 15:23:24 +0000
Subject: [PATCH 26/45] Formatting
---
client/src/App.tsx | 6 ++--
client/src/components/OAuthCallback.tsx | 18 +++++-----
client/src/lib/auth.ts | 48 ++++++++++++++-----------
client/src/lib/constants.ts | 8 ++---
client/src/lib/hooks/useConnection.ts | 7 ++--
client/vite.config.ts | 3 +-
server/src/index.ts | 15 +++++---
7 files changed, 60 insertions(+), 45 deletions(-)
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 8deba66..246e035 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -227,7 +227,7 @@ const App = () => {
newUrl.searchParams.delete("serverUrl");
window.history.replaceState({}, "", newUrl.toString());
// Show success toast for OAuth
- toast.success('Successfully authenticated with OAuth');
+ toast.success("Successfully authenticated with OAuth");
// Connect to the server
connectMcpServer();
}
@@ -446,8 +446,8 @@ const App = () => {
{!serverCapabilities?.resources &&
- !serverCapabilities?.prompts &&
- !serverCapabilities?.tools ? (
+ !serverCapabilities?.prompts &&
+ !serverCapabilities?.tools ? (
The connected server does not support any MCP capabilities
diff --git a/client/src/components/OAuthCallback.tsx b/client/src/components/OAuthCallback.tsx
index 4729e71..a7439df 100644
--- a/client/src/components/OAuthCallback.tsx
+++ b/client/src/components/OAuthCallback.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react';
-import { handleOAuthCallback } from '../lib/auth';
-import { SESSION_KEYS } from '../lib/constants';
+import { useEffect, useRef } from "react";
+import { handleOAuthCallback } from "../lib/auth";
+import { SESSION_KEYS } from "../lib/constants";
const OAuthCallback = () => {
const hasProcessedRef = useRef(false);
@@ -14,12 +14,12 @@ const OAuthCallback = () => {
hasProcessedRef.current = true;
const params = new URLSearchParams(window.location.search);
- const code = params.get('code');
+ const code = params.get("code");
const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
if (!code || !serverUrl) {
- console.error('Missing code or server URL');
- window.location.href = '/';
+ console.error("Missing code or server URL");
+ window.location.href = "/";
return;
}
@@ -30,8 +30,8 @@ const OAuthCallback = () => {
// Redirect back to the main app with server URL to trigger auto-connect
window.location.href = `/?serverUrl=${encodeURIComponent(serverUrl)}`;
} catch (error) {
- console.error('OAuth callback error:', error);
- window.location.href = '/';
+ console.error("OAuth callback error:", error);
+ window.location.href = "/";
}
};
@@ -45,4 +45,4 @@ const OAuthCallback = () => {
);
};
-export default OAuthCallback;
\ No newline at end of file
+export default OAuthCallback;
diff --git a/client/src/lib/auth.ts b/client/src/lib/auth.ts
index d4eddb7..0417731 100644
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -1,32 +1,34 @@
-import pkceChallenge from 'pkce-challenge';
-import { SESSION_KEYS } from './constants';
+import pkceChallenge from "pkce-challenge";
+import { SESSION_KEYS } from "./constants";
export interface OAuthMetadata {
authorization_endpoint: string;
token_endpoint: string;
}
-export async function discoverOAuthMetadata(serverUrl: string): Promise {
+export async function discoverOAuthMetadata(
+ serverUrl: string,
+): Promise {
try {
- const url = new URL('/.well-known/oauth-authorization-server', serverUrl);
+ const url = new URL("/.well-known/oauth-authorization-server", serverUrl);
const response = await fetch(url.toString());
if (response.ok) {
const metadata = await response.json();
return {
authorization_endpoint: metadata.authorization_endpoint,
- token_endpoint: metadata.token_endpoint
+ token_endpoint: metadata.token_endpoint,
};
}
} catch (error) {
- console.warn('OAuth metadata discovery failed:', error);
+ console.warn("OAuth metadata discovery failed:", error);
}
// Fall back to default endpoints
const baseUrl = new URL(serverUrl);
return {
- authorization_endpoint: new URL('/authorize', baseUrl).toString(),
- token_endpoint: new URL('/token', baseUrl).toString()
+ authorization_endpoint: new URL("/authorize", baseUrl).toString(),
+ token_endpoint: new URL("/token", baseUrl).toString(),
};
}
@@ -44,19 +46,25 @@ export async function startOAuthFlow(serverUrl: string): Promise {
// Build authorization URL
const authUrl = new URL(metadata.authorization_endpoint);
- authUrl.searchParams.set('response_type', 'code');
- authUrl.searchParams.set('code_challenge', codeChallenge);
- authUrl.searchParams.set('code_challenge_method', 'S256');
- authUrl.searchParams.set('redirect_uri', window.location.origin + '/oauth/callback');
+ authUrl.searchParams.set("response_type", "code");
+ authUrl.searchParams.set("code_challenge", codeChallenge);
+ authUrl.searchParams.set("code_challenge_method", "S256");
+ authUrl.searchParams.set(
+ "redirect_uri",
+ window.location.origin + "/oauth/callback",
+ );
return authUrl.toString();
}
-export async function handleOAuthCallback(serverUrl: string, code: string): Promise {
+export async function handleOAuthCallback(
+ serverUrl: string,
+ code: string,
+): Promise {
// Get stored code verifier
const codeVerifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
if (!codeVerifier) {
- throw new Error('No code verifier found');
+ throw new Error("No code verifier found");
}
// Discover OAuth endpoints
@@ -64,20 +72,20 @@ export async function handleOAuthCallback(serverUrl: string, code: string): Prom
// Exchange code for tokens
const response = await fetch(metadata.token_endpoint, {
- method: 'POST',
+ method: "POST",
headers: {
- 'Content-Type': 'application/json',
+ "Content-Type": "application/json",
},
body: JSON.stringify({
- grant_type: 'authorization_code',
+ grant_type: "authorization_code",
code,
code_verifier: codeVerifier,
- redirect_uri: window.location.origin + '/oauth/callback'
- })
+ redirect_uri: window.location.origin + "/oauth/callback",
+ }),
});
if (!response.ok) {
- throw new Error('Token exchange failed');
+ throw new Error("Token exchange failed");
}
const data = await response.json();
diff --git a/client/src/lib/constants.ts b/client/src/lib/constants.ts
index b882179..e302b52 100644
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -1,6 +1,6 @@
// OAuth-related session storage keys
export const SESSION_KEYS = {
- CODE_VERIFIER: 'mcp_code_verifier',
- SERVER_URL: 'mcp_server_url',
- ACCESS_TOKEN: 'mcp_access_token',
-} as const;
\ No newline at end of file
+ CODE_VERIFIER: "mcp_code_verifier",
+ SERVER_URL: "mcp_server_url",
+ ACCESS_TOKEN: "mcp_access_token",
+} as const;
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index dda734a..de2d29e 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -1,5 +1,8 @@
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import { SSEClientTransport, SseError } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+ SSEClientTransport,
+ SseError,
+} from "@modelcontextprotocol/sdk/client/sse.js";
import {
ClientNotification,
ClientRequest,
@@ -149,7 +152,7 @@ export function useConnection({
const headers: HeadersInit = {};
const accessToken = sessionStorage.getItem(SESSION_KEYS.ACCESS_TOKEN);
if (accessToken) {
- headers['Authorization'] = `Bearer ${accessToken}`;
+ headers["Authorization"] = `Bearer ${accessToken}`;
}
const clientTransport = new SSEClientTransport(backendUrl, {
diff --git a/client/vite.config.ts b/client/vite.config.ts
index bda10e5..b3d0f45 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -5,8 +5,7 @@ import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
- server: {
- },
+ server: {},
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
diff --git a/server/src/index.ts b/server/src/index.ts
index c215f34..4d8ac42 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -4,7 +4,10 @@ import cors from "cors";
import { parseArgs } from "node:util";
import { parse as shellParseArgs } from "shell-quote";
-import { SSEClientTransport, SseError } from "@modelcontextprotocol/sdk/client/sse.js";
+import {
+ SSEClientTransport,
+ SseError,
+} from "@modelcontextprotocol/sdk/client/sse.js";
import {
StdioClientTransport,
getDefaultEnvironment,
@@ -14,7 +17,7 @@ import express from "express";
import { findActualExecutable } from "spawn-rx";
import mcpProxy from "./mcpProxy.js";
-const SSE_HEADERS_PASSTHROUGH = ['authorization'];
+const SSE_HEADERS_PASSTHROUGH = ["authorization"];
const defaultEnvironment = {
...getDefaultEnvironment(),
@@ -67,7 +70,6 @@ const createTransport = async (req: express.Request) => {
for (const key of SSE_HEADERS_PASSTHROUGH) {
if (req.headers[key] === undefined) {
continue;
-
}
const value = req.headers[key];
@@ -103,7 +105,10 @@ app.get("/sse", async (req, res) => {
backingServerTransport = await createTransport(req);
} catch (error) {
if (error instanceof SseError && error.code === 401) {
- console.error("Received 401 Unauthorized from MCP server:", error.message);
+ console.error(
+ "Received 401 Unauthorized from MCP server:",
+ error.message,
+ );
res.status(401).json(error);
return;
}
@@ -176,4 +181,4 @@ app.get("/config", (req, res) => {
});
const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => { });
+app.listen(PORT, () => {});
From 5b884b55b5d2f7190d4f5534d938b28bfc968a42 Mon Sep 17 00:00:00 2001
From: Ola Hungerford
Date: Sun, 26 Jan 2025 20:13:11 -0700
Subject: [PATCH 27/45] Add server startup logging
---
server/package.json | 2 +-
server/src/index.ts | 34 +++++++++++++++++++++++++++++++++-
2 files changed, 34 insertions(+), 2 deletions(-)
diff --git a/server/package.json b/server/package.json
index c79e7d2..d41c2e3 100644
--- a/server/package.json
+++ b/server/package.json
@@ -16,7 +16,7 @@
"scripts": {
"build": "tsc",
"start": "node build/index.js",
- "dev": "tsx watch --clear-screen=false src/index.ts"
+ "dev": "node --import tsx --watch --watch-preserve-output src/index.ts"
},
"devDependencies": {
"@types/cors": "^2.8.17",
diff --git a/server/src/index.ts b/server/src/index.ts
index 9662009..0e1f2f7 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -152,4 +152,36 @@ app.get("/config", (req, res) => {
});
const PORT = process.env.PORT || 3000;
-app.listen(PORT, () => {});
+
+try {
+ const server = app.listen(PORT);
+
+ server.on('listening', () => {
+ const addr = server.address();
+ const port = typeof addr === 'string' ? addr : addr?.port;
+ console.log(`Server listening on port ${port}`);
+ });
+
+ server.on('error', (error: any) => {
+ if (error.code === 'EADDRINUSE') {
+ console.error(`Port ${PORT} is already in use`);
+ process.exit(1);
+ } else {
+ console.error('Error starting server:', error);
+ process.exit(1);
+ }
+ });
+
+ process.on('uncaughtException', (error) => {
+ console.error('Uncaught exception:', error);
+ process.exit(1);
+ });
+
+ process.on('unhandledRejection', (error) => {
+ console.error('Unhandled rejection:', error);
+ process.exit(1);
+ });
+} catch (error) {
+ console.error('Failed to start server:', error);
+ process.exit(1);
+}
From df955cfdb555f61f3857242b28a0a345c18ceacc Mon Sep 17 00:00:00 2001
From: Ola Hungerford
Date: Sun, 26 Jan 2025 20:24:59 -0700
Subject: [PATCH 28/45] Remove other logging and just keep listening and try
catch
---
server/src/index.ts | 19 -------------------
1 file changed, 19 deletions(-)
diff --git a/server/src/index.ts b/server/src/index.ts
index 0e1f2f7..6a131f7 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -161,26 +161,7 @@ try {
const port = typeof addr === 'string' ? addr : addr?.port;
console.log(`Server listening on port ${port}`);
});
-
- server.on('error', (error: any) => {
- if (error.code === 'EADDRINUSE') {
- console.error(`Port ${PORT} is already in use`);
- process.exit(1);
- } else {
- console.error('Error starting server:', error);
- process.exit(1);
- }
- });
- process.on('uncaughtException', (error) => {
- console.error('Uncaught exception:', error);
- process.exit(1);
- });
-
- process.on('unhandledRejection', (error) => {
- console.error('Unhandled rejection:', error);
- process.exit(1);
- });
} catch (error) {
console.error('Failed to start server:', error);
process.exit(1);
From d754395a9a76f999dfdb78df2ffdf6d36532bee5 Mon Sep 17 00:00:00 2001
From: Ola Hungerford
Date: Sun, 26 Jan 2025 20:36:31 -0700
Subject: [PATCH 29/45] Revert tsx watch change
---
server/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/server/package.json b/server/package.json
index d41c2e3..c79e7d2 100644
--- a/server/package.json
+++ b/server/package.json
@@ -16,7 +16,7 @@
"scripts": {
"build": "tsc",
"start": "node build/index.js",
- "dev": "node --import tsx --watch --watch-preserve-output src/index.ts"
+ "dev": "tsx watch --clear-screen=false src/index.ts"
},
"devDependencies": {
"@types/cors": "^2.8.17",
From f980763381e2e3407455e6cd8b57995f8f0c279e Mon Sep 17 00:00:00 2001
From: Ola Hungerford
Date: Sun, 26 Jan 2025 20:46:08 -0700
Subject: [PATCH 30/45] Specify proxy server
---
server/src/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/server/src/index.ts b/server/src/index.ts
index 6a131f7..efb2ab0 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -159,7 +159,7 @@ try {
server.on('listening', () => {
const addr = server.address();
const port = typeof addr === 'string' ? addr : addr?.port;
- console.log(`Server listening on port ${port}`);
+ console.log(`Proxy server listening on port ${port}`);
});
} catch (error) {
From a87bd17f51e1f19635fd0b1a9be514a4b2032203 Mon Sep 17 00:00:00 2001
From: = <1936278+evalstate@users.noreply.github.com>
Date: Tue, 28 Jan 2025 08:28:25 +0000
Subject: [PATCH 31/45] =?UTF-8?q?=E2=9D=AF=20npx=20prettier=20--check=20.?=
=?UTF-8?q?=20Checking=20formatting...=20[warn]=20client/src/components/To?=
=?UTF-8?q?olsTab.tsx=20[warn]=20Code=20style=20issues=20found=20in=20the?=
=?UTF-8?q?=20above=20file.=20Run=20Prettier=20with=20--write=20to=20fix.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
inspector on feature/audio-rendering [$⇡] is 📦 v0.3.0 via v22.11.0
❯ npx prettier --write client/src/components/ToolsTab.tsx
client/src/components/ToolsTab.tsx 109ms
---
client/src/components/ToolsTab.tsx | 29 ++++++++++++++++-------------
1 file changed, 16 insertions(+), 13 deletions(-)
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index d8a2755..33df3e5 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -20,11 +20,13 @@ import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js"
import { z } from "zod";
// Define the AudioContent schema
-export const AudioContentSchema = z.object({
- type: z.literal("audio"),
- data: z.string().base64(),
- mimeType: z.string(),
-}).passthrough();
+export const AudioContentSchema = z
+ .object({
+ type: z.literal("audio"),
+ data: z.string().base64(),
+ mimeType: z.string(),
+ })
+ .passthrough();
// Extend the CallToolResult schema to include audio content
export const ExtendedCallToolResultSchema = ResultSchema.extend({
@@ -34,14 +36,16 @@ export const ExtendedCallToolResultSchema = ResultSchema.extend({
ImageContentSchema,
AudioContentSchema,
EmbeddedResourceSchema,
- ])
+ ]),
),
isError: z.boolean().default(false).optional(),
});
// Export the types
export type AudioContent = z.infer;
-export type ExtendedCallToolResult = z.infer;
+export type ExtendedCallToolResult = z.infer<
+ typeof ExtendedCallToolResultSchema
+>;
const ToolsTab = ({
tools,
@@ -116,16 +120,16 @@ const ToolsTab = ({
/>
)}
{item.type === "audio" && (
-
+
)}
- {item.type === "resource" && (
- item.resource?.mimeType?.startsWith("audio/") ? (
+ {item.type === "resource" &&
+ (item.resource?.mimeType?.startsWith("audio/") ? (
))}
From d0ad677784bc636c5becf9c1b3257e5c56ce1140 Mon Sep 17 00:00:00 2001
From: Jerome
Date: Mon, 3 Feb 2025 12:24:52 +1300
Subject: [PATCH 32/45] Update ToolsTab.tsx
Linting on originally approved commit
---
client/src/components/ToolsTab.tsx | 45 ++----------------------------
1 file changed, 2 insertions(+), 43 deletions(-)
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 33df3e5..a3a7ff2 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -7,45 +7,13 @@ import { Textarea } from "@/components/ui/textarea";
import {
ListToolsResult,
Tool,
- TextContentSchema,
- ImageContentSchema,
- ResultSchema,
- EmbeddedResourceSchema,
+ CallToolResultSchema,
} from "@modelcontextprotocol/sdk/types.js";
import { AlertCircle, Send } from "lucide-react";
import { useEffect, useState } from "react";
import ListPane from "./ListPane";
import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
-import { z } from "zod";
-
-// Define the AudioContent schema
-export const AudioContentSchema = z
- .object({
- type: z.literal("audio"),
- data: z.string().base64(),
- mimeType: z.string(),
- })
- .passthrough();
-
-// Extend the CallToolResult schema to include audio content
-export const ExtendedCallToolResultSchema = ResultSchema.extend({
- content: z.array(
- z.discriminatedUnion("type", [
- TextContentSchema,
- ImageContentSchema,
- AudioContentSchema,
- EmbeddedResourceSchema,
- ]),
- ),
- isError: z.boolean().default(false).optional(),
-});
-
-// Export the types
-export type AudioContent = z.infer;
-export type ExtendedCallToolResult = z.infer<
- typeof ExtendedCallToolResultSchema
->;
const ToolsTab = ({
tools,
@@ -77,7 +45,7 @@ const ToolsTab = ({
if (!toolResult) return null;
if ("content" in toolResult) {
- const parsedResult = ExtendedCallToolResultSchema.safeParse(toolResult);
+ const parsedResult = CallToolResultSchema.safeParse(toolResult);
if (!parsedResult.success) {
return (
<>
@@ -119,15 +87,6 @@ const ToolsTab = ({
className="max-w-full h-auto"
/>
)}
- {item.type === "audio" && (
-
- )}
{item.type === "resource" &&
(item.resource?.mimeType?.startsWith("audio/") ? (