Back to Details

imagekit-integrations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

ImageKit Integrations

ImageKit 集成列表

ImageKit ships SDKs (front-end, back-end, mobile), no-code plugins (CMS, e-commerce), external-storage connectors, a video player, embeddable widgets, AI/automation tooling, and direct URL-generation helpers. This skill is an index of all of them and what each covers.
ImageKit 提供各类 SDK（前端、后端、移动端）、无代码插件（CMS、电商平台）、外部存储连接器、视频播放器、可嵌入组件、AI/自动化工具以及直接生成 URL 的辅助工具。本技能是所有这些工具的索引，同时说明了每个工具的功能范围。

When to use this skill

何时使用本技能

  • You're integrating ImageKit into an app and need to know which SDK, plugin, player, or widget exists for your stack.
  • You want a quick sense of what a given integration can do before committing.
  • You need to route a "how do I integrate ImageKit with X" question to the right place.
  • 你正在将 ImageKit 集成到应用中，需要了解你的技术栈对应的 SDK、插件、播放器或组件是否存在。
  • 你想在投入使用前快速了解某款集成工具的功能。
  • 你需要将“如何将 ImageKit 与 X 集成”这类问题引导到正确的解决路径。

How to use this skill

如何使用本技能

  1. Skim the sections below — they're grouped by integration type (SDKs, plugins, storage, player, widgets, automation, URL generation). Find the one that matches your stack or use case and read its summary to confirm it fits.
  2. For implementation details, query 
    mcp_imagekit_devtools_search_docs
     with the 
    imagekit_guides
    and 
    imagekit_sdk
    sources — e.g. "generate signed URLs in Node.js" or "responsive srcset in React". This returns only the relevant snippets and is far cheaper and faster than loading a whole page.
  3. Only fetch a full doc page (append 
    .md
    to its URL for plain text) when you genuinely need the entire setup guide end-to-end. Prefer 
    search_docs
    for everything else.
  1. 浏览下方按集成类型（SDK、插件、存储、播放器、组件、自动化、URL 生成）分组的章节。找到与你的技术栈或使用场景匹配的类别，阅读其摘要确认是否符合需求。
  2. 如需实现细节，请通过 
    mcp_imagekit_devtools_search_docs
     查询，数据源选择 
    imagekit_guides
    和 
    imagekit_sdk
    —— 例如查询*“在 Node.js 中生成签名 URL”或“在 React 中实现响应式 srcset”*。该方式仅返回相关代码片段，比加载完整页面更高效、成本更低。
  3. 只有当你确实需要完整的端到端设置指南时，才获取完整文档页面（在 URL 后追加 
    .md
    可获取纯文本版本）。其他场景优先使用 
    search_docs
    。

SDKs

SDK

Front-End

前端

For web apps that generate optimized URLs and upload from the browser. Covers:
  • Loading optimized images & videos with automatic format/quality
  • Resize, crop, and chained transformations (multiple ops in one request)
  • Text, image, video, and subtitle overlays
  • Responsive images (
    srcset
    / 
    sizes
    ), lazy loading, and low-quality placeholders (LQIP)
  • Client-side upload with tagging and metadata
All front-end SDKs wrap the JavaScript SDK — drop down to it directly when you need full control.
TechGuide
JavaScriptVanilla / browser
ReactReact components & hooks
Next.jsApp & Pages router
Vue.jsVue components
AngularAngular components
AstroAstro components
React NativeMobile web/native
适用于在浏览器中生成优化 URL 并上传文件的 Web 应用。涵盖功能：
  • 加载经过格式/质量自动优化的图片与视频
  • 调整尺寸、裁剪及链式转换（单次请求执行多项操作）
  • 文本、图片、视频及字幕叠加
  • 响应式图片（
    srcset
    / 
    sizes
    ）、懒加载及低质量占位图（LQIP）
  • 客户端上传，支持标签与元数据
所有前端 SDK 均基于 JavaScript SDK 封装——当你需要完全控制时，可直接使用该底层 SDK。
技术栈指南链接
JavaScript原生浏览器环境
ReactReact 组件与 Hooks
Next.jsApp 与 Pages 路由
Vue.jsVue 组件
AngularAngular 组件
AstroAstro 组件
React Native移动 Web/原生应用

Back-End

后端

For servers that build URLs, secure delivery, and manage the media library. Covers:
  • URL construction with transformations
  • Signed URLs for secure, time-limited delivery of private media
  • Generating auth params (
    token
    , 
    expire
    , 
    signature
    ) so the client can upload securely
  • File upload, tagging, and metadata operations
  • Developer-friendly wrappers over the media management APIs (list, search, move, delete, versions, etc.)
TechGuide
Node.jsJS/TS runtime
PythonPython SDK
JavaJava SDK
PHPPHP SDK
RubyRuby (+ Rails, CarrierWave)
.NET.NET SDK
GoGo SDK
适用于构建 URL、安全交付内容及管理媒体库的服务器端应用。涵盖功能：
  • 构建带转换参数的 URL
  • 签名 URL：用于安全、限时交付私有媒体资源
  • 生成认证参数（
    token
    、
    expire
    、
    signature
    ），使客户端可安全上传文件
  • 文件上传、标签及元数据操作
  • 媒体管理 API 的开发者友好封装（列表、搜索、移动、删除、版本管理等）
技术栈指南链接
Node.jsJS/TS 运行时
PythonPython SDK
JavaJava SDK
PHPPHP SDK
RubyRuby（含 Rails、CarrierWave）
.NET.NET SDK
GoGo SDK

Mobile

移动端

