Rendervid AI統合 - Claude Code、Cursor、MCPで動画を生成

Rendervid AI Integration MCP Claude Code

はじめに:AI駆動の動画生成

プログラムで動画を作成することは、従来、動画コーデック、アニメーションフレームワーク、レンダリングパイプラインに関する深い知識を必要としてきました。Rendervidは、JSONテンプレートを受け入れて完成した動画を出力することで、この複雑さを排除します。これを自然言語を理解するAIエージェントと組み合わせると、強力なものが得られます。平易な英語で動画を説明し、レンダリングされたMP4を受け取る能力です。

Rendervidは、AI言語モデルと動画制作の間のギャップを埋めます。コードを書いたり、キーフレームを設計したり、動画エディタを学んだりする代わりに、AIエージェントに欲しいものを伝えます。エージェントは有効なJSONテンプレート を生成し、それを検証し、Rendervidのエンジンを通じて最終出力をレンダリングします。全体のプロセスは単一の会話で行われます。

この統合は、**Model Context Protocol(MCP)**に基づいて構築されています。これは、AIツールが構造化されたインターフェースを通じて外部サービスと対話できるようにするオープン標準です。RendervidのMCPサーバーは、レンダリング、検証、テンプレート検索、ドキュメントをカバーする11のツールを公開し、AIエージェントがプロフェッショナルな動画コンテンツを自律的に制作するために必要なすべてを提供します。


Model Context Protocol(MCP)とは?

Model Context Protocolは、AIアシスタントに外部ツールやデータソースへの構造化されたアクセスを提供するために開発されたオープン標準です。AIモデルがAPIフォーマットを推測したり、RESTエンドポイントを呼び出すコードを生成したりすることに依存するのではなく、MCPは、AIエージェントが実行時にクエリできる型付きの検出可能なインターフェースを提供します。

動画生成において、MCPは重要な問題を解決します。AIエージェントは、有効な出力を生成する前に、何が可能かを知る必要があります。MCPがなければ、AIモデルはRendervidの特定のテンプレート形式でトレーニングされ、利用可能なすべてのアニメーションプリセットを知り、各レイヤータイプの制約を理解する必要があります。MCPを使用すると、エージェントは単にget_capabilitiesを呼び出し、すべてのコンポーネントのJSONスキーマを含むシステムの完全な説明を受け取ります。

MCPがAI動画生成にとって重要な理由

  • ランタイム検出:AIエージェントは、トレーニング時ではなく、接続した瞬間にRendervidができることを学習します。これは、新機能が再トレーニングなしで即座に利用可能になることを意味します。
  • 型安全性:すべてのツールには定義された入力および出力スキーマがあります。AIエージェントは、どのパラメータが必要で、どの型でなければならないかを正確に知っています。
  • レンダリング前の検証:テンプレートを送信して動作することを期待する代わりに、エージェントは最初にテンプレートを検証し、レンダリングに時間を費やす前に問題を修正できます。
  • ツールの組み合わせ可能性:AIエージェントはツールを連鎖させることができ、list_examplesを呼び出して開始テンプレートを見つけ、それを変更し、validate_templateを呼び出してチェックし、その後render_videoを呼び出して出力を生成します。すべて単一の会話ターンで行えます。

MCPサーバーツールリファレンス

RendervidのMCPサーバーは、レンダリング検証と検出ドキュメントの3つのカテゴリに整理された11のツールを公開します。各ツールは、動画コンテンツを生成する際にAIエージェントに最大限の自律性を与えるように設計されています。

レンダリングツール

これらのツールは、JSONテンプレートから動画および画像出力の実際の制作を処理します。

render_video

JSONテンプレートから完全な動画ファイルを生成します。これは、MP4、WebM、またはMOV出力を生成するための主要なレンダリングツールです。

パラメータ:

  • template(オブジェクト、必須) – シーン、レイヤー、アニメーション、出力設定を定義する完全なJSONテンプレート。
  • inputs(オブジェクト、オプション) – テンプレート変数置換のキーと値のペア。
  • output_format(文字列、オプション) – 出力フォーマット:mp4webm、またはmov。デフォルトはmp4

AIエージェントによる使用例:

{
  "tool": "render_video",
  "arguments": {
    "template": {
      "outputSettings": {
        "width": 1080,
        "height": 1920,
        "fps": 30,
        "duration": 10
      },
      "scenes": [
        {
          "duration": 10,
          "layers": [
            {
              "type": "text",
              "text": "Summer Sale - 50% Off",
              "fontSize": 72,
              "fontFamily": "Montserrat",
              "color": "#FFFFFF",
              "position": { "x": 540, "y": 960 },
              "animations": [
                {
                  "type": "fadeInUp",
                  "duration": 0.8,
                  "delay": 0.2
                }
              ]
            }
          ]
        }
      ]
    },
    "output_format": "mp4"
  }
}

