LottieFiles MCP 伺服器

概述

LottieFiles MCP 伺服器（常簡稱為 "Lottie MCP"）是一個輕量級、開源的模型情境協定 (MCP) 伺服器，它連結了 AI 智能代理與 LottieFiles 上龐大的 Lottie 動畫庫。它讓大型語言模型和 AI 編碼助手能夠發現、預覽動畫元數據，並取得高品質的向量動畫，無需離開對話或建置自訂的 API 整合。

Lottie 是由 Airbnb 最初創建、廣受歡迎的開源向量動畫格式，廣泛應用於網頁、行動裝置和 UI/UX 設計。這個 MCP 伺服器讓整個 LottieFiles 目錄能作為工具，供具代理能力的 AI 工作流程使用。

功能特色

• 搜尋 Lottie 動畫：使用關鍵字或描述來查詢 LottieFiles 資料庫。
• 取得動畫詳細資料：檢索完整的元數據，包括 JSON 結構資訊、作者、下載次數、分類和預覽網址。
• 熱門動畫清單：存取趨勢或高評價的 Lottie 檔案，快速獲取靈感。
• 符合 MCP 標準：與任何 MCP 客戶端完全相容，包括 Claude Desktop、Cursor、VS Code 擴充功能等。
• 簡易安裝：支援透過 Smithery 或 npm 一鍵安裝。

使用案例

• AI 驅動的動態設計：讓 Claude 或 Cursor 搜尋現有的 Lottie 動畫，並將其整合到 UI 原型、網站或應用程式中。
• 快速原型設計：智能代理可以在生成程式碼的過程中，找到合適的載入動畫、圖示、插圖或複雜的 UI 動畫。
• 設計系統自動化：將 Lottie 資源與其適當的元數據整合到生成的 React、Flutter 或網頁專案中。
• 創意工作流程：與 Lottie Creator 本身的 MCP 橋接器等工具結合，實現端到端的動畫生成與編輯。
• 教育與探索：AI 助手可以透過按需提取真實範例，來解釋和展示 Lottie 動畫。

安裝與設定

透過 Smithery（推薦用於 Claude Desktop）

npx -y smithery install mcp-server-lottiefiles --client claude

手動安裝

npm install -g mcp-server-lottiefiles
# 或克隆儲存庫並在本地執行

安裝完成後，請設定你的 MCP 相容客戶端（Claude、Cursor 等）來連接到此伺服器。該伺服器可在本地執行，亦可遠端託管，並提供標準化的工具來搜尋和取得動畫。

運作原理

1. 你的 AI 智能代理（透過 MCP）呼叫伺服器並提供搜尋查詢。
2. 伺服器查詢 LottieFiles 的公開 API。
3. 結果以 AI 能夠理解並據以行動的結構化格式返回（例如，下載網址、JSON 資料、預覽）。
4. AI 隨後可以在生成的程式碼或設計中參考、嵌入或修改該動畫。

這使得 AI 情境豐富且工具能力增強，無需模型內建對成千上萬個資源的知識。

相關工具

• Lottie Creator MCP Bridge: 來自 LottieFiles 的官方整合方案，讓 AI 代理能夠直接在 Lottie Creator 編輯器中讀取、編輯圖層並生成動畫變體。
• 更廣泛的 Lottie 生態系統，包括 lottie-web、lottie-react 以及 dotLottie 格式。

LottieFiles MCP 伺服器目前處於積極維護狀態，並已列名於主要的 MCP 目錄平台，例如 Smithery、MCP.so 與 PulseMCP。