Add debug logging and Accept headers for MCP transport debugging

- Added extensive debug logging to transport creation and connection flows
- Added proper Accept header (application/json, text/event-stream) to transport options
- Fixed scroll jittering during streaming with instant scroll behavior
- Investigating HTTP transport 'Not connected' errors and SSE connection hanging

examples/chat-ui/src/components/ConversationThread.tsx

@@ -101,7 +101,7 @@ const ConversationThread: React.FC<ConversationThreadProps> = ({
 
   //when new message chunks are streamed in, scroll to bottom
   useEffect(() => {
-    scrollToBottom()
+    scrollToBottom(isLoading && streamStarted)
   }, [aiResponseRef.current])
 
   //when conversation changes, scroll to bottom

examples/chat-ui/src/hooks/useAutoscroll.ts

@@ -22,9 +22,9 @@ export const useAutoscroll = () => {
     };
   }, []);
 
-  const scrollToBottom = () => {
-    if (shouldAutoScrollRef.current) {
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  const scrollToBottom = (force?: boolean) => {
+    if (shouldAutoScrollRef.current || force) {
+      messagesEndRef.current?.scrollIntoView({ behavior: force ? "instant" : "smooth" });
     }
   };
 

examples/chat-ui/src/hooks/useStreamResponse.ts

@@ -22,7 +22,7 @@ const hasContent = (message: Message): message is UserMessage | AssistantMessage
 interface UseStreamResponseProps {
     conversationId?: number
     setConversations: React.Dispatch<React.SetStateAction<Conversation[]>>
-    scrollToBottom: () => void
+    scrollToBottom: (force?: boolean) => void
     selectedModel: Model
     onApiKeyRequired: (model: Model) => Promise<boolean>
     mcpTools: Tool[]
@@ -284,7 +284,7 @@ export const useStreamResponse = ({
                                 }
                                 return updated
                             })
-                            scrollToBottom()
+                            scrollToBottom(true)
                         } else {
                             console.warn('[useStreamResponse] Tool call event missing toolName:', event)
                         }
@@ -382,7 +382,7 @@ export const useStreamResponse = ({
                             return updated
                         })
 
-                        scrollToBottom()
+                        scrollToBottom(true)
                     }
                 } catch (e) {
                     console.error('[useStreamResponse] Error in full stream processing:', e)

examples/example-server/vengabus/src/index.ts

@@ -6,6 +6,12 @@ import { cors } from 'hono/cors'
 
 const app = new Hono()
 
+app.use('/*', cors({
+  origin: '*',
+  allowHeaders: ['content-type','mcp-session-id','mcp-protocol-version'],
+  exposeHeaders: ['mcp-session-id'],
+}))
+
 // Your MCP server implementation
 const mcpServer = new McpServer({
   name: 'my-mcp-server',
@@ -23,7 +29,18 @@ mcpServer.registerTool("add",
   })
 );
 
-app.all('/mcp', cors(), async (c) => {
+mcpServer.registerTool("get_vengabus_times",
+  {
+    title: "Vengabus Schedule Checker",
+    description: "This checks to see when the next Vengabus is, or whether there is one for the user's current location. Please display all the information to the user in a tabulated form.",
+    inputSchema: { }
+  },
+  async () => ({
+    content: [{ type: "text", text: `Next Vengabus: imminent. Current user's route: New York to San Francisco. Route name: "Intercity Disco".` }]
+  })
+);
+
+app.post('/mcp', async (c) => {
   const transport = new StreamableHTTPTransport()
   await mcpServer.connect(transport)
   return transport.handleRequest(c)