From 7ce5504f9ff60f1bdaac83e4986994b9d30eb4ed Mon Sep 17 00:00:00 2001 From: Jonathan Hefner Date: Thu, 15 Jan 2026 20:03:59 -0600 Subject: [PATCH 01/10] Add SSE transport fallback to `basic-host` Implement the conventional MCP pattern for transport backward compatibility: try `StreamableHTTPClientTransport` first (modern), then fall back to `SSEClientTransport` (deprecated but needed for older servers). This follows the approach documented in the MCP TypeScript SDK's `streamableHttpWithSseFallbackClient.ts` example. Co-Authored-By: Claude Opus 4.5 --- examples/basic-host/src/implementation.ts | 28 +++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/examples/basic-host/src/implementation.ts b/examples/basic-host/src/implementation.ts index 9ce9fa6..6ab5be0 100644 --- a/examples/basic-host/src/implementation.ts +++ b/examples/basic-host/src/implementation.ts @@ -1,5 +1,6 @@ import { RESOURCE_MIME_TYPE, getToolUiResourceUri, type McpUiSandboxProxyReadyNotification, AppBridge, PostMessageTransport, type McpUiResourceCsp, type McpUiResourcePermissions, buildAllowAttribute, type McpUiUpdateModelContextRequest, type McpUiMessageRequest } from "@modelcontextprotocol/ext-apps/app-bridge"; import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js"; import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js"; import type { CallToolResult, Tool } from "@modelcontextprotocol/sdk/types.js"; @@ -24,11 +25,8 @@ export interface ServerInfo { export async function connectToServer(serverUrl: URL): Promise { - const client = new Client(IMPLEMENTATION); - log.info("Connecting to server:", serverUrl.href); - await client.connect(new StreamableHTTPClientTransport(serverUrl)); - log.info("Connection successful"); + const client = await connectWithFallback(serverUrl); const name = client.getServerVersion()?.name ?? serverUrl.href; @@ -39,6 +37,28 @@ export async function connectToServer(serverUrl: URL): Promise { return { name, client, tools, appHtmlCache: new Map() }; } +async function connectWithFallback(serverUrl: URL): Promise { + // Try Streamable HTTP first (modern transport) + try { + const client = new Client(IMPLEMENTATION); + await client.connect(new StreamableHTTPClientTransport(serverUrl)); + log.info("Connected via Streamable HTTP transport"); + return client; + } catch (streamableError) { + log.info("Streamable HTTP failed:", streamableError); + } + + // Fall back to SSE (deprecated but needed for older servers) + try { + const client = new Client(IMPLEMENTATION); + await client.connect(new SSEClientTransport(serverUrl)); + log.info("Connected via SSE transport"); + return client; + } catch (sseError) { + throw new Error(`Could not connect with any transport. SSE error: ${sseError}`); + } +} + interface UiResourceData { html: string; From f1a00f9e15b4ebf1df3d0db46b6a09f1f377d05a Mon Sep 17 00:00:00 2001 From: Anton Pidkuiko MacBook Date: Sat, 17 Jan 2026 22:29:57 +0000 Subject: [PATCH 02/10] feat(shadertoy): add streaming partial input, visibility optimization, host styling Shadertoy server improvements: - Add ontoolinputpartial handler to show code preview during generation - Add IntersectionObserver to pause/play shader based on visibility - Apply host style variables (theme, colors, fonts) - Add border-radius with fullscreen mode support - Use gradient background and ghost text color for code preview Skill documentation updates: - Add streaming partial input section with use cases - Add visibility-based resource management pattern - Add fullscreen mode API and CSS patterns - Expand host styling with CSS variable usage examples --- examples/shadertoy-server/mcp-app.html | 1 + examples/shadertoy-server/src/mcp-app.css | 34 +++++ examples/shadertoy-server/src/mcp-app.ts | 39 +++++- .../mcp-apps/skills/create-mcp-app/SKILL.md | 116 +++++++++++++++++- 4 files changed, 187 insertions(+), 3 deletions(-) diff --git a/examples/shadertoy-server/mcp-app.html b/examples/shadertoy-server/mcp-app.html index 32c9d24..564597a 100644 --- a/examples/shadertoy-server/mcp-app.html +++ b/examples/shadertoy-server/mcp-app.html @@ -9,6 +9,7 @@
+