/** * MeshAPI model catalog — the live table on docs/reference/models-list. * * Reads `GET /v1/public/models` (unauthenticated, CORS-open) once per tab and * renders the whole widget into the `[data-models-catalog]` mount point, so the * page always matches the gateway with nothing to regenerate. A port of the * landing site's /models page (landing/src/pages/Models.tsx + * landing/src/lib/publicModels.ts); keep the two in step when either changes. * * Mintlify includes every `.js` file in the content directory on every page and * navigates client-side, so this file mounts lazily, keeps the fetch memoised * across route changes, and delegates all events off the mount point. * * Companion to models-catalog.css. */ const API_URL = "https://api.meshapi.ai/v1/public/models"; // Brand display names and logo URLs. A separate, much smaller document than the // model list on purpose: there are ~140 brands against ~1,200 models, so // repeating a logo URL on every row would bloat a payload that is already large. // The logos are hosted on a public asset bucket, so nothing is added to this repo. const BRANDS_URL = "https://api.meshapi.ai/v1/public/brands"; const MODALITY_TABS = [ { key: "all", label: "All" }, { key: "text", label: "Text" }, { key: "image", label: "Image" }, { key: "audio", label: "Audio" }, { key: "speech", label: "Speech" }, { key: "transcription", label: "Transcription" }, { key: "video", label: "Video" }, { key: "embedding", label: "Embed" }, { key: "realtime", label: "Realtime" }, ]; /** Each tab shows the columns that match its cost shape. Model is always first. */ const MODALITY_COLUMNS = { all: ["context", "input", "output", "cache", "capabilities"], text: ["context", "input", "output", "cache", "capabilities"], image: ["context", "input", "imageGen", "capabilities"], audio: ["context", "input", "output", "capabilities"], speech: ["context", "input", "output", "capabilities"], transcription: ["context", "input", "capabilities"], video: ["context", "input", "output", "capabilities"], embedding: ["context", "input", "capabilities"], realtime: ["context", "input", "output", "capabilities"], }; const COLUMN_LABELS = { context: "Context", input: "Input", output: "Output", cache: "Cache", imageGen: "Image Gen", capabilities: "Capabilities", }; const SORTABLE = { context: "context", input: "input", output: "output" }; /** * Fixed column widths (px). The sticky header lives in its own table, so both * tables need `table-layout: fixed` and an identical colgroup to stay aligned. * Model has no fixed width — it absorbs the leftover space, and the table only * scrolls horizontally once the viewport is narrower than the sum below. */ const MODEL_MIN_W = 240; // `context` is wider than its content needs: the "CONTEXT" header plus its sort // glyph is the longest thing in the column, and at 84px it collided with the // Model divider. const COL_W = { context: 108, input: 116, output: 116, cache: 140, imageGen: 128, capabilities: 300 }; const PROVIDER_COLORS = { openai: "#7C6DFA", anthropic: "#e8956a", google: "#4285F4", meta: "#0668E1", "meta-llama": "#0668E1", mistral: "#FF7000", mistralai: "#FF7000", deepseek: "#4D6BFE", qwen: "#6F42C1", alibaba: "#6F42C1", cohere: "#39594D", nvidia: "#76B900", microsoft: "#00A4EF", amazon: "#FF9900", perplexity: "#20808D", "z-ai": "#13c2c2", minimax: "#ff7a45", moonshot: "#7b6cff", moonshotai: "#7b6cff", xiaomi: "#ff6700", xai: "#cfd2d6", "x-ai": "#cfd2d6", upstage: "#5b8def", bytedance: "#325AB4", elevenlabs: "#1a1a1a", "black-forest-labs": "#d4b106", }; /** Lucide glyphs, inlined so the page pulls in no external assets. */ const ICON_PATHS = { text: '', image: '', audio: '', video: '', embedding: '', tools: '', thinking: '', structured: '', vision: '', batch: '', realtime: '', copy: '', check: '', search: '', clear: '', sortNone: '', sortAsc: '', sortDesc: '', }; const MODALITY_ICON = { text: "text", image: "image", audio: "audio", tts: "audio", stt: "audio", video: "video", embedding: "embedding" }; const MODALITY_ORDER = ["text", "image", "audio", "video", "embedding"]; function icon(name, size = 13) { return ( `` ); } function escapeHtml(value) { return String(value == null ? "" : value).replace( /[&<>"']/g, (character) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[character], ); } // ── Derived values (mirrors landing/src/lib/publicModels.ts) ──────────────── const num = (value) => { if (value === null || value === undefined || value === "") return null; const parsed = Number(value); return Number.isFinite(parsed) ? parsed : null; }; const AUDIO_TYPES = new Set(["audio", "tts", "stt"]); const isAudioFamily = (model) => AUDIO_TYPES.has(model.model_type); function inputPer1M(model) { const pricing = model.pricing || {}; const token = num(pricing.prompt_usd_per_1m); if (token !== null) return token; if (!isAudioFamily(model)) return null; const audio = num(pricing.audio_input_usd_per_1m); return audio !== null ? audio : num(pricing.transcription_usd_per_1m); } function outputPer1M(model) { const pricing = model.pricing || {}; const token = num(pricing.completion_usd_per_1m); if (token !== null) return token; return isAudioFamily(model) ? num(pricing.audio_output_usd_per_1m) : null; } const cacheReadPer1M = (model) => num((model.pricing || {}).cache_read_input_usd_per_1m); const cacheWritePer1M = (model) => num((model.pricing || {}).cache_write_input_usd_per_1m); const imageGenPerImage = (model) => num((model.pricing || {}).image_output_usd_per_image); const contextTokens = (model) => model.context_window ?? model.context_length ?? null; const brandOf = (model) => model.brand || model.id.split("/")[0]; const providerColor = (brand) => PROVIDER_COLORS[String(brand).toLowerCase()] || "var(--mesh-muted)"; function formatContext(tokens) { if (!tokens) return "—"; if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(tokens % 1e6 === 0 ? 0 : 1)}M`; if (tokens >= 1e3) return `${Math.round(tokens / 1e3)}K`; return String(tokens); } function fmtUsd(value) { if (value === null) return "—"; if (value === 0) return "$0"; if (value < 0.01) return `$${value.toPrecision(2)}`; if (value < 1) return `$${value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "")}`; return `$${value.toFixed(2)}`; } function fmtPerM(value, isFree) { if (isFree) return "Free"; if (value === null) return "—"; return `${fmtUsd(value)}/M`; } function fmtPerImage(value) { return value === null ? "—" : `${fmtUsd(value)}/img`; } function capabilitiesOf(model) { const caps = []; if (model.supports_tools) caps.push(["tools", "Tools"]); if (model.supports_thinking) caps.push(["thinking", "Reasoning"]); if (model.supports_structured_output) caps.push(["structured", "Structured output"]); if ((model.input_modalities || []).includes("image")) caps.push(["vision", "Vision"]); if (model.supports_batching) caps.push(["batch", "Batch"]); if (model.supports_realtime) caps.push(["realtime", "Realtime"]); return caps; } function matchesModality(model, tab) { switch (tab) { case "all": return true; case "speech": return model.model_type === "tts"; case "transcription": return model.model_type === "stt"; case "realtime": return !!model.supports_realtime; default: return model.model_type === tab; } } // ── Data ──────────────────────────────────────────────────────────────────── /** Memoised across client-side navigations so returning to the page is instant. */ let catalogRequest = null; let brandsRequest = null; /** Resolved brand index, populated before the first render. */ let brandIndex = new Map(); const wait = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms)); /** * The endpoint is rate limited at the edge, so a burst of traffic can bounce a * single page load with a 429. Back off and try twice more before giving up. */ async function fetchModels(attempt = 0) { try { const response = await fetch(API_URL, { headers: { Accept: "application/json" } }); if (!response.ok) throw new Error(`Failed to load models (${response.status})`); const data = await response.json(); return Array.isArray(data) ? data : []; } catch (error) { if (attempt >= 2) throw error; await wait(600 * 2 ** attempt); return fetchModels(attempt + 1); } } function loadModels() { if (!catalogRequest) { catalogRequest = fetchModels().catch((error) => { catalogRequest = null; // let Retry start over throw error; }); } return catalogRequest; } /** * Brand slug -> { display_name, icon_url, icon_url_dark }, with the API's alias * map folded in so a non-canonical brand value (`deepseek-ai`, `mistralai`, a * retired `~openai`) still finds its logo. * * Best-effort by design: logos are decoration, so a failure here resolves to an * empty index and every row falls back to its initials. It must never keep the * price table off the page. */ async function fetchBrands() { try { const response = await fetch(BRANDS_URL, { headers: { Accept: "application/json" } }); if (!response.ok) throw new Error(String(response.status)); const data = await response.json(); const index = new Map(); for (const entry of data.brands || []) index.set(entry.slug, entry); for (const [alias, canonical] of Object.entries(data.aliases || {})) { const target = index.get(canonical); if (target) index.set(alias, target); } return index; } catch { return new Map(); } } function loadBrands() { if (!brandsRequest) brandsRequest = fetchBrands(); return brandsRequest; } // ── Rendering ─────────────────────────────────────────────────────────────── const state = { tab: "all", provider: "all", search: "", sortKey: "context", sortDir: "desc" }; function sortValue(model, key) { if (key === "context") return contextTokens(model); if (key === "input") return inputPer1M(model); return outputPer1M(model); } function selectModels(models) { let rows = models.filter((model) => matchesModality(model, state.tab)); if (state.provider !== "all") { rows = rows.filter((model) => brandOf(model) === state.provider); } const query = state.search.trim().toLowerCase(); if (query) { const terms = query.split(/\s+/); rows = rows.filter((model) => { const haystack = `${model.name || ""} ${model.id} ${brandOf(model)}`.toLowerCase(); return terms.every((term) => haystack.includes(term)); }); } const direction = state.sortDir === "asc" ? 1 : -1; return rows.sort((a, b) => { const left = sortValue(a, state.sortKey); const right = sortValue(b, state.sortKey); // Unpriced rows sink to the bottom whichever way the column is sorted. if (left === null && right === null) return (a.name || "").localeCompare(b.name || ""); if (left === null) return 1; if (right === null) return -1; return (left - right) * direction; }); } function cellHtml(model, column) { switch (column) { case "context": { const tokens = contextTokens(model); return `${tokens ? formatContext(tokens) : "—"}`; } case "input": return priceHtml(fmtPerM(inputPer1M(model), model.is_free), model.is_free); case "output": return priceHtml(fmtPerM(outputPer1M(model), model.is_free), model.is_free); case "imageGen": return priceHtml(fmtPerImage(imageGenPerImage(model)), false); case "cache": { const read = cacheReadPer1M(model); const write = cacheWritePer1M(model); if (read === null && write === null) return '—'; return ( '

