diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4eb44612..8b53fe67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 
 ### New Features
 
+- **`optimization_tool` now renders as a live Mapbox GL JS map** following the same dual-spec pattern as `directions_tool`/`isochrone_tool`: MCP Apps via `_meta.ui.resourceUri` → `OptimizationAppUIResource`, plus an inline MCP-UI rawHtml block (gated by `ENABLE_MCP_UI`). One shared `renderOptimizationAppHtml` template renders the trip line with numbered markers (1, 2, 3, …) at each stop in the visit order.
 - **`isochrone_tool` now renders as a live Mapbox GL JS map** following the same dual-spec pattern as `directions_tool`: MCP Apps via `_meta.ui.resourceUri` → `IsochroneAppUIResource`, plus an inline MCP-UI rawHtml block (gated by `ENABLE_MCP_UI`). One shared `renderIsochroneAppHtml` template renders the contours as translucent fill + outline layers with the origin marked.
 - **`directions_tool` now renders as a live Mapbox GL JS map** for both the MCP Apps spec and legacy MCP-UI clients:
   - **MCP Apps**: the tool declares `_meta.ui.resourceUri` pointing to a new `DirectionsAppUIResource` (`ui://mapbox/directions-app/index.html`). MCP App–capable hosts (Claude Desktop, VS Code, Cursor) render the route via postMessage handoff.
diff --git a/src/resources/resourceRegistry.ts b/src/resources/resourceRegistry.ts
index 5fe62de5..86092016 100644
--- a/src/resources/resourceRegistry.ts
+++ b/src/resources/resourceRegistry.ts
@@ -7,6 +7,7 @@ import { TemporaryDataResource } from './temporary/TemporaryDataResource.js';
 import { StaticMapUIResource } from './ui-apps/StaticMapUIResource.js';
 import { DirectionsAppUIResource } from './ui-apps/DirectionsAppUIResource.js';
 import { IsochroneAppUIResource } from './ui-apps/IsochroneAppUIResource.js';
+import { OptimizationAppUIResource } from './ui-apps/OptimizationAppUIResource.js';
 import { VersionResource } from './version/VersionResource.js';
 import { httpRequest } from '../utils/httpPipeline.js';
 
@@ -18,6 +19,7 @@ export const ALL_RESOURCES = [
   new StaticMapUIResource(),
   new DirectionsAppUIResource({ httpRequest }),
   new IsochroneAppUIResource({ httpRequest }),
+  new OptimizationAppUIResource({ httpRequest }),
   new VersionResource()
 ] as const;
 