戻り値: レンダリングされた動画ファイルへのURLまたはファイルパス。


render_image

JSONテンプレートから単一のフレームまたは静止画像を生成します。サムネイル、ソーシャルメディアグラフィック、ポスターフレーム、静的マーケティング資料の作成に便利です。

パラメータ:

  • template(オブジェクト、必須) – 画像構成を定義するJSONテンプレート。
  • inputs(オブジェクト、オプション) – テンプレート変数置換値。
  • output_format(文字列、オプション) – 出力フォーマット:pngjpeg、またはwebp。デフォルトはpng
  • frame(数値、オプション) – レンダリングするフレーム(アニメーションテンプレートから特定の瞬間を抽出する場合)。

render_imagerender_videoのどちらを使用するか:

  • 静的出力にはrender_imageを使用:サムネイル、バナー、ソーシャルメディア投稿、プレゼンテーションスライド。
  • モーションのあるものにはrender_videoを使用:アニメーション、トランジション、オーディオ、ビデオクリップ。

start_render_async

長時間動画(通常30秒以上)の非同期レンダリングジョブを開始します。レンダリングが同期的に完了するのを待つ代わりに、このツールはcheck_render_statusでポーリングできるジョブIDを返します。

パラメータ:

  • template(オブジェクト、必須) – 完全なJSONテンプレート。
  • inputs(オブジェクト、オプション) – テンプレート変数値。
  • output_format(文字列、オプション) – 希望する出力フォーマット。

戻り値: check_render_statusおよびlist_render_jobsで使用できるjob_id文字列。

非同期レンダリングを使用する場合:

  • 30秒以上の動画
  • 多くのシーンまたは複雑なアニメーションを含むテンプレート
  • 複数のジョブを送信して後で結果を収集するバッチレンダリングワークフロー
  • 長時間実行される同期リクエストがタイムアウトする可能性のあるクラウドレンダリング環境

check_render_status

start_render_asyncで開始された非同期レンダリングジョブの現在のステータスをチェックします。

パラメータ:

  • job_id(文字列、必須) – start_render_asyncによって返されたジョブID。

戻り値: 以下を含むオブジェクト:

  • statusqueuedrenderingcompleted、またはfailedのいずれか。
  • progress – レンダリングの進行状況を示すパーセンテージ(0-100)。
  • output_url – 完成した動画のURL(statuscompletedの場合のみ存在)。
  • error – ジョブが失敗した場合のエラーメッセージ。

ポーリングワークフローの例:

AIエージェント:
1. start_render_async → job_id: "abc-123"
2. check_render_status("abc-123") → status: "rendering", progress: 35
3. check_render_status("abc-123") → status: "rendering", progress: 78
4. check_render_status("abc-123") → status: "completed", output_url: "https://..."

list_render_jobs

アクティブおよび完了したすべての非同期レンダリングジョブをリストします。バッチレンダリング操作の監視や最近の出力のレビューに便利です。

パラメータ:

  • status_filter(文字列、オプション) – ステータスでフィルタリング:queuedrenderingcompletedfailed、またはall。デフォルトはall
  • limit(数値、オプション) – 返すジョブの最大数。

戻り値: ジョブオブジェクトの配列。各オブジェクトにはjob_idstatusprogresscreated_at、およびoutput_url(完了している場合)が含まれます。


検証と検出ツール

これらのツールは、AIエージェントがRendervidができることを理解し、レンダリング前にテンプレートが正しいことを確認するのに役立ちます。

validate_template

レンダリング前にJSONテンプレートを検証します。このツールは、テンプレートの構造、フィールドタイプ、値の制約をチェックし、メディアURL(画像、動画、オーディオファイル)がアクセス可能かどうかも検証します。レンダリング前に検証を実行することで、レンダリングプロセス中に失敗するテンプレートで時間を無駄にすることを防ぎます。

パラメータ:

  • template(オブジェクト、必須) – 検証するJSONテンプレート。
  • check_urls(ブール値、オプション) – メディアURLがアクセス可能かどうかを確認するかどうか。デフォルトはtrue

戻り値: 以下を含むオブジェクト:

  • valid – テンプレートが有効かどうかを示すブール値。
  • errors – 見つかった各問題のpathmessageseverityを含むエラーオブジェクトの配列。
  • warnings – 重大ではない問題(例:未使用の変数、非常に大きな寸法)の警告オブジェクトの配列。

検証がキャッチするもの:

  • 必須フィールドの欠落(例:durationのないシーン)
  • 無効なフィールドタイプ(例:数値が期待される場所に文字列)
  • 不明なレイヤータイプまたはアニメーションプリセット
  • 壊れているまたはアクセスできないメディアURL(画像、動画、オーディオファイル)
  • 範囲外の値(例:負の寸法、最大値を超えるfps)
  • テンプレート変数の構文エラー