' + `

R ${fmtPerM(read, false)}

` + `

W ${fmtPerM(write, false)}

` + "

" ); } case "capabilities": { const outputs = new Set(model.output_modalities || []); const modalities = MODALITY_ORDER.filter((name) => outputs.has(name)); const caps = capabilitiesOf(model); if (!modalities.length && !caps.length) return '—'; const chip = (name, label) => `${icon(name)}`; return ( '' + modalities.map((name) => chip(MODALITY_ICON[name] || "text", name)).join("") + (modalities.length && caps.length ? '' : "") + caps.map(([key, label]) => chip(key, label)).join("") + "" ); } default: return ""; } } function priceHtml(text, isFree) { return `${escapeHtml(text)}`; } /** * The brand cell: the vendor's logo, or the initials treatment when we hold no * logo for it. Kept as one function so both paths share the same box. * * Mono logos are invisible on a dark background and an `` cannot inherit * page colour, so the API publishes a separate white file for exactly those; the * light and dark sources are both emitted and CSS picks one per colour scheme. * `onerror` clears the box so a URL the bucket does not have degrades to nothing * rather than a broken-image glyph mid-table. */ function avatarHtml(brand) { const info = brandIndex.get(String(brand).trim().toLowerCase()); const label = info ? info.display_name : brand; if (info && info.icon_url) { const light = escapeHtml(info.icon_url); const dark = escapeHtml(info.icon_url_dark || info.icon_url); return ( `` + `` + `` + "" ); } const accent = providerColor(brand); const initials = String(brand).replace(/[^a-z0-9]/gi, "").slice(0, 2) || "??"; return ( `` ); } function rowHtml(model, columns) { const brand = brandOf(model); return ( '' + '' + '

' + avatarHtml(brand) + '

' + `

