Alien Art Charts Alien Art Charts

Alien ArtのグラフMCP

アニメーショングラフの動画づくりを、Claude、ChatGPT、Cursorにおまかせ。URLを1つ貼り付けてOAuthで承認するだけで、AIアシスタントがツール呼び出しを通じて、編集できるプロジェクトの作成、スプレッドシートのアップロード、MP4/WebM動画やPNG/JPEG/WebP画像の書き出しまでこなします。

静止画ではなく、動き・動画・編集できるプロジェクトを生み出せる唯一のグラフMCPです。

設定方法 ↓

Alien Art ChartsのMCPとは？

Alien Art ChartsのMCPは、https://staging.alienart.io/mcpで提供しているリモートのModel Context Protocolサーバーです。Alien Artのグラフエディターを、MCP対応のAIクライアントから呼び出せるツール群として公開しています：

  • グラフのプロジェクトを作成（バーチャートレース、折れ線グラフレース、マップチャートレース、テーブルチャートレース、スライドショー、比較（アドバンス））
  • スプレッドシートのデータ（CSV / XLSX）をアップロード、またはセル単位で値を入力
  • レイヤーや重ねる要素（タイトル、画像、合計、国旗、ロゴ）を追加
  • MP4 / WebM動画、PNG / JPEG / WebP画像、またはホスティングされたiframeのURLとして書き出し
  • 書き出し後もWeb画面でプロジェクトを編集可能

接続方式はStreamable HTTP、認証はOAuth。Proプランが必要です。

実際の作例

MCPで作ったグラフの作例

AIへの1回の指示から生成したバーチャートレース。60fpsのMP4と、編集できるプロジェクトのURLが手に入ります。

このプロジェクトを複製

AIアシスタントが作れるもの

AIアシスタントが最初から最後までこなせる実際の指示の例です。生のデータから、完成してシェアできるグラフまで。

指示

「このCSVを使って、2010年から2024年までの世界の大富豪のバーチャートレースを作って」

結果

60fpsのアニメーションMP4と、編集できるAlien Artのプロジェクト。動画ファイルと、さらに手を加えられるリンクが手に入ります。

指示

「1990年から2023年までの国別CO₂排出量を示すアニメーション世界地図を作って」

結果

値に応じて国を色分けし、順位のサイドパネルを連動させたマップチャートレース。データを渡さなくても公開データセットから取得します。

指示

「昨シーズンの順位表のXLSXがあるから、チームのロゴ付きのランキング表にして」

結果

複数列の行、順位入れ替えのアニメーション、行ごとのロゴを自動でアップロードしたテーブルチャートレース。

指示

「iPhoneとPixelのスペックを並べて比較するアニメーション解説を作って」

結果

順番に表示される演出、ブランドカラー、プレゼン資料のような洗練されたスタイルの比較（アドバンス）レイアウト。動画またはホスティングされたiframeとして書き出せます。

指示

「Notionのページ用に、アメリカの州別人口のきれいなPNGを書き出して」

結果

Notion、スライド、ドキュメントにそのまま貼れる高解像度のPNG（またはJPEG/WebP）。同じプロジェクトから静止画で書き出します。

指示

「今四半期の主な受注トップ10をアニメーションで見せる、15秒のTikTok用イントロを作って」

結果

ブランドのタイトル入りで、プラットフォームに合ったテンポの縦型9:16スライドショー。WebMまたはMP4ですぐにアップロードできます。

AIアシスタントが呼び出せるMCPツール

50個もの細かい操作ではなく、「データからグラフを作る」のに必要な動作だけに絞ったツール群です。

探す

list_chart_options
プロジェクトの種類、レイヤーの種類、地図、地域マップ、要素の一覧を確認します。
list_charts
ユーザーの既存のグラフプロジェクトを、絞り込みや検索付きで一覧表示します。
get_chart
プロジェクトの全体の状態（レイヤー、要素、スプレッドシート、書き出しのURL）を読み取ります。

作る

create_chart
新しいプロジェクトを作成します（バーチャートレース、折れ線グラフレース、マップチャートレース、テーブルチャートレース、スライドショー、比較（アドバンス））。
add_layer
グラフレイヤーや表示用のレイヤーを追加します。データを使うレイヤーには、元になるスプレッドシートが自動で作成されます。
update_layer
レイヤーの設定（色、フォント、アニメーションの速さ、軸、順位）を調整します。
set_layer_format
レイヤーのグラフ形式をその場で切り替えます（例：バー → 折れ線）。
add_element
タイトル、画像、合計、ウォーターマーク、チャンネルのロゴ、国旗を重ねて表示します。
update_element
要素のテキスト、位置、スタイル、アニメーションを調整します。
delete_layer
レイヤーを削除します。
delete_element
重ねた要素を削除します。

データ

upload_spreadsheet
CSVまたはXLSXファイルを、レイヤーのデータソースとしてアップロードします。
fetch_spreadsheet_file
Wikipediaの表やWeb上のCSVを、直接プロジェクトに取り込みます。
read_spreadsheet
スプレッドシートの構造（行のラベル、列の見出し、行数）を確認します。
patch_spreadsheet
個々のセル、行、列を更新します。
wait_for_spreadsheet_idle
書き出しの前に、バックグラウンドの処理が落ち着くまで待機します。

統計ライブラリ

list_statistics_categories
Alien Artが厳選した公開データセット（YouTubeチャンネルなど）を一覧表示します。
get_statistics_category
統計カテゴリの構造と項目を取得します。
add_statistics
厳選されたデータセットを、レイヤーのデータソースとして設定します。

編集と書き出し

