@mcp-html-bridge/ui-engine 0.1.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mcp-html-bridge/ui-engine",
+  "version": "0.1.0",
+  "description": "Core UI rendering engine — schema/data → self-contained HTML",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zhongkai/mcp-html-bridge.git",
+    "directory": "packages/core-ui-engine"
+  }
+}

package/src/bridge.ts

@@ -0,0 +1,98 @@
+// ── Bridge Protocol: postMessage/CustomEvent for bidirectional communication ──
+
+/** Generate inline JS for MCP bridge communication */
+export function generateBridgeJS(): string {
+  return `
+// ── MCP Bridge Protocol ──
+(function() {
+  'use strict';
+  var MCP_BRIDGE = {
+    /** Dispatch a tool call event to the parent frame */
+    callTool: function(toolName, args) {
+      var payload = { type: 'MCP_TOOL_CALL', toolName: toolName, arguments: args, timestamp: Date.now() };
+      // postMessage to parent (for iframe embedding)
+      if (window.parent !== window) {
+        window.parent.postMessage(payload, '*');
+      }
+      // Also fire a CustomEvent for local listeners
+      window.dispatchEvent(new CustomEvent('mcp:tool-call', { detail: payload }));
+      __mcpLog('→ Tool call: ' + toolName, 'outbound');
+      return payload;
+    },
+
+    /** Register a result handler */
+    onResult: function(callback) {
+      window.addEventListener('message', function(evt) {
+        if (evt.data && evt.data.type === 'MCP_RESULT') {
+          callback(evt.data);
+          __mcpLog('← Result received', 'inbound');
+        }
+      });
+      window.addEventListener('mcp:result', function(evt) {
+        callback(evt.detail);
+        __mcpLog('← Result received (local)', 'inbound');
+      });
+    },
+
+    /** Notify parent of iframe height for auto-resize */
+    notifyHeight: function() {
+      if (window.parent !== window) {
+        var height = document.documentElement.scrollHeight;
+        window.parent.postMessage({ type: 'MCP_RESIZE', height: height }, '*');
+      }
+    }
+  };
+
+  // Expose globally
+  window.__mcpBridge = MCP_BRIDGE;
+
+  // Auto-resize notification
+  var resizeObserver = new ResizeObserver(function() { MCP_BRIDGE.notifyHeight(); });
+  resizeObserver.observe(document.body);
+
+  // ── Form serialization helper ──
+  window.__mcpSubmit = function(event) {
+    event.preventDefault();
+    var form = event.target;
+    var data = {};
+    var formData = new FormData(form);
+    formData.forEach(function(value, key) {
+      // Handle radio groups and checkboxes
+      var el = form.elements[key];
+      if (el && el.type === 'checkbox') {
+        data[key] = el.checked;
+      } else if (el && el.type === 'number') {
+        data[key] = value === '' ? null : Number(value);
+      } else {
+        // Try parsing as JSON for array/object fields
+        try {
+          var parsed = JSON.parse(value);
+          if (typeof parsed === 'object') {
+            data[key] = parsed;
+            return;
+          }
+        } catch(e) { /* not JSON, use as string */ }
+        data[key] = value;
+      }
+    });
+
+    var toolName = form.dataset.toolName || document.title || 'unknown';
+    MCP_BRIDGE.callTool(toolName, data);
+    return false;
+  };
+
+  // ── Console logging helper (used by playground) ──
+  var logContainer = null;
+  window.__mcpLog = function(msg, type) {
+    if (!logContainer) logContainer = document.getElementById('mcp-console');
+    if (!logContainer) return;
+    var entry = document.createElement('div');
+    entry.className = 'console-entry console-' + (type || 'info');
+    var ts = new Date().toLocaleTimeString();
+    entry.textContent = '[' + ts + '] ' + msg;
+    logContainer.appendChild(entry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+  };
+})();
+`;
+}

package/src/data-sniffer.ts

