diff --git a/CHANGELOG.md b/CHANGELOG.md
index d017a7a..974c150 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 
 ### New Features
 
+- **`union_tool`, `intersect_tool`, `difference_tool` now render as a live Mapbox GL JS map** with input polygons in muted blue and the result in an operation-keyed color (green for union, purple for intersect, orange for difference). All three share a single `PolygonOpsAppUIResource` and one `renderPolygonOpsAppHtml` template. Same dual-spec dispatch (MCP Apps + inline MCP-UI).
 - **`ground_location_tool` now renders as a live Mapbox GL JS map** showing the reverse-geocoded origin marker + nearby POIs (numbered orange pins) + the isochrone polygons when present. Same dual-spec dispatch (MCP Apps + inline MCP-UI) and shared `renderGroundLocationAppHtml` template.
 - **`map_matching_tool` now renders as a live Mapbox GL JS map** showing the raw GPS trace as a dashed orange line and the snapped matched route as a solid blue line on top. Same dual-spec dispatch (MCP Apps + inline MCP-UI) and shared `renderMapMatchingAppHtml` template.
 - **`search_and_geocode_tool` and `category_search_tool` now render as a live Mapbox GL JS map** following the same dual-spec pattern as `directions_tool`/`isochrone_tool`/`optimization_tool`. Both tools share a single `SearchAppUIResource` (`ui://mapbox/search-app/index.html`) and one `renderSearchAppHtml` template that drops numbered pins on each result with name/category/address popups.
diff --git a/src/resources/resourceRegistry.ts b/src/resources/resourceRegistry.ts
index 6da6c31..34f5909 100644
--- a/src/resources/resourceRegistry.ts
+++ b/src/resources/resourceRegistry.ts
@@ -11,6 +11,7 @@ import { OptimizationAppUIResource } from './ui-apps/OptimizationAppUIResource.j
 import { SearchAppUIResource } from './ui-apps/SearchAppUIResource.js';
 import { MapMatchingAppUIResource } from './ui-apps/MapMatchingAppUIResource.js';
 import { GroundLocationAppUIResource } from './ui-apps/GroundLocationAppUIResource.js';
+import { PolygonOpsAppUIResource } from './ui-apps/PolygonOpsAppUIResource.js';
 import { VersionResource } from './version/VersionResource.js';
 import { httpRequest } from '../utils/httpPipeline.js';
 
@@ -26,6 +27,7 @@ export const ALL_RESOURCES = [
   new SearchAppUIResource({ httpRequest }),
   new MapMatchingAppUIResource({ httpRequest }),
   new GroundLocationAppUIResource({ httpRequest }),
+  new PolygonOpsAppUIResource({ httpRequest }),
   new VersionResource()
 ] as const;
 
