Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
ImageKit Integrations
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.
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.
How to use this skill
- 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.
- For implementation details, query [`mcp_imagekit_devtools_search_docs`](https://imagekit.io/docs/build-with-ai) with the
imagekit_guidesandimagekit_sdksources — 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. - Only fetch a full doc page (append
.mdto its URL for plain text) when you genuinely need the entire setup guide end-to-end. Prefersearch_docsfor everything else.
SDKs
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.
| Tech | Guide |
|---|---|
| JavaScript | Vanilla / browser |
| React | React components & hooks |
| Next.js | App & Pages router |
| Vue.js | Vue components |
| Angular | Angular components |
| Astro | Astro components |
| React Native | Mobile web/native |
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.)
| Tech | Guide |
|---|---|
| Node.js | JS/TS runtime |
| Python | Python SDK |
| Java | Java SDK |
| PHP | PHP SDK |
| Ruby | Ruby (+ Rails, CarrierWave) |
| .NET | .NET SDK |
| Go | Go 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.
No-code Plugins & Storage
CMS & E-commerce
Native plugins that route media through ImageKit from your existing platform — automatic optimization, responsive delivery, and CDN caching without writing integration code.
| Platform | Guide |
|---|---|
| WordPress | WP plugin |
| Shopify | Shopify app |
| Magento | Magento extension |
| Strapi | Strapi provider |
| Contentful | Contentful app |
| Sanity | Sanity plugin |
| Netlify | Netlify integration |
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.
| Provider | Guide |
|---|---|
| AWS S3 | S3 bucket origin |
| Google Cloud Storage | GCS bucket origin |
| Azure Blob Storage | Azure container origin |
| Firebase Storage | Firebase origin |
| DigitalOcean Spaces | Spaces origin |
| Web server / proxy | Any HTTP origin |
Player & Widgets
Video Player SDK
A drop-in video player built on Video.js with ImageKit-powered features. Covers:
- Adaptive bitrate streaming and seek-preview thumbnails
- AI-generated subtitles & chapters (speech-to-text in 50+ languages, word-level highlighting)
- Shoppable videos — overlay product hotspots on playback
- Playlists & recommendations
- Floating/sticky player and responsive layouts
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".
Embeddable Widgets
- [Embeddable Media Library widget](https://imagekit.io/docs/dam/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](https://github.com/imagekit-samples/uppy-uploader) — Uppy-based widget to upload from local files, URLs, Dropbox, Google Drive, Instagram, and more straight to your media library.
AI & Automation
- [Build with AI](https://imagekit.io/docs/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](https://imagekit.io/docs/integration/n8n) — workflow automation.
URL generation
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".

