DocsGuide
Product

Frontend Guide

The product-facing integration guide for building a customer-friendly MidSync frontend.

Guide for multiple API surfacesScope: api.generate

Best for

Product, frontend, and design teams shaping the overall generation experience.

Stable docs plus runtime-driven UI
Friendly validation and pricing preview
Separating video, image, usage, and docs clearly

Overview

This guide defines the frontend-friendly integration direction for MidSync.

The main rule is: docs stay explicit, runtime metadata drives rendering, quote drives pricing, and generate returns final charged points.

Authentication strategy

  • Customer-facing API usage should use Authorization: Bearer <midsync_api_key>.
  • Your own product frontend should call MidSync backend, not upstream providers directly from the browser.
  • Backend should handle routing, point deduction, pricing metadata, and validation errors.

Product UX principles

  • Load runtime metadata first.
  • Render only fields supported by the selected model.
  • Use progressive disclosure for advanced settings.
  • Validate inline before submit.
  • Recalculate price when pricing-sensitive fields change.
  • Show final charged points after create.

Frontend-ready API groups

Group
Runtime metadata
Quote
Generate
Status
Video
GET /unified-video/models
POST /unified-video/quote
POST /unified-video/generate
Callback first, GET /unified-video/:taskId/status as fallback
Usage
N/A
N/A
GET /v1/usage/logs and GET /v1/usage/summary
N/A

Validation and error UX

  • Validate locally when the rule is already available from runtime metadata.
  • Call /quote for the authoritative video pricing answer.
  • Keep the primary action disabled when the configuration is invalid.
  • Use friendly error messages that explain what is wrong and how to fix it.

Information architecture

  • Generation should focus on Video.
  • Billing should show point balance, quote preview, and recent usage.
  • History should show generation history and task status.
  • Docs should stay stable and human-readable even when runtime metadata changes.

Ready to test with your own key?

Create a general API key in Settings, then come back here to copy a request example.

Open API Keys