diff --git a/src/resources/ui-apps/PolygonOpsAppUIResource.ts b/src/resources/ui-apps/PolygonOpsAppUIResource.ts
new file mode 100644
index 0000000..90fbf53
--- /dev/null
+++ b/src/resources/ui-apps/PolygonOpsAppUIResource.ts
@@ -0,0 +1,86 @@
+// Copyright (c) Mapbox, Inc.
+// Licensed under the MIT License.
+
+import type { RequestHandlerExtra } from '@modelcontextprotocol/sdk/shared/protocol.js';
+import type {
+  ReadResourceResult,
+  ServerNotification,
+  ServerRequest
+} from '@modelcontextprotocol/sdk/types.js';
+import { RESOURCE_MIME_TYPE } from '@modelcontextprotocol/ext-apps/server';
+import { BaseResource } from '../BaseResource.js';
+import type { HttpRequest } from '../../utils/types.js';
+import { resolveMapboxPublicToken } from '../../utils/mapboxPublicToken.js';
+import { renderPolygonOpsAppHtml } from './polygonOpsAppHtml.js';
+
+/**
+ * Serves HTML for union/intersect/difference polygon-op MCP Apps.
+ *
+ * The input polygons are rendered in muted blue (semi-transparent fill +
+ * outline) and the result polygon is overlaid in a brighter color keyed to
+ * the operation (green=union, purple=intersect, orange=difference).
+ */
+export class PolygonOpsAppUIResource extends BaseResource {
+  readonly name = 'Polygon Ops App UI';
+  readonly uri = 'ui://mapbox/polygon-ops-app/index.html';
+  readonly description =
+    'Interactive UI for visualizing polygon union/intersect/difference results (MCP Apps)';
+  readonly mimeType = RESOURCE_MIME_TYPE;
+
+  private readonly httpRequest: HttpRequest;
+  private readonly apiEndpoint: () => string;
+
+  constructor(params: {
+    httpRequest: HttpRequest;
+    apiEndpoint?: () => string;
+  }) {
+    super();
+    this.httpRequest = params.httpRequest;
+    this.apiEndpoint =
+      params.apiEndpoint ??
+      (() => process.env.MAPBOX_API_ENDPOINT || 'https://api.mapbox.com/');
+  }
+
+  async read(
+    _uri: string,
+    extra?: RequestHandlerExtra<ServerRequest, ServerNotification>
+  ): Promise<ReadResourceResult> {
+    const accessToken =
+      (extra?.authInfo?.token as string | undefined) ||
+      process.env.MAPBOX_ACCESS_TOKEN ||
+      '';
+
+    const publicToken = await resolveMapboxPublicToken({
+      accessToken,
+      apiEndpoint: this.apiEndpoint(),
+      httpRequest: this.httpRequest
+    });
+
+    const html = renderPolygonOpsAppHtml({
+      publicToken: publicToken ?? ''
+    });
+
+    return {
+      contents: [
+        {
+          uri: this.uri,
+          mimeType: RESOURCE_MIME_TYPE,
+          text: html,
+          _meta: {
+            ui: {
+              csp: {
+                connectDomains: [
+                  'https://*.mapbox.com',
+                  'https://events.mapbox.com'
+                ],
+                resourceDomains: ['https://api.mapbox.com'],
+                workerDomains: ['blob:']
+              },
+              preferredSize: { width: 1000, height: 600 }
+            }
+          }
+        }
+      ]
+    };
+  }
+}
diff --git a/src/resources/ui-apps/polygonOpsAppHtml.ts b/src/resources/ui-apps/polygonOpsAppHtml.ts
new file mode 100644
index 0000000..5dbb643
--- /dev/null
+++ b/src/resources/ui-apps/polygonOpsAppHtml.ts
@@ -0,0 +1,342 @@
+// Copyright (c) Mapbox, Inc.
+// Licensed under the MIT License.
+
+/**
+ * Render the polygon-operation MCP App HTML — used by both the MCP Apps
+ * resource and the inline MCP-UI rawHtml block emitted by `union_tool`,
+ * `intersect_tool`, and `difference_tool`.
+ *
+ * MCP Apps path: only the result geometry is in the tool's structuredContent
+ * (inputs come from the request, not the response). The iframe shows the
+ * result polygon in the operation color.
+ *
+ * MCP-UI path: the tool bakes both inputs + result into initialData, so the
+ * iframe shows inputs in muted blue and the result in the operation color.
+ */
+
+export const MAPBOX_GL_VERSION = '3.12.0';
+
+export type PolygonOperation = 'union' | 'intersect' | 'difference';
+
+export interface PolygonOpsAppInitialData {
+  operation: PolygonOperation;
+  inputs: Array<{ type: 'Feature'; geometry: unknown }>;
+  result: { type: 'Feature'; geometry: unknown } | null;
+  summary?: string;
+}
+
+export function renderPolygonOpsAppHtml(params: {
+  publicToken: string;
+  glVersion?: string;
+  initialData?: PolygonOpsAppInitialData;
+}): string {
+  const { publicToken, initialData } = params;
+  const glVersion = params.glVersion ?? MAPBOX_GL_VERSION;
+
+  const initialDataScript = initialData
+    ? `<script id="initial-data" type="application/json">${escapeForScript(
+        JSON.stringify(initialData)
+      )}</script>`
+    : '';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Polygon Operation</title>
+<link href="https://api.mapbox.com/mapbox-gl-js/v${glVersion}/mapbox-gl.css" rel="stylesheet">
+<script src="https://api.mapbox.com/mapbox-gl-js/v${glVersion}/mapbox-gl.js"></script>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 100%; height: 100%; overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+  #map { position: absolute; inset: 0; }
+  #summary {
+    position: absolute; top: 12px; left: 12px; z-index: 10;
+    background: rgba(15, 23, 42, 0.88); color: #f1f5f9;
+    padding: 8px 12px; border-radius: 6px;
+    font-size: 13px; font-weight: 500;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  }
+  #legend {
+    position: absolute; bottom: 12px; left: 12px; z-index: 10;
+    background: rgba(15, 23, 42, 0.88); color: #f1f5f9;
+    padding: 8px 12px; border-radius: 6px;
+    font-size: 11px; display: none;
+  }
+  #legend .swatch {
+    display: inline-block; width: 14px; height: 14px;
+    vertical-align: middle; margin-right: 6px; border-radius: 3px;
+  }
+  #loading {
+    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    color: #666; font-size: 16px; z-index: 10; pointer-events: none;
+  }
+  #error {
+    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    color: #d32f2f; background: #ffebee; border-radius: 8px;
+    padding: 20px; max-width: 400px; text-align: center; z-index: 10;
+  }
+</style>
+</head>
+<body>
+<div id="map"></div>
+<div id="summary" style="display:none"></div>
+<div id="legend">
+  <div id="inputs-legend" style="display:none"><span class="swatch" style="background:#3b82f6;opacity:0.35"></span>Inputs</div>
+  <div id="result-legend" style="display:none"><span class="swatch" id="result-swatch"></span><span id="result-label">Result</span></div>
+</div>
+<div id="loading">Loading…</div>
+<div id="error" style="display:none"></div>
+${initialDataScript}
+
+<script>
+(function() {
+  var TOKEN = ${JSON.stringify(publicToken)};
+
+  var loadingEl = document.getElementById('loading');
+  var errorEl = document.getElementById('error');
+  var summaryEl = document.getElementById('summary');
+  var legendEl = document.getElementById('legend');
+  var inputsLegendEl = document.getElementById('inputs-legend');
+  var resultLegendEl = document.getElementById('result-legend');
+  var resultSwatchEl = document.getElementById('result-swatch');
+  var resultLabelEl = document.getElementById('result-label');
+
+  var map = null;
+  var mapLoaded = false;
+  var pendingPayload = null;
+  var currentDisplayMode = 'inline';
+
+  var messageId = 0;
+  var pendingRequests = new Map();
+
+  function sendRequest(method, params) {
+    var id = ++messageId;
+    try { window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params || {} }, '*'); } catch (_) {}
+    return new Promise(function(resolve, reject) {
+      pendingRequests.set(id, { resolve: resolve, reject: reject });
+    });
+  }
+  function sendNotification(method, params) {
+    try { window.parent.postMessage({ jsonrpc: '2.0', method: method, params: params || {} }, '*'); } catch (_) {}
+  }
+  function requestSizeToFit() {
+    if (currentDisplayMode !== 'inline') return;
+    sendNotification('ui/notifications/size-changed', { height: 500 });
+  }
+
+  window.addEventListener('message', function(event) {
+    var message = event.data;
+    if (!message || typeof message !== 'object') return;
+    if (message.id !== undefined && pendingRequests.has(message.id)) {
+      var handlers = pendingRequests.get(message.id);
+      pendingRequests.delete(message.id);
+      if (message.error) handlers.reject(new Error(message.error.message));
+      else handlers.resolve(message.result);
+      return;
+    }
+    if (message.method === 'ui/notifications/tool-result' && message.params) {
+      handleToolResult(message.params);
+    }
+    if (message.method === 'ui/notifications/host-context-changed' && message.params && message.params.displayMode) {
+      currentDisplayMode = message.params.displayMode;
+      if (map) setTimeout(function() { map.resize(); }, 100);
+    }
+  });
+
+  sendRequest('ui/initialize', {
+    protocolVersion: '2026-01-26',
+    appCapabilities: {},
+    appInfo: { name: 'Polygon Operation', version: '1.0.0' }
+  }).then(function() { sendNotification('ui/notifications/initialized', {}); },
+         function() { sendNotification('ui/notifications/initialized', {}); });
+
+  function initMap() {
+    if (!TOKEN) { showError('No Mapbox public token available.'); return; }
+    if (typeof mapboxgl === 'undefined') { showError('Mapbox GL JS failed to load.'); return; }
+    mapboxgl.accessToken = TOKEN;
+    map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: [0, 20],
+      zoom: 1.5
+    });
+    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+    map.on('load', function() {
+      mapLoaded = true;
+      if (pendingPayload) { draw(pendingPayload); pendingPayload = null; }
+      else { consumeInitialData(); }
+    });
+  }
+  initMap();
+
+  function consumeInitialData() {
+    var el = document.getElementById('initial-data');
+    if (!el || !el.textContent) return;
+    try {
+      var data = JSON.parse(el.textContent);
+      if (data && data.operation) draw(data);
+    } catch (_) { /* ignore */ }
+  }
+
+  function handleToolResult(result) {
+    var payload = extractPayload(result);
+    if (payload) { renderPayload(payload); return; }
+    showError('No polygon data in tool result.');
+  }
+
+  function renderPayload(payload) {
+    if (payload.summary) {
+      summaryEl.textContent = payload.summary;
+      summaryEl.style.display = 'block';
+    }
+    if (!map) { loadingEl.style.display = 'none'; return; }
+    if (mapLoaded) draw(payload);
+    else pendingPayload = payload;
+  }
+
+  function showError(message) {
+    loadingEl.style.display = 'none';
+    errorEl.textContent = message;
+    errorEl.style.display = 'block';
+  }
+
+  // The three offline polygon-op tools return structuredContent =
+  //   { geometry: <Polygon|MultiPolygon|null>, type: 'Polygon'|'MultiPolygon'|null }
+  // Inputs aren't in the response (they came from the request), so the
+  // MCP Apps path shows only the result polygon.
+  function extractPayload(result) {
+    var sc = result && result.structuredContent;
+    if (sc && sc.geometry && typeof sc.geometry === 'object') {
+      return {
+        operation: 'union', // best-guess; result color defaults to green
+        inputs: [],
+        result: { type: 'Feature', geometry: sc.geometry, properties: {} }
+      };
+    }
+    return null;
+  }
+
+  var RESULT_COLORS = {
+    union: '#22c55e',     // green
+    intersect: '#8b5cf6', // purple
+    difference: '#f97316' // orange
+  };
+
+  var trackedLayers = [];
+  var trackedSources = [];
+
+  function draw(payload) {
+    var op = payload.operation || 'union';
+    var resultColor = RESULT_COLORS[op] || '#22c55e';
+
+    trackedLayers.forEach(function(id) { if (map.getLayer(id)) map.removeLayer(id); });
+    trackedSources.forEach(function(id) { if (map.getSource(id)) map.removeSource(id); });
+    trackedLayers = [];
+    trackedSources = [];
+
+    var minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
+    function extend(c) {
+      if (c[0] < minLng) minLng = c[0]; if (c[1] < minLat) minLat = c[1];
+      if (c[0] > maxLng) maxLng = c[0]; if (c[1] > maxLat) maxLat = c[1];
+    }
+    function walkCoords(coords) {
+      if (typeof coords[0] === 'number') extend(coords);
+      else for (var i = 0; i < coords.length; i++) walkCoords(coords[i]);
+    }
+
+    var inputs = Array.isArray(payload.inputs) ? payload.inputs : [];
+    inputs.forEach(function(feature, i) {
+      if (!feature || !feature.geometry) return;
+      var sid = 'poly-input-' + i;
+      var fid = 'input-fill-' + i;
+      var lid = 'input-line-' + i;
+      map.addSource(sid, { type: 'geojson', data: feature });
+      map.addLayer({
+        id: fid, type: 'fill', source: sid,
+        paint: { 'fill-color': '#3b82f6', 'fill-opacity': 0.25 }
+      });
+      map.addLayer({
+        id: lid, type: 'line', source: sid,
+        layout: { 'line-join': 'round', 'line-cap': 'round' },
+        paint: { 'line-color': '#3b82f6', 'line-width': 2, 'line-opacity': 0.7 }
+      });
+      trackedSources.push(sid);
+      trackedLayers.push(fid, lid);
+      walkCoords(feature.geometry.coordinates);
+    });
+
+    if (inputs.length > 0) inputsLegendEl.style.display = 'block';
+
+    if (payload.result && payload.result.geometry) {
+      map.addSource('poly-result', { type: 'geojson', data: payload.result });
+      map.addLayer({
+        id: 'result-fill', type: 'fill', source: 'poly-result',
+        paint: { 'fill-color': resultColor, 'fill-opacity': 0.45 }
+      });
+      map.addLayer({
+        id: 'result-line', type: 'line', source: 'poly-result',
+        layout: { 'line-join': 'round', 'line-cap': 'round' },
+        paint: { 'line-color': resultColor, 'line-width': 3 }
+      });
+      trackedSources.push('poly-result');
+      trackedLayers.push('result-fill', 'result-line');
+      walkCoords(payload.result.geometry.coordinates);
+
+      resultSwatchEl.style.background = resultColor;
+      resultSwatchEl.style.opacity = '0.7';
+      resultLabelEl.textContent = op + ' result';
+      resultLegendEl.style.display = 'block';
+    }
+
+    legendEl.style.display = 'block';
+
+    loadingEl.style.display = 'none';
+    requestSizeToFit();
+
+    if (isFinite(minLng)) {
+      setTimeout(function() {
+        map.resize();
+        map.fitBounds([[minLng, minLat], [maxLng, maxLat]], {
+          padding: { top: 70, bottom: 50, left: 30, right: 30 },
+          duration: 600
+        });
+      }, 60);
+    }
+  }
+})();
+</script>
+</body>
+</html>`;
+}
+
+function escapeForScript(s: string): string {
+  return s.replace(/<\/script>/gi, '<\\/script>');
+}
+
+/**
+ * Bake polygon op inputs + result into the shared iframe template for
+ * MCP-UI clients. Polygon ops are fully offline tools (no API calls and
+ * no per-request access token), so the public token must come from the
+ * MAPBOX_PUBLIC_TOKEN env var. If it isn't set, no inline UI is emitted.
+ */
+export function tryRenderPolygonOpsInlineHtml(params: {
+  operation: PolygonOperation;
+  inputs: Array<{ type: 'Feature'; geometry: unknown }>;
+  result: { type: 'Feature'; geometry: unknown } | null;
+  summary: string;
+}): string | undefined {
+  const { operation, inputs, result, summary } = params;
+
+  if (inputs.length === 0) return undefined;
+
+  const publicToken = process.env.MAPBOX_PUBLIC_TOKEN;
+  if (!publicToken || !publicToken.startsWith('pk.')) return undefined;
+
+  return renderPolygonOpsAppHtml({
+    publicToken,
+    initialData: { operation, inputs, result, summary }
+  });
+}
diff --git a/src/tools/difference-tool/DifferenceTool.ts b/src/tools/difference-tool/DifferenceTool.ts
index 0f12068..a889a95 100644
--- a/src/tools/difference-tool/DifferenceTool.ts
+++ b/src/tools/difference-tool/DifferenceTool.ts
@@ -1,8 +1,10 @@
 // Copyright (c) Mapbox, Inc.
 // Licensed under the MIT License.
 
+import { randomUUID } from 'node:crypto';
 import { difference, polygon, featureCollection } from '@turf/turf';
 import { context, SpanStatusCode, trace } from '@opentelemetry/api';
+import { createUIResource } from '@mcp-ui/server';
 import { createLocalToolExecutionContext } from '../../utils/tracing.js';
 import { BaseTool } from '../BaseTool.js';
 import { DifferenceInputSchema } from './DifferenceTool.input.schema.js';
@@ -11,6 +13,8 @@ import {
   type DifferenceOutput
 } from './DifferenceTool.output.schema.js';
 import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { isMcpUiEnabled } from '../../config/toolConfig.js';
+import { tryRenderPolygonOpsInlineHtml } from '../../resources/ui-apps/polygonOpsAppHtml.js';
 
 export class DifferenceTool extends BaseTool<
   typeof DifferenceInputSchema,
@@ -31,6 +35,16 @@ export class DifferenceTool extends BaseTool<
     openWorldHint: false
   };
 
+  readonly meta = {
+    ui: {
+      resourceUri: 'ui://mapbox/polygon-ops-app/index.html',
+      csp: {
+        connectDomains: ['https://*.mapbox.com', 'https://events.mapbox.com'],
+        resourceDomains: ['https://api.mapbox.com']
+      }
+    }
+  };
+
   constructor() {
     super({
       inputSchema: DifferenceInputSchema,
@@ -63,11 +77,44 @@ export class DifferenceTool extends BaseTool<
             ? `Difference computed (area in polygon1 not covered by polygon2).\nGeometry:\n${JSON.stringify(validated.geometry, null, 2)}`
             : 'No difference: polygon2 fully covers polygon1.';
 
+          const content: CallToolResult['content'] = [
+            { type: 'text' as const, text }
+          ];
+
+          if (isMcpUiEnabled()) {
+            const inlineHtml = tryRenderPolygonOpsInlineHtml({
+              operation: 'difference',
+              inputs: [poly1, poly2] as Array<{
+                type: 'Feature';
+                geometry: unknown;
+              }>,
+              result: (result ?? null) as {
+                type: 'Feature';
+                geometry: unknown;
+              } | null,
+              summary: validated.has_difference
+                ? 'Difference of two polygons (polygon1 minus polygon2)'
+                : 'polygon2 fully covers polygon1 (no difference)'
+            });
+            if (inlineHtml) {
+              content.push(
+                createUIResource({
+                  uri: `ui://mapbox/polygon-ops/${randomUUID()}`,
+                  content: { type: 'rawHtml', htmlString: inlineHtml },
+                  encoding: 'text',
+                  uiMetadata: {
+                    'preferred-frame-size': ['100%', '500px']
+                  }
+                })
+              );
+            }
+          }
+
           toolContext.span.setStatus({ code: SpanStatusCode.OK });
           toolContext.span.end();
 
           return {
-            content: [{ type: 'text' as const, text }],
+            content,
             structuredContent: validated,
             isError: false
           };
