Lottie Creator MCP

Lottie Creator MCP

Kết nối trợ lý AI với Lottie Creator thông qua cầu nối MCP cục bộ để tạo, chỉnh sửa và làm hoạt ảnh bằng lời nhắc.

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) cho phép trợ lý trình duyệt tương thích sử dụng Creator trực tiếp, mà không cần cầu nối cục bộ này. Tính năng này được bật theo mặc định trong các trình duyệt được hỗ trợ. Hãy làm theo hướng dẫn này nếu bạn muốn kết nối thông qua máy chủ Creator MCP cục bộ.

Lottie Creator MCP đưa trợ lý AI của bạn trực tiếp vào quy trình làm hoạt ảnh — cung cấp cho nó các công cụ để kiểm tra, xây dựng và chỉnh sửa hoạt ảnh Lottie trong LottieFiles Creator thông qua ngôn ngữ tự nhiên. Bạn có thể xem phần cài đặt ở bên dưới.

Máy chủ MCP là một phần của giao diện chuẩn hóa để các tác nhân AI tương tác với nguồn dữ liệu bằng Model Context Protocol. Lottie Creator MCP kết nối các trợ lý AI như Claude, Cursor và Windsurf với các công cụ chỉnh sửa của Creator thông qua một cầu nối cục bộ.

Với MCP được bật, bạn có thể:

✦ Tạo hoạt ảnh từ đầu

Mô tả những gì bạn muốn — một vòng xoay tải, một thanh tiến trình, một hoạt ảnh nhân vật — và AI của bạn sẽ xây dựng trực tiếp trong Creator, từng lớp một.

✦ Chỉnh sửa và sửa đổi hoạt ảnh hiện có

Thay đổi màu sắc, điều chỉnh thời gian, hoán đổi đường cong easing, đổi tên lớp hoặc tái cấu trúc toàn bộ cảnh. AI của bạn đọc trạng thái hiện tại của tệp và chỉnh sửa theo thời gian thực.

✦ Tạo hàng loạt biến thể hoạt ảnh

Tự động tạo nhiều phiên bản của một hoạt ảnh cùng lúc — chủ đề tối và sáng, kích thước khác nhau, biến thể màu thương hiệu.

✦ Phân tích hoạt ảnh về khả năng truy cập và thương hiệu

Yêu cầu AI của bạn kiểm tra hoạt ảnh về các vấn đề tương phản, tốc độ chuyển động, độ nhất quán màu sắc hoặc sự phù hợp với nguyên tắc thương hiệu của bạn — và sửa những gì nó tìm thấy.

✦ Tích hợp vào quy trình làm việc dự án của bạn

Tạo tài sản hoạt ảnh ngay lập tức trong khi làm việc trên một dự án rộng hơn.

Để sử dụng MCP, hãy cài đặt nó trong ứng dụng AI của bạn và bật nó trong LottieFiles Creator. Các phần bên dưới hướng dẫn từng bước.

Điều kiện tiên quyết

Trước khi cài đặt, hãy đảm bảo bạn đã thiết lập những điều sau:

✅ 📦 Node.js 18+: Cần thiết để chạy gói MCP qua npx. Tải Node.js →

✅ 🎬 LottieFiles Creator: Mở creator.lottiefiles.com trong trình duyệt của bạn và giữ tab này mở.

✅ 🤖 AI tương thích MCP: Claude, Cursor, Windsurf, VS Code Copilot hoặc bất kỳ trợ lý nào hỗ trợ MCP khác.

Đầu tiên, hãy truy cập tệp README của Creator MCP nơi bạn có thể truy cập các chuỗi và lệnh MCP.

Cài đặt MCP

Đối với tất cả các công cụ AI của bạn, bạn có thể sử dụng cấu hình sau:

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

Tài liệu này bao gồm các bước cài đặt cho một số ứng dụng MCP được hỗ trợ của chúng tôi. Để xem danh sách hướng dẫn cài đặt cho các ứng dụng MCP được hỗ trợ, hãy xem danh sách bên dưới:

Các ứng dụng MCP được hỗ trợ