検証レスポンスの例:

{
  "valid": false,
  "errors": [
    {
      "path": "scenes[0].layers[2].src",
      "message": "URL returned HTTP 404: https://example.com/missing-image.png",
      "severity": "error"
    },
    {
      "path": "scenes[1].duration",
      "message": "Scene duration must be a positive number",
      "severity": "error"
    }
  ],
  "warnings": [
    {
      "path": "outputSettings.width",
      "message": "Width 7680 is very large and may result in slow rendering",
      "severity": "warning"
    }
  ]
}

get_capabilities

Rendervidができることすべての包括的な説明を返します。これは通常、AIエージェントが動画生成タスクを開始するときに最初に呼び出すツールです。レスポンスには、利用可能なレイヤータイプ、アニメーションプリセット、イージング関数、フィルター、出力フォーマット、およびそれらのJSONスキーマが含まれます。

パラメータ: なし。

戻り値: 以下を含む構造化されたオブジェクト:

  • layerTypes – 利用可能なすべてのレイヤータイプ(text、image、video、shape、audio、group、lottie、custom)とそのJSONスキーマおよび設定可能なプロパティ。
  • animations – カテゴリ別にグループ化されたすべてのアニメーションプリセット(entrance、exit、emphasis、keyframe)と説明および設定可能なパラメータ。
  • easingFunctions – 説明と使用例を含む30以上のすべてのイージング関数。
  • filters – パラメータ範囲を含む利用可能なビジュアルフィルター(blur、brightness、contrast、saturate、grayscale、sepiaなど)。
  • outputFormats – 制約付きの動画および画像レンダリングのサポートされている出力フォーマット。
  • inputTypes – テンプレート変数タイプと検証ルール。
  • sceneTransitions – パラメータ付きの17のシーントランジションタイプすべて。

このツールがAIエージェントにとって重要な理由:

capabilities レスポンスは自己記述型APIです。AIエージェントは、Rendervidのテンプレート形式で事前にトレーニングされる必要はありません。実行時にget_capabilitiesを呼び出し、完全なスキーマを受け取り、最初の試行で有効なテンプレートを生成できます。Rendervidが新しい機能、アニメーション、またはレイヤータイプを追加すると、AIエージェントはコード変更なしでこのツールを通じて自動的にアクセスできるようになります。


get_example

名前で特定のサンプルテンプレートをロードします。AIエージェントは、これを使用して作業テンプレートを開始点として取得し、ユーザーの要件に合わせて変更します。

パラメータ:

  • name(文字列、必須) – サンプルテンプレート名(例:instagram-storyproduct-showcaseanimated-bar-chart)。

戻り値: 要求されたサンプルの完全なJSONテンプレート。レンダリングまたは変更する準備ができています。

例:

AIエージェントが呼び出す:get_example("instagram-story")
戻り値:テキストレイヤー、背景画像、エントランスアニメーションを含む
         完全な1080x1920 Instagramストーリーテンプレート

list_examples

カテゴリ別に整理された50以上のサンプルテンプレートの完全なカタログを閲覧します。AIエージェントは、これを使用してユーザーのリクエストに関連する開始テンプレートを見つけます。

パラメータ:

  • category(文字列、オプション) – カテゴリでフィルタリング(例:social-mediamarketingdata-visualizationtypographye-commerce)。

戻り値: サンプルメタデータオブジェクトの配列。各オブジェクトには以下が含まれます:

  • nameget_exampleで使用するテンプレート識別子。
  • category – テンプレートカテゴリ。
  • description – テンプレートが作成するもの。
  • dimensions – 出力の幅と高さ。
  • duration – テンプレートの期間(秒単位)。

ドキュメントツール

これらのツールは、AIエージェントがテンプレートを構築する際に参照できる詳細なリファレンスドキュメントを提供します。

get_component_docs

特定のコンポーネントまたはレイヤータイプ の詳細なドキュメントを返します。プロパティの説明、必須フィールドとオプションフィールド、デフォルト値、使用例が含まれます。

パラメータ:

  • component(文字列、必須) – コンポーネント/レイヤータイプ名(例:textimagevideoshapeaudiogrouplottiecustomAnimatedLineChartTypewriterEffect)。

戻り値: 以下を含む包括的なドキュメント:

  • タイプ、デフォルト、説明を含むプロパティテーブル
  • コンポーネントのJSONスキーマ
  • 使用例
  • ブラウザとNode.jsレンダリングの違いに関する注記

get_animation_docs

すべてのエントランス、エグジット、エンファシス、キーフレームアニメーションプリセットを含む完全なアニメーション効果リファレンスを返します。