@@ -0,0 +1,177 @@
+// ── Data Sniffer: confidence-scored heuristic engine ──
+import type { SniffResult, RenderIntent } from './types.js';
+
+/** Measure maximum nesting depth of a value */
+function measureDepth(val: unknown, current = 0): number {
+  if (current > 20) return current; // guard
+  if (Array.isArray(val)) {
+    return val.reduce<number>((max, item) => Math.max(max, measureDepth(item, current + 1)), current);
+  }
+  if (val !== null && typeof val === 'object') {
+    return Object.values(val as Record<string, unknown>).reduce<number>(
+      (max, v) => Math.max(max, measureDepth(v, current + 1)),
+      current
+    );
+  }
+  return current;
+}
+
+/** Check if an array of objects has consistent keys */
+function keyConsistency(arr: Record<string, unknown>[]): number {
+  if (arr.length === 0) return 0;
+  const firstKeys = new Set(Object.keys(arr[0]));
+  let matchCount = 0;
+  for (let i = 1; i < arr.length; i++) {
+    const keys = Object.keys(arr[i]);
+    const overlap = keys.filter((k) => firstKeys.has(k)).length;
+    matchCount += overlap / Math.max(firstKeys.size, keys.length);
+  }
+  return matchCount / (arr.length - 1);
+}
+
+const READING_KEYS = new Set([
+  'description', 'content', 'body', 'text', 'message',
+  'summary', 'readme', 'notes', 'details', 'markdown',
+]);
+
+/** Detect data-grid intent */
+function detectDataGrid(data: unknown): SniffResult | null {
+  if (!Array.isArray(data) || data.length === 0) return null;
+  const objects = data.filter(
+    (item): item is Record<string, unknown> =>
+      item !== null && typeof item === 'object' && !Array.isArray(item)
+  );
+  if (objects.length < 2) return null;
+
+  const consistency = keyConsistency(objects);
+  if (consistency < 0.5) return null;
+
+  const confidence = Math.min(0.95, 0.5 + consistency * 0.3 + Math.min(objects.length / 20, 0.15));
+  return {
+    intent: 'data-grid',
+    confidence,
+    metadata: {
+      rowCount: objects.length,
+      columns: Object.keys(objects[0]),
+      keyConsistency: consistency,
+    },
+  };
+}
+
+/** Detect metrics-card intent */
+function detectMetricsCard(data: unknown): SniffResult | null {
+  if (data === null || typeof data !== 'object' || Array.isArray(data)) return null;
+  const entries = Object.entries(data as Record<string, unknown>);
+  if (entries.length === 0 || entries.length > 12) return null;
+
+  const numericCount = entries.filter(([, v]) => typeof v === 'number').length;
+  const ratio = numericCount / entries.length;
+
+  if (numericCount < 1 || ratio < 0.3) return null;
+
+  const confidence = Math.min(0.9, 0.4 + ratio * 0.4 + (entries.length <= 6 ? 0.1 : 0));
+  return {
+    intent: 'metrics-card',
+    confidence,
+    metadata: {
+      numericKeys: entries.filter(([, v]) => typeof v === 'number').map(([k]) => k),
+      totalKeys: entries.length,
+    },
+  };
+}
+
+/** Detect json-tree intent */
+function detectJsonTree(data: unknown): SniffResult | null {
+  const depth = measureDepth(data);
+  if (depth < 3) return null;
+
+  const confidence = Math.min(0.85, 0.3 + (depth - 2) * 0.1);
+  return {
+    intent: 'json-tree',
+    confidence,
+    metadata: { depth },
+  };
+}
+
+/** Detect reading-block intent */
+function detectReadingBlock(data: unknown): SniffResult | null {
+  if (typeof data === 'string' && data.length > 200) {
+    return {
+      intent: 'reading-block',
+      confidence: 0.85,
+      metadata: { length: data.length },
+    };
+  }
+  if (data !== null && typeof data === 'object' && !Array.isArray(data)) {
+    const entries = Object.entries(data as Record<string, unknown>);
+    const longTextEntries = entries.filter(
+      ([k, v]) =>
+        (typeof v === 'string' && v.length > 200) || READING_KEYS.has(k.toLowerCase())
+    );
+    if (longTextEntries.length > 0) {
+      const confidence = Math.min(0.8, 0.4 + longTextEntries.length * 0.15);
+      return {
+        intent: 'reading-block',
+        confidence,
+        metadata: { textKeys: longTextEntries.map(([k]) => k) },
+      };
+    }
+  }
+  return null;
+}
+
+/** Main sniff function: returns ranked intents */
+export function sniff(data: unknown): SniffResult[] {
+  const results: SniffResult[] = [];
+
+  const grid = detectDataGrid(data);
+  if (grid) results.push(grid);
+
+  const metrics = detectMetricsCard(data);
+  if (metrics) results.push(metrics);
+
+  const tree = detectJsonTree(data);
+  if (tree) results.push(tree);
+
+  const reading = detectReadingBlock(data);
+  if (reading) results.push(reading);
+
+  // If multiple intents detected with similar confidence, suggest composite
+  if (results.length > 1) {
+    const topConfidence = Math.max(...results.map((r) => r.confidence));
+    const close = results.filter((r) => topConfidence - r.confidence < 0.2);
+    if (close.length > 1) {
+      results.push({
+        intent: 'composite',
+        confidence: topConfidence * 0.9,
+        metadata: { subIntents: close.map((r) => r.intent) },
+      });
+    }
+  }
+
+  // Fallback: if nothing detected, default to json-tree
+  if (results.length === 0) {
+    results.push({
+      intent: 'json-tree',
+      confidence: 0.3,
+      metadata: { fallback: true },
+    });
+  }
+
+  return results.sort((a, b) => b.confidence - a.confidence);
+}
+
+/** Detect intent from JSON Schema (for form rendering) */
+export function sniffSchema(schema: Record<string, unknown>): SniffResult {
+  const props = schema['properties'] as Record<string, unknown> | undefined;
+  const propCount = props ? Object.keys(props).length : 0;
+
+  return {
+    intent: 'form',
+    confidence: 0.95,
+    metadata: {
+      propertyCount: propCount,
+      required: schema['required'] ?? [],
+    },
+  };
+}

