Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者による説明(英語の原文)
Turn any picture into a hand-drawn whiteboard animation video, from your AI assistant.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
ウェブ、デスクトップ、モバイルのClaudeで使えます:
https://mcp.whiteboardanimation.ai/mcpターミナルでこれを実行します
claude mcp add --transport http whiteboard-animation https://mcp.whiteboardanimation.ai/mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"whiteboard-animation": {
"url": "https://mcp.whiteboardanimation.ai/mcp"
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"whiteboard-animation": {
"type": "http",
"url": "https://mcp.whiteboardanimation.ai/mcp"
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
ChatGPTがつなげるのは、インターネット上のサーバーだけです:
https://mcp.whiteboardanimation.ai/mcpメニューの名前は、プランや時期によって少し違うことがあります。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
ツールの名前と説明は、サーバーが2026年11月7日に返したそのままの内容です。書いたのは作者で、私たちではありません。プレーンテキストとして表示しています。
quoteWhat drawing one picture costs, in credits, and the quote_version to pass when creating it.
statusCall first. The signed-in workspace: its plan, credits left, drawings queued and running, and how many may queue.
create_uploadStart uploading a picture: answers an upload_url to PUT the bytes to, with the given headers. Then call create_drawing with the upload_id. Not needed when the host attaches the picture to create_drawing itself.
create_drawingDraw a picture as a whiteboard animation. Spends credits (see quote). Answers at once with the drawing_id; the drawing takes a few minutes, follow it with get_drawing.
get_drawingA drawing by id: its status and progress, its preview page, and once done the export options render_link accepts for it.
list_drawingsThe latest drawings in the library, newest first.
render_linkOne link that renders up to 20 of your drawings as files, each with its own choices (format, resolution, aspect, background, hand…; see get_drawing export_options). Opening it in a browser renders them one after another and saves each file to that browser’s downloads; drawings st
wait_renderA render link’s files: each drawing’s state (pending, rendering, saved, failed) and, once saved, its file name and size in the browser’s downloads. Pass back the states of the last answer: it answers as soon as any of them moves on, or after about 50 seconds.
wait_drawingFor the drawing card: answers get_drawing as soon as the drawing moves on from the status and progress the card last showed, or after about 50 seconds.
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月8日にチェック
レジストリ名はドメイン whiteboardanimation.ai で確認済みです(レジストリがドメインの所有を確認しています)
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
973ミリ秒で応答(HTTP 200)
サインイン不要
9件のツールの説明を読み、AIへの隠れた指示は見つかりませんでした
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。
GitHubリポジトリの最終更新は–、最新バージョン(1.0.1)がレジストリに届いたのは9 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ(開発者モードのChatGPTなど)でも使えます。
同じカテゴリには:Figma Context MCP, Claude Real Video, Figma MCP Server
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
Whiteboard Animation MCP Server
Hand your AI assistant a picture. Get it back as a hand-drawn whiteboard animation.
The official remote MCP server for WhiteboardAnimation.ai : works in Claude, ChatGPT, Cursor, VS Code, Codex and any MCP client.
Website · Setup · Examples · Tools · FAQ
The server is hosted at `https://mcp.whiteboardanimation.ai/mcp`. There is nothing to install and no key to paste: connect it once, sign in with your WhiteboardAnimation.ai account, and ask your assistant to draw any finished picture. It sketches the picture stroke by stroke, colours it in, shows the drawing right in the chat, and hands you a link that saves the MP4. New accounts start with free credits.
Web and desktop
Plugins → + → custom MCP server
Sign in from Settings → MCP
Or VS Code Insiders
Paste this into Claude Code, Codex, Cursor or any agent that can edit its own MCP settings:
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
Whiteboard Animation, paste https://mcp.whiteboardanimation.ai/mcp and choose OAuth.Claude (web and desktop)
Whiteboard Animation with https://mcp.whiteboardanimation.ai/mcp, or use the Add to Claude button.Claude Code
As an MCP server:
claude mcp add --transport http whiteboard-animation https://mcp.whiteboardanimation.ai/mcp
Or as a plugin, which adds the server and a skill that knows the whole flow:
/plugin marketplace add celados/whiteboard-animation-mcp
/plugin install whiteboard-animation@whiteboard-animation
Then run /mcp, choose whiteboard-animation and sign in.
Cursor
Use the Add to Cursor button, or put this in ~/.cursor/mcp.json:
{
"mcpServers": { "whiteboard-animation": { "url": "https://mcp.whiteboardanimation.ai/mcp" } } }
Sign in when Cursor asks, from Settings → MCP.
VS Code
Use the Add to VS Code button, or run:
code --add-mcp '{"name":"whiteboard-animation","type":"http","url":"https://mcp.whiteboardanimation.ai/mcp"}'
Start it from the MCP servers list and sign in when asked.
Codex (CLI and the ChatGPT desktop app)
As a plugin, which adds the server and the skill:
codex plugin marketplace add celados/whiteboard-animation-mcp
codex plugin add whiteboard-animation@whiteboard-animation
Or as an MCP server only:
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
Any other MCP client
Any client that speaks streamable HTTP and OAuth connects with https://mcp.whiteboardanimation.ai/mcp. Sign-in uses dynamic client registration, so the client registers itself.
A lesson explainer “Turn my diagram into a whiteboard animation for a lesson: draw the subject first with a right hand.” A product reveal “Draw my product picture as a whiteboard animation, the product first and the background after, then give me the link that saves the MP4.”
A picture-book page “Turn each page of my picture book into a whiteboard animation, one drawing per page, and tell me when all of them are done.” A folder of scenes “Draw every picture in ./scenes as a whiteboard animation, then open one render link for all of them as MP4 and move the saved files to ./clips.”
| Tool | What it does |
|---|---|
status | The signed-in account: plan, credits left, drawings queued and running. |
quote | What one drawing costs in credits, and the quote to pass when creating it. |
create_upload | Reserves an upload and answers a URL to PUT the picture to. |
create_drawing | Draws a picture as a whiteboard animation (spends credits). Answers at once with the drawing id. |
get_drawing | A drawing's status and progress, its preview page, and its export options once done. |
wait_drawing | Waits until a drawing moves on, so the in-chat card can follow it live. |
list_drawings | The latest drawings in your library. |
render_link | One link that renders up to 20 drawings as MP4, transparent WebM or PNG, each with its own options. |
wait_render | Follows a render link until each file is saved. |
Only create_upload and create_drawing write anything; nothing deletes. In Claude and ChatGPT the drawing plays in an interactive card inside the chat.
Can it make an AI speedpaint video? Yes. A speedpaint (speed paint) video is the same hand-drawn reveal: hand your assistant a finished picture and ask it to draw it. It sketches the lines, then colours them in, with the hand you choose.
Do I need an API key? No. You sign in once with your WhiteboardAnimation.ai account (OAuth 2.1) and the client keeps you signed in. Disconnect the connector to stop it.
Can it make a picture from a text prompt? No. Bring a finished picture: make it first with an image tool, in the same chat if you like, then ask for the whiteboard animation.
Does it give me a video file? It gives you a link: opened in any browser, the page renders the MP4 or WebM and saves it to your downloads. A coding agent can open it for you and move the files where you want them.
What does it cost? New accounts start with free credits. After that, see pricing.
Is the server open source? No. The server is a hosted service; this repository holds its public listing, the client configs and the agent skill. Issues and questions are welcome here.
ai.whiteboardanimation/whiteboard-animationThe configs, skill and docs in this repository are MIT. The hosted service is covered by the WhiteboardAnimation.ai terms.