Explore MCP-UI patterns for rich tool response rendering

[kashifpk]

Summary

Investigate MCP-UI patterns for rendering rich, interactive UI components from MCP tool responses.

Background

MCP-UI is a protocol/SDK for building interactive UIs within MCP applications. Key concepts:

• Server-side: Tools can return UI resource definitions (HTML/JS rendered in sandboxed iframes)
• Client-side: Host apps render these UI resources using provided components
• Security: All remote code executes in sandboxed iframes

MCP-UI has been standardized into "MCP Apps" as part of the MCP specification.

Potential Use Cases

1. Rich tool responses: Weather forecasts with charts, search results with previews
2. Interactive forms: Tool argument builders, configuration wizards
3. Data visualization: Tables, graphs, maps from tool outputs
4. Approval workflows: Human-in-the-loop confirmations with context

Technical Considerations

• MCP-UI provides Web Components (framework-agnostic) - works with Vue.js
• Uses <ui-resource-renderer> custom element
• Sandboxed iframes for security
• TypeScript, Python, and Ruby SDKs available

Tasks

• Review MCP-UI documentation and examples
• Evaluate security model for sandboxed iframes
• Prototype integration with Vue.js chat interface
• Define which tools would benefit from rich UI responses

References

• MCP-UI Website
• MCP Apps Spec (standardized from MCP-UI)

Related

• Part of Milestone 4: Chat Interface (or Post-MVP)
• Depends on: forge-orchestrator WebSocket server