パラメータ:

  • animation(文字列、オプション) – 詳細なドキュメントを取得する特定のアニメーション名(例:fadeInUpbounceInslideOutLeft)。省略した場合、完全なアニメーションカタログを返します。

戻り値: 以下を含むアニメーションドキュメント:

  • アニメーション名とカテゴリ(entrance、exit、emphasis、keyframe)
  • 視覚効果の説明
  • 設定可能なパラメータ(duration、delay、easing)
  • デフォルト値
  • 推奨される使用例

get_component_defaults

特定のコンポーネントタイプのデフォルト値と完全なJSONスキーマを返します。AIエージェントは、これを使用して、最小限の有効なコンポーネントがどのようなものか、およびオーバーライドできるプロパティを理解します。

パラメータ:

  • component(文字列、必須) – コンポーネント/レイヤータイプ名。

戻り値: 以下を含むJSONオブジェクト:

  • defaults – すべてのプロパティの完全なデフォルト値
  • schema – コンポーネントの構造、タイプ、制約を定義するJSONスキーマ
  • required – 必須プロパティのリスト

テキストレイヤーのレスポンス例:

{
  "defaults": {
    "type": "text",
    "text": "",
    "fontSize": 24,
    "fontFamily": "Arial",
    "color": "#000000",
    "fontWeight": "normal",
    "textAlign": "center",
    "position": { "x": 0, "y": 0 },
    "opacity": 1,
    "rotation": 0,
    "animations": []
  },
  "required": ["type", "text"],
  "schema": {
    "type": "object",
    "properties": {
      "text": { "type": "string", "description": "The text content to display" },
      "fontSize": { "type": "number", "minimum": 1, "maximum": 500 },
      "fontFamily": { "type": "string", "description": "Google Font name or system font" },
      "color": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$" }
    }
  }
}

get_easing_docs

利用可能なすべてのイージング関数の完全なリファレンスを返します。イージング関数は、アニメーションの加速曲線を制御し、ゆっくり始まるか、ゆっくり終わるか、バウンスするか、弾性曲線に従うかを決定します。

パラメータ:

  • easing(文字列、オプション) – 詳細なドキュメントを取得する特定のイージング関数名。省略した場合、完全なリストを返します。

戻り値: 各イージング関数のドキュメント。以下を含みます:

  • 関数名(例:easeInOutCubiceaseOutBouncespring
  • 曲線の数学的説明
  • モーションの感覚の視覚的説明
  • 推奨される使用例
  • CSS相当(該当する場合)

AI統合のセットアップ

RendervidをAIツールに接続するには、ツールの設定にMCPサーバーを追加する必要があります。セットアッププロセスはツールによって若干異なりますが、コアコンセプトは同じです。AIツールをRendervidのMCPサーバーエントリポイントに向けます。

前提条件

AIツールを設定する前に、以下があることを確認してください:

  1. Node.js 18+ がシステムにインストールされていること
  2. Rendervidがクローンされ、ビルドされている GitHubリポジトリ から:
git clone https://github.com/AceDZN/rendervid.git
cd rendervid
npm install
cd mcp
npm install
npm run build
  1. FFmpegがインストールされている(動画出力に必要):
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows(Chocolateyを使用)
choco install ffmpeg

Claude Desktop / Claude Code

Claude Desktop設定ファイルにRendervid MCPサーバーを追加します。

設定ファイルの場所:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

設定:

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/path/to/rendervid/mcp/build/index.js"],
      "env": {}
    }
  }
}

/path/to/rendervidをRendervidインストールの実際のパスに置き換えてください。

Claude Code(CLI)の場合、プロジェクトの.claude/mcp.jsonファイルまたはグローバルClaude Code設定に同じ設定を追加します。Claude Codeは自動的にMCPサーバーを検出し、コーディングセッション中にすべての11のツールを公開します。

設定を保存した後、Claude DesktopまたはClaude Codeを再起動します。Claudeに「どのRendervidツールが利用可能ですか?」と尋ねることで接続を確認できます。Claudeはすべての11のMCPツールをリストするはずです。

Cursor IDE

CursorのMCP設定にRendervid MCPサーバーを追加します。

設定ファイル: プロジェクトルートの.cursor/mcp.json(またはグローバルCursor設定)。

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/path/to/rendervid/mcp/build/index.js"]
    }
  }
}

保存後、Cursorを再起動します。RendervidツールはCursorのAIアシスタントで利用可能になり、エディタから直接動画を生成できます。

Windsurf IDE

WindsurfはAI設定を通じてMCPサーバーをサポートします。WindsurfのMCP設定にRendervidサーバーを追加します:

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/path/to/rendervid/mcp/build/index.js"]
    }
  }
}