${escapeHtml(model.name || model.id)}

` + '

' + `${escapeHtml(model.id)}` + `` + "

" + columns.map((column) => `${cellHtml(model, column)}`).join("") + "" ); } function toolbarHtml(providers) { const tabs = MODALITY_TABS.map( (tab) => ``, ).join(""); // The option VALUE stays the raw brand — the filter compares it against // `brandOf(model)`. Only the label is prettified ("Black Forest Labs" for // `black-forest-labs`), falling back to the slug for an uncurated brand. const options = [``] .concat( providers.map((name) => { const info = brandIndex.get(String(name).trim().toLowerCase()); const label = info ? info.display_name : name; return ``; }), ) .join(""); return ( '" ); } function headHtml(columns) { const cells = columns.map((column) => { const sortKey = SORTABLE[column]; const active = sortKey && state.sortKey === sortKey; const glyph = !sortKey ? "" : active ? (state.sortDir === "asc" ? "sortAsc" : "sortDesc") : "sortNone"; const marker = glyph ? `${icon(glyph, 11)}` : ""; return ( `${COLUMN_LABELS[column]}${marker}` ); }); return `Model${cells.join("")}`; } function colgroupHtml(columns) { return `${columns.map((column) => ``).join("")}`; } function tableStyle(columns) { const minWidth = MODEL_MIN_W + columns.reduce((sum, column) => sum + COL_W[column], 0); return `min-width:${minWidth}px`; } function renderTable(mount, models) { const columns = MODALITY_COLUMNS[state.tab]; const rows = selectModels(models); const head = mount.querySelector("[data-headscroll]"); const body = mount.querySelector("[data-table]"); if (!head || !body) return; const shared = `${colgroupHtml(columns)}`; const style = tableStyle(columns); head.innerHTML = `${shared}${headHtml(columns)}

