MCP Apps Preview

Connecting...
Select a tool and click Execute to render the widget
px
${html} `; } emitGlobalsUpdate() { const frame = document.getElementById('widget-frame'); if (frame.contentWindow) { frame.contentWindow.postMessage({ type: 'openai/setGlobals', globals: { theme: this.theme, locale: this.locale, displayMode: this.displayMode, maxHeight: this.maxHeight, safeArea: this.safeArea, view: this.view } }, '*'); } } updateStateView() { document.getElementById('state-widget').textContent = JSON.stringify(this.widgetState, null, 2); document.getElementById('state-input').textContent = JSON.stringify(this.toolInput, null, 2); document.getElementById('state-output').textContent = JSON.stringify(this.toolOutput, null, 2); document.getElementById('state-meta').textContent = JSON.stringify(this.toolResponseMetadata, null, 2); } logConsole(level, message) { const container = document.getElementById('console-log'); if (container.querySelector('.empty-state')) { container.innerHTML = ''; } const time = new Date().toLocaleTimeString(); const entry = document.createElement('div'); entry.className = `console-entry ${level}`; entry.innerHTML = `${time}${message}`; container.appendChild(entry); container.scrollTop = container.scrollHeight; } logNetwork(type, method, data, duration = 0, success = true) { const container = document.getElementById('network-log'); if (container.querySelector('.empty-state')) { container.innerHTML = ''; } const time = new Date().toLocaleTimeString(); const entry = document.createElement('div'); entry.className = `network-entry ${success ? 'success' : 'error'}`; entry.innerHTML = `
${type === 'request' ? '→' : '←'} ${method} ${time}${duration ? ` (${duration}ms)` : ''}
${JSON.stringify(data, null, 2)}
`; container.appendChild(entry); container.scrollTop = container.scrollHeight; } logEvent(type, data) { const container = document.getElementById('events-log'); if (container.querySelector('.empty-state')) { container.innerHTML = ''; } const time = new Date().toLocaleTimeString(); const entry = document.createElement('div'); entry.className = 'event-entry'; entry.innerHTML = ` ${time} ${type} ${Object.keys(data).length > 0 ? ` - ${JSON.stringify(data)}` : ''} `; container.appendChild(entry); container.scrollTop = container.scrollHeight; } } // Initialize and expose to iframe window.previewRuntime = new PreviewRuntime();