LottieFiles MCPサーバー

「LottieFiles」MCPサーバーとは？

LottieFiles MCPサーバーは、AIアシスタントによるLottieFilesアニメーションプラットフォームへのアクセスを容易にするModel Context Protocol (MCP) サーバーです。ブリッジとして機能し、AI駆動の開発ワークフローでLottieアニメーションの検索・取得・操作をプログラム的に可能にします。アニメーションの検索、人気アニメーションの取得、特定アニメーションの詳細取得といったエンドポイントを公開することで、開発者やAIクライアントが豊かなアニメーションコンテンツを自身のアプリやデザインプロセスにシームレスに組み込めます。この統合により、関連アニメーションの発見、メタデータの取得、Lottieアニメーションを使ったクリエイティブワークフローの自動化などが効率化されます。

プロンプト一覧

リポジトリやドキュメントに明示的なプロンプトテンプレートはありません。

リソース一覧

• Lottieアニメーションインデックス
  LottieFilesにある利用可能なLottieアニメーションの検索可能なインデックスにアクセスできます。
• アニメーション詳細
  個々のLottieアニメーションの詳細情報やメタデータを提供します。
• 人気アニメーション一覧
  現在トレンド入りまたは人気のLottieアニメーションを厳選したリストで提供します。

ツール一覧

• アニメーション検索
  キーワードやページ・リミットなどのフィルターパラメータでLottieFilesデータベースからアニメーションを検索できます。
• アニメーション詳細取得
  一意の識別子で指定したLottieアニメーションの詳細情報を取得します。
• 人気アニメーション取得
  現在トレンドまたは広く使われているLottieアニメーションをページネーション対応で取得します。

本MCPサーバーのユースケース

• アニメーション検索の自動化
  デザイン・開発・プレゼンテーションワークフロー向けに、キーワードベースで関連Lottieアニメーションを自動検索。
• デザインアセット統合
  デザインツールやプラットフォームがID指定でLottieアニメーションを直接取得・埋め込めるようにし、デザイナーや開発者のアセット統合を効率化。
• トレンドコンテンツ発見
  人気・トレンドのLottieアニメーションをユーザーに提示し、UI/UXを高めるインパクトあるビジュアルコンテンツを提案。
• パーソナライズされたアニメーションライブラリ
  条件に合致するアニメーションをプログラムで収集し、製品向けカスタムライブラリやプレイリストを構築。
• 分析向けメタデータ抽出
  アニメーションの詳細なメタデータを取得し、分析・カタログ化・レコメンドシステム等に活用。

セットアップ方法

Windsurf

1. Node.jsがインストールされていることを確認します。
2. Windsurfの設定ファイルを見つけます。
3. mcpServersオブジェクトにLottieFiles MCPサーバーのエントリを追加します:

   {
     "mcpServers": {
       "lottiefiles": {
         "command": "npx",
         "args": ["@junmer/mcp-server-lottiefiles@latest"]
       }
     }
   }
   

4. 設定を保存し、Windsurfを再起動します。
5. Windsurfクライアントから接続してセットアップを確認します。

APIキーの安全な設定
設定内で環境変数を利用します:

{
  "mcpServers": {
    "lottiefiles": {
      "command": "npx",
      "args": ["@junmer/mcp-server-lottiefiles@latest"],
      "env": {
        "LOTTIEFILES_API_KEY": "YOUR_SECRET_KEY"
      }
    }
  }
}

Claude

1. Node.jsが利用可能であることを確認します。
2. Claudeの設定ファイルを開きます。
3. LottieFiles MCPサーバー構成を挿入します:

   {
     "mcpServers": {
       "lottiefiles": {
         "command": "npx",
         "args": ["@junmer/mcp-server-lottiefiles@latest"]
       }
     }
   }
   

4. 変更を保存し、Claudeを再起動します。
5. ClaudeのインターフェースでMCPサーバー接続を確認します。

Cursor

1. Node.jsが未インストールの場合はインストールします。
2. Cursorの設定や設定ファイルを開きます。
3. MCP設定にサーバーを追加します:

   {
     "mcpServers": {
       "lottiefiles": {
         "command": "npx",
         "args": ["@junmer/mcp-server-lottiefiles@latest"]
       }
     }
   }
   

4. 保存してCursorを再起動します。
5. Cursorでの正常な登録を確認します。

Cline

1. Node.jsがインストールされていることを確認します。
2. Clineの設定ファイルを見つけます。
3. LottieFiles MCPサーバーの設定を追加します:

   {
     "mcpServers": {
       "lottiefiles": {
         "command": "npx",
         "args": ["@junmer/mcp-server-lottiefiles@latest"]
       }
     }
   }
   

4. 保存してClineを再起動します。
5. ClineのMCPセクションから接続をテストします。

フロー内での本MCPの使い方

FlowHuntでMCPを利用する

FlowHuntワークフローにMCPサーバーを統合するには、まずフローにMCPコンポーネントを追加し、AIエージェントに接続します。

MCPコンポーネントをクリックして設定パネルを開きます。system MCP設定欄に、以下のJSON形式でMCPサーバー情報を入力します:

{
  "lottiefiles": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定後、AIエージェントはこのMCPの全機能をツールとして利用できるようになります。“lottiefiles"は実際のMCPサーバー名、URLは自身のMCPサーバーのURLに置き換えてください。

概要

上記テーブルの通り、LottieFiles MCPサーバーはアニメーション取得・検索に特化し、ツール・リソース公開のコア機能がしっかりしています。プロンプトテンプレートや高度なMCP機能（rootsやサンプリング等）はありませんが、用途に対して有効に機能します。

MCPスコア