ridvay-mcp

ridvay-mcp

AI アシスタント（Claude Code、Claude Desktop、GitHub Copilot（VS Code のエージェントモード）、Cursor、その他あらゆる MCP クライアント）から、チャットでの会話を通じて Ridvay Studio のポスター、チラシ、SNS デザインを直接作成・編集できる MCP（Model Context Protocol）サーバーです。

すべてのデザインは、共有用リンク（ridvay.com/d/…）と、Studio エディターで開いて編集するためのリンクを備えた、実際に使える形で返されます。

ホスト型エンドポイント（インストール不要）

同じサーバーが **https://mcp.ridvay.com**（ストリーミング可能な HTTP）で稼働しています。認証方法は 2 通りです。

• キー付き URL — URL でコネクターを追加し、ヘッダーを設定できないクライアント（claude.ai のカスタムコネクター、ChatGPT コネクター）向けです：https://mcp.ridvay.com/mcp/sk-ridvay-…。この URL はキーそのものと同様に扱ってください。ridvay.com/user/api-keys からいつでも取り消せます。
• Bearer ヘッダー — ヘッダーに対応するクライアント向けです：https://mcp.ridvay.com/mcp に Authorization: Bearer sk-ridvay-… を指定します。Claude Code：claude mcp add --transport http ridvay https://mcp.ridvay.com/mcp --header "Authorization: Bearer sk-ridvay-…".
• アカウント登録なしで試す — https://mcp.ridvay.com/mcp/demo はサンドボックスです。キーも登録も不要で、無料ツールのみ利用できます（デザインガイド、デザインの作成、レンダリング、PNG のエクスポート、共有）。ここで作成したデザインは公開され、削除される場合があります。また、ネットワークごとにレート制限があります。Claude Code：claude mcp add --transport http ridvay-demo https://mcp.ridvay.com/mcp/demo.
• サインイン（OAuth 2.1） — MCP OAuth に対応するクライアント（claude.ai のカスタムコネクター、ChatGPT コネクター／プラグイン、Claude Code、Cursor、MCP Inspector）向けです。キーを指定せずに https://mcp.ridvay.com/mcp を追加すると、クライアントは api.ridvay.com を認可サーバーとして検出し、自身を登録する（Dynamic Client Registration）、または Client ID Metadata Document を提示してから、承認のため ridvay.com/oauth/consent にリダイレクトします。取得するトークンは「 (OAuth)」という名前の通常の Ridvay API キーです。アカウントページからいつでも取り消せます（または、クライアントから失効エンドポイントを呼び出せます）。

更新可能なデザイン用ツール（0.6.0）

list_designs、share_design（表示／編集／ライブ画像／画面へのリンク）、get_values と set_values（デザインで宣言された {{variables}} を更新します。メニューボードや価格ボードは、/screen/<id> ページと /img/<id>.png のライブ画像で自動更新されます）、および list_brands（generate_poster に brand_id を渡します）。

動作の仕組み

この GIF のすべてのフレームは、この MCP サーバーでデザイン・レンダリングしたものです — デザイン IR として作成した 4 ページのデザインを create_poster で保存し、その後 export_poster でページごとにエクスポートしました。画面録画も画像エディターも不要です。

ツール

ツール	内容
get_design_guide	まずはこちらから — デザインをアシスタント自身が作成できるようにする、design-IR 作成仕様（要素の種類、背景、フォント、詳細な例）です。
create_poster	推奨する方法： アシスタントが Ridvay design IR としてデザインを作成し、Ridvay はそれを保存、レンダリング、共有するだけです。高速、無料で、創作を完全にコントロールできます。
generate_poster	代替手段：Ridvay の AI がテキストの概要からデザインを作成します（時間がかかり、アカウントの生成クレジットを消費します）。
recreate_poster	既存のデザイン画像（ポスターの写真、スクリーンショット、エクスポート画像。ファイルパスまたは URL）を編集可能なデザインに変換します。テキストは編集可能になり、図形はベクターになり、画像は新たにレンダリングされます。時間がかかり（1～4 分）、生成クレジットを使用します。
refine_poster	既存のデザインを自然言語で編集します（design_id、instruction）。
check_poster	デザインの AI 画像のレンダリングが完了したかを報告し、そのリンクと閲覧数（Views: N）を返します。
export_poster	デザインを元のピクセルサイズでダウンロード可能な PNG/JPEG にレンダリングします（scale は 1～4、デフォルトは 2）。
animate_poster	動き（開始／終了、ページ遷移、モーフィング）を追加します。空欄の場合は上品なデフォルトが適用され、動きを説明することもできます。
export_video	アニメーション付きデザインをダウンロード可能な H.264 MP4 にレンダリングします（ループするサウンドトラックは任意）。
check_export	非同期の export_poster ／ export_video ジョブを確認し、ダウンロード URL を取得します。

AI クライアントがデザインを作成し、Ridvay は保存、レンダリング、共有を担うバックエンドです。クライアントが作成したデザインにも prompt 画像スロットを含めることができ、Ridvay が作成後にサーバー側でレンダリングします。アシスタントがデザインを自分で作成できない場合は、引き続き generate_poster を利用できます。

エクスポートとモーション： export_poster は共有ページではなく、実際のサイズ（例：1080×1350 の PNG）のポスター画像を出力します。アニメーションを作成するには、デザインの作成時にモーションフィールドを含める（ガイドを参照）か、animate_poster を呼び出し、その後 export_video で MP4 を出力します。