update_chart
名前、サイズ、長さを変更したり、公開・非公開を切り替えたりします。
describe_layer_settings
編集する前に、レイヤーの種類ごとの設定の構造を取得します。
describe_element_settings
要素の種類ごとの設定の構造を取得します。
render_chart
書き出しを開始します。動画ならMP4、WebM、アニメーションWebP、画像ならPNG、JPEG、WebPから形式を選べます。
get_task
書き出しの状況を確認し、完成したファイルや埋め込み用のURLを取得します。

1分以内で設定完了

管理するAPIキーも、動かすローカルサーバーもありません。認証はOAuthにおまかせです。

  1. 1
    登録してProを始める

    MCPはProプランに含まれています。アカウントを作成してProにアップグレードすれば、すぐに接続できます。いつでも解約できます。

  2. 2
    AIクライアントにMCPのURLを追加

    Claude Desktop、ChatGPT、CursorでSettings → Connectors → Add custom connectorを開き、次のURLを貼り付けます： 

    https://staging.alienart.io/mcp
  3. 3
    OAuthで承認

    クライアントがAlien Artに移動し、承認を求めます。許可すれば、AIアシスタントがツール呼び出しでプロジェクトの作成、データのアップロード、グラフの書き出しを行えるようになります。

クライアント別の手順

主要なMCP対応クライアントごとの正確なメニューの場所です。

Claude Desktop
  1. Claude DesktopでSettings → Connectors → Add custom connectorを開きます。
  2. Remote MCP server URLにhttps://staging.alienart.io/mcpを貼り付けます。OAuth Client IDとSecretは空欄のままにします。
  3. Addをクリックすると、承認のためにAlien Artに移動します。
  4. Claude Desktopに戻り、Claudeにグラフの一覧を表示するよう頼んで接続を確認します。

ChatGPT（カスタムコネクタ）
  1. ChatGPTでSettings → Connectors → Add custom connectorを開きます。
  2. サーバーのURLにhttps://staging.alienart.io/mcpを貼り付けます。
  3. 移動先でOAuthの承認を行います。
  4. チャットで「Alien Art」と書くと、ChatGPTがコネクタを使います。

Cursor
  1. CursorでSettings → Features → MCP → Add new MCP serverを開きます。
  2. トランスポートにStreamable HTTPを選びます。
  3. URLにhttps://staging.alienart.io/mcpを設定します。
  4. 移動先でOAuthの承認を行います。

Claude Code (CLI)
  1. ターミナルで次のコマンドを実行します：
claude mcp add alienart-charts --transport http --url https://staging.alienart.io/mcp

初回の利用時に、Claude CodeがOAuth用のブラウザウィンドウを開きます。承認したら、Claudeにグラフの一覧を表示するよう頼んでみましょう。

よくある質問

最終更新：

Alien ArtのグラフMCPはどのAIクライアントで使えますか？

リモートのStreamable HTTPサーバーに対応した、MCP対応クライアントならどれでも使えます。動作確認済みのクライアントは、Claude Desktop、Claude Code（CLI）、ChatGPTのカスタムコネクタ、Cursorです。サーバーは標準のModel Context Protocolで通信するため、クライアントごとの特別な処理はありません。

有料プランは必要ですか？

はい。MCPはProプラン（月$19または年$180、いつでも解約可）に含まれています。Proではウォーターマークがなくなり、60fpsでの書き出しが可能になり、毎月の書き出し時間も無制限になります。

MCPで作れるグラフの種類は？

バーチャートレース、折れ線グラフレース、テーブルチャートレース、マップチャートレース（世界地図と国別の地図）、スライドショー、比較（アドバンス）のレイアウトです。list_chart_optionsツールが正式な一覧を返すので、AIアシスタントは常に有効な種類を選べます。

どの出力形式に対応していますか？

動画：MP4、WebM、アニメーションWebP（最大60fps）。画像：PNG、JPEG、WebP。ホスティング：どのサイトにもiframeで埋め込める公開URL。形式はrender_chartを呼び出すときに選び、書き出しが完了すると、AIは完成したファイルのURLか埋め込み用のURLを受け取ります。

認証はどのように行いますか？

すべてOAuthで行います。AIクライアントがAlien Artに移動し、あなたが接続を承認すると、クライアントはツール呼び出しのたびに送るベアラートークンを受け取ります。APIキーのコピーも、シークレットの管理も、環境変数の設定も不要です。接続はアカウント設定からいつでも取り消せます。

AIは既存のプロジェクトを編集できますか？

はい。グラフの一覧を表示させて（list_charts）1つを選び、update_chart / update_layer / patch_spreadsheetを呼び出して手を加え続けられます。すべてのプロジェクトはAlien Artのアカウントに保存されるので、Webのエディターで開いて手作業で続けることもできます。

書き出しは同期処理ですか、それともバックグラウンドですか？

バックグラウンドです。render_chartがタスクIDを返し、get_taskで書き出しが終わるまで確認して、ファイルのURLを受け取ります。短いものは数秒、長いものは1〜2分かかることがあります。確認作業はAIアシスタントが代わりに行います。

ほかのグラフMCPと比べてどうですか？

AntV、mcp-echarts、QuickChart、Chart.js、Vega-Lite、Vizro、diagrammoなどとの比較は、グラフ生成MCPのランキング比較をご覧ください。要点をまとめると、ほかのグラフMCPはどれも既存のJSグラフライブラリをラップして、静止画や仕様を返すものです。動き・動画・編集できるプロジェクトを生み出せるのはAlien Artだけです。

1分以内にAIアシスタントと接続

登録してProを始め、https://staging.alienart.io/mcpをClaude、ChatGPT、Cursorに貼り付けるだけ。あとはOAuthにおまかせです。

まだ比較中ですか？グラフ生成MCPのランキングをご覧ください。