`; body.innerHTML = rows.length ? `${shared}${rows .map((model) => rowHtml(model, columns)) .join("")}

` : '

No models match your filters.

'; head.scrollLeft = body.scrollLeft; const count = mount.querySelector("[data-count]"); if (count) { count.textContent = rows.length === models.length ? `${models.length} models` : `${rows.length} of ${models.length} models`; } const hasFilters = state.search !== "" || state.provider !== "all" || state.tab !== "all"; const reset = mount.querySelector("[data-clear-all]"); if (reset) reset.hidden = !hasFilters; const clearSearch = mount.querySelector("[data-clear-search]"); if (clearSearch) clearSearch.hidden = state.search === ""; } function renderCatalog(mount, models) { const providers = [...new Set(models.map(brandOf).filter(Boolean))].sort((a, b) => a.localeCompare(b)); mount.innerHTML = '

' + toolbarHtml(providers) + '

' + '

'; renderTable(mount, models); // The header sits in its own table so it can stay sticky; mirror the body's // horizontal scroll onto it so the columns never drift apart. const body = mount.querySelector("[data-table]"); const head = mount.querySelector("[data-headscroll]"); body.addEventListener("scroll", () => { head.scrollLeft = body.scrollLeft; }); alignStickyTop(mount); if ("ResizeObserver" in window) { new ResizeObserver(() => alignStickyTop(mount)).observe(document.documentElement); } mount.addEventListener("click", (event) => { const copyButton = event.target.closest("[data-copy-id]"); if (copyButton) { const id = copyButton.getAttribute("data-copy-id"); navigator.clipboard ?.writeText(id) .then(() => { copyButton.classList.add("is-copied"); copyButton.innerHTML = icon("check", 12); window.setTimeout(() => { copyButton.classList.remove("is-copied"); copyButton.innerHTML = icon("copy", 12); }, 1500); }) .catch((error) => console.error("Failed to copy model ID", error)); return; } const tab = event.target.closest("[data-tab]"); if (tab) { state.tab = tab.getAttribute("data-tab"); mount.querySelectorAll("[data-tab]").forEach((button) => { const active = button === tab; button.classList.toggle("is-active", active); button.setAttribute("aria-selected", String(active)); }); renderTable(mount, models); return; } const header = event.target.closest("[data-sort]"); if (header) { const key = header.getAttribute("data-sort"); if (state.sortKey === key) { state.sortDir = state.sortDir === "asc" ? "desc" : "asc"; } else { state.sortKey = key; state.sortDir = "desc"; } renderTable(mount, models); return; } if (event.target.closest("[data-clear-search]")) { state.search = ""; const input = mount.querySelector("[data-search]"); if (input) input.value = ""; renderTable(mount, models); return; } if (event.target.closest("[data-clear-all]")) { state.tab = "all"; state.provider = "all"; state.search = ""; const input = mount.querySelector("[data-search]"); if (input) input.value = ""; const select = mount.querySelector("[data-provider]"); if (select) select.value = "all"; mount.querySelectorAll("[data-tab]").forEach((button) => { const active = button.getAttribute("data-tab") === "all"; button.classList.toggle("is-active", active); button.setAttribute("aria-selected", String(active)); }); renderTable(mount, models); } }); mount.addEventListener("input", (event) => { if (!event.target.closest("[data-search]")) return; state.search = event.target.value; renderTable(mount, models); }); mount.addEventListener("change", (event) => { if (!event.target.closest("[data-provider]")) return; state.provider = event.target.value; renderTable(mount, models); }); } /** * Pin the toolbar to the very top of the scrollport. Mintlify scrolls `