size は 1080x1080（デフォルト）、1080x1920 ／ story、1080x1350、1920x1080、 a4、slide、または任意の WxH を指定できます。

ライブ画像

共有済みのデザインには、常に最新の画像 URL も付与されます。取得するたびにデザインのライブデータバインディング（{{time.now}}、カウントダウン、JSON フィード、宣言済みの {{vars}}）が再解決されるため、埋め込み画像が古くなることはありません（再レンダリングは最短 60 秒間隔です）。

https://ridvay.com/img/{designId}.png

宣言済みの変数はクエリパラメーターから設定されるため、ESP の差し込みタグを使えば、パーソナライズされたメール画像を 1 つの URL で作成できます。

https://ridvay.com/img/abc123.png?name=*|FNAME|*

.jpg 形式のほか、page、scale、w、quality パラメーターも利用できます。バインディング形式（バインディング／変数のキーとして使用できない予約済みパラメーター名を含む）については、get_design_guide の「ライブデータバインディングとライブ画像 URL」を参照してください。

ライブ画像の読み込みと /d/ 共有ページの表示は、いずれもデザインの閲覧数に加算されます。check_poster で Views: N として確認できます。

API キーを取得する

サインインして、ridvay.com/user/api-keys でキーを作成してください。MCP 経由で生成したデザインは、自分の My designs に表示されます。

クイックスタート

Claude Code

claude mcp add --scope user ridvay --env RIDVAY_API_KEY=sk-ridvay-… -- npx -y ridvay-mcp

Claude Desktop — claude_desktop_config.json に追加します （macOS の場合：~/Library/Application Support/Claude/claude_desktop_config.json）。

{
  "mcpServers": {
    "ridvay": {
      "command": "npx",
      "args": ["-y", "ridvay-mcp"],
      "env": { "RIDVAY_API_KEY": "sk-ridvay-…" }
    }
  }
}

VS Code ／ GitHub Copilot エージェントモード — ユーザーの mcp.json に追加し （コマンドパレット → 「MCP: Open User Configuration」）、Copilot Chat のツール選択メニューで ridvay を有効にします。

{
  "servers": {
    "ridvay": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "ridvay-mcp"],
      "env": { "RIDVAY_API_KEY": "sk-ridvay-…" }
    }
  }
}

その後、アシスタントに次のように依頼できます。

週末限定のフラッシュセール用に、ストーリーサイズのポスターを作成してください。全商品 30％オフ、土曜日のみです。

例

ブリーフから直接ポスターを作成

週末のフラッシュセール用に、ストーリーサイズのポスターを作成してください。全商品30％オフ、土曜日限定です。

プロモーション動画を最初から最後まで — デザイン、アニメーション、MP4を1回の指示で作成します。

ridvay MCPを使って、[トピック]についての1080x1920のプロモーション動画デザインを3ページで作成してください。1ページ目：目を引く大胆なフック。2ページ目：アクセントバーを添えた重要ポイントを3〜4つ。3ページ目：具体例と行動喚起。背景はダークネイビー、アクセントはブルー、見出しはPoppinsにしてください。その後、テンポのよい段階的な登場アニメーションとモーフトランジションを追加し、MP4にレンダリングしてください。

既存のデザインを再び編集可能に

~/Desktop/last-years-flyer.pngを編集可能なデザインとして再現し、日付をOctober 3rdに変更して、見出しをブランドブルーにしてください。

古くならない画像 — ライブバインディングは取得のたびに解決されます。

今日の日付と9月1日のローンチまでのカウントダウンを表示する1080x1080のステータスカードを作成し、ライブ画像URLを教えてください。

動画の例を詳しく解説した、エージェントが実際に使うツールの順序を含む記事は、ブログをご覧ください：Ridvay MCP：Claude Codeから無料でAIデザインを生成。

環境

変数	必須	意味
RIDVAY_API_KEY	はい	Ridvay APIキー（sk-ridvay-…）。
RIDVAY_API_URL	いいえ	デフォルトは https://api.ridvay.com です。
RIDVAY_WEB_URL	いいえ	返されるリンクのベースURL。デフォルトは https://ridvay.com です。
RIDVAY_SUB_USER_ID	いいえ	管理者／プラットフォームのキーのみ：特定のユーザーに代わって操作します。

動作に関する注意

• 共有： generate_poster ／ create_poster は、デフォルトで非公開リストの公開共有リンクを作成するため、チャットの返信に有効な /d/{id} URLが含まれます。デザインをアカウント内で非公開にするには、share: false を指定してください（Studioの編集リンクのみが返されます）。
• 画像の後処理： レイアウトの準備が整うと生成結果が返されます。AI画像やストック画像はバックグラウンドでサーバー側にレンダリングされます（約1分）。check_poster は処理状況を報告し、必要に応じてその処理を再実行します。

テレメトリー

MCPからのコンテンツおよび使用状況データ（プロンプトや生成されたデザインなど）は、Ridvayの製品、サービス、AI機能の改善に使用される場合があります。リクエストには基本的な属性情報が含まれます。接続中のMCPクライアントの名前とバージョン、およびアシスタントが任意の agent_model 引数を指定した場合は、デザインの作成に使用したモデルIDです。

開発

npm install
npm run build     # emits dist/
npm test          # vitest unit suite
node dist/index.js  # run the stdio server directly (needs RIDVAY_API_KEY)

MIT © Ridvay