正確な設定ファイルの場所については、Windsurfのドキュメントを参照してください。バージョンやオペレーティングシステムによって異なる場合があります。

汎用MCPセットアップ

MCPクライアント仕様を実装する任意のツールは、RendervidのMCPサーバーに接続できます。サーバーはstdio(標準入出力)を介して通信します。これはデフォルトのMCPトランスポートです。

カスタムMCPクライアントと統合するには:

  1. MCPサーバープロセスを起動します:
    node /path/to/rendervid/mcp/build/index.js
    
  2. MCP JSON-RPCプロトコルを使用してstdin/stdoutを介して通信します。
  3. tools/listを呼び出して利用可能なツールを検出します。
  4. ツール名と引数を指定してtools/callを呼び出し、任意のツールを実行します。

MCPサーバーはステートレスです。各ツール呼び出しは独立しており、サーバーは複数のクライアントからの同時リクエストを処理できます。


AIワークフロー:エンドツーエンドの例

以下の例は、AIエージェントがRendervidのMCPツールを使用して、自然言語プロンプトから完成した動画に至るまでの過程を示しています。

例1:ソーシャルメディアコンテンツ作成

ユーザープロンプト: “アニメーションテキストとグラデーション背景を使用して、夏のセールを宣伝する10秒のInstagramストーリーを作成してください”

AIエージェントワークフロー:

ステップ1 – 機能を検出:

エージェントはget_capabilitiesを呼び出して、利用可能なレイヤータイプ、アニメーションプリセット、出力制約について学習します。textおよびshapeレイヤーが利用可能であり、fadeInUpおよびscaleInアニメーションが存在し、Instagramストーリーは1080x1920解像度を使用することを発見します。

ステップ2 – 開始テンプレートを見つける:

エージェントはcategory: "social-media"list_examplesを呼び出し、instagram-storyテンプレートを見つけます。次に、get_example("instagram-story")を呼び出して完全なテンプレートJSONをロードします。

ステップ3 – テンプレートを構築:

サンプルを参考にして、エージェントはカスタムテンプレートを構築します:

{
  "outputSettings": {
    "width": 1080,
    "height": 1920,
    "fps": 30,
    "duration": 10
  },
  "scenes": [
    {
      "duration": 10,
      "layers": [
        {
          "type": "shape",
          "shapeType": "rectangle",
          "width": 1080,
          "height": 1920,
          "gradient": {
            "type": "linear",
            "angle": 135,
            "stops": [
              { "color": "#FF6B35", "position": 0 },
              { "color": "#F72585", "position": 0.5 },
              { "color": "#7209B7", "position": 1 }
            ]
          }
        },
        {
          "type": "text",
          "text": "SUMMER SALE",
          "fontSize": 96,
          "fontFamily": "Montserrat",
          "fontWeight": "bold",
          "color": "#FFFFFF",
          "position": { "x": 540, "y": 700 },
          "animations": [
            { "type": "fadeInUp", "duration": 0.8, "delay": 0.3 }
          ]
        },
        {
          "type": "text",
          "text": "50% OFF EVERYTHING",
          "fontSize": 64,
          "fontFamily": "Montserrat",
          "color": "#FFE066",
          "position": { "x": 540, "y": 850 },
          "animations": [
            { "type": "fadeInUp", "duration": 0.8, "delay": 0.6 }
          ]
        },
        {
          "type": "text",
          "text": "Shop Now  →",
          "fontSize": 48,
          "fontFamily": "Montserrat",
          "color": "#FFFFFF",
          "position": { "x": 540, "y": 1200 },
          "animations": [
            { "type": "scaleIn", "duration": 0.6, "delay": 1.2 }
          ]
        }
      ]
    }
  ]
}

ステップ4 – 検証:

エージェントはテンプレートJSONでvalidate_templateを呼び出します。レスポンスはvalid: trueでエラーなしで返されます。

ステップ5 – レンダリング:

エージェントは検証されたテンプレートでrender_videoを呼び出し、完成したMP4ファイルへのURLを受け取ります。


例2:マーケティング動画の自動化

ユーザープロンプト: “新しいヘッドフォンの製品ショーケース動画を生成してください。この製品画像を使用してください:https://example.com/headphones.png。製品名は「SoundPro X1」で、価格は$299です。”

AIエージェントワークフロー:

  1. get_capabilities – 画像レイヤー、テキストスタイリング、アニメーションオプションについて学習します。
  2. list_examplese-commerceカテゴリでproduct-showcaseテンプレートを見つけます。
  3. get_example("product-showcase") – 製品名、画像、価格のテンプレート変数 を使用する完全な製品ショーケーステンプレートをロードします。
  4. テンプレートを変更 – ユーザーの製品データでinputsを更新します:
    {
      "inputs": {
        "productName": "SoundPro X1",
        "productImage": "https://example.com/headphones.png",
        "price": "$299",
        "tagline": "Premium Sound, Redefined"
      }
    }
    
  5. validate_template – テンプレートを検証し、https://example.com/headphones.pngがアクセス可能であることを確認します。
  6. render_video – 最終的な製品ショーケース動画を生成します。

