imagekit-integrations

ImageKit 集成

ImageKit 提供 SDK（前端、后端、移动端）、无代码插件（CMS、电商）、外部存储连接器、视频播放器、可嵌入组件、AI/自动化工具，以及直接生成 URL 的辅助工具。本技能汇总了这些集成及其各自的功能。

何时使用此技能

• 你正在将 ImageKit 集成到应用中，需要了解适用于你的技术栈的 SDK、插件、播放器或组件。
• 你想快速了解某项集成能做什么，再决定是否采用。
• 你需要将“如何将 ImageKit 与 X 集成”这类问题转给合适的资源。

如何使用此技能

1. 浏览以下各节——它们按集成类型分组（SDK、插件、存储、播放器、组件、自动化、URL 生成）。找到与你的技术栈或用例相符的部分，并阅读其摘要以确认是否合适。
2. 如需实现细节，请使用 imagekit_guides 和 imagekit_sdk 来源查询 mcp_imagekit_devtools_search_docs，例如 “在 Node.js 中生成签名 URL” 或 “在 React 中生成响应式 srcset”。这只会返回相关片段，比加载整页内容更省钱、更快捷。
3. 只有在确实需要完整的端到端设置指南时，才获取完整文档页面（在其 URL 后附加 .md 以获取纯文本）。其他情况优先使用 search_docs。

SDK

前端

适用于生成优化 URL 并从浏览器上传内容的 Web 应用。功能包括：

• 加载优化后的图像和视频，并自动选择格式和质量
• 调整大小、裁剪和串联转换（在一个请求中执行多个操作）
• 添加文本、图像、视频和字幕叠加层
• 响应式图像（srcset / sizes）、延迟加载和低质量占位图（LQIP）
• 在客户端上传，并添加标签和元数据

所有前端 SDK 都基于 JavaScript SDK 封装——需要完全控制时，可直接使用它。

技术	指南
JavaScript	原生 JavaScript / 浏览器
React	React 组件和 Hooks
Next.js	App 和 Pages 路由器
Vue.js	Vue 组件
Angular	Angular 组件
Astro	Astro 组件
React Native	移动端 Web / 原生应用

后端

适用于构建 URL、安全交付内容和管理媒体库的服务端。功能包括：

• 构建带转换参数的 URL
• 用于安全、限时交付私有媒体的签名 URL
• 生成身份验证参数（token、expire、signature），以便客户端安全上传
• 文件上传、标签和元数据操作
• 对媒体管理 API 的开发者友好封装（列出、搜索、移动、删除、版本等）

技术	指南
Node.js	JS/TS 运行时
Python	Python SDK
Java	Java SDK
PHP	PHP SDK
Ruby	Ruby（以及 Rails、CarrierWave）
.NET	.NET SDK
Go	Go SDK

移动端

适用于 iOS 和 Android 的原生 SDK。涵盖：

• 用于优化图像和视频的 URL 构建，包括自适应码率（ABR）视频流
• 媒体加载 — Android SDK 集成了 Glide、Picasso、Coil 和 Fresco
• 响应式图像加载
• 使用上传策略上传（网络类型、重试行为等）
• 上传前预处理，以控制文件大小和尺寸

iOS SDK 的功能目前不及 Android。

技术	指南
Android	Glide/Picasso/Coil/Fresco
iOS	Swift SDK

无代码插件与存储

CMS 与电子商务

原生插件可通过现有平台将媒体传输至 ImageKit — 无需编写集成代码，即可实现自动优化、响应式分发和 CDN 缓存。

平台	指南
WordPress	WP 插件
Shopify	Shopify 应用
Magento	Magento 扩展
Strapi	Strapi 提供程序
Contentful	Contentful 应用
Sanity	Sanity 插件
Netlify	Netlify 集成

外部存储（源）

将现有存储连接为 ImageKit 源，即可优化并分发其中已有的文件 — 无需重新上传或迁移。若要在用户的实时账户上创建或更新源和 URL 端点，请使用 Admin MCP 工具（create_origin、create_url_endpoint、…）— 请参阅 mcp-preflight。如需设置指南，请查询 search_docs。

提供商	指南
AWS S3	S3 存储桶源
Google Cloud Storage	GCS 存储桶源
Azure Blob Storage	Azure 容器源
Firebase Storage	Firebase 源
DigitalOcean Spaces	Spaces 源
Web server / proxy	任意 HTTP 源

播放器与小组件

视频播放器 SDK

基于 Video.js 构建、可直接集成的视频播放器，具备由 ImageKit 提供支持的功能。涵盖：

• 自适应码率流和拖动预览缩略图
• AI 生成的字幕和章节（支持 50 多种语言的语音转文本、逐词高亮）
• 可购物视频 — 在播放画面上叠加商品热点
• 播放列表和推荐
• 浮动/粘滞播放器和响应式布局

可以通过 search_docs 查询诸如 "在 React 中嵌入 ImageKit 视频播放器"、"在视频播放器中自动生成章节" 或 "为视频添加可购物商品热点" 等内容。

可嵌入小组件

• 可嵌入媒体库小组件 — 将 ImageKit 的媒体库选择器嵌入自己的应用，让用户浏览和选择资源。例如，可查询 "嵌入媒体库小组件并处理所选资源回调"。
• 上传小组件 — 基于 Uppy 的小组件，可将本地文件、URL、Dropbox、Google Drive、Instagram 等内容直接上传到媒体库。

AI 与自动化

• 借助 AI 构建 — Agent 技能 + 两个 MCP 服务（DevTools 用于文档/转换，API 用于管理媒体库），适用于 Claude、Cursor、Windsurf、VS Code Copilot 和 Codex。
• n8n — 工作流自动化。

URL 生成

除了 SDK，ImageKit 还提供 URL endpoint functions，用于直接构建和签名交付 URL。如果你只需要构建 URL，而不想引入完整的 SDK，这些函数会很有用。可以查询，例如 “签署带过期时间的交付 URL” 或 “构建包含叠加层的转换 URL”。

---

查询 mcp_imagekit_devtools_search_docs，了解上述任何集成、播放器、小组件和 URL 函数的实现细节。例如：“在 Node.js 中生成签名 URL”、“在 React 中生成响应式 srcset” 或 “嵌入带自动字幕的视频播放器”。