Build a real-time image generator with Flux

BlinkShot is an open-source app that generates images from text in real time, as you type. It uses Juggernaut Lightning Flux on Together AI, a Flux-based model that returns an image in under two seconds.

BlinkShot generating an image as the user types a prompt

Follow this guide to learn how to build the core parts of BlinkShot. The app is open source and built with Next.js and React Query, but the concepts apply to any language or framework.

Build the prompt input

The core interaction of BlinkShot is a single textarea where you describe an image. There’s no submit button. Because the model is fast enough to generate images in real time, the app fires a request as you type:

function Home() {
  const [prompt, setPrompt] = useState("");

  return (
    <textarea
      rows={4}
      placeholder="Describe your image..."
      value={prompt}
      onChange={(e) => setPrompt(e.target.value)}
    />
  );
}

To turn keystrokes into API calls, use useQuery from React Query with the prompt in the queryKey. Whenever the prompt changes, React Query runs the query function again:

const { data: image, isFetching } = useQuery({
  placeholderData: (previousData) => previousData,
  queryKey: [prompt],
  queryFn: async () => {
    const res = await fetch("/api/generateImage", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });

    if (!res.ok) {
      throw new Error(await res.text());
    }

    return (await res.json()) as { b64_json: string };
  },
  enabled: !!prompt.trim(),
  staleTime: Infinity,
  retry: false,
});

The placeholderData option keeps the previous image on screen while the next one loads, so the UI never flashes empty between generations.

Generate images in an API route

The query function above calls a Next.js API route. Generating from a server route keeps your Together API key out of the browser. Install the SDK:

npm install together-ai

The SDK reads your API key from the TOGETHER_API_KEY environment variable, so add it to your .env.local:

.env.local

TOGETHER_API_KEY=your_api_key

Then create the route at app/api/generateImage/route.ts. It reads the prompt from the request body and generates an image with Juggernaut Lightning Flux:

app/api/generateImage/route.ts

import Together from "together-ai";

const client = new Together();

export async function POST(request: Request) {
  const { prompt } = await request.json();

  const response = await client.images.generate({
    prompt,
    model: "Rundiffusion/Juggernaut-Lightning-Flux",
    width: 1024,
    height: 768,
    steps: 4,
    response_format: "base64",
  });

  return Response.json(response.data[0]);
}

Setting response_format to "base64" returns the image data inline as b64_json, so the frontend can render it immediately with a data URL instead of waiting on a second request to fetch a hosted file:

{image && (
  <img
    src={`data:image/png;base64,${image.b64_json}`}
    alt={prompt}
    width={1024}
    height={768}
  />
)}

At this point the app works end to end: enter a prompt and an image appears.

Debounce requests

Firing a request on every keystroke wastes generations on half-typed prompts. Debounce the prompt with the useDebounce hook from @uidotdev/usehooks:

npm install @uidotdev/usehooks

const debouncedPrompt = useDebounce(prompt, 350);

Using debouncedPrompt in the queryKey means the app waits for a 350 millisecond pause in typing before generating:

const { data: image, isFetching } = useQuery({
  placeholderData: (previousData) => previousData,
  queryKey: [debouncedPrompt],
  // ...
});

BlinkShot goes one step further and scales the delay with prompt length, waiting 900 milliseconds after one or two words but only 350 milliseconds once the prompt is longer. Short fragments rarely describe the final image, so there’s less value in generating them.

Tune quality with `steps`

The steps parameter controls how many diffusion steps the model runs. More steps produce more detailed images but take longer, which matters when every keystroke can trigger a generation. Juggernaut Lightning Flux is distilled to produce good images in very few steps, and BlinkShot uses 4 as its balance of quality and speed. Juggernaut Lightning Flux bills through the provider’s own per-request charge rather than a published per-megapixel rate, so raising steps can change what a generation costs. Models that bill per megapixel apply a step multiplier above their default step count. See How image models bill.

Keep images consistent with `seed`

By default, every generation starts from random noise, so the same prompt produces a different image each time. Passing a fixed seed pins that starting point, so the same prompt and seed reproduce the same image. Repeated runs can differ by a few pixels, but the subject, composition, and details stay the same.

const response = await client.images.generate({
  prompt,
  model: "Rundiffusion/Juggernaut-Lightning-Flux",
  width: 1024,
  height: 768,
  steps: 4,
  seed: 123,
  response_format: "base64",
});

BlinkShot uses this for its consistency mode. With a fixed seed, extending the prompt evolves the previous image instead of replacing it with something unrelated, so “a cat” and then “a cat wearing a hat” look like the same cat.

Go beyond real-time generation

BlinkShot is open source, so check out the full code to see the production details this page skips, such as rate limiting and prompt moderation.

GUIDES

MODEL QUICKSTARTS

BUILD APPS

BUILD AGENTS

WORK WITH CODING AGENTS

SDK INTEGRATIONS

Build a real-time image generator with Flux

Build the prompt input

Generate images in an API route

Debounce requests

Tune quality with `steps`

Keep images consistent with `seed`

Go beyond real-time generation

Next steps

FLUX.2 quickstart

Image generation overview

​Build the prompt input

​Generate images in an API route

​Debounce requests

​Tune quality with steps

​Keep images consistent with seed

​Go beyond real-time generation

​Next steps

FLUX.2 quickstart

Image generation overview

Build the prompt input

Generate images in an API route

Debounce requests

Tune quality with `steps`

Keep images consistent with `seed`

Go beyond real-time generation

Next steps