Whiteboard Animation について
Whiteboard Animation は、完成した画像を手描きアニメーション動画に変換するホスト型リモート MCP サーバーです。AI アシスタントで図、製品画像、絵本のページをアニメーション化し、進捗確認やファイルのレンダリングリンクを利用できます。
主な機能
- 01完成画像を一筆ずつアニメーション化
- 02線を描いてから着色
- 03描画の状態と進捗を確認
- 041つのリンクで最大20件をレンダリング
- 05MP4、WebM、PNG で出力
活用シーン
- 01授業用の図を解説アニメーションにする
- 02製品画像を手描き風に紹介する
- 03絵本のページを個別にアニメーション化
- 04シーンのフォルダーをレンダリングしてダウンロード
MCP 対応
アカウント状況、クレジット見積もり、画像アップロード、描画の作成・追跡、レンダリングリンク用のリモート MCP ツールを提供します。MCP クライアントは streamable HTTP で接続し、OAuth でサインインします。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://mcp.whiteboardanimation.ai/mcpclaude mcp add --transport http ai-whiteboardanimation-whiteboard-animation https://mcp.whiteboardanimation.ai/mcp{"mcpServers":{"ai-whiteboardanimation-whiteboard-animation":{"type":"http","url":"https://mcp.whiteboardanimation.ai/mcp"}}}Cursor で開く{"servers":{"ai-whiteboardanimation-whiteboard-animation":{"type":"http","url":"https://mcp.whiteboardanimation.ai/mcp"}}}VS Code で開く{"mcpServers":{"ai-whiteboardanimation-whiteboard-animation":{"type":"http","url":"https://mcp.whiteboardanimation.ai/mcp"}}}{"mcpServers":{"ai-whiteboardanimation-whiteboard-animation":{"serverUrl":"https://mcp.whiteboardanimation.ai/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
詳細
Whiteboard Animation MCP サーバー
AI アシスタントに画像を渡すと、手描き風のホワイトボードアニメーションになって返ってきます。
WhiteboardAnimation.ai の公式リモート MCP サーバーです。Claude、ChatGPT、Cursor、VS Code、Codex、およびあらゆる MCP クライアントで利用できます。
ウェブサイト · セットアップ · 使用例 · ツール · よくある質問
サーバーは https://mcp.whiteboardanimation.ai/mcp でホストされています。インストールもキーの貼り付けも不要です。一度接続してWhiteboardAnimation.aiアカウントでサインインすれば、アシスタントに好きな完成画像を描くよう頼めます。画像を一筆ずつスケッチして色を塗り、チャット内に描画を表示し、MP4を保存できるリンクを渡します。新規アカウントには無料クレジットが付与されます。
ワンクリックセットアップ
ウェブおよびデスクトップ |
プラグイン → + → カスタム MCP サーバー |
設定 → MCP からサインイン |
またはVS Code Insiders |
エージェントに設定してもらう
Claude Code、Codex、Cursor、または自身の MCP 設定を編集できるエージェントに、これを貼り付けてください。
Add the Whiteboard Animation MCP server to my MCP settings: streamable HTTP at https://mcp.whiteboardanimation.ai/mcp, sign-in with OAuth (no API key). Then help me sign in, and once it is connected, call its status tool and tell me how many credits I have.
手動で設定
ChatGPT
- ウェブ版の ChatGPT で プラグイン を開きます。
- + → カスタム MCP サーバーを追加を選び、
Whiteboard Animationという名前を付け、https://mcp.whiteboardanimation.ai/mcpを貼り付けて、OAuth を選びます。 - リスクに関する通知にチェックを入れ、プラグインとして作成を選んで、WhiteboardAnimation.ai アカウントでサインインします。
- チャットに画像を添付し、ホワイトボードアニメーションを作成するよう依頼します。
Claude（ウェブ版とデスクトップ版）
- カスタマイズ → コネクターを開き、
Whiteboard Animationという名前のカスタムコネクターにhttps://mcp.whiteboardanimation.ai/mcpを設定して追加するか、Claude に追加 ボタンを使用します。 - 接続を選び、WhiteboardAnimation.ai アカウントでサインインします。
- Claude に完成した画像を渡し、ホワイトボードアニメーションを作成するよう依頼します。
Claude Code
MCP サーバーとして設定する場合：
claude mcp add --transport http whiteboard-animation https://mcp.whiteboardanimation.ai/mcp
または、サーバーとワークフロー全体を把握したスキルを追加するプラグインとして設定する場合：
/plugin marketplace add celados/whiteboard-animation-mcp
/plugin install whiteboard-animation@whiteboard-animation
次に /mcp を実行し、whiteboard-animation を選んでサインインします。
Cursor
Cursor に追加 ボタンを使用するか、次の内容を ~/.cursor/mcp.json に追加します。
{
"mcpServers": {
"whiteboard-animation": { "url": "https://mcp.whiteboardanimation.ai/mcp" }
}
}
Cursor から求められたら、設定 → MCP でサインインします。
VS Code
VS Code に追加 ボタンを使用するか、次を実行します。
code --add-mcp '{"name":"whiteboard-animation","type":"http","url":"https://mcp.whiteboardanimation.ai/mcp"}'
MCP サーバーの一覧から起動し、求められたらサインインします。
Codex（CLI と ChatGPT デスクトップアプリ）
サーバーとスキルを追加するプラグインとして設定する場合：
codex plugin marketplace add celados/whiteboard-animation-mcp
codex plugin add whiteboard-animation@whiteboard-animation
または、MCP サーバーのみとして設定する場合：
codex mcp add whiteboard-animation --url https://mcp.whiteboardanimation.ai/mcp
codex mcp login whiteboard-animation
Gemini CLI
gemini extensions install https://github.com/celados/whiteboard-animation-mcp
その他の MCP クライアント
ストリーミング可能な HTTP と OAuth に対応するクライアントであれば、https://mcp.whiteboardanimation.ai/mcp に接続できます。サインインには動的クライアント登録を使用するため、クライアントが自身を登録します。
仕組み
 |  |  |