package/src/engine.ts

@@ -0,0 +1,123 @@
+// ── Engine Orchestrator: main entry point ──
+import type { EngineInput, RenderOptions, JSONSchema } from './types.js';
+import { document as htmlDocument } from './html-builder.js';
+import { generateThemeCSS } from './theme.js';
+import { generateBridgeJS } from './bridge.js';
+import { sniff, sniffSchema } from './data-sniffer.js';
+import { renderForm, getFormCSS } from './renderers/form.js';
+import { renderDataGrid, getDataGridCSS, getDataGridJS } from './renderers/data-grid.js';
+import { renderJsonTree, getJsonTreeCSS, getJsonTreeJS } from './renderers/json-tree.js';
+import { renderReadingBlock, getReadingBlockCSS } from './renderers/reading-block.js';
+import { renderMetricsCard, getMetricsCardCSS } from './renderers/metrics-card.js';
+import { renderComposite, getCompositeCSS } from './renderers/composite.js';
+import { generatePlaygroundHTML, getPlaygroundCSS, getPlaygroundJS } from './playground.js';
+
+/** Render a form from a JSON Schema (for tool input) */
+export function renderFromSchema(
+  schema: JSONSchema,
+  options: RenderOptions & { toolName?: string; toolDescription?: string } = {}
+): string {
+  const sniffResult = sniffSchema(schema as Record<string, unknown>);
+
+  const body = renderForm(schema, {
+    ...sniffResult.metadata,
+    toolName: options.toolName,
+    toolDescription: options.toolDescription,
+  });
+
+  const playground = options.debug ? generatePlaygroundHTML() : '';
+
+  const css = [
+    generateThemeCSS(),
+    getFormCSS(),
+    options.debug ? getPlaygroundCSS() : '',
+  ].join('\n');
+
+  const js = [
+    generateBridgeJS(),
+    options.debug ? getPlaygroundJS() : '',
+  ].join('\n');
+
+  return htmlDocument({
+    title: options.title ?? options.toolName ?? 'MCP Tool',
+    css,
+    body: body + playground,
+    js,
+  });
+}
+
+/** Render HTML from tool result data */
+export function renderFromData(
+  data: unknown,
+  options: RenderOptions & { toolName?: string; toolDescription?: string } = {}
+): string {
+  const results = sniff(data);
+  const best = results[0];
+
+  let body: string;
+  const cssParts = [generateThemeCSS()];
+  const jsParts = [generateBridgeJS()];
+
+  switch (best.intent) {
+    case 'data-grid':
+      body = renderDataGrid(data, best.metadata);
+      cssParts.push(getDataGridCSS());
+      jsParts.push(getDataGridJS());
+      break;
+    case 'metrics-card':
+      body = renderMetricsCard(data, best.metadata);
+      cssParts.push(getMetricsCardCSS());
+      break;
+    case 'reading-block':
+      body = renderReadingBlock(data, best.metadata);
+      cssParts.push(getReadingBlockCSS());
+      break;
+    case 'json-tree':
+      body = renderJsonTree(data, best.metadata);
+      cssParts.push(getJsonTreeCSS());
+      jsParts.push(getJsonTreeJS());
+      // Inject tree data for copy-all
+      jsParts.push(`__mcpTreeData = ${JSON.stringify(data)};`);
+      break;
+    case 'composite':
+      body = renderComposite(data, best.metadata);
+      // Composite may use all renderers, include all CSS/JS
+      cssParts.push(getDataGridCSS(), getMetricsCardCSS(), getReadingBlockCSS(), getJsonTreeCSS(), getCompositeCSS());
+      jsParts.push(getDataGridJS(), getJsonTreeJS());
+      break;
+    default:
+      body = renderJsonTree(data, best.metadata);
+      cssParts.push(getJsonTreeCSS());
+      jsParts.push(getJsonTreeJS());
+      jsParts.push(`__mcpTreeData = ${JSON.stringify(data)};`);
+  }
+
+  if (options.debug) {
+    body += generatePlaygroundHTML();
+    cssParts.push(getPlaygroundCSS());
+    jsParts.push(getPlaygroundJS());
+  }
+
+  return htmlDocument({
+    title: options.title ?? options.toolName ?? 'MCP Result',
+    css: cssParts.join('\n'),
+    body,
+    js: jsParts.join('\n'),
+  });
+}
+
+/** Unified API */
+export function render(input: EngineInput, options: RenderOptions = {}): string {
+  if (input.mode === 'schema') {
+    return renderFromSchema(input.schema, {
+      ...options,
+      toolName: input.toolName,
+      toolDescription: input.toolDescription,
+    });
+  }
+  return renderFromData(input.data, {
+    ...options,
+    toolName: input.toolName,
+    toolDescription: input.toolDescription,
+  });
+}

