feat(basic-host): improve host UI with collapsible panels and SDK types

[ochafik]

Summary

Improves the basic-host example with better UI organization and proper SDK type usage.

e.g. w/ upcoming transcription app:

Changes

Collapsible Panels UI

• Add reusable CollapsiblePanel component
• Show tool input in collapsible panel above app iframe
• Show tool result in collapsible panel below app iframe
• Show messages in collapsible panel (with message count badge)
• Show model context in collapsible panel at bottom
• Title bar format: ServerName:tool_name

SDK Type Integration

• Replace custom ModelContext with McpUiUpdateModelContextRequest['params']
• Replace custom AppMessage with McpUiMessageRequest['params']
• Import types from @modelcontextprotocol/ext-apps/app-bridge

Content Block Handling

• Handle non-text content blocks (image, audio, resource)
• Show placeholders like <image: image/png> for non-text content
• Apply formatting to both messages and model context

updateModelContext Support

• Declare updateModelContext: { text: {} } capability
• Add onupdatemodelcontext handler
• Replace alert() popup with collapsible Messages panel

Other

• Use AppBridgeCallbacks interface for cleaner callback handling

[pkg-pr-new]

Open in StackBlitz

@modelcontextprotocol/ext-apps

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

@modelcontextprotocol/server-basic-react

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

@modelcontextprotocol/server-basic-vanillajs

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

@modelcontextprotocol/server-budget-allocator

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

@modelcontextprotocol/server-cohort-heatmap

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

@modelcontextprotocol/server-customer-segmentation

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

@modelcontextprotocol/server-scenario-modeler

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

@modelcontextprotocol/server-system-monitor

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

@modelcontextprotocol/server-threejs

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

@modelcontextprotocol/server-wiki-explorer

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

commit: c04a043

[jonathanhefner]

Looks nice!

Since the tool input is no longer side-by-side with the iframe, do we want to set a narrower max-width for the main element?

[ochafik]

Looks nice!

Thanks! (i'll tell Claude)

Since the tool input is no longer side-by-side with the iframe, do we want to set a narrower max-width for the main element?

Good idea for a follow up, will push this first