ドキュメントガイド
製品
Frontend Guide
MidSync のフロントエンドを raw API フォームではなく、製品体験として作るための統合ガイドです。
複数 API の統合ガイド権限: api.generate
向いている用途
プロダクト、フロントエンド、デザインチーム。
安定した docs と runtime metadata の分離
やさしいバリデーションと価格プレビュー
動画、画像、利用状況を分けた設計
概要
これは MidSync のフロントエンド統合全体ガイドです。
基本方針は、docs は安定して明示的に保ち、runtime metadata が UI を駆動し、quote が価格を決め、generate が最終課金点数を返すことです。
認証戦略
- 顧客向け API は Authorization: Bearer <midsync_api_key> を使います。
- 自社プロダクトのフロントエンドは MidSync backend を呼び、ブラウザから provider API を直接呼ばないでください。
- backend が routing、ポイント控除、価格 metadata、validation error を担当します.
プロダクト UX 原則
- 先に runtime metadata を読み込む。
- 選択モデルで使える項目だけを表示する。
- 高度な設定は progressive disclosure にする。
- 送信前に inline validation を行う。
- 価格に関わる変更時に見積もりを更新する。
- 生成後に最終 charged points を表示する。
フロントエンド向け API 分類
分類
Runtime metadata
Quote
Generate
Status
Video
GET /unified-video/models
POST /unified-video/quote
POST /unified-video/generate
callback を主、GET /unified-video/:taskId/status を fallback に使う
Usage
不要
不要
GET /v1/usage/logs と GET /v1/usage/summary
不要
推奨フロントエンドフロー
- Video: /models を読み、モデル別項目を描画し、価格に影響する変更で /quote を呼び、/generate の後は callback を主な完了通知として使います。
- Usage: ダッシュボードでポイント残高、利用履歴、集計カードを表示します。
バリデーションとエラー UX
- metadata にある規則は前端で先に検証する。
- 動画価格は /quote を最終基準にする。
- 無効な構成では主要アクションを無効化する。
- エラーは何が悪く、どう直すかを明確に書く。
情報設計
- Generation は現在 Video に集中する。
- Billing はポイント、見積もり、最近の利用を見せる。
- History はタスク状態と生成履歴を見せる。
- Docs は安定して読みやすく保ち、動的描画は runtime metadata に任せる。
すぐに試したいですか？
Settings で general API key を作成してから、ここに戻ってリクエスト例をコピーしてください。