Whimsical

公式

AIに視覚的なワークスペースを任せて、ブレインストーミング、フローチャート、マインドマップ、ワイヤーフレーム、技術図を作成させましょう。

Whimsical MCPで何ができますか?

  • プロセス図の作成 — AIに技術的なプロセスをフローチャートやシーケンス図に変換させ、create_diagram を使用して新しいWhimsicalファイルに作成させます。
  • ワークスペースファイルの検索 — AIにsearch_files を使用して、システムアーキテクチャ図などの既存のWhimsicalファイルを検索・参照させます。
  • ビジュアルプランの生成 — マインドマップ、ワイヤーフレームの概要、または計画ドキュメントをWhimsicalワークスペースに直接作成するようリクエストします。

ドキュメント

学習

読み込み中… アプリを開く

Whimsical MCP

WhimsicalのMCP(Model Context Protocol)サーバーは、WhimsicalワークスペースをClaude、ChatGPT、CursorなどのAIツールに接続します。これにより、ワークスペース内のコンテンツへの安全な読み取り・書き込みアクセスが可能になり、以下のようなことを一緒に実行できます:

  • Whimsicalボード上で複雑なプロセスを視覚化する。
  • フローチャートでSOPをマッピングする。
  • プロンプトやコードからワイヤーフレームを生成する。
  • Whimsicalのワイヤーフレームから動作するプロトタイプをコード化する。
  • その他にもさまざまなことができます!

ステップ1:MCPクライアントを設定する

お使いのクライアントに応じて、以下の手順に従ってWhimsicalのMCPサーバーを追加してください。

Claude

WhimsicalはClaudeのコネクタディレクトリで検証済みコネクタです。ディレクトリから直接見つけるか、https://claude.ai/directory/connectors/whimsicalに直接移動できます。

開いたら、接続をクリックしてWhimsicalの認証を完了します。その後、ClaudeはWhimsicalのコンテンツにアクセスして操作できるようになります。

ChatGPT

専用のWhimsicalプラグイン for ChatGPTを使用できます。

  1. ChatGPTを開き、設定 → プラグインに移動します。
  2. Whimsicalを検索するか、この直接リンクを使用します。
  3. 接続をクリックして、認証手順を完了します。

接続後、任意のチャットで@Whimsicalと入力して使用します。詳細については、ChatGPT向けWhimsicalアプリの完全ガイドを参照してください。

Cursor

  1. Cursorのプラグインディレクトリから直接Whimsicalを追加します:https://cursor.directory/plugins/whimsical
  2. または、Cursor → 設定 → Cursor設定を開きます。
  3. ツールとMCPに移動します。
  4. カスタムMCPを追加または**+ 新しいMCPサーバー**をクリックします。
  5. 以下の設定を入力して保存します:

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

Grok

  1. grok.com/connectorsに移動します。
  2. 新しいコネクタをクリックし、カスタムを選択します。
  3. https://mcp.whimsical.com/mcpを入力し、Whimsicalのサインインを完了します。

詳細については、Grok向けWhimsicalコネクタの完全ガイドを参照してください。

その他のクライアント

MCPサーバーをサポートする他のツールも多数あるため、以下の値を使用してWhimsicalのMCPサーバーを設定できます:

  • 名前: whimsical-remote
  • URL: https://mcp.whimsical.com/mcp

ステップ2:認証

MCPサーバーはWhimsicalアカウントでのOAuth認証を必要とするため、必要なのはWhimsicalアカウントだけです。

ステップ3:接続を確認する

  • 「利用可能なWhimsicalツールは何ですか?」のようなプロンプトを送信します。MCPが接続されている場合、create_diagram、search_filesなどのツールのリストが表示されます。
  • Claude、ChatGPT、CursorのMCP設定ページで直接確認することもできます。

ステップ4:MCPクライアントにプロンプトを送信する

新しいチャットを開始し、Whimsicalで実行したいことを依頼します。始めるには、「Whimsical MCPで何ができますか?」と尋ねてみてください。👌

プロセス図やシーケンス図を作成する

AIに技術的なプロセスをWhimsicalの視覚的な図に変換させます。「典型的なOAuthフローのフローチャートを作成して」「Slackが通知を送信するタイミングを決定する仕組みの図を作成して」「APIリクエストが処理される仕組みを示すシーケンス図を生成して」などのプロンプトを試してみてください。

次のような結果が表示されます:

  • MCPサーバーがワークスペースに新しいファイルを作成します。
  • 提供されたコンテキストに基づいてフローチャートまたはシーケンス図を生成します。
  • チャット内で作成されたコンテンツのプレビューを直接表示し、出力を確認して操作できます。

Whimsicalファイルを検索して参照する

AIはWhimsicalファイルを検索して読み取ることができるため、コンテキスト内で参照できます。「先月作成したシステムアーキテクチャ図を見つけて」「Whimsicalでマッピングしたユーザーフローを要約して」と試してみてください。

次のような結果が表示されます:

  • MCPサーバーがワークスペース内のすべてのファイルを検索します。
  • 一致するファイル(または複数のファイル)を見つけます。
  • 一致するファイルへのリンクを返すか、チャット内に直接埋め込みます。
  • リクエストした要約を生成します。

視覚的に計画してブレインストーミングする

AIを使用して、Whimsicalでマインドマップ、ワイヤーフレームの概要、計画ドキュメントを直接作成します。「このプロジェクトの主要機能のマインドマップを作成して」「新しい設定ページのワイヤーフレーム概要を作成して」と試してみてください。

次のような結果が表示されます:

  • MCPサーバーがワークスペースに新しいファイルを作成します。
  • 提供されたコンテキストに基づいてマインドマップまたはワイヤーフレームを生成します。
  • チャット内で出力を確認して操作できる埋め込みとリンクを直接提供します。

この記事では、ほとんどの人に推奨されるWhimsicalのリモートMCPについて説明しています。

リモートMCPは、ホスト型MCPサーバーを介してChatGPT、Claude、CursorなどのAIツールをWhimsicalに接続します。インストールするものは何もなく、AIアシスタントがリモートMCPサーバーをサポートしている場所ならどこでも動作します。

MCPをローカルで実行したい場合は、代わりにデスクトップMCPを使用できます。これはWhimsicalデスクトップアプリを介して実行され、AIコーディングツールにマシン上のファイルやコードへのアクセスを提供できます。Claude Code、Codex、Copilotなどのエージェントに役立ちます。動作させるにはWhimsicalデスクトップアプリを開いておく必要があります。

デスクトップMCPを設定するには、サポートチームにお問い合わせください。

まとめ

  1. Whimsical MCP
  2. ステップ1:MCPクライアントを設定する
  3. Claude
  4. ChatGPT
  5. Cursor
  6. Grok
  7. その他のクライアント
  8. ステップ2:認証
  9. ステップ3:接続を確認する
  10. ステップ4:MCPクライアントにプロンプトを送信する
  11. プロセス図やシーケンス図を作成する
  12. Whimsicalファイルを検索して参照する
  13. 視覚的に計画してブレインストーミングする