diff --git a/src/resources/ui-apps/OptimizationAppUIResource.ts b/src/resources/ui-apps/OptimizationAppUIResource.ts
new file mode 100644
index 00000000..5c951c89
--- /dev/null
+++ b/src/resources/ui-apps/OptimizationAppUIResource.ts
@@ -0,0 +1,79 @@
+// 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 { renderOptimizationAppHtml } from './optimizationAppHtml.js';
+
+export class OptimizationAppUIResource extends BaseResource {
+  readonly name = 'Optimization App UI';
+  readonly uri = 'ui://mapbox/optimization-app/index.html';
+  readonly description =
+    'Interactive UI for visualizing an optimized multi-stop trip with Mapbox GL JS (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 = renderOptimizationAppHtml({
+      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/optimizationAppHtml.ts b/src/resources/ui-apps/optimizationAppHtml.ts
new file mode 100644
index 00000000..d7e62294
--- /dev/null
+++ b/src/resources/ui-apps/optimizationAppHtml.ts
@@ -0,0 +1,387 @@
+// Copyright (c) Mapbox, Inc.
+// Licensed under the MIT License.
+
+/**
+ * Render the optimized-trip MCP App HTML — used by both the MCP Apps resource
+ * and `optimization_tool`'s inline MCP-UI rawHtml block.
+ */
+
+export const MAPBOX_GL_VERSION = '3.12.0';
+
+export interface OptimizationAppInitialData {
+  geometry: unknown; // GeoJSON LineString OR encoded polyline string
+  stops: Array<{
+    order: number;
+    input_index: number;
+    location: [number, number];
+    name?: string;
+  }>;
+  roundtrip?: boolean;
+  summary?: string;
+}
+
+export function renderOptimizationAppHtml(params: {
+  publicToken: string;
+  glVersion?: string;
+  initialData?: OptimizationAppInitialData;
+}): 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>Optimized Trip</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; top: 0; left: 0; width: 100%; height: 100%; }
+  #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);
+    max-width: calc(100% - 24px);
+    white-space: pre-line;
+  }
+  #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;
+  }
+  .stop-marker {
+    width: 28px; height: 28px; border-radius: 50%;
+    background: #2563eb; color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; font-weight: 700;
+    border: 2px solid #fff;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+    cursor: pointer;
+  }
+  .stop-marker.start { background: #22c55e; }
+  .stop-marker.end   { background: #ef4444; }
+</style>
+</head>
+<body>
+<div id="map"></div>
+<div id="summary" style="display:none"></div>
+<div id="loading">Loading optimized trip…</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 map = null;
+  var mapLoaded = false;
+  var pendingPayload = null;
+  var currentDisplayMode = 'inline';
+  var stopMarkers = [];
+
+  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: 'Optimized Trip', 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. Set MAPBOX_PUBLIC_TOKEN or grant tokens:read to the OAuth client.');
+      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) {
+        drawTrip(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.geometry && Array.isArray(data.stops)) {
+        var normalized = normalizeGeometry(data.geometry);
+        if (normalized) drawTrip({ geometry: normalized, stops: data.stops, roundtrip: data.roundtrip, summary: data.summary });
+      }
+    } catch (_) { /* ignore */ }
+  }
+
+  function handleToolResult(result) {
+    var payload = extractPayload(result);
+    if (payload) {
+      renderPayload(payload);
+      return;
+    }
+    showError('Could not find trip 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) drawTrip(payload);
+    else pendingPayload = payload;
+  }
+
+  function showError(message) {
+    loadingEl.style.display = 'none';
+    errorEl.textContent = message;
+    errorEl.style.display = 'block';
+  }
+
+  function extractPayload(result) {
+    var sc = result && result.structuredContent;
+    // optimization_tool returns OptimizationOutput: { code, trips: [{geometry, distance, duration}], waypoints: [...] }
+    if (sc && Array.isArray(sc.trips) && sc.trips.length > 0 && Array.isArray(sc.waypoints)) {
+      var trip = sc.trips[0];
+      if (trip && trip.geometry) {
+        var geom = normalizeGeometry(trip.geometry);
+        if (geom) {
+          return {
+            geometry: geom,
+            stops: buildStops(sc.waypoints),
+            summary: buildOptSummary(trip, sc.waypoints)
+          };
+        }
+      }
+    }
+    // Legacy app-tool payload shape
+    if (sc && sc.optimization && sc.optimization.geometry) {
+      var legacy = sc.optimization;
+      var g = normalizeGeometry(legacy.geometry);
+      if (g) {
+        return { geometry: g, stops: legacy.stops || [], roundtrip: legacy.roundtrip, summary: legacy.summary };
+      }
+    }
+    return null;
+  }
+
+  function buildStops(waypoints) {
+    // Sort by waypoint_index = position in optimized trip, then assign visit order
+    return waypoints
+      .map(function(wp, inputIndex) { return { wp: wp, inputIndex: inputIndex }; })
+      .sort(function(a, b) { return a.wp.waypoint_index - b.wp.waypoint_index; })
+      .map(function(entry, orderIndex) {
+        return {
+          order: orderIndex + 1,
+          input_index: entry.inputIndex,
+          location: entry.wp.location,
+          name: entry.wp.name
+        };
+      });
+  }
+
+  function buildOptSummary(trip, waypoints) {
+    var parts = [];
+    if (typeof trip.distance === 'number') {
+      parts.push((trip.distance / 1609.34).toFixed(1) + ' mi');
+    }
+    if (typeof trip.duration === 'number') {
+      parts.push(Math.round(trip.duration / 60) + ' min');
+    }
+    return 'Optimized trip: ' + (parts.length ? parts.join(', ') : (waypoints.length + ' stops'));
+  }
+
+  // Accept GeoJSON LineString or encoded polyline (precision 5 or 6) — normalize to GeoJSON.
+  function normalizeGeometry(g) {
+    if (g && typeof g === 'object' && Array.isArray(g.coordinates) && g.coordinates.length) {
+      return g;
+    }
+    if (typeof g === 'string' && g.length > 0) {
+      var coords = decodePolyline(g, 5);
+      if (coords.length > 0 && coordsLookSane(coords)) {
+        return { type: 'LineString', coordinates: coords };
+      }
+      coords = decodePolyline(g, 6);
+      if (coords.length > 0 && coordsLookSane(coords)) {
+        return { type: 'LineString', coordinates: coords };
+      }
+    }
+    return null;
+  }
+
+  function coordsLookSane(coords) {
+    for (var i = 0; i < coords.length; i++) {
+      var c = coords[i];
+      if (!Array.isArray(c) || c.length !== 2) return false;
+      if (c[0] < -180 || c[0] > 180 || c[1] < -90 || c[1] > 90) return false;
+    }
+    return true;
+  }
+
+  function decodePolyline(str, precision) {
+    precision = precision || 5;
+    var factor = Math.pow(10, precision);
+    var coords = [];
+    var lat = 0, lng = 0, i = 0;
+    while (i < str.length) {
+      var shift = 0, result = 0, b;
+      do { b = str.charCodeAt(i++) - 63; result |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20 && i < str.length);
+      lat += (result & 1) ? ~(result >> 1) : (result >> 1);
+      shift = 0; result = 0;
+      do { b = str.charCodeAt(i++) - 63; result |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20 && i < str.length);
+      lng += (result & 1) ? ~(result >> 1) : (result >> 1);
+      coords.push([lng / factor, lat / factor]);
+    }
+    return coords;
+  }
+
+  function drawTrip(payload) {
+    var geom = payload.geometry;
+    var stops = payload.stops || [];
+    if (!geom || !geom.coordinates || !geom.coordinates.length || stops.length === 0) {
+      showError('Trip has no geometry or stops.');
+      return;
+    }
+
+    if (map.getLayer('trip-line')) map.removeLayer('trip-line');
+    if (map.getSource('trip')) map.removeSource('trip');
+    for (var mi = 0; mi < stopMarkers.length; mi++) stopMarkers[mi].remove();
+    stopMarkers = [];
+
+    map.addSource('trip', {
+      type: 'geojson',
+      data: { type: 'Feature', geometry: geom, properties: {} }
+    });
+    map.addLayer({
+      id: 'trip-line', type: 'line', source: 'trip',
+      layout: { 'line-join': 'round', 'line-cap': 'round' },
+      paint: { 'line-color': '#3b82f6', 'line-width': 5, 'line-opacity': 0.85 }
+    });
+
+    stops.forEach(function(stop, idx) {
+      // The iframe accepts tool-result from any postMessage source, so guard
+      // against malformed payloads where stop.location is missing or not a
+      // [lng, lat] pair — otherwise setLngLat throws mid-loop and leaves the
+      // UI half-rendered. Skip the bad entry and keep going.
+      if (!Array.isArray(stop.location) || stop.location.length < 2 ||
+          typeof stop.location[0] !== 'number' ||
+          typeof stop.location[1] !== 'number') {
+        return;
+      }
+      var el = document.createElement('div');
+      el.className = 'stop-marker';
+      if (idx === 0) el.classList.add('start');
+      else if (idx === stops.length - 1 && !payload.roundtrip) el.classList.add('end');
+      el.textContent = String(stop.order);
+
+      // The Mapbox Optimization API populates waypoint.name with the road
+      // name the input coordinate was snapped to (not a place name), so
+      // label it as "on <road>" to avoid implying we identified a place.
+      var label = 'Stop ' + stop.order + ' (input #' + stop.input_index + ')';
+      if (stop.name) label += ' — on ' + stop.name;
+
+      stopMarkers.push(
+        new mapboxgl.Marker({ element: el })
+          .setLngLat(stop.location)
+          .setPopup(new mapboxgl.Popup().setText(label))
+          .addTo(map)
+      );
+    });
+
+    var lngs = geom.coordinates.map(function(c) { return c[0]; });
+    var lats = geom.coordinates.map(function(c) { return c[1]; });
+    var bounds = [
+      [Math.min.apply(null, lngs), Math.min.apply(null, lats)],
+      [Math.max.apply(null, lngs), Math.max.apply(null, lats)]
+    ];
+
+    loadingEl.style.display = 'none';
+    requestSizeToFit();
+    setTimeout(function() {
+      map.resize();
+      map.fitBounds(bounds, {
+        padding: { top: 70, bottom: 30, left: 30, right: 30 },
+        duration: 600
+      });
+    }, 60);
+  }
+})();
+</script>
+</body>
+</html>`;
+}
+
+function escapeForScript(s: string): string {
+  return s.replace(/<\/script>/gi, '<\\/script>');
+}
diff --git a/src/tools/optimization-tool/OptimizationTool.input.schema.ts b/src/tools/optimization-tool/OptimizationTool.input.schema.ts
index aad2b5ee..22b662dd 100644
--- a/src/tools/optimization-tool/OptimizationTool.input.schema.ts
+++ b/src/tools/optimization-tool/OptimizationTool.input.schema.ts
@@ -20,65 +20,76 @@ const profileSchema = z
  * The V1 Optimization API finds the optimal (shortest by travel time) route
  * through a set of coordinates, solving the Traveling Salesman Problem.
  */
-export const OptimizationInputSchema = z.object({
-  coordinates: z
-    .array(coordinateSchema)
-    .min(2, 'At least 2 coordinates are required')
-    .max(12, 'Maximum 12 coordinates allowed for V1 API')
-    .describe(
-      'Array of {longitude, latitude} coordinate pairs to optimize a route through. ' +
-        'The V1 API supports 2-12 coordinates and returns the optimal visiting order.'
-    ),
-  profile: profileSchema
-    .optional()
-    .default('mapbox/driving')
-    .describe('Routing profile to use for optimization'),
-  source: z
-    .enum(['any', 'first'])
-    .optional()
-    .default('any')
-    .describe(
-      'Location to start the trip. "any" allows any coordinate, "first" forces the first coordinate as start.'
-    ),
-  destination: z
-    .enum(['any', 'last'])
-    .optional()
-    .default('any')
-    .describe(
-      'Location to end the trip. "any" allows any coordinate, "last" forces the last coordinate as end.'
-    ),
-  roundtrip: z
-    .boolean()
-    .optional()
-    .default(true)
-    .describe(
-      'Whether to return to the starting point. Set to false for one-way trips.'
-    ),
-  geometries: z
-    .enum(['geojson', 'polyline', 'polyline6'])
-    .optional()
-    .default('geojson')
-    .describe('Format for route geometry'),
-  overview: z
-    .enum(['full', 'simplified', 'false'])
-    .optional()
-    .default('simplified')
-    .describe('Detail level of route geometry'),
-  steps: z
-    .boolean()
-    .optional()
-    .default(false)
-    .describe('Whether to include turn-by-turn instructions'),
-  annotations: z
-    .array(z.enum(['duration', 'distance', 'speed']))
-    .optional()
-    .describe('Additional metadata to include for each route segment'),
-  language: z
-    .string()
-    .optional()
-    .describe(
-      'Language for instructions (if steps=true). ISO 639-1 code (e.g., "en", "es").'
-    )
-});
+export const OptimizationInputSchema = z
+  .object({
+    coordinates: z
+      .array(coordinateSchema)
+      .min(2, 'At least 2 coordinates are required')
+      .max(12, 'Maximum 12 coordinates allowed for V1 API')
+      .describe(
+        'Array of {longitude, latitude} coordinate pairs to optimize a route through. ' +
+          'The V1 API supports 2-12 coordinates and returns the optimal visiting order.'
+      ),
+    profile: profileSchema
+      .optional()
+      .default('mapbox/driving')
+      .describe('Routing profile to use for optimization'),
+    source: z
+      .enum(['any', 'first'])
+      .optional()
+      .default('any')
+      .describe(
+        'Location to start the trip. "any" allows any coordinate, "first" forces the first coordinate as start.'
+      ),
+    destination: z
+      .enum(['any', 'last'])
+      .optional()
+      .default('any')
+      .describe(
+        'Location to end the trip. "any" allows any coordinate, "last" forces the last coordinate as end.'
+      ),
+    roundtrip: z
+      .boolean()
+      .optional()
+      .default(true)
+      .describe(
+        'Whether to return to the starting point. Set to false for one-way trips.'
+      ),
+    geometries: z
+      .enum(['geojson', 'polyline', 'polyline6'])
+      .optional()
+      .default('geojson')
+      .describe('Format for route geometry'),
+    overview: z
+      .enum(['full', 'simplified', 'false'])
+      .optional()
+      .default('simplified')
+      .describe('Detail level of route geometry'),
+    steps: z
+      .boolean()
+      .optional()
+      .default(false)
+      .describe('Whether to include turn-by-turn instructions'),
+    annotations: z
+      .array(z.enum(['duration', 'distance', 'speed']))
+      .optional()
+      .describe('Additional metadata to include for each route segment'),
+    language: z
+      .string()
+      .optional()
+      .describe(
+        'Language for instructions (if steps=true). ISO 639-1 code (e.g., "en", "es").'
+      )
+  })
+  .refine(
+    (data) =>
+      data.roundtrip !== false ||
+      (data.source === 'first' && data.destination === 'last'),
+    {
+      message:
+        "When roundtrip=false, source must be 'first' AND destination must be 'last' (Mapbox Optimization API requires both endpoints to be fixed for one-way trips).",
+      path: ['roundtrip']
+    }
+  );
 
 export type OptimizationInput = z.infer<typeof OptimizationInputSchema>;
diff --git a/src/tools/optimization-tool/OptimizationTool.ts b/src/tools/optimization-tool/OptimizationTool.ts
index ca640f58..b6ae9b28 100644
--- a/src/tools/optimization-tool/OptimizationTool.ts
+++ b/src/tools/optimization-tool/OptimizationTool.ts
@@ -1,7 +1,9 @@
 // Copyright (c) Mapbox, Inc.
 // Licensed under the MIT License.
 
+import { randomUUID } from 'node:crypto';
 import { SpanStatusCode } from '@opentelemetry/api';
+import { createUIResource } from '@mcp-ui/server';
 import { MapboxApiBasedTool } from '../MapboxApiBasedTool.js';
 import {
   OptimizationInputSchema,
@@ -14,6 +16,9 @@ import {
 import type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
 import type { ToolExecutionContext } from '../../utils/tracing.js';
 import type { HttpRequest } from '../../utils/types.js';
+import { isMcpUiEnabled } from '../../config/toolConfig.js';
+import { resolveMapboxPublicToken } from '../../utils/mapboxPublicToken.js';
+import { renderOptimizationAppHtml } from '../../resources/ui-apps/optimizationAppHtml.js';
 
 /**
  * OptimizationTool - Find optimal route through multiple coordinates (V1 API)
@@ -38,6 +43,15 @@ export class OptimizationTool extends MapboxApiBasedTool<
     idempotentHint: true,
     openWorldHint: true
   };
+  readonly meta = {
+    ui: {
+      resourceUri: 'ui://mapbox/optimization-app/index.html',
+      csp: {
+        connectDomains: ['https://*.mapbox.com', 'https://events.mapbox.com'],
+        resourceDomains: ['https://api.mapbox.com']
+      }
+    }
+  };
 
   constructor(params: { httpRequest: HttpRequest }) {
     super({
@@ -165,8 +179,33 @@ export class OptimizationTool extends MapboxApiBasedTool<
         validatedResult.waypoints.length
       );
 
+      const content: CallToolResult['content'] = [
+        { type: 'text' as const, text }
+      ];
+
+      if (isMcpUiEnabled()) {
+        const inlineHtml = await tryRenderOptimizationInlineHtml(
+          validatedResult,
+          input,
+          accessToken,
+          this.httpRequest
+        );
+        if (inlineHtml) {
+          content.push(
+            createUIResource({
+              uri: `ui://mapbox/optimization/${randomUUID()}`,
+              content: { type: 'rawHtml', htmlString: inlineHtml },
+              encoding: 'text',
+              uiMetadata: {
+                'preferred-frame-size': ['100%', '500px']
+              }
+            })
+          );
+        }
+      }
+
       return {
-        content: [{ type: 'text' as const, text }],
+        content,
         structuredContent: validatedResult,
         isError: false
       };