このワークフローは、AIエージェントがテンプレート変数を活用して、再利用可能なテンプレートからパーソナライズされたコンテンツを作成する方法を示しています。同じ製品ショーケーステンプレートは、入力を交換することで何百もの一意の動画を生成できます。


例3:データビジュアライゼーション生成

ユーザープロンプト: “四半期ごとの収益を示すアニメーション棒グラフを作成してください:Q1: $1.2M、Q2: $1.8M、Q3: $2.1M、Q4: $2.7M”

AIエージェントワークフロー:

  1. get_capabilitiescustomレイヤータイプとAnimatedLineChart組み込みコンポーネント を発見します。
  2. get_component_docs("AnimatedLineChart") – チャートコンポーネントのドキュメントを読み、データ形式、色設定、軸ラベル、アニメーションオプションについて学習します。
  3. get_component_defaults("AnimatedLineChart") – デフォルト値とJSONスキーマを取得して、最小限の必要な設定を理解します。
  4. テンプレートを構築 カスタムコンポーネントレイヤーで:
    {
      "type": "custom",
      "component": "AnimatedLineChart",
      "props": {
        "data": [
          { "label": "Q1", "value": 1200000 },
          { "label": "Q2", "value": 1800000 },
          { "label": "Q3", "value": 2100000 },
          { "label": "Q4", "value": 2700000 }
        ],
        "colors": ["#4361EE", "#3A0CA3", "#7209B7", "#F72585"],
        "title": "Quarterly Revenue 2025",
        "yAxisLabel": "Revenue (USD)",
        "animationDuration": 2
      }
    }
    
  5. validate_template – テンプレート構造が正しいことを確認します。
  6. render_video – アニメーションチャート動画を生成します。

自己記述型API:機能がAIエージェントを効果的にする方法

get_capabilitiesツールは、RendervidのAI統合の基礎です。これは自己記述型APIパターンを実装しており、システムがAIエージェントに何ができるか、どのパラメータが必要か、どの値が有効かを正確に伝えます。これにより、AIモデルがRendervidの特定のAPIを記憶したり、トレーニングされたりする必要がなくなります。

capabilitiesレスポンスに含まれるもの

AIエージェントがget_capabilitiesを呼び出すと、レンダリングシステムのあらゆる側面をカバーする構造化されたレスポンスを受け取ります:

JSONスキーマ付きレイヤータイプ:

{
  "layerTypes": {
    "text": {
      "description": "Renders text with full styling control",
      "schema": {
        "properties": {
          "text": { "type": "string", "required": true },
          "fontSize": { "type": "number", "default": 24, "min": 1, "max": 500 },
          "fontFamily": { "type": "string", "default": "Arial" },
          "color": { "type": "string", "format": "hex-color" },
          "position": { "type": "object", "properties": { "x": {}, "y": {} } },
          "animations": { "type": "array", "items": { "$ref": "#/animations" } }
        }
      }
    },
    "image": { "..." : "..." },
    "video": { "..." : "..." },
    "shape": { "..." : "..." },
    "audio": { "..." : "..." },
    "group": { "..." : "..." },
    "lottie": { "..." : "..." },
    "custom": { "..." : "..." }
  }
}

アニメーションプリセット:

capabilitiesレスポンスは、カテゴリ、設定可能なパラメータ、説明を含むすべてのアニメーションプリセットをリストします。このデータを受け取るAIエージェントは、fadeInUpdurationdelayeasingパラメータを持つエントランスアニメーションであり、要素を上方に移動しながらフェードインすることを知っています。

イージング関数:

30以上のすべてのイージング関数が説明付きでリストされているため、AIエージェントは各アニメーションに適した曲線を選択できます。たとえば、easeOutBounceは、アニメーションの終わりにバウンス効果をシミュレートするものとして説明されており、エージェントは遊び心のある、または注目を集めるコンテンツに推奨できます。

フィルターとエフェクト:

blurbrightnesscontrastsaturategrayscalesepiaなどのビジュアルフィルターは、パラメータ範囲とともに文書化されており、AIエージェントは任意のレイヤーに後処理効果を適用できます。

自己記述型APIが重要な理由

