Mobbin について
Mobbin公式のMCPサーバーで、デザインや開発に使うMobbinの画面リファレンスをAIツールやMCPクライアントから利用できます。Mobbinがホストし、OAuthで認証します。
主な機能
- 01Mobbinの画面リファレンスに接続
- 02ホスト型Streamable HTTPサーバー
- 03OAuthによるアクセス認証
- 04複数のAIツールとMCPクライアントに対応
活用シーン
- 01UIデザイン向けの製品事例探し
- 02AIツールからMobbinのリファレンスを利用
MCP 対応
ホスト型のStreamable HTTPサーバーを通じて、MCPクライアントをMobbinに接続します。初回利用時はブラウザーでOAuth認証を行います。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://api.mobbin.com/mcpclaude mcp add --transport http mobbin https://api.mobbin.com/mcp{"mcpServers":{"mobbin":{"type":"http","url":"https://api.mobbin.com/mcp"}}}Cursor で開く{"servers":{"mobbin":{"type":"http","url":"https://api.mobbin.com/mcp"}}}VS Code で開く{"mcpServers":{"mobbin":{"type":"http","url":"https://api.mobbin.com/mcp"}}}{"mcpServers":{"mobbin":{"serverUrl":"https://api.mobbin.com/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
3| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| query | string | はい | 画面を 1 つ選び、表示される UI 要素とその関係を平易な言葉で説明してください。具体的に詳しく記述すると検索精度が上がります。良い例：「生体認証を使ったログイン画面」、「プロモーションコード欄と Apple Pay ボタンがある決済ページ」。複数の画面や意図を組み合わせること（個別に検索）、否定表現（「広告なし」）、曖昧なスタイル語（「モダン」「すっきり」）、関連のないキーワードの羅列は避けてください。特定のアプリ名を指定すると、そのアプリに絞り込めます（例：「Spotify の再生中画面」）。プラットフォーム（ios/web）は含めず、専用のパラメーターを使用してください。 |
| platform | enum | はい | 検索するプラットフォームios | web |
| mode | enum | いいえ | 検索モード。「standard」は低レイテンシで結果を返します。「deep」は AI を活用したパイプラインで意図を解釈し、各候補の関連性をスコア化して、有力な一致結果を残します。細かなニュアンスを含むクエリに適しています。「fast」は非推奨の「standard」の別名で、今後のバージョンで削除されます。「standard」を使用してください。deep | standard | fast |
| exclude_screen_ids | array | いいえ | 結果から除外する画面 ID |
| limit | integer | いいえ | 返す画面の最大数。返す画面数が多いほど、コンテキストの使用量が増えます。 |
| image_format | enum | いいえ | 画像形式。クライアントが webp に対応していない場合は jpg を使用してください。webp | jpg |
詳細
Mobbin 公式 MCP サーバー
Mobbin は、Claude、ChatGPT、Codex、Cursor、Grok、Figma、Antigravity などの AI ツールや MCP クライアントで、公式プラグインまたはコネクターとして利用できます。概要については、MCP 製品ページをご覧ください。
メモ
Mobbin プラグインはこのリポジトリではなく、mobbin/skillsで設定します。このリポジトリに含まれるのは MCP サーバーの設定のみで、スキルは含まれていません。
セットアップ
推奨セットアップ
Mobbin MCP のドキュメントに従って、お使いの AI ツール向けの公式 Mobbin プラグインまたはコネクターを確認し、手順に沿ってセットアップしてください。お使いの AI ツールがプラグインに対応している場合、Mobbin プラグインには Mobbin スキルと MCP サーバーがまとめて含まれています。対応していない場合は、mobbin/skillsから Mobbin スキルを別途インストールしてください。
Streamable HTTP を使った手動セットアップ（非推奨）
警告
手動セットアップで接続されるのは MCP サーバーのみで、Mobbin スキルは含まれません。お使いの AI ツールが一覧にある場合は、推奨セットアップを使用してください。
Mobbin の MCP サーバーは https://api.mobbin.com/mcp でホストされており、Streamable HTTP トランスポートを使用します。クローン、インストール、ローカルでの実行は不要で、API キーの設定も必要ありません。Streamable HTTP サーバーとして MCP クライアントに追加してください。
{
"mcpServers": {
"mobbin": {
"url": "https://api.mobbin.com/mcp"
}
}
}
クライアントによっては、トランスポートを明示的に指定する必要があります。Cline では、url とともに "type": "streamableHttp" を追加してください。追加しない場合、従来の SSE トランスポートにフォールバックし、接続に失敗します。
初回使用時、クライアントによってブラウザーウィンドウが開き、Mobbin にサインインして OAuth 経由でアクセスを許可するよう求められます。
サーバーが公開しているツールについては、docs.mobbin.com/mcp/featuresをご覧ください。
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。