mcp-server-lottiefiles

在设计或开发一个界面时，你是否曾花费大量时间去寻找一段合适的微动画？无论是加载指示器、点赞特效，还是页面过渡动画，LottieFiles 平台上有海量的免费资源，但查找合适的动画往往需要反复浏览、筛选和预览。

现在，这一切可以通过对话来完成。mcp-server-lottiefiles 是一个基于模型上下文协议（MCP）的服务器，它将 LottieFiles 平台的搜索和获取能力开放给了 AI。你可以直接让 AI 帮你查找流行的 Lottie 动画，获取特定动画的详细信息，从而大大缩短从“想法”到“资源”的距离。

项目基本信息

一、项目介绍

mcp-server-lottiefiles 是一个为设计师、开发者和内容创作者打造的 MCP 服务器。它的核心功能是连接 LottieFiles 平台，这是一个全球知名的轻量级动画库。通过这个服务器，AI 能够在 LottieFiles 的海量资源中执行三种操作：根据关键词搜索动画、获取一个动画的详细元数据，以及获取当前热门的动画列表。

该项目由 junmer 开发，使用 TypeScript 编写，并提供了通过 Smithery 一键安装的能力。它本身不是一个图形化应用，而是一个后台服务，可以集成到 Claude for Desktop、Cursor 或其他支持 MCP 的 AI 客户端中。一旦连接，你就可以用自然语言来完成以前需要手动访问网站才能完成的任务。

Lottie 动画是一种基于 JSON 的动画格式，广泛用于移动端和网页，因为它比传统的 GIF 或视频更小、更流畅，而且可以随意缩放。LottieFiles 平台是这类动画的主要集散地。

二、核心优势

与设计资源平台深度整合
这个服务器让你直接与 LottieFiles 的 API 交互，获取到经过专业设计师创作的高质量动画。你不需要自己爬取网页或手动整理资源清单。

三个工具，覆盖核心需求
它提供了搜索、详情、流行榜三个工具，形成了一个完整的“发现 -> 了解 -> 使用”的闭环。搜索帮你找到目标，详情提供 JSON 文件地址、大小、作者等关键信息，流行榜则能带来灵感。

分页和数量控制
搜索和获取流行动画都支持 page 页数和 limit 每页数量参数。这让你可以按需获取数据，避免一次性返回过多结果，防止超出 AI 的上下文窗口。

出色的可安装性
项目支持 Smithery 的一键安装，也提供了传统的 npm install 和手动构建方式。此外，还包含了 Dockerfile，方便你将此服务容器化并部署在服务器上。

三、适用场景

UI/UX 设计师的创意助手
你可以直接问 AI：“帮我找几个适合‘加载中’状态的流行 Lottie 动画”，AI 会返回动画的名称、作者以及预览链接，你无需离开你的设计工具。

开发者的素材集成
开发者在编写前端代码时，可以要求 AI：“搜索一个‘点赞’效果的 Lottie 动画，并告诉我它的直接下载链接”。AI 可以直接返回 JSON 文件的 URL，方便你集成到项目中。

内容创作者的动态装饰
如果你在制作视频或演示文稿，需要一些动态背景或转场效果，你可以问 AI：“列出 LottieFiles 上本周最受欢迎的 5 个抽象动画”，然后根据结果挑选合适的素材。

学习 MCP 与 API 交互
这个项目的代码量适中，结构清晰，非常适合作为第二个 MCP 学习项目（在掌握了 hello-world 级别的示例之后）。你可以学习如何声明多个工具，以及如何处理分页参数。

四、安装教程

安装 mcp-server-lottiefiles 有两种主要方式：使用 Smithery 自动安装，或者手动克隆构建。

方法一：通过 Smithery 安装到 Claude Desktop

这是最快的方式。确保你已经安装 Node.js 并关闭了 Claude Desktop。然后在终端中运行：

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

等待命令执行完毕，然后重新启动 Claude Desktop。在对话界面右侧应能看到新工具。

方法二：手动克隆与构建

如果你希望深度定制或使用其他 MCP 客户端，请按以下步骤操作。