従来のAPIは、AIモデルがトレーニング中に見たかもしれないし、見なかったかもしれないドキュメントを必要とします。自己記述型APIは実行時にドキュメントを提供し、AIエージェントが常に最新で正確な情報を持つことを保証します。Rendervidが新しいアニメーションプリセットやレイヤータイプを追加すると、接続されているすべてのAIエージェントはget_capabilitiesを通じてすぐにそれを確認できます。ドキュメントの更新、再トレーニング、バージョンの不一致はありません。


AI動画生成のベストプラクティス

AIエージェントを使用してRendervid動画を生成する際に最良の結果を得るために、以下のガイドラインに従ってください。

1. 常にレンダリング前に検証する

すべてのレンダリングの前にvalidate_templateを呼び出してください。レンダリングは計算コストが高く、検証はほぼ瞬時です。検証ツールは、レンダリングが失敗したり、予期しない出力を生成したりする原因となる問題をキャッチします:

  • 壊れたメディアURL(404を返す画像、動画、オーディオファイル)
  • 無効なJSON構造または欠落している必須フィールド
  • 寸法、フォントサイズ、または期間の範囲外の値
  • 不明なアニメーションプリセットまたはレイヤータイプ

典型的なAIワークフローには、render_videoまたはrender_imageを呼び出す前のステップとして常に検証を含める必要があります。

2. サンプルから始める

テンプレートをゼロから構築する代わりに、AIエージェントはlist_examplesget_exampleを使用して関連する開始テンプレートを見つける必要があります。サンプルテンプレートはテスト済みで、良好な出力を生成することが知られています。サンプルから始めて変更する方が、完全に新しいテンプレート構造を生成するよりも速く、エラーが少なくなります。

推奨アプローチ:

  1. 関連するカテゴリでlist_examplesを呼び出す
  2. 最も近いマッチングテンプレートに対してget_exampleを呼び出す
  3. ユーザーの特定の要件に合わせてテンプレートを変更する
  4. 検証してレンダリング

3. 説明的なプロンプトを使用する

AIエージェントに動画を要求する際は、以下について具体的に指定してください:

  • 寸法とプラットフォーム – “1080x1920 Instagramストーリー"は"縦型動画"よりも良い
  • 期間 – “10秒のイントロ"は"短い動画"よりも良い
  • スタイルとムード – “ネオンテキストとバウンスアニメーションを使った暗い背景"はAIエージェントに明確な方向性を与える
  • コンテンツ構造 – “フェードインアニメーションで次々に表示される3行のテキスト"は"アニメーションテキスト"よりも実行可能

4. テンプレートを反復する

動画生成は反復的です。最初のレンダリングの後、出力をレビューし、AIエージェントに特定の要素を調整するよう依頼します:

  • “タイトルテキストを大きくして、色をゴールドに変更してください”
  • “エントランスアニメーションを遅くして、各行の間に0.5秒の遅延を追加してください”
  • “背景画像に微妙なぼかしフィルターを追加してください”
  • “イージングをlinearからeaseOutCubicに変更して、よりスムーズなモーションにしてください”

AIエージェントは既存のテンプレートを変更して再レンダリングでき、最初からやり直す必要がないため、反復が高速で効率的です。

5. バッチ制作にテンプレート変数を活用する

同じ動画の複数のバリエーション(異なる製品、異なる言語、異なるデータ)が必要な場合は、AIエージェントに変数 を含むテンプレートを作成するよう依頼してください。これにより、異なるinputsを渡すことで、単一のテンプレートから多くの動画をレンダリングできます:

{
  "inputs": {
    "productName": "Running Shoes Pro",
    "productImage": "https://example.com/shoes.png",
    "price": "$149",
    "tagline": "Run Faster, Go Further"
  }
}

6. 長い動画には非同期レンダリングを使用する

30秒以上の動画または複雑なアニメーションを含むテンプレートの場合、render_videoの代わりにstart_render_asyncを使用してください。これにより、タイムアウトを防ぎ、AIエージェントは動画がバックグラウンドでレンダリングされている間に他のタスクを実行できます。


テンプレート検索:100以上のサンプルを閲覧

Rendervidには、32のカテゴリにまたがる100以上のサンプルテンプレートが含まれており、AIエージェントに任意の動画生成タスクの豊富な開始点のライブラリを提供します。

AIエージェントがテンプレートを検出する方法

テンプレート検索ワークフローは、2つのツールを順番に使用します:

  1. list_examples – オプションのカテゴリフィルタリングでカタログを閲覧し、関連するテンプレートを見つけます。
  2. get_example – 特定のサンプルの完全なJSONテンプレートをロードします。

テンプレートカテゴリ

AIエージェントは、カテゴリでサンプルをフィルタリングして、関連する開始点をすばやく見つけることができます:

