MCP（モデルコンテキストプロトコル）を使用してFramerプロジェクトをAIアシスタントと接続しましょう。Claude、Cursor、その他MCP互換ツールは、セキュア接続を通じてFramerデザインと直接インタラクションできます。

活用例

• ClaudeにSEOリサーチを基にしたランディングページ用キャッチフレーズの書き直しを依頼

• カスタムコードコンポーネントを生成してキャンバスに直接挿入

• 単一コマンドでプロジェクト全体のカラースタイルを更新

• FramerコンポーネントをプロダクションレディなReactコードにエクスポート

• AI生成コンテンツでデザイン更新を自動化

動作方法

このプラグインはFramerプロジェクトとMCP互換AIアシスタントの間にWebSocketベースのセキュアトンネルを作成します。このとき、FramerユーザーIDがユニークな識別子として使用され、すべてのプロジェクトで同じ接続URLを使用できるため、一度の設定で済みます。
AIアシスタント（Claudeなど）からのリクエストは、Cloudflare Workerを経由してFramerプラグインに送信され、プラグインのFramer Plugin APIがそのコマンドを実行します。応答は同じセキュアチャンネルを通じて戻ります。MCP URLにはユーザーのFramer IDとオプションのセッション秘密キーが含まれており、すべてのプロジェクトで同じように使用されます。

提供機能

• プロジェクト構造：ページ、コンポーネント、コードファイルのXML構造を返答

• ノード選択：選択した要素を読み込んで修正

• XML更新：ノードプロパティ、テキスト、構造を修正

• カラースタイル：カラースタイルの生成、修正、適用

• テキストスタイル：タイポグラフィスタイルの管理（属性含む）

• フォント検索：Framerフォントライブラリからフォント検索および適用

• ノード操作：要素の複製、削除、特定ノードへのズーム

• Reactエクスポート：FramerコンポーネントをReactコードに変換（unframer CLIを使用、React Exportプラグインと同じサブスクリプション共有）

• コードファイル：TypeScript/Reactコードコンポーネントを生成、読み取り、修正

• コンポーネント挿入：コンポーネントを正確な位置に挿入

AIアシスタント接続方法

Claudeデスクトップアプリ

1. メニュー > 設定を開く

2. Developerタブで設定ファイルを編集

3. プラグインから提供されたMCPサーバーURLを追加

4. アプリ再起動後に接続を有効化

Cursor IDE

1. コマンドパレットを開く（Cmd/Ctrl + Shift + P）

2. 「Cursor Settings」でMCPオプションを選択

3. 設定ファイル(~/.cursor/mcp.json)にサーバーURLを追加

4. MCPサーバーを更新

5. エージェントモードでMCPツールを使用

Claude Code CLI

1. Claude Code CLIをインストール

2. claude mcp add "framer-mcp" <mcp-url>を実行

3. すべてのセッションでサーバーを使用可能

技術詳細

このシステムは以下の3つの要素で構成されています：

• Framerプラグイン: Framer内部で実行され、API呼び出しを処理しWebSocket接続を維持

• MCPサーバー: Cloudflare WorkerでMCPプロトコルを実行

• WebSocketトンネル: ユーザーIDに基づく双方向接続

一つのユーザーアカウントには一つのプラグインしか接続できませんが、複数のMCPクライアントが同時に接続可能です。すべてのリクエストは5秒の制限と自動再接続機能をサポートし、実行前に検証されます。

セキュリティ関連事項

• セッションシークレットが含まれたMCP URLを絶対に共有しないでください。

• 接続はFramerユーザーアカウントに帰属します。

• すべての操作はMCPクライアントでの明示的な承認が必要です。

• プラグインは現在開いているプロジェクトにのみアクセスします。

活用例

• ランディングページ最適化: Claudeがキーワードを調査し、タイトルとメタディスクリプションをSEO最適化されたコンテンツに更新

• デザインシステム更新: Claudeにカラーパレットを生成させ、全コンポーネントに適用

• コンポーネント開発: Claude CodeでReactコンポーネントを作成し、Framerプロジェクトに直接挿入

• コンテンツ移行: 既存のコンポーネントをReactコードにエクスポートし、プロダクションアプリに統合

• 自動テスト: アクセシビリティ基準を満たさないテキストスタイルを確認して修正

キャンバススペースを節約

MCPは常に開いている必要がありますが、右下の縮小ボタンを押してウィンドウを最小化することで画面スペースを節約できます。

プログラムによる使用例

MCPを通じてFramerをプログラム的に制御することも可能です。例えば、SEOキーワードリサーチの結果を基にブログ投稿を自動追加するエージェントを作成できます。