Whimsical

Whimsical MCP Server

公式の Whimsical MCP サーバーです。Claude、ChatGPT、Cursor、または任意の MCP クライアントにフローチャート、マインドマップ、シーケンス図、ワイヤーフレーム、アーキテクチャ図を依頼すると、ワークスペース内に編集可能な Whimsical ボードを作成します。静止画像ではなく、チームで開いて編集やコメントができる実ファイルが作られます。また、既存のボードやドキュメントの検索、閲覧、編集、コメントもできます。

• エンドポイント： https://mcp.whimsical.com/mcp（Whimsical がホストする Streamable HTTP。インストール不要）
• 認証： PKCE を使用した OAuth 2.1。管理が必要な API キーはありません。
• プラン： すべてのツールを無料プランで利用でき、月あたり最大 50 個のボードオブジェクトが含まれます。有料プランにはオブジェクト数の上限がありません。
• クライアント： Claude、Claude Code、ChatGPT、Cursor、GitHub Copilot 搭載の VS Code、Grok、Codex、およびリモート MCP サーバーに対応するすべてのクライアント。

クイックスタート

Claude Code の場合：

claude mcp add --transport http whimsical https://mcp.whimsical.com/mcp

リモート MCP サーバーに対応するその他のクライアントでは、この URL を使ってサーバーを追加し、プロンプトが表示されたら Whimsical にサインインします。

https://mcp.whimsical.com/mcp

次に、次のように試してみてください：「ユーザー登録の流れを示すフローチャートを Whimsical で作成して。」 各クライアントのセットアップ手順は以下にあります。

作成できるもの

以下の各例は、試してみることができるプロンプトです。エージェントが Whimsical ワークスペースにファイルを作成し、リンクを返信します。対応するクライアントでは、チャット内にプレビューも表示されます。

フローチャート

Whimsical でユーザーログインのフローチャートを作成してください。ログインページから認証情報を検証し、有効な場合はダッシュボードに進み、無効な場合はエラーを表示して再試行する流れです。

判断ノード、ラベル付きコネクター、上から下への見やすいレイアウトを備えたフローチャートが自動配置されます。左から右への配置を依頼すると、エージェントがレイアウトをやり直します。

シーケンス図

ブラウザー、Web アプリ、認可サーバー、API 間の OAuth 認可コードフローを示すシーケンス図を Whimsical で作成してください。

エージェントは、アクターごとに 1 本のライフラインを設け、メッセージを順番に示したシーケンス図を作成します。

アーキテクチャ図

システムの技術図を Whimsical で作成してください。React フロントエンドが API ゲートウェイを呼び出し、ゲートウェイが認証、請求、通知の各サービスにルーティングします。各サービスにはそれぞれ独自のデータベースがあります。

エージェントは、サービスの境界と、リクエストやデータの流れを示すコネクターを使って、ボード上にコンポーネントを配置します。

マインドマップ

モバイルアプリの機能をブレインストーミングするため、オンボーディング、主要機能、収益化、成長の各ブランチを含むマインドマップを Whimsical で作成してください。

中心となるトピックとそのブランチを水平方向に配置したマインドマップが作成されます。上から下へのツリーにするには、垂直方向のレイアウトを依頼してください。

ワイヤーフレーム

サイドバーナビゲーション、アバターとフォームフィールドを含むプロフィールセクション、下部の危険操作エリアを備えた設定ページのワイヤーフレームを Whimsical で作成してください。

エージェントは、フレックスボックスレイアウトを使い、ワイヤーフレーム要素（コンテナー、入力欄、ボタン、アイコン）から画面を構築します。そのため、「プライマリボタンを全幅にして」のような追加の依頼をしても、すべてが整列した状態に保たれます。

付箋

前回のスプリントの振り返り用に、うまくいったこと、うまくいかなかったこと、次に試すアイデアに分けて、Whimsical で付箋を作成してください。

依頼したグループに分けて自動配置した付箋がボードに作成され、チームが追加したり投票したりできる状態になります。

ドキュメントと表

新しい API の技術仕様を Whimsical のドキュメントとして作成し、話し合った 3 つの選択肢を比較する表を含めてください。

ドキュメントでは、見出し、リスト、リンク、コードブロック、表を使用できます。表はボードにも追加できます。

ワークスペースにあるものを活用する

Whimsical のワークスペースで「API design」に関するものを検索し、見つかった内容を要約してください。

API フロー図にレート制限のステップを追加し、チームにレビューを依頼するコメントを残してください。

エージェントは、ワークスペースを検索し、ボードやドキュメント（ボードの PNG スナップショットを含む）を読み取り、既存の図を編集し、ファイルをフォルダー間で移動し、コメントスレッドを読み取り、書き込み、解決できます。

ツール

ツール	機能
search	テキスト、作成日、更新日でワークスペースを検索します
fetch	ID でボード、ドキュメント、フォルダーを読み取るか、ボードの PNG スナップショットを取得します
file_tree	Private、Shared、チームの各セクションと、その中のフォルダーを閲覧します
how_to	フローチャートやワイヤーフレームを作成する前に、Whimsical の構文ガイドを参照します（エージェントが自動的に呼び出します）
create_file	フォルダーを指定しない場合は、Private セクションにボード、ドキュメント、フォルダーを作成します
add_board_content	フローチャート、マインドマップ、シーケンス図、付箋、表、ワイヤーフレームをボードに追加します
add_doc_content	Markdown をドキュメントに追加します
edit	ボード上の図形、テキスト、コネクターを追加、更新、削除するほか、マインドマップやシーケンス図のノードを編集したり、ドキュメント内のブロックを変更したりします
wireframe_edit	ワイヤーフレームの要素を再配置または編集します
auto_layout	フローチャートの自動レイアウトを、上から下、左から右などの方向で再実行します
delete	ファイル、フォルダー、ドキュメントをゴミ箱に移動します
move	ファイル、フォルダー、ドキュメントを別のフォルダーに移動します
comment_read	ボードまたはドキュメントのコメントスレッドを読み取ります
comment_edit	コメントの作成、返信、編集、解決、再開、削除を行います

