Framer Plugin MCP Server

Framer Plugin MCP Server

web3 機能を備えた Framer プラグインの作成と管理を可能にする Model Context Protocol（MCP）サーバーです。このサーバーは、ウォレット接続、コントラクトとのやり取り、NFT の表示などの web3 機能を統合した Framer プラグインを作成、ビルド、管理するためのツールを提供します。

機能

• web3 機能を備えた新しい Framer プラグインを作成
• プラグインを本番環境向けにビルド
• 統合された web3 機能：
  • Wallet Connect の統合
  • スマートコントラクトとのやり取り
  • NFT 表示コンポーネント

必要条件

• Node.js 16 以降
• NPM または Yarn
• プラグインのテスト用 Framer デスクトップアプリ

インストール

1. このリポジトリをクローンします：

git clone https://github.com/sheshiyer/framer-plugin-mcp.git
cd framer-plugin-mcp

2. 依存関係をインストールします：

npm install

3. サーバーをビルドします：

npm run build

設定

サーバーを MCP 設定ファイルに追加します：

Claude Desktop App の場合（~/Library/Application Support/Claude/claude_desktop_config.json）：

{
  "mcpServers": {
    "framer-plugin": {
      "command": "node",
      "args": ["/path/to/framer-plugin-mcp/build/index.js"]
    }
  }
}

Cursor/Claude Dev の場合（~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json）：

{
  "mcpServers": {
    "framer-plugin": {
      "command": "node",
      "args": ["/path/to/framer-plugin-mcp/build/index.js"]
    }
  }
}

使用方法

設定すると、サーバーから次のツールを利用できます：

create_plugin

web3 機能を備えた Framer プラグインプロジェクトを新規作成します。

パラメーター：

• name：プラグイン名
• description：プラグインの説明
• outputPath：出力ディレクトリのパス
• web3Features：含める機能の配列（wallet-connect、contract-interaction、nft-display）

例：

{
  "name": "my-web3-plugin",
  "description": "A Framer plugin with web3 features",
  "outputPath": "./plugins/my-web3-plugin",
  "web3Features": ["wallet-connect", "nft-display"]
}

build_plugin

Framer プラグインプロジェクトを本番環境向けにビルドします。

パラメーター：

• pluginPath：プラグインディレクトリのパス

例：

{
  "pluginPath": "./plugins/my-web3-plugin"
}

コントリビューション

コントリビューションを歓迎します！お気軽にプルリクエストを送信してください。

ライセンス

MIT License - 詳細は LICENSE ファイルをご覧ください