`, * not the window, and `main` carries a top padding — a plain `top: 0` would park * the toolbar below that padding band and let rows scroll past above it. */ function alignStickyTop(mount) { let node = mount.parentElement; while (node && node !== document.documentElement) { if (/(auto|scroll)/.test(getComputedStyle(node).overflowY)) { const padding = parseFloat(getComputedStyle(node).paddingTop) || 0; mount.style.setProperty("--models-sticky-top", `${-padding}px`); return; } node = node.parentElement; } mount.style.setProperty("--models-sticky-top", "0px"); } function mountCatalog(mount) { mount.dataset.mounted = "true"; mount.innerHTML = '

Loading the model catalog…

'; // Both requests go out together, and the brand index is only ever resolved // (never rejected), so a logo outage cannot stop the table from rendering. Promise.all([loadModels(), loadBrands()]) .then(([models, brands]) => { brandIndex = brands; renderCatalog(mount, models); }) .catch(() => { mount.innerHTML = '

' + "

Couldn't load the model catalog.

" + '

' + '' + '' + "Browse models on meshapi.ai

"; mount.querySelector("[data-retry]")?.addEventListener("click", () => mountCatalog(mount)); }); } /** * Mount whenever an un-mounted catalog appears. Client-side navigation away and * back inserts a fresh node, so `data-mounted` — not a module-level boolean — * is what tells us this one still needs wiring up. */ function mountIfNeeded() { const mount = document.querySelector("[data-models-catalog]"); if (mount && !mount.dataset.mounted) mountCatalog(mount); } new MutationObserver(mountIfNeeded).observe(document.documentElement, { childList: true, subtree: true }); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", mountIfNeeded); } else { mountIfNeeded(); } window.addEventListener("load", mountIfNeeded);