第一步：克隆仓库

git clone https://github.com/junmer/mcp-server-lottiefiles.git
cd mcp-server-lottiefiles

第二步：安装依赖

npm install

第三步：构建项目

npm run build

这会将 TypeScript 编译到 dist 或 build 目录下。

第四步：配置 MCP 客户端

对于 Claude Desktop，编辑其配置文件（macOS: ~/Library/Application Support/Claude/claude_desktop_config.json; Windows: %AppData%\Claude\claude_desktop_config.json），添加以下内容，并将路径替换为你的项目实际路径。

{
  "mcpServers": {
    "lottiefiles": {
      "command": "node",
      "args": ["/你的完整路径/mcp-server-lottiefiles/dist/index.js"]
    }
  }
}

重启客户端即可。

五、使用示例

假设你已经通过上述任一方式连接了服务器，以下是在 Claude 中实际对话的例子。

示例1：搜索动画

输入：帮我搜索 LottieFiles 上关于 "confetti" 彩屑的动画，只要前5个。

AI 会调用 search_animations 工具，参数为 query: "confetti", limit: 5。然后它会返回这5个动画的名称、作者和简要描述。你可以接着问：第一个动画的详情是什么？

示例2：获取热门动画

输入：看看 LottieFiles 上当前最流行的动画有哪些，分两页，每页显示10个。

AI 会调用 get_popular_animations 工具，可能分两次调用，分别请求 page:1 和 page:2，然后将合并后的列表呈现给你。

示例3：获取特定动画详情

假设你在上一步的搜索结果中看到了一个 ID 为 “abc123” 的动画，你可以问：

输入：给我 ID 为 abc123 的这个动画的详细信息，包括直接下载链接。

AI 会调用 get_animation_details 工具，参数为 id: "abc123"。返回的信息中通常会包含 lottie_url 或 json_url 字段，这就是你可以直接使用的动画文件链接。

六、常见问题

问题1：使用 Smithery 安装后，Claude Desktop 中看不到新工具。

解决方案：请确保你在运行 npx 命令前 100% 关闭了 Claude Desktop（包括系统托盘图标）。安装完成后，再手动启动 Claude。另外，检查终端命令的输出，看是否有错误。如果问题持续，可以尝试手动安装方法。

问题2：搜索某些关键词返回结果为空，但在 LottieFiles 网站上能找到。

解决方案：LottieFiles 的 API 与网站前端搜索可能有细微的索引差异。尝试使用更通用的英文关键词，例如用 "celebration" 代替 “庆祝”，"success" 代替 “成功”。另外，检查关键词是否包含了特殊字符。

问题3：启动服务器时提示“Cannot find module”错误。

解决方案：这表明依赖没有安装完整或构建过程出错。请确保你在项目根目录下运行了 npm install，并且没有网络错误。然后重新运行 npm run build。如果还是不行，删除 node_modules 文件夹和 package-lock.json，重新执行 npm install。

问题4：这个服务器需要 LottieFiles 的 API 密钥吗？

解决方案：从项目代码和文档来看，它调用的是 LottieFiles 的公共 API，可能不需要认证，或者使用了内建的令牌。你无需自己申请任何密钥，开箱即用，这点非常方便。

七、总结

mcp-server-lottiefiles 是一个将 AI 对话与创意资源平台连接起来的优秀范例。它的功能非常明确，实现干净利落，安装也极其便利。对于任何需要在设计或开发工作中使用 Lottie 动画的人来说，这个工具能显著提升查找和筛选素材的效率。

从技术角度来看，它展示了如何为一个具体的第三方服务构建一套完整的 MCP 工具集，包括搜索、详情和榜单。search_animations、get_animation_details 和 get_popular_animations 这三个工具命名清晰，职责分明，是学习 MCP 工具设计的好榜样。

无论你是设计师、前端开发者，还是对 MCP 生态感兴趣的爱好者，这个项目都值得你花几分钟安装尝试。它很可能让你发出感叹：“原来找动画素材可以这么简单。”