Meet the Filestack Plugin for Claude Code

Our team has been building this for a while, and we’re glad to finally put it out.

We shipped a Filestack plugin for Claude Code. If your team already uses Claude Code in the terminal, you can now upload files, build transformation URLs, generate signed security policies, and debug Filestack errors without leaving the chat. No context switching to docs, no hunting for the right SDK method, no copy-pasting file handles between tabs.

This is the first of a few posts we’ll write about the plugin. Today, we just want to walk you through what it is, how to set it up, and a few things it can do right out of the box. Future posts will go deeper into webhook setup, signed URL flows, and a handful of real build patterns.

What the plugin actually is

At its core, the plugin adds three things to Claude Code:

• 10 MCP tools for file operations, transformations, and security
• 3 skills that activate on their own when Claude sees certain patterns in your code or error messages
• 1 slash command (/filestack-transform) that turns plain English into a CDN transformation URL

You talk to Claude Code the way you normally would. If what you ask for maps to a Filestack operation, the plugin handles it.

Getting it installed

There are two ways to install. We’d recommend the marketplace route since it’s the cleanest.

Inside Claude Code, run:

/plugin marketplace add https://github.com/filestack/filestack-claude-plugin.git

/plugin install filestack-claude-plugin@filestack-plugin

Then set your credentials:

export FILESTACK_API_KEY=your_api_key

export FILESTACK_APP_SECRET=your_app_secret

The app secret is only needed if you’re using the security tools (policies and signed URLs). For uploads, retrievals, and transformations, the API key alone is enough. You can grab both from the Filestack Developer Portal.

Restart Claude Code once your environment variables are set, and you’re ready.

Uploading a file

This is where it clicks for most people. Drop a local file into Claude Code and ask it to upload.

 

Upload ./image.jpg to Filestack

 

You get back a handle, a CDN URL, the filename, size, and MIME type. If you want to understand the full upload lifecycle, the uploading docs cover it in detail.

Remote URLs work too. If you want to pull a file from somewhere else into Filestack storage, just point at the URL and Claude handles the ingestion.

Pulling metadata for any handle

Once you have a handle, there are plenty of cases where you need to know what’s inside it. Dimensions before rendering, MIME type before routing to a processor, size before applying a transformation. Any of those checks would normally mean a call to the File API and parsing the response. With the plugin, you ask.

 

What’s the metadata for file handle abc123XYZ?

 

Claude returns the full object, ready to reference for whatever you’re building next.

 

Building transformation URLs through MCP

This is where the plugin stops feeling like a wrapper and starts feeling like a real tool. You can describe an image pipeline in plain English and get a working CDN URL back.

 

Take handle abc123XYZ  resize to 400×400, and output as webp

 

Claude builds the transform chain in the right order and returns the URL. The full list of operations lives in the Processing API docs if you want to see what’s possible.

 

 

If you’d rather use the slash command, /filestack-transform does the same thing with a slightly tighter interface:

 

/filestack-transform abc123XYZ resize to 400×400 and convert to webp

 

Order matters in transformation chains, and that’s one of the easier things to mess up when you’re writing them by hand. The plugin knows to put processing before format conversion, so that detail stops being something you think about.

Three things developers can do with the SDK skill

The filestack-sdk-integration skill activates on its own whenever Claude sees imports from filestack-js, calls like client.picker() or client.upload(), or questions about adding file upload to an app. Here are three common patterns where it comes in handy.

1. Converting images from JPG to PNG

A user uploads a JPG, but your downstream flow needs PNG (maybe for transparency support, maybe for a third-party service that rejects other formats). Ask Claude to build the transform and wire it into your upload callback:

After upload, convert the JPG to PNG and return the new handle

The skill generates the picker config, the onUploadDone callback, and the filestack_transform_apply call that persists the converted file. You get a working snippet you can drop into your codebase. If you want a quick one-off conversion outside of code, the JPG to PNG tool handles it in the browser.

2. Building an avatar transformation

User profile avatars are one of the most common Filestack use cases. You want a square crop, face-centered, resized to a consistent dimension, and delivered as webp for performance. Ask:

Add avatar upload to my React app. Crop to the detected face, resize to 256×256, and output as webp

The skill returns a full React component with the picker configured for image-only uploads, acceptedFileTypes scoped correctly, and the transform URL built with crop_faces, resize, and output in the right order. You also get the upload response shape as a TypeScript interface, so you can drop it straight into your user model.

3. Using OCR intelligence

When you’re accepting document uploads (receipts, IDs, forms), you often need to pull the text out. Filestack’s OCR handles printed and handwritten text and returns a structured JSON response with bounding boxes. Ask:

After upload, run OCR on the file and return the extracted text

The skill wires up the signed policy (OCR requires security), generates the CDN URL with the ocr task, and parses the response so you get back just the text field. For anything more complex, like chaining OCR with document detection, the skill flags that you can combine them in a single CDN call.

Stay tuned for the next blogs to see the skills in action.

A note on Snap

If you’re not deep in Claude Code yet but still want to configure a picker quickly, Snap is the visual code generator. You pick your sources, accepted file types, and storage options through a UI, and it outputs the JavaScript and CSS for your picker. Good for a quick scaffold before you dive into deeper customization.

Why this exists

File handling is rarely the interesting part of what you’re building. It’s plumbing. The plugin is here so your team can spend less time reading API docs and more time shipping the product.

 

We’ll be back with more posts walking through specific builds, including webhook verification, secure access flows, and a few transform pipelines we’ve built internally. In the meantime, the full plugin docs have everything you need to get started.

 

Install it, try an upload, and let us know what you build.