Skip to content



sanity-plugin-image-gen

Our open-source Sanity Studio plugin for generating images with AI, directly inside the studio, through your own Next.js API routes.

entry 08 of 15 · plugin · updated 2026-10-07



What it is

sanity-plugin-image-gen puts AI image generation inside Sanity Studio v3, wired through your own Next.js API route. Editors open any image field, pick "AI Generate" from the asset source menu, write a prompt, and pick from up to four generated options. Nothing leaves the studio to reach a separate tool.

Because the plugin calls your API route rather than hitting a model directly, you decide which model runs, how prompts are processed, and what the bill looks like. Out of the box it supports FLUX via Replicate, with flux-schnell as the fast default and flux-pro available when quality matters more than speed, and TypeScript types throughout. It needs Node 18+, React 18, and Sanity Studio v3.

What you get

  • AI image generation available on any Sanity image field, no custom field type needed.
  • Aspect ratio control across four presets (1:1, 16:9, 4:3, 3:2) and four size tiers.
  • Up to four variants per generation, so editors can pick without regenerating.
  • Negative prompt support for steering the model away from unwanted elements.
  • Full integration with Sanity's asset pipeline: generated images land in your project's media library.
  • TypeScript types throughout, with no runtime surprises.

How to use it

Install it from the Sanity Exchange or from npm:

bash
npm i sanity-plugin-image-gen

Then register it in your studio config, pointing it at your Next.js API route:

ts
// sanity.config.ts
import { defineConfig } from "sanity";
import { imageGen } from "sanity-plugin-image-gen";

export default defineConfig({
  plugins: [
    imageGen({
      apiEndpoint: "https://your-nextjs-app.com/api/generate-image",
    }),
  ],
});

The API route itself uses @ai-sdk/replicate and sets REPLICATE_API_TOKEN in your environment. The README has a full route example if you want to start from there.

How we use it

This plugin came out of our own need to keep AI image generation inside the editorial workflow on client projects. When a team is already editing in Sanity, adding a separate generation tool adds context-switching without much benefit. We open-sourced it so anyone building on Sanity can wire in the same pattern without starting from scratch.



Common questions

FAQs

What people ask before picking up sanity-plugin-image-gen

Which model does it generate with?
Whichever you point it at. The plugin calls your own Next.js API route rather than a model directly, so you decide the model, how prompts are processed and what the bill looks like. Out of the box it supports FLUX via Replicate, with flux-schnell as the fast default and flux-pro when quality matters more than speed.
Do editors leave the studio to use it?
No. They open any image field, pick AI Generate from the asset source menu, write a prompt and choose from up to four generated options. Generated images land in the project's media library through Sanity's normal asset pipeline.
What control do editors get over the output?
Aspect ratio across four presets (1:1, 16:9, 4:3, 3:2), four size tiers, up to four variants per generation so they can pick without regenerating, and negative prompts for steering the model away from unwanted elements.
What are the version requirements?
Node 18 or later, React 18, and Sanity Studio v3. TypeScript types ship throughout.
How do I wire it up?
'npm i sanity-plugin-image-gen', then register imageGen({ apiEndpoint }) in sanity.config.ts pointing at your API route. The route uses @ai-sdk/replicate with REPLICATE_API_TOKEN in the environment, and the README has a full route example to start from.


Get in touch

Tell us what you're building. We reply within one working day. Jono or someone on the team picks up every message personally.

By sending this you agree to our privacy policy. We only use your details to reply.