@@ -81,7 +128,10 @@ export class DifferenceTool extends BaseTool<
           toolContext.span.end();
           return {
             content: [
-              { type: 'text' as const, text: `DifferenceTool: ${errorMessage}` }
+              {
+                type: 'text' as const,
+                text: `DifferenceTool: ${errorMessage}`
+              }
             ],
             isError: true
           };
diff --git a/src/tools/intersect-tool/IntersectTool.ts b/src/tools/intersect-tool/IntersectTool.ts
index 690c23b..715c511 100644
--- a/src/tools/intersect-tool/IntersectTool.ts
+++ b/src/tools/intersect-tool/IntersectTool.ts
@@ -1,8 +1,10 @@
 // Copyright (c) Mapbox, Inc.
 // Licensed under the MIT License.
 
+import { randomUUID } from 'node:crypto';
 import { intersect, polygon, featureCollection } from '@turf/turf';
 import { context, SpanStatusCode, trace } from '@opentelemetry/api';
+import { createUIResource } from '@mcp-ui/server';
 import { createLocalToolExecutionContext } from '../../utils/tracing.js';
 import { BaseTool } from '../BaseTool.js';
 import { IntersectInputSchema } from './IntersectTool.input.schema.js';
@@ -11,6 +13,8 @@ import {
   type IntersectOutput
 } from './IntersectTool.output.schema.js';
 import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { isMcpUiEnabled } from '../../config/toolConfig.js';