@@ -187,3 +226,52 @@ export class OptimizationTool extends MapboxApiBasedTool<
     }
   }
 }
+
+/**
+ * Bake the optimized trip into the shared iframe template for MCP-UI clients.
+ */
+async function tryRenderOptimizationInlineHtml(
+  result: OptimizationOutput,
+  _input: OptimizationInput,
+  accessToken: string,
+  httpRequest: HttpRequest
+): Promise<string | undefined> {
+  const trip = result.trips?.[0];
+  if (!trip?.geometry) return undefined;
+
+  const publicToken = await resolveMapboxPublicToken({
+    accessToken,
+    apiEndpoint: MapboxApiBasedTool.mapboxApiEndpoint,
+    httpRequest
+  });
+  if (!publicToken) return undefined;
+
+  // Sort waypoints by waypoint_index = position in optimized trip
+  const stops = (result.waypoints ?? [])
+    .map((wp, inputIndex) => ({ wp, inputIndex }))
+    .sort((a, b) => a.wp.waypoint_index - b.wp.waypoint_index)
+    .map(({ wp, inputIndex }, orderIndex) => ({
+      order: orderIndex + 1,
+      input_index: inputIndex,
+      location: wp.location as [number, number],
+      name: wp.name
+    }));
+
+  const parts: string[] = [];
+  if (typeof trip.distance === 'number') {
+    parts.push(`${(trip.distance / 1609.34).toFixed(1)} mi`);
+  }
+  if (typeof trip.duration === 'number') {
+    parts.push(`${Math.round(trip.duration / 60)} min`);
+  }
+  const summary = `Optimized trip: ${parts.length ? parts.join(', ') : `${stops.length} stops`}`;
+
+  return renderOptimizationAppHtml({
+    publicToken,
+    initialData: {
+      geometry: trip.geometry,
+      stops,
+      summary
+    }
+  });
+}
diff --git a/test/resources/ui-apps/OptimizationAppUIResource.test.ts b/test/resources/ui-apps/OptimizationAppUIResource.test.ts
new file mode 100644
index 00000000..cfe2088b
--- /dev/null
+++ b/test/resources/ui-apps/OptimizationAppUIResource.test.ts
@@ -0,0 +1,96 @@
+// Copyright (c) Mapbox, Inc.
+// Licensed under the MIT License.
+
+const SK_TOKEN = 'sk.eyJzdWIiOiJ0ZXN0IiwidSI6InRlc3R1c2VyIn0.signature';
+
+import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
+import { OptimizationAppUIResource } from '../../../src/resources/ui-apps/OptimizationAppUIResource.js';
+import { __resetMapboxPublicTokenCache } from '../../../src/utils/mapboxPublicToken.js';
+
+const fakeTokenList = [
+  {
+    id: 'cktest123',
+    usage: 'pk',
+    default: true,
+    token: 'pk.eyJ1IjoidGVzdHVzZXIifQ.fake-public-token',
+    scopes: ['styles:read', 'styles:tiles', 'fonts:read']
+  }
+];
+
+function makeOkJson(body: unknown): Partial<Response> {
+  return {
+    ok: true,
+    status: 200,
+    statusText: 'OK',
+    json: async () => body,
+    text: async () => JSON.stringify(body)
+  };
+}
+
+describe('OptimizationAppUIResource', () => {
+  beforeEach(() => {
+    __resetMapboxPublicTokenCache();
+    delete process.env.MAPBOX_PUBLIC_TOKEN;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('serves HTML with the mcp-app mime type and the public token baked in', async () => {
+    const httpRequest = vi.fn(async (url: string) => {
+      if (url.includes('tokens/v2/'))
+        return makeOkJson(fakeTokenList) as Response;
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+
+    const resource = new OptimizationAppUIResource({ httpRequest });
+
+    const result = await resource.read(
+      'ui://mapbox/optimization-app/index.html',
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        authInfo: { token: SK_TOKEN } as any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any
+    );
+
+    expect(result.contents).toHaveLength(1);
+    const entry = result.contents[0];
+    expect(entry.mimeType).toBe('text/html;profile=mcp-app');
+    expect(entry.uri).toBe('ui://mapbox/optimization-app/index.html');
+    expect(typeof entry.text).toBe('string');
+    expect(entry.text as string).toContain(
+      'pk.eyJ1IjoidGVzdHVzZXIifQ.fake-public-token'
+    );
+    expect(entry.text as string).toContain('mapbox-gl.js');
+    // Optimization-specific: numbered stop markers
+    expect(entry.text as string).toContain('stop-marker');
+
+    const meta = (entry as { _meta?: unknown })._meta as
+      | { ui?: { csp?: { workerDomains?: string[] } } }
+      | undefined;
+    expect(meta?.ui?.csp?.workerDomains).toContain('blob:');
+  });
+
+  it('falls back to MAPBOX_PUBLIC_TOKEN when the Tokens API call fails', async () => {
+    process.env.MAPBOX_PUBLIC_TOKEN = 'pk.fallback-token';
+
+    const httpRequest = vi.fn(
+      async () => ({ ok: false, status: 403 }) as Response
+    );
+
+    const resource = new OptimizationAppUIResource({ httpRequest });
+
+    const result = await resource.read(
+      'ui://mapbox/optimization-app/index.html',
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        authInfo: { token: SK_TOKEN } as any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any
+    );
+
+    expect(result.contents[0].text as string).toContain('pk.fallback-token');
+  });
+});
diff --git a/test/tools/optimization-tool/OptimizationTool.test.ts b/test/tools/optimization-tool/OptimizationTool.test.ts
index a347edab..30885836 100644
--- a/test/tools/optimization-tool/OptimizationTool.test.ts
+++ b/test/tools/optimization-tool/OptimizationTool.test.ts
@@ -113,6 +113,23 @@ describe('OptimizationTool V1 API', () => {
     expect(callUrl).toContain('optimized-trips/v1/mapbox/cycling/');
   });
 
+  it('rejects roundtrip=false without source=first and destination=last', async () => {
+    const { httpRequest } = setupHttpRequest();
+    const tool = new OptimizationTool({ httpRequest });
+    const result = await tool.run({
+      coordinates: [
+        { longitude: -122.4194, latitude: 37.7749 },
+        { longitude: -122.4195, latitude: 37.775 }
+      ],
+      roundtrip: false
+    });
+
+    expect(result.isError).toBe(true);
+    expect((result.content[0] as { text: string }).text).toContain(
+      'roundtrip=false'
+    );
+  });
+
   it('should handle source and destination options', async () => {
     const { httpRequest, mockHttpRequest } = setupHttpRequest({
       ok: true,