Web3 Framer Plugin

🚀 Framer プラグイン MCP サーバー

Model Context Protocol (MCP) サーバーで、web3 機能を持つ Framer プラグインの作成と管理をサポートします。このサーバーは、ウォレット接続、スマートコントラクトの相互作用、NFT 表示などの web3 機能を統合した Framer プラグインを作成、構築、管理するためのツールを提供します。

🚀 クイックスタート

このサーバーを使用することで、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 デスクトップアプリケーション (~/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": "web3 機能を持つ Framer プラグイン",
  "outputPath": "./plugins/my-web3-plugin",
  "web3Features": ["wallet-connect", "nft-display"]
}

build_plugin

本番環境用の Framer プラグインプロジェクトを構築します。

パラメータ：

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

例：

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

📄 ライセンス

このプロジェクトは MIT ライセンスの下で公開されています。詳細は LICENSE ファイルを参照してください。