// MomentIQ Home — V2: "Console" — light-themed IDE-feeling layout. // Workflow rail (left) + form editor (center) + dark inspector (right). // Below: API table, timeline viz (waveform + frame strip), flow-diagram use cases. const v2Pad = 'calc(48px * var(--dens, 1))'; const v2PadY = 'calc(72px * var(--dens, 1))'; const V2Hero = () =>
MomentIQ Console · live

API PLAY GROUND: Find the moments that matter — without writing code first.

Pick a workflow on the left. Tweak the parameters. See real output and the exact request body. Ship the call. 

▶ Run example View Docs →
Authorization: Bearer miq_live_•••• same key · all endpoints price preview hard caps
; // -- API groups (ported from V1's "Modular endpoints, mix freely" section) -- // Three group columns. Each group is color-coded via GROUPS[g].color — the // kicker, the group dot, and every endpoint path use that color. Endpoint // paths are real tags that link to their docs-*.html page. const V2ApiGroups = () => { const groups = Object.values(GROUPS).map(g => ({ id: g.id, title: g.name, kicker: g.pathPrefix, color: g.color, desc: g.desc, items: endpointIdsByGroup(g.id).map(id => { const ep = ENDPOINTS[id]; const price = g.id === 'timeline' ? 'low / req' : `$${priceFor(id).toFixed(2)}/min`; return { id, path: ep.path, desc: ep.short.replace(/\.$/, '').toLowerCase(), price }; }), })); return (
{groups.map(g => (

{g.title}

{g.kicker}

{g.desc}

{g.items.map((it, i) => ( { e.currentTarget.style.background = `color-mix(in oklch, ${g.color} 7%, transparent)`; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }} >
{it.path}
{it.desc}
{it.price} ))}
Try in Playground View docs →
))}
); }; // -- API table ------------------------------------------------------------- const V2ApiTable = () => { const rows = endpointIds().map(id => { const ep = ENDPOINTS[id]; const price = ep.group === 'timeline' ? 'low / req' : `$${priceFor(id).toFixed(2)} / ${ep.group} min`; return [ep.group, ep.path, ep.short.replace(/\.$/, '').toLowerCase(), price]; }); const groupColor = Object.fromEntries(Object.values(GROUPS).map(g => [g.id, g.color])); return (
All 19 Video 8 Audio 8 Timeline 3 Search endpoints… ⌘K
GroupEndpointDescriptionPriceActions
{rows.map((r, i) =>
{r[0]} {r[1]} {r[2]} {r[3]}
Try ▸ Docs ↗
)}
); }; // -- Timeline viz: waveform + frame strip ---------------------------------- // // Color rule: every per-signal element is tinted by the group that *produces* // the signal. silence/speakers/laughter come from /v1/audio so they pick up // the audio color; cuts come from /v1/video; suggested clips comes from // /v1/timeline. groupColorForStep() handles the lookup so adding a new lane // just needs the right id/name and the color follows. const groupColorForStep = (stepOrId) => { // Accepts 'video/best-frames', 'detect-laughter', or a bare lane name. if (!stepOrId) return GROUPS.timeline.color; const s = String(stepOrId).toLowerCase(); if (window.ENDPOINTS[s]) return GROUPS[window.ENDPOINTS[s].group].color; // Try matching the bare suffix against any endpoint id (e.g. 'detect-laughter'). const id = Object.keys(window.ENDPOINTS).find(k => k.endsWith('/' + s)); if (id) return GROUPS[window.ENDPOINTS[id].group].color; // Lane-name fallbacks for visual labels that don't map 1:1 to an endpoint. if (/silence|speaker|laughter|music|energy|chunk|isolate/.test(s)) return GROUPS.audio.color; if (/clip|frame|cut|thumb/.test(s)) return GROUPS.video.color; return GROUPS.timeline.color; }; // Returns the canonical docs href for a step or bare endpoint suffix. Falls // back to the docs landing page if nothing matches. const docsHrefForStep = (stepOrId) => { if (!stepOrId) return 'docs.html'; const s = String(stepOrId).toLowerCase(); if (window.ENDPOINTS[s]) return docsHrefFor(s); const id = Object.keys(window.ENDPOINTS).find(k => k.endsWith('/' + s)); return id ? docsHrefFor(id) : 'docs.html'; }; // Soft tint at a fixed alpha so the saturated group colors don't clash when // they sit next to each other on the same canvas. const tint = (c, pct = 14) => `color-mix(in oklch, ${c} ${pct}%, transparent)`; const V2TimelineViz = () => { const cVid = GROUPS.video.color; const cAud = GROUPS.audio.color; const cTl = GROUPS.timeline.color; return (
{/* legend so the color → group mapping is unambiguous */}
{[['video', cVid], ['audio', cAud], ['timeline', cTl]].map(([name, c]) => ( /v1/{name}/* ))}
{/* frame strip — video group */}
frames
{Array.from({ length: 16 }).map((_, i) => )}
{/* waveform with laughter highlights — audio group */}
waveform · laughter
{Array.from({ length: 200 }).map((_, i) => { const h = 6 + Math.abs(Math.sin(i * 0.21) + Math.sin(i * 0.07) * 0.6) * 32; return ( ); })} {[18, 54, 76].map((p, i) => (
laughter
))}
{/* signal lanes — group color encoded per lane */} {[ { name: 'silence', endpoint: 'audio/detect-silence', color: cAud, kind: 'bars', ranges: [[0.04, 0.07], [0.20, 0.25], [0.43, 0.46], [0.62, 0.66], [0.79, 0.82]] }, { name: 'speakers', endpoint: 'audio/detect-speakers', color: cAud, kind: 'speak' }, { name: 'cuts', endpoint: 'video/detect-cuts', color: cVid, kind: 'ticks', marks: [0.12, 0.34, 0.51, 0.68, 0.82] }, { name: 'suggested clips', endpoint: 'timeline/suggest-ranges', color: cTl, kind: 'range', ranges: [[0.16, 0.28], [0.52, 0.62], [0.74, 0.84]] } ].map((ln, i) => (
{ln.name}
{ln.kind === 'speak' && (
{[[0.18, 'A'], [0.16, 'B'], [0.10, 'A'], [0.22, 'C'], [0.14, 'A'], [0.20, 'B']].map(([w, s], k) => { // 3 speakers, all from /v1/audio — tints of the audio color // keep them distinguishable without breaking the group palette. const bg = s === 'A' ? tint(cAud, 22) : s === 'B' ? tint(cAud, 34) : tint(cAud, 50); return
{s}
; })}
)} {ln.kind === 'range' && ln.ranges.map(([a, b], k) => (
clip {k + 1}
))} {ln.kind === 'bars' && ln.ranges.map(([a, b], k) => (
))} {ln.kind === 'ticks' && ln.marks.map((m, k) => (
))}
))}
); }; // -- Use cases: flow diagram ----------------------------------------------- const V2UseCases = () => { const flows = [ { name: 'Podcast clip engine', steps: ['detect-laughter', 'detect-silence', 'suggest-ranges', 'clip-window', 'thumbnail-score'], out: 'short-form clips + cover frames' }, { name: 'AI meeting memory', steps: ['detect-speakers', 'semantic-chunks', 'text-frames', 'timeline/merge'], out: 'searchable, speaker-tagged minutes' }, { name: 'Lecture study tool', steps: ['text-frames', 'detect-cuts', 'semantic-chunks', 'timeline/merge'], out: 'slide-aligned notes + jumps' }]; return (
{flows.map((f) => (
{f.name}
copy as recipe →
{f.steps.map((s, i) => { // Each step box is colored by which group its endpoint // belongs to (video / audio / timeline) so the chain reads // as "audio → audio → timeline → video → video" at a glance. const c = groupColorForStep(s); return (
{s}
step {i + 1}
 {i < f.steps.length - 1 && } ); })}
{f.out}
))}
); }; // -- Docs preview + pricing + CTA ------------------------------------------ const V2Bottom = () => <>
{[ ['Video', 'best frames · cuts · text frames', '$0.01–0.05', '/ video min'], ['Audio', 'silence · laughter · speakers', '$0.01–0.05', '/ audio min'], ['Actions', 'clip · isolate speech', '$0.02–0.08', '/ processed min'], ['Timeline', 'merge · nearest · suggest', 'low fixed', '/ request']]. map(([cat, ex, price, unit]) =>
{cat}
{ex}
{price} {unit}
)}

Stop writing media plumbing.
Start finding moments.

Free trial credits. Same key for video, audio, and timeline. Hard caps so the bill never surprises you.

▶ Open the Playground Read the Docs →
; const HomeV2 = () =>
; window.HomeV2 = HomeV2;