Làm theo hướng dẫn cho ứng dụng cụ thể của bạn để cài đặt và kết nối Lottie Creator MCP. Một số ứng dụng cũng hỗ trợ skills, bổ sung kiến thức thiết kế chuyển động để AI của bạn có thể tạo ra các hoạt ảnh có chủ đích và trau chuốt hơn. 🖇️ Đây là skill thiết kế chuyển động của LottieFiles.

Làm theo các bước cho ứng dụng MCP của bạn:

---

**1. Mở Cài đặt Claude Desktop**

Điều hướng đến **Cài đặt → Nhà phát triển** và nhấp **"Chỉnh sửa cấu hình"**. Thao tác này sẽ mở tệp cấu hình JSON trên máy tính của bạn mà bạn có thể chỉnh sửa trong VS Code, Cursor hoặc bất kỳ trình soạn thảo văn bản nào.

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. Thêm cấu hình MCP**

Dán nội dung sau vào tệp cấu hình bên trong đối tượng `mcpServers`. Bạn có thể cần thêm hoặc xóa dấu ngoặc/dấu phẩy để giữ JSON hợp lệ.

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

Đây là những gì tệp cấu hình có thể trông như thế nào sau khi dán cấu hình ở trên:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. Xác minh kết nối**

Nhấp vào nút **"+"** trong cuộc trò chuyện, điều hướng đến **Trình kết nối** và xác nhận công tắc `lottiefiles-creator` đang bật.

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. Chạy lệnh sau trong terminal của bạn**

Vậy là xong. Claude Code sẽ tự động cài đặt và đăng ký MCP.

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **Sử dụng Lottie Creator MCP cho Cursor**

1. Nhấn `Cmd + Shift + P` (Mac) hoặc `Ctrl + Shift + P` (Windows/Linux) → tìm kiếm **"Cursor Settings"**
2. Trong thanh bên, đi tới **Tools & MCPs**
3. Nhấp **"Add custom MCP"**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. Dán vào:

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

Lưu và **khởi động lại hoàn toàn Cursor** (thoát và mở lại — không chỉ tải lại)

Sau khi khởi động lại, đi tới **Settings → Tools & MCP** và bạn sẽ thấy dấu chấm màu xanh lá cây bên cạnh `lottiefiles-creator` xác nhận kết nối thành công.

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**Tùy chọn A: Cài đặt qua deep link**

1. Nhấp vào [deep link máy chủ MCP LottieFiles.](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) Thao tác này sẽ mở cấu hình MCP trong VS Code.
2. Nhấn nút **Install**.

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**Tùy chọn B: CLI hoặc tệp cấu hình**

Hoặc qua CLI:

Terminal

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