| 1. 接続します。 Claude、Cursor、VS Code ではワンクリックで、ChatGPT ではプラグインページから接続できます。コーディングエージェントはセットアッププロンプトから自動で追加します。 | 2. 一度サインインします。 WhiteboardAnimation.ai アカウントを使って OAuth でサインインします。コピーするものはなく、いつでも接続を解除できます。 | 3. 画像を渡します。 アシスタントが一筆ずつ描画し、チャットに描画を表示して、動画を保存できるリンクを渡します。 |
 |  |
| レッスンの解説 「この図をレッスン用のホワイトボードアニメーションにしてください。まず右手で主題を描いてください。」 | 商品の紹介 「この商品画像をホワイトボードアニメーションにしてください。まず商品を描き、そのあとで背景を描いてください。MP4を保存できるリンクも教えてください。」 |
 |  |
| 絵本のページ 「絵本の各ページをホワイトボードアニメーションにしてください。1ページにつき1つの絵を描き、すべて完成したら知らせてください。」 | シーンのフォルダー 「./scenes 内のすべての画像をホワイトボードアニメーションにしてください。そのあと、すべてをMP4にするレンダーリンクを1つ開き、保存したファイルを ./clips に移動してください。」 |
ツール
| ツール | 機能 |
|---|---|
status | サインイン中のアカウント情報を表示します。プラン、残りクレジット、キューに入っている描画、実行中の描画を確認できます。 |
quote | 1つの描画に必要なクレジット数と、作成時に渡す見積もりを確認できます。 |
create_upload | アップロードを予約し、画像を PUT するためのURLを返します。 |
create_drawing | 画像をホワイトボードアニメーションにします（クレジットを消費します）。描画IDをすぐに返します。 |
get_drawing | 描画のステータスと進行状況、プレビューページ、完了後のエクスポートオプションを確認できます。 |
wait_drawing | 描画が次の段階に進むまで待機し、チャット内のカードをリアルタイムで更新できるようにします。 |
list_drawings | ライブラリ内の最新の描画を一覧表示します。 |
render_link | 最大20個の描画をMP4、透過WebM、またはPNGにレンダリングするリンクを1つ作成します。それぞれに個別のオプションを設定できます。 |
wait_render | レンダーリンクを追跡し、各ファイルが保存されるまで待機します。 |
書き込みを行うのは create_upload と create_drawing だけです。削除は行いません。Claude と ChatGPT では、描画がチャット内のインタラクティブカードで再生されます。
よくある質問
AIスピードペイント動画を作成できますか？ はい。スピードペイント動画は、手描きで絵が現れる動画です。完成した画像をアシスタントに渡して、描くよう依頼してください。選んだ手で線を描き、そのあとに色を塗ります。
APIキーは必要ですか？ いいえ。WhiteboardAnimation.ai アカウントで一度サインイン（OAuth 2.1）すれば、クライアントはサインイン状態を維持します。接続を解除すると停止します。
テキストプロンプトから画像を作成できますか？ いいえ。完成した画像を用意してください。画像ツールで先に作成し、必要であれば同じチャット内で、その画像をホワイトボードアニメーションにするよう依頼できます。
動画ファイルを受け取れますか？ リンクが提供されます。任意のブラウザーで開くと、ページがMP4またはWebMをレンダリングし、ダウンロードに保存します。コーディングエージェントにリンクを開いてもらい、ファイルを任意の場所に移動することもできます。
料金はいくらですか？ 新規アカウントには無料クレジットが付与されます。その後の料金については、料金をご覧ください。
サーバーはオープンソースですか？ いいえ。サーバーはホスティングサービスです。このリポジトリには公開リスティング、クライアント設定、エージェントスキルが含まれています。問題や質問はこちらからお寄せください。
リンク
- WhiteboardAnimation.ai/mcp：各クライアント向けのセットアップ方法を掲載したMCPページ
- 公式MCPレジストリエントリー：
ai.whiteboardanimation/whiteboard-animation - プライバシー · 利用規約 · [email protected]
ライセンス
このリポジトリ内の設定、スキル、ドキュメントはMITライセンスです。ホスティングサービスには、WhiteboardAnimation.ai の利用規約が適用されます。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。