+import { tryRenderPolygonOpsInlineHtml } from '../../resources/ui-apps/polygonOpsAppHtml.js';
 
 export class IntersectTool extends BaseTool<
   typeof IntersectInputSchema,
@@ -31,6 +35,16 @@ export class IntersectTool extends BaseTool<
     openWorldHint: false
   };
 
+  readonly meta = {
+    ui: {
+      resourceUri: 'ui://mapbox/polygon-ops-app/index.html',
+      csp: {
+        connectDomains: ['https://*.mapbox.com', 'https://events.mapbox.com'],
+        resourceDomains: ['https://api.mapbox.com']
+      }
+    }
+  };
+
   constructor() {
     super({
       inputSchema: IntersectInputSchema,
@@ -63,11 +77,44 @@ export class IntersectTool extends BaseTool<
             ? `The polygons intersect.\nIntersection geometry:\n${JSON.stringify(validated.geometry, null, 2)}`
             : 'The polygons do not intersect.';
 
+          const content: CallToolResult['content'] = [
+            { type: 'text' as const, text }
+          ];
+
+          if (isMcpUiEnabled()) {
+            const inlineHtml = tryRenderPolygonOpsInlineHtml({
+              operation: 'intersect',
+              inputs: [poly1, poly2] as Array<{
+                type: 'Feature';
+                geometry: unknown;
+              }>,
+              result: (result ?? null) as {
+                type: 'Feature';
+                geometry: unknown;
+              } | null,
+              summary: validated.intersects
+                ? 'Intersection of two polygons'
+                : 'Polygons do not intersect'
+            });
+            if (inlineHtml) {
+              content.push(
+                createUIResource({
+                  uri: `ui://mapbox/polygon-ops/${randomUUID()}`,
+                  content: { type: 'rawHtml', htmlString: inlineHtml },
+                  encoding: 'text',
+                  uiMetadata: {
+                    'preferred-frame-size': ['100%', '500px']
+                  }
+                })
+              );
+            }
+          }
+
           toolContext.span.setStatus({ code: SpanStatusCode.OK });
           toolContext.span.end();
 
           return {
-            content: [{ type: 'text' as const, text }],
+            content,
             structuredContent: validated,
             isError: false
           };
diff --git a/src/tools/union-tool/UnionTool.ts b/src/tools/union-tool/UnionTool.ts
index 7c73580..fa57c49 100644
--- a/src/tools/union-tool/UnionTool.ts
+++ b/src/tools/union-tool/UnionTool.ts
@@ -1,8 +1,10 @@
 // Copyright (c) Mapbox, Inc.
 // Licensed under the MIT License.
 
+import { randomUUID } from 'node:crypto';
 import { union, polygon, featureCollection } from '@turf/turf';
 import { context, SpanStatusCode, trace } from '@opentelemetry/api';
+import { createUIResource } from '@mcp-ui/server';
 import { createLocalToolExecutionContext } from '../../utils/tracing.js';
 import { BaseTool } from '../BaseTool.js';
 import { UnionInputSchema } from './UnionTool.input.schema.js';
@@ -11,6 +13,8 @@ import {
   type UnionOutput
 } from './UnionTool.output.schema.js';
 import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { isMcpUiEnabled } from '../../config/toolConfig.js';
+import { tryRenderPolygonOpsInlineHtml } from '../../resources/ui-apps/polygonOpsAppHtml.js';
 
 export class UnionTool extends BaseTool<
   typeof UnionInputSchema,
@@ -31,6 +35,16 @@ export class UnionTool extends BaseTool<
     openWorldHint: false
   };
 
+  readonly meta = {
+    ui: {
+      resourceUri: 'ui://mapbox/polygon-ops-app/index.html',
+      csp: {
+        connectDomains: ['https://*.mapbox.com', 'https://events.mapbox.com'],
+        resourceDomains: ['https://api.mapbox.com']
+      }
+    }
+  };
+
   constructor() {
     super({ inputSchema: UnionInputSchema, outputSchema: UnionOutputSchema });
   }
@@ -60,11 +74,36 @@ export class UnionTool extends BaseTool<
             `Result type: ${validated.type}\n` +
             `GeoJSON geometry:\n${JSON.stringify(validated.geometry, null, 2)}`;
 
+          const content: CallToolResult['content'] = [
+            { type: 'text' as const, text }
+          ];
+
+          if (isMcpUiEnabled()) {
+            const inlineHtml = tryRenderPolygonOpsInlineHtml({
+              operation: 'union',
+              inputs: polys as Array<{ type: 'Feature'; geometry: unknown }>,
+              result: merged as { type: 'Feature'; geometry: unknown },
+              summary: `Union of ${input.polygons.length} polygons`
+            });
+            if (inlineHtml) {
+              content.push(
+                createUIResource({
+                  uri: `ui://mapbox/polygon-ops/${randomUUID()}`,
+                  content: { type: 'rawHtml', htmlString: inlineHtml },
+                  encoding: 'text',
+                  uiMetadata: {
+                    'preferred-frame-size': ['100%', '500px']
+                  }
+                })
+              );
+            }
+          }
+
           toolContext.span.setStatus({ code: SpanStatusCode.OK });
           toolContext.span.end();
 
           return {
-            content: [{ type: 'text' as const, text }],
+            content,
             structuredContent: validated,
             isError: false
           };
diff --git a/test/tools/annotations.test.ts b/test/tools/annotations.test.ts
index 0a5448f..4bb900e 100644
--- a/test/tools/annotations.test.ts
+++ b/test/tools/annotations.test.ts
@@ -80,7 +80,10 @@ describe('Tool Annotations', () => {
       'destination_tool',
       'length_tool',
       'nearest_point_on_line_tool',
-      'convex_tool'
+      'convex_tool',
+      'union_app_tool',
+      'intersect_app_tool',
+      'difference_app_tool'
     ];
     const apiTools = tools.filter((tool) => !offlineTools.includes(tool.name));