Hoặc thêm vào `.vscode/mcp.json` của bạn:

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ Bạn cần bật [GitHub Copilot](https://github.com/features/copilot) trên tài khoản của mình để sử dụng các công cụ MCP trong VS Code.

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` Làm theo tài liệu thiết lập MCP của Antigravity và sử dụng cấu hình ở trên. Làm theo tài liệu thiết lập MCP của Cline và sử dụng cấu hình ở trên. Làm theo [hướng dẫn cấu hình MCP](https://github.com/openai/codex/blob/main/docs/config.md) bằng cách sử dụng:

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

Hoặc thêm qua CLI:

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. Khởi động `copilot` 2. Chạy `/mcp add` 3. Cấu hình: - Tên máy chủ: `lottiefiles-creator` - Loại máy chủ: `Local` - Lệnh: `npx -y @lottiefiles/creator-mcp@latest` Làm theo tài liệu thiết lập MCP của VS Code và sử dụng cấu hình ở trên. Hoặc qua CLI:

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` Làm theo tài liệu thiết lập MCP của Gemini Code Assist và sử dụng cấu hình ở trên. Làm theo tài liệu thiết lập MCP của JetBrains và sử dụng cấu hình ở trên. Làm theo tài liệu thiết lập MCP của Kiro và sử dụng cấu hình ở trên. Làm theo tài liệu thiết lập MCP của Qoder và sử dụng cấu hình ở trên. Thêm máy chủ MCP cục bộ với:

- Tên: `lottiefiles-creator`
- Lệnh: `npx`
- Đối số: `y @lottiefiles/creator-mcp@latest`

Làm theo tài liệu thiết lập MCP của Warp và sử dụng cấu hình ở trên. Làm theo tài liệu thiết lập MCP của Windsurf và sử dụng cấu hình ở trên.

Kết nối với Lottie Creator

1. Mở Lottie Creator

Điều hướng đến creator.lottiefiles.com trong trình duyệt của bạn và giữ tab này mở trong suốt phiên làm việc. MCP giao tiếp với Creator thông qua tab trình duyệt này.

1. Bật MCP cục bộ trong Creator

Trong Creator, đi tới Cài đặt → Cài đặt MCP → Bật MCP cục bộ.

1. Xác nhận kết nối

Bạn sẽ thấy thông báo trong Creator: Local MCP bridge connected

Nếu bạn thấy điều này, bạn đã sẵn sàng để bắt đầu đưa ra lời nhắc! Lưu ý rằng chất lượng hoạt ảnh phụ thuộc rất nhiều vào mô hình bạn đang sử dụng, vì vậy hãy đảm bảo sử dụng mô hình tốt nhất hiện có cho bạn.

Về Skills

Skills cung cấp hướng dẫn về cách một tác nhân nên tiếp cận các tác vụ hoạt ảnh — sử dụng kết hợp các lệnh gọi công cụ MCP và kiến thức thiết kế chuyển động chuyên sâu được đóng gói dưới dạng hướng dẫn tái sử dụng.

Trong khi Lottie Creator MCP hiển thị các công cụ riêng lẻ (tạo lớp, đặt keyframe, điều chỉnh màu tô), Skills giúp AI của bạn hiểu cách sử dụng chúng hiệu quả. Những điều như biết đường cong easing nào phù hợp với chuyển động nảy so với chuyển động mờ dần, cách sắp xếp chuỗi cho một màn giới thiệu nhiều phần tử hoặc cách cấu trúc thời gian để hoạt ảnh có cảm giác có chủ đích thay vì máy móc.

Skills không thay thế kết nối MCP hoặc thêm công cụ mới. Chúng giảm bớt sự phỏng đoán bằng cách đóng gói chuyên môn thiết kế chuyển động thành các hướng dẫn mà AI của bạn tự động sử dụng bất cứ khi nào làm việc với hoạt ảnh.

Cài đặt skill thiết kế chuyển động

Chạy lệnh này một lần trong terminal của bạn. Nó hoạt động với hơn 40 tác nhân bao gồm Claude Code, Cursor, Codex và GitHub Copilot.

Terminal

npx skills add LottieFiles/motion-design-skill

✨ Rất được khuyến nghị. Sự khác biệt giữa một AI tạo ra các hoạt ảnh cứng nhắc, máy móc và một AI tạo ra chuyển động trau chuốt, có chủ đích gần như hoàn toàn phụ thuộc vào việc nó có ngữ cảnh này hay không. Cài đặt một lần và nó áp dụng cho mọi phiên làm hoạt ảnh.

Xem toàn bộ skill trên GitHub → LottieFiles/motion-design-skill

Khả năng

Lottie Creator MCP, Motion Copilot và Lottie Creator WebMCP cung cấp các khả năng chỉnh sửa Creator giống nhau. Cách thiết lập và giao diện trợ lý của chúng khác nhau.

Khu vực	Những gì bạn có thể yêu cầu
Cảnh và lớp	Kiểm tra và tạo cảnh; thay đổi kích thước, tốc độ khung hình, thời lượng hoặc nền xem trước; đổi tên, nhân bản, nhóm, căn chỉnh, sắp xếp lại, ẩn hoặc khóa lớp.
Hình dạng và văn bản	Tạo và chỉnh sửa hình chữ nhật, hình elip, đa giác, ngôi sao, đường dẫn và văn bản; thay đổi phông chữ và kiểu văn bản; tách văn bản thành các phần để làm hoạt ảnh.
Kiểu dáng và hiệu ứng	Điều chỉnh màu tô hoặc nét đồng nhất và gradient; sử dụng chế độ hòa trộn, đổ bóng, làm mờ, hiệu ứng màu, mặt nạ và matte.
Hoạt ảnh và thời gian	Thêm, kiểm tra, thay đổi, sao chép hoặc xóa keyframe; điều chỉnh easing; làm hoạt ảnh cho phép biến đổi, độ mờ và màu sắc; sử dụng đường chuyển động, lối vào so le và điều chỉnh lại thời gian.
Tài sản và kiểm tra cảnh	Nhập SVG, hoạt ảnh Lottie và hình ảnh; chuyển đổi lớp hình ảnh PNG hoặc JPG thành vector; kiểm tra cảnh và di chuyển playhead đến một khung hình cụ thể.
Chủ đề và chuyển động tái sử dụng	Tạo và liên kết các vị trí motion-token, cập nhật giá trị của chúng và tạo hoặc chuyển đổi chủ đề. Tìm và áp dụng các kiểu đã lưu và cài đặt chuyển động từ Motion System của không gian làm việc của bạn.
Phân đoạn và tương tác	Tạo phân đoạn hoạt ảnh có tên, máy trạng thái, trạng thái, chuyển tiếp và đầu vào; kết nối các sự kiện nhấp, di chuột và trạng thái với hành động.

Quyền truy cập tính năng tuân theo không gian làm việc và gói Creator của bạn. Khi hoạt ảnh đã sẵn sàng, hãy sử dụng các điều khiển xuất của Creator để lưu kết quả.

Các phương pháp hay nhất

• Cài đặt kỹ năng motion design để có chất lượng tốt hơn: MCP cung cấp cho AI của bạn các công cụ. Kỹ năng motion design giúp nó có khả năng phán đoán để sử dụng chúng một cách hiệu quả — đường cong easing, nguyên tắc thời gian, vũ đạo chuyển động. Một lệnh duy nhất, đầu ra tốt hơn đáng kể. Kỹ năng motion design có thể được tìm thấy tại đây.
• Bắt đầu với SVG của riêng bạn, sau đó tạo hoạt ảnh: AI có thể khó đoán khi tạo hình minh họa từ đầu. Để có kết quả tốt nhất, hãy nhập các tài nguyên SVG hiện có của bạn vào Creator trước, sau đó yêu cầu AI tạo hoạt ảnh cho chúng. Điều này giữ cho phong cách hình ảnh của bạn nhất quán và để AI tập trung vào điều nó làm tốt nhất — chuyển động, thời gian và trình tự.
  • Hãy thử các liên kết remix này
    • Huy chương: https://lottie.link/metal
    • Thời tiết: https://lottie.link/weather
    • Biểu đồ: https://lottie.link/graph
    • Hộp thư: https://lottie.link/mailbox1
• Luôn sử dụng mô hình tốt nhất mà bạn có: Chất lượng hoạt ảnh tỷ lệ thuận trực tiếp với mô hình. Nếu bạn có quyền truy cập vào Claude Sonnet hoặc Opus, hãy sử dụng nó thay vì mô hình nhỏ hơn — sự khác biệt trong cách nó xử lý thời gian, trình tự và lý luận không gian là rõ rệt.
• Đặt tên cho các lớp của bạn trước khi nhắc: AI đọc tên lớp của bạn để hiểu cấu trúc hoạt ảnh của bạn. Các lớp được đặt tên tốt như left_arm, right_leg, bg_circle và text_headline giúp nó nhắm đúng các phần tử, tránh sai sót và giữ tổ chức trong các cảnh phức tạp. Các tên chung chung như Shape 1 hoặc Group 4 khiến AI khó xây dựng chính xác trên công việc của bạn hơn.
• Chia nhỏ các hoạt ảnh phức tạp thành các bước: Thay vì "xây cho tôi một hoạt ảnh giới thiệu hoàn chỉnh," hãy đi từng cảnh một. Tạo cảnh → thêm hình dạng → thêm keyframe → tinh chỉnh thời gian. Các bước nhỏ hơn cho bạn nhiều quyền kiểm soát hơn và giúp dễ phát hiện và sửa lỗi hơn.
• Hãy cụ thể về thời gian và cảm giác: "Một hiệu ứng mờ dần mượt mà" là mơ hồ. "Một hiệu ứng xuất hiện 400ms với ease-out" cho AI của bạn thứ gì đó để làm việc. Bạn mô tả cảm giác càng chi tiết — nhanh gọn, nảy bật, chậm và điện ảnh — thì kết quả đầu tiên càng gần với điều bạn đang tưởng tượng.