package/src/html-builder.ts

@@ -0,0 +1,61 @@
+// ── Safe HTML string builder with XSS prevention ──
+
+const ESCAPE_MAP: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+/** Escape HTML special characters to prevent XSS */
+export function escapeHtml(str: string): string {
+  return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch] ?? ch);
+}
+
+/** Build an HTML opening tag with attributes */
+export function tag(
+  name: string,
+  attrs: Record<string, string | boolean | undefined> = {},
+  selfClosing = false
+): string {
+  const attrStr = Object.entries(attrs)
+    .filter(([, v]) => v !== undefined && v !== false)
+    .map(([k, v]) => (v === true ? k : `${k}="${escapeHtml(String(v))}"`))
+    .join(' ');
+  const open = attrStr ? `<${name} ${attrStr}` : `<${name}`;
+  return selfClosing ? `${open} />` : `${open}>`;
+}
+
+/** Wrap content in a style tag */
+export function style(css: string): string {
+  return `<style>\n${css}\n</style>`;
+}
+
+/** Wrap content in a script tag */
+export function script(js: string): string {
+  return `<script>\n${js}\n</script>`;
+}
+
+/** Wrap content in a complete HTML document */
+export function document(opts: {
+  title?: string;
+  css?: string;
+  js?: string;
+  body: string;
+}): string {
+  const titleTag = opts.title ? `<title>${escapeHtml(opts.title)}</title>` : '';
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+${titleTag}
+${opts.css ? style(opts.css) : ''}
+</head>
+<body>
+${opts.body}
+${opts.js ? script(opts.js) : ''}
+</body>
+</html>`;
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+// ── Public API ──
+export { render, renderFromSchema, renderFromData } from './engine.js';
+export { sniff, sniffSchema } from './data-sniffer.js';
+export { generateThemeCSS } from './theme.js';
+export { generateBridgeJS } from './bridge.js';
+export { escapeHtml, tag, style, script, document } from './html-builder.js';
+
+// Re-export types
+export type {
+  RenderIntent,
+  SniffResult,
+  RenderOptions,
+  EngineInput,
+  SchemaInput,
+  DataInput,
+  JSONSchema,
+  Renderer,
+  MCPToolDefinition,
+  MCPServerInfo,
+} from './types.js';

package/src/playground.ts

@@ -0,0 +1,187 @@
+// ── Debug Playground: floating debug panel ──
+import { escapeHtml } from './html-builder.js';
+
+export function generatePlaygroundHTML(): string {
+  return `
+<!-- Debug Playground -->
+<button id="pg-toggle" class="pg-toggle" onclick="__mcpTogglePg()">&lt;/&gt; Debug Playground</button>
+<div id="pg-panel" class="pg-panel hidden">
+  <div class="pg-header">
+    <h3>Debug Playground</h3>
+    <button class="pg-close" onclick="__mcpTogglePg()">×</button>
+  </div>
+  <div class="pg-body">
+    <!-- Config Section -->
+    <details class="pg-section" open>
+      <summary>Configuration</summary>
+      <div class="pg-config">
+        <label class="pg-label">API Base URL
+          <input type="text" id="pg-api-url" class="input" value="" placeholder="https://api.openai.com/v1">
+        </label>
+        <label class="pg-label">API Key
+          <input type="password" id="pg-api-key" class="input" value="" placeholder="sk-...">
+        </label>
+        <label class="pg-label">Model
+          <input type="text" id="pg-model" class="input" value="" placeholder="gpt-4">
+        </label>
+        <label class="pg-label">System Prompt
+          <textarea id="pg-system" class="input textarea" rows="3" placeholder="You are a helpful assistant..."></textarea>
+        </label>
+        <button class="btn btn-primary btn-sm" onclick="__mcpSaveConfig()">Save to LocalStorage</button>
+      </div>
+    </details>
+
+    <!-- Console Section -->
+    <details class="pg-section" open>
+      <summary>Console</summary>
+      <div id="mcp-console" class="pg-console"></div>
+      <button class="btn btn-ghost btn-sm" onclick="document.getElementById('mcp-console').innerHTML=''">Clear</button>
+    </details>
+
+    <!-- Raw JSON Section -->
+    <details class="pg-section">
+      <summary>Raw JSON Injection</summary>
+      <textarea id="pg-json" class="input textarea pg-json" rows="8" placeholder="Paste JSON data here..."></textarea>
+      <button class="btn btn-primary btn-sm" onclick="__mcpInjectJson()">Inject &amp; Re-render</button>
+    </details>
+  </div>
+</div>`;
+}
+
+export function getPlaygroundCSS(): string {
+  return `
+.pg-toggle {
+  position: fixed; bottom: 16px; right: 16px; z-index: 9998;
+  padding: 8px 16px; border-radius: var(--radius-full);
+  background: var(--accent); color: var(--accent-text);
+  border: none; font-weight: 600; font-size: var(--text-sm);
+  cursor: pointer; box-shadow: var(--shadow-lg);
+  font-family: var(--font-mono);
+  transition: all var(--duration-fast) var(--ease-out);
+}
+.pg-toggle:hover { transform: scale(1.05); }
+
+.pg-panel {
+  position: fixed; top: 0; right: 0; bottom: 0;
+  width: min(480px, 100vw); z-index: 9999;
+  background: var(--bg-primary); border-left: 1px solid var(--border);
+  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
+  transition: transform var(--duration-slow) var(--ease-out);
+}
+.pg-panel.hidden { transform: translateX(100%); pointer-events: none; }
+
+.pg-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
+}
+.pg-header h3 { font-size: var(--text-lg); font-weight: 700; }
+.pg-close {
+  background: none; border: none; font-size: 24px; cursor: pointer;
+  color: var(--text-secondary); padding: 0 4px;
+}
+
+.pg-body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
+
+.pg-section { border: 1px solid var(--border); border-radius: var(--radius-sm); }
+.pg-section summary {
+  padding: var(--sp-2) var(--sp-3); font-weight: 600; font-size: var(--text-sm);
+  cursor: pointer; user-select: none;
+}
+.pg-section > *:not(summary) { padding: var(--sp-3); }
+
+.pg-config { display: flex; flex-direction: column; gap: var(--sp-3); }
+.pg-label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--text-sm); font-weight: 500; }
+
+.pg-console {
+  background: var(--bg-tertiary); border-radius: var(--radius-sm);
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  min-height: 120px; max-height: 300px; overflow-y: auto; padding: var(--sp-2);
+}
+.console-entry { padding: 2px 0; border-bottom: 1px solid var(--border); }
+.console-outbound { color: var(--accent); }
+.console-inbound { color: var(--success); }
+.console-error { color: var(--danger); }
+.console-info { color: var(--text-secondary); }
+
+.pg-json { font-family: var(--font-mono); font-size: var(--text-xs); }
+`;
+}
+
+export function getPlaygroundJS(): string {
+  return `
+// ── Playground Logic ──
+(function() {
+  // Load saved config from localStorage
+  var fields = ['pg-api-url', 'pg-api-key', 'pg-model', 'pg-system'];
+  fields.forEach(function(id) {
+    var el = document.getElementById(id);
+    var saved = localStorage.getItem('mcp_' + id);
+    if (el && saved) el.value = saved;
+  });
+
+  window.__mcpTogglePg = function() {
+    var panel = document.getElementById('pg-panel');
+    if (panel) panel.classList.toggle('hidden');
+  };
+
+  window.__mcpSaveConfig = function() {
+    fields.forEach(function(id) {
+      var el = document.getElementById(id);
+      if (el) localStorage.setItem('mcp_' + id, el.value);
+    });
+    __mcpLog('Config saved to localStorage', 'info');
+  };
+
+  window.__mcpInjectJson = function() {
+    var textarea = document.getElementById('pg-json');
+    if (!textarea) return;
+    try {
+      var data = JSON.parse(textarea.value);
+      __mcpLog('JSON parsed, dispatching re-render...', 'info');
+      window.dispatchEvent(new CustomEvent('mcp:inject', { detail: data }));
+    } catch(e) {
+      __mcpLog('JSON parse error: ' + e.message, 'error');
+    }
+  };
+
+  // Intercept form submissions for LLM relay
+  window.addEventListener('mcp:tool-call', function(evt) {
+    var apiUrl = (document.getElementById('pg-api-url') || {}).value;
+    var apiKey = (document.getElementById('pg-api-key') || {}).value;
+    var model = (document.getElementById('pg-model') || {}).value;
+    var system = (document.getElementById('pg-system') || {}).value;
+
+    if (!apiUrl || !apiKey) {
+      __mcpLog('No API config set — tool call logged but not forwarded', 'info');
+      return;
+    }
+
+    var detail = evt.detail;
+    __mcpLog('Forwarding to LLM: ' + model, 'outbound');
+
+    var body = {
+      model: model || 'gpt-4',
+      messages: [
+        { role: 'system', content: system || 'You are a helpful assistant.' },
+        { role: 'user', content: JSON.stringify(detail.arguments) }
+      ]
+    };
+
+    fetch(apiUrl + '/chat/completions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + apiKey },
+      body: JSON.stringify(body)
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      __mcpLog('LLM response received', 'inbound');
+      __mcpLog(JSON.stringify(data.choices?.[0]?.message?.content || data).substring(0, 200), 'info');
+      window.dispatchEvent(new CustomEvent('mcp:result', { detail: { type: 'MCP_RESULT', data: data } }));
+    })
+    .catch(function(err) {
+      __mcpLog('LLM error: ' + err.message, 'error');
+    });
+  });
+})();
+`;
+}