カテゴリ説明サンプルテンプレート
social-mediaプラットフォーム最適化コンテンツInstagramストーリー、TikTok動画、YouTubeサムネイル
e-commerce製品および販売コンテンツ製品ショーケース、フラッシュセール、価格比較
marketingプロモーション資料ブランドイントロ、証言、機能ハイライト
data-visualizationチャートとインフォグラフィック棒グラフ、折れ線グラフ、円グラフ、ダッシュボード
typographyテキスト中心のデザインキネティックテキスト、引用カード、タイトルシーケンス
education学習資料説明動画、ステップバイステップチュートリアル、図
presentationスライドスタイルコンテンツピッチデッキスライド、カンファレンスイントロ、基調講演
abstract視覚効果とアートパーティクルシステム、波のビジュアライゼーション、グラデーション

実践におけるテンプレート検索

ユーザーが"販売データを示すアニメーションチャート"を求めると、AIエージェントは:

  1. list_examples(category: "data-visualization")を呼び出し、チャート関連テンプレートのリストを受け取ります。
  2. 説明に基づいてanimated-bar-chartが最適なマッチであると識別します。
  3. get_example("animated-bar-chart")を呼び出して完全なテンプレートをロードします。
  4. テンプレート構造を調べて、データがどのようにフォーマットされているかを理解します。
  5. サンプルデータをユーザーの実際の販売数値に置き換えます。
  6. 検証してレンダリング。

この検索優先のアプローチは、AIエージェントがテンプレートJSONをゼロから生成するのではなく、テスト済みのサンプルを基に構築しているため、一貫して適切に構造化されたテンプレートを生成することを意味します。

利用可能なすべてのテンプレートを探索

すべての利用可能なテンプレートを表示するには、AIエージェントはカテゴリフィルタなしでlist_examplesを呼び出すことができます。レスポンスには、100以上のすべてのテンプレートのメタデータが含まれており、エージェントはカテゴリ全体で最適なマッチを検索できます。各エントリには、テンプレート名、カテゴリ、説明、寸法、期間が含まれており、エージェントが情報に基づいた選択を行うのに十分な情報を提供します。


サポートされているAIツール

RendervidのMCPサーバーは、Model Context Protocolクライアント仕様を実装する任意のツールで動作します。以下のツールがテストされ、Rendervidで動作することが確認されています:

AIツールタイプMCPサポート設定ファイル
Claude Desktopデスクトップアプリネイティブclaude_desktop_config.json
Claude CodeCLIネイティブ.claude/mcp.json
CursorIDEネイティブ.cursor/mcp.json
WindsurfIDEネイティブMCP設定
Google AntigraviteクラウドIDEネイティブMCP設定

MCPはオープン標準であるため、MCPクライアントサポートを追加する将来のツールは、RendervidのMCPサーバーと自動的に互換性があります。サーバーやそのツールに変更を加える必要はありません。


次のステップ

よくある質問

あなた専用のAIチームを構築させてください

私たちは、あなたのような企業がスマートチャットボット、MCPサーバー、AIツール、またはその他の種類のAI自動化を開発し、組織内の反復的なタスクで人間を置き換えるお手伝いをします。

詳しく見る

Rendervid テンプレートシステム - JSON テンプレート、変数、アニメーション & トランジション
Rendervid テンプレートシステム - JSON テンプレート、変数、アニメーション & トランジション

Rendervid テンプレートシステム - JSON テンプレート、変数、アニメーション & トランジション

Rendervid テンプレートシステムの完全ガイド。JSON ビデオテンプレートの作成方法、{{variable}} 構文を使った動的変数の使用、40種類以上のアニメーションプリセット、17種類のシーントランジション、30種類以上のイージング関数の設定方法を学びます。...

12 分で読める
Rendervid Video Rendering +2
Rendervid コンポーネント - レイヤータイプ、React コンポーネント、ビジュアルエディター
Rendervid コンポーネント - レイヤータイプ、React コンポーネント、ビジュアルエディター

Rendervid コンポーネント - レイヤータイプ、React コンポーネント、ビジュアルエディター

Rendervid の全コンポーネントを探索:8つの組み込みレイヤータイプ(テキスト、画像、動画、シェイプ、オーディオ、グループ、Lottie、カスタム)、構築済み React コンポーネント、ビジュアルテンプレートエディター、動画プレイヤー。完全な React サポートでカスタムコンポーネントを作成。...

7 分で読める
Rendervid Components +3
Creatify MCPサーバー
Creatify MCPサーバー

Creatify MCPサーバー

Creatify MCPサーバーは、Creatify AIの高度な動画生成APIをAIワークフローに統合し、アバター動画生成、URLから動画作成、AIショート動画、カスタムアバター、スクリプト生成、感情制御付き高度リップシンクを実現します。エンタープライズ、教育、マーケティング、SNS用途でのマルチメディア自動化に最適...

1 分で読める
AI Video Generation +6