詳細とプロンプトの追加例については、ツールリファレンスをご覧ください。

セットアップ

Claude

Whimsical は、Claude のコネクターディレクトリで認証済みのコネクターです。Whimsical コネクターを開き、Connect をクリックして Whimsical にサインインしてください。

Claude Code

claude mcp add --transport http whimsical https://mcp.whimsical.com/mcp

Claude Code で /mcp を実行してサインインしてください。

ChatGPT

ChatGPT 用 Whimsical アプリを使用します。

1. ChatGPT で Settings → Plugins を開きます。
2. Whimsical を検索するか、上記のリンクを使用します。
3. Connect をクリックして、認証を完了します。

その後、任意のチャットで @Whimsical と入力します。詳しくは、ChatGPT ガイドをご覧ください。

Cursor

または、Cursor のプラグインディレクトリからWhimsical プラグインをインストールするか、手動で追加します。Cursor → Settings → Cursor Settings → Tools & MCP を開き、新しい MCP サーバーを追加して、次の設定を保存します。

{
  "mcpServers": {
    "whimsical": {
      "url": "https://mcp.whimsical.com/mcp"
    }
  }
}

詳細については、Cursor の MCP ドキュメントをご覧ください。

VS Code（GitHub Copilot）

1. ⌘ Shift P（または Ctrl Shift P）を押して、MCP: Add Server を実行します。
2. HTTP を選択します。
3. https://mcp.whimsical.com/mcp を貼り付けて、Enter を押します。
4. サーバー ID の入力を求められたら、whimsical と入力します。
5. サーバーをグローバルに追加するか、現在のワークスペースのみに追加するかを選択します。

Grok

1. grok.com/connectors にアクセスします。
2. New Connector をクリックし、Custom を選択します。
3. https://mcp.whimsical.com/mcp を入力して、Whimsical にサインインします。

詳しくは、Grok ガイドをご覧ください。

その他のクライアント

Streamable HTTP 経由のリモート MCP サーバーに対応しているクライアントであれば、次の設定で接続できます。

{
  "mcpServers": {
    "whimsical": {
      "url": "https://mcp.whimsical.com/mcp"
    }
  }
}

認証

サーバーは PKCE を使用した OAuth 2.1 を利用します。初めて接続すると、クライアントでブラウザーウィンドウが開き、Whimsical にサインインしてワークスペースへのアクセスを承認します。その後、エージェントは承認されたアクセス権を使用して、あなたとして Whimsical を操作します。

リモート MCP とデスクトップ MCP

このリポジトリでは、Whimsical がホストし、ほとんどのユーザーに推奨しているリモート MCP サーバーを扱います。Whimsical は、Whimsical デスクトップアプリ内で実行され、開いているファイルを操作するデスクトップ MCP サーバーも提供しています。設定するには、サポートにお問い合わせください。

FAQ

これは公式の Whimsical MCP サーバーですか？ はい。Whimsical が構築、ホスト、保守しており、公式 MCP Registry に com.whimsical/mcp として登録されています。コミュニティが構築した Whimsical MCP サーバーもありますが、こちらは Whimsical が保守しているものです。

何かをインストールまたは実行する必要がありますか？ いいえ。サーバーは https://mcp.whimsical.com/mcp で実行されています。URL をクライアントに追加してサインインしてください。

API キーは必要ですか？ いいえ。サインインには OAuth を使用するため、キーの作成、保存、ローテーションは必要ありません。

画像や編集可能な図を作成できますか？ 編集可能な図を作成できます。エージェントが作成するものはすべて、あなたやチームが開いて編集したり、コメントを追加したりできる、ワークスペース内の通常の Whimsical ファイルです。fetch ツールでは、ボードの PNG スナップショットも取得できます。

既存の図を読み取って更新できますか？ はい。ワークスペースを検索したり、ボードやドキュメントを読み取ったり、編集したり、レイアウトを再実行したり、コメントを操作したりできます。

トラブルシューティング

• サインイン画面が開かない、またはサインインに失敗する。 Claude Code で /mcp を実行するか、クライアントの再接続操作を使用して、もう一度サインインしてください。Whimsical にサインインすると、ブラウザーからクライアントにリダイレクトされます。
• インストール後にツールが表示されない。 Claude Code で /reload-plugins を実行するか、他のクライアントではエディターを再起動してください。
• 401 または "Missing Bearer token" が表示される。 セッションの有効期限が切れています。/mcp またはクライアントの再接続操作から、もう一度サインインしてください。
• Whimsical アカウントを持っていない。 https://whimsical.com で無料アカウントを作成してください。サーバーは既存のワークスペースにサインインします。

リンク

• 概要： https://whimsical.com/mcp
• セットアップガイド： https://whimsical.com/learn/integrations/mcp
• ツールリファレンス： https://whimsical.com/learn/ai/mcp-tools
• サポート： [email protected]
• プライバシーポリシー： https://whimsical.com/terms/privacy