Native SDKs for iOS and Android. Covers:
  • URL construction for optimized images & videos, including adaptive bitrate (ABR) video streaming
  • Media loading — the Android SDK integrates with Glide, Picasso, Coil, and Fresco
  • Responsive image loading
  • Upload with an upload policy (network type, retry behavior, etc.)
  • Pre-upload preprocessing to control file size and dimensions
The iOS SDK currently trails Android on features.
TechGuide
AndroidGlide/Picasso/Coil/Fresco
iOSSwift SDK
适用于 iOS 和 Android 的原生 SDK。涵盖功能：
  • 构建优化图片与视频的 URL，包括自适应比特率（ABR）视频流
  • 媒体加载——Android SDK 可与 Glide、Picasso、Coil 及 Fresco 集成
  • 响应式图片加载
  • 支持上传策略（网络类型、重试机制等）的文件上传
  • 上传前预处理，控制文件大小与尺寸
目前 iOS SDK 的功能略少于 Android SDK。
技术栈指南链接
AndroidGlide/Picasso/Coil/Fresco
iOSSwift SDK

No-code Plugins & Storage

无代码插件与存储

CMS & E-commerce

CMS 与电商平台

Native plugins that route media through ImageKit from your existing platform — automatic optimization, responsive delivery, and CDN caching without writing integration code.
PlatformGuide
WordPressWP plugin
ShopifyShopify app
MagentoMagento extension
StrapiStrapi provider
ContentfulContentful app
SanitySanity plugin
NetlifyNetlify integration
原生插件可将现有平台的媒体资源通过 ImageKit 处理——无需编写集成代码，即可实现自动优化、响应式交付及 CDN 缓存。
平台指南链接
WordPressWP 插件
ShopifyShopify 应用
MagentoMagento 扩展
StrapiStrapi 提供者
ContentfulContentful 应用
SanitySanity 插件
NetlifyNetlify 集成

External Storage (origins)

外部存储（源站）

Connect your existing storage as an ImageKit origin so it optimizes and delivers files already there — no re-uploading or migration needed.
ProviderGuide
AWS S3S3 bucket origin
Google Cloud StorageGCS bucket origin
Azure Blob StorageAzure container origin
Firebase StorageFirebase origin
DigitalOcean SpacesSpaces origin
Web server / proxyAny HTTP origin
可将现有存储服务连接为 ImageKit 源站，从而优化并交付已存储的文件——无需重新上传或迁移数据。
服务商指南链接
AWS S3S3 桶源站
Google Cloud StorageGCS 桶源站
Azure Blob StorageAzure 容器源站
Firebase StorageFirebase 源站
DigitalOcean SpacesSpaces 源站
Web server / proxy任意 HTTP 源站

Player & Widgets

播放器与组件

Video Player SDK

视频播放器 SDK

A drop-in video player built on Video.js with ImageKit-powered features. Covers:
Ask 
search_docs
things like "embed ImageKit video player in React", "auto-generate chapters in the video player", or "add shoppable product hotspots to a video".
一款基于 Video.js 构建的即插即用型视频播放器，具备 ImageKit 赋能的特性。涵盖功能：
可向 
search_docs
查询如下内容：“在 React 中嵌入 ImageKit 视频播放器”、“在视频播放器中自动生成章节”或“为视频添加可购物产品热点”。

Embeddable Widgets

可嵌入组件

  • Embeddable Media Library widget — drop ImageKit's media library picker into your own app so users browse and select assets. Query e.g. "embed media library widget and handle the selected asset callback".
  • Upload widget — Uppy-based widget to upload from local files, URLs, Dropbox, Google Drive, Instagram, and more straight to your media library.
  • 可嵌入媒体库组件——将 ImageKit 的媒体库选择器嵌入你自己的应用，方便用户浏览并选择资源。例如查询*“嵌入媒体库组件并处理选中资源的回调”*。
  • 上传组件——基于 Uppy 的组件，支持从本地文件、URL、Dropbox、Google Drive、Instagram 等渠道直接上传至你的媒体库。

AI & Automation

AI 与自动化

  • Build with AI — agent skills + two MCP servers (DevTools for docs/transformations, API for managing your media library) for Claude, Cursor, Windsurf, VS Code Copilot, and Codex.
  • n8n — workflow automation.
  • Build with AI——代理技能 + 两台 MCP 服务器（用于文档/转换的 DevTools、用于管理媒体库的 API），支持 Claude、Cursor、Windsurf、VS Code Copilot 及 Codex。
  • n8n——工作流自动化工具。

URL generation

URL 生成

Beyond the SDKs, ImageKit exposes URL endpoint functions for building and signing delivery URLs directly. Useful when you only need URL construction without pulling in a full SDK. Query e.g. "sign a delivery URL with an expiry" or "build a transformation URL with overlays".
Query 
mcp_imagekit_devtools_search_docs
for implementation details on any of the above integrations, players, widgets, and URL functions. For example: "generate signed URLs in Node.js", "responsive srcset in React", or "embed the video player with auto subtitles".
除 SDK 外，ImageKit 还提供URL 端点函数，用于直接构建并签名交付 URL。适用于仅需 URL 构建功能、无需引入完整 SDK 的场景。例如查询*“生成带过期时间的签名交付 URL”或“构建带叠加效果的转换 URL”*。
如需上述任意集成、播放器、组件及 URL 函数的实现细节，请查询 
mcp_imagekit_devtools_search_docs
。例如：“在 Node.js 中生成签名 URL”、“在 React 中实现响应式 srcset”或“嵌入带自动字幕的视频播放器”。