feat(basic-host): URL params, fullscreen mode, unified layout

[ochafik]

Summary

Adds URL query parameters to basic-host for easier debugging and testing, plus fullscreen mode support and unified UI layout.

URL Query Params

• ?server=name - Pre-select a specific server
• ?tool=name - Pre-select a specific tool
• ?call=true - Auto-call the tool on page load

Usage:

http://localhost:8080/?server=pdf-server&tool=view_pdf&call=true

After calling a tool, the URL is updated so refreshing the page re-runs the same call.

Fullscreen Mode

Apps can now request fullscreen display mode. The host handles displayMode changes and renders the app iframe in a fullscreen overlay.

Unified Tool Call Layout

Both app and non-app tool calls now share the same layout:

1. Header: server:tool_name with close button
2. Tool Input: Collapsible panel
3. App iframe: (apps only)
4. Tool Result: Collapsible panel
5. Messages / Model Context: (apps only)

Other Improvements

• Max-width capped at 60vw for better readability
• Cleaned up unused styles and components

Changes

• examples/basic-host/src/index.tsx: URL params, auto-call, fullscreen, unified layout
• examples/basic-host/src/implementation.ts: Container dimensions handling
• examples/basic-host/src/index.module.css: Fullscreen styles, max-width, cleanup

[pkg-pr-new]

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@266

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-react@266

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-vanillajs@266

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-budget-allocator@266

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-cohort-heatmap@266

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-customer-segmentation@266

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-scenario-modeler@266

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-system-monitor@266

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-threejs@266

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-wiki-explorer@266

commit: f754ca6

[jonathanhefner]

After calling a tool, the URL is updated so refreshing the page re-runs the same call.

Hmm, something about that seems off to me. Though I could see updating ?server=name and ?tool=name on select.

Alternatively, what about a UI button and/or hotkey that refreshes all tool calls on the page?

[ochafik]

Hmm, something about that seems off to me. Though I could see updating ?server=name and ?tool=name on select.

@jonathanhefner Yeah it's not perfect. I tried having the full conversation sticky, but it requires too many changes. This is just meant to be a simple example + an easy place to develop / debug an app (this refresh is changing my life atm, esp now that we start in dev mode by default), not an MCPJam / real host replacement. Maximizing our velocity is not an unimportant factor, and multiple calls aren't really an interesting use case to debug (no interaction between apps).