> ## Documentation Index
> Fetch the complete documentation index at: https://docs.together.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a real-time image generator with Flux

> Create a real-time text-to-image app with Juggernaut Lightning Flux, Next.js, and Together AI.

[BlinkShot](https://www.blinkshot.io/) is an open-source app that generates images from text in real time, as you type. It uses [Juggernaut Lightning Flux](https://www.together.ai/models/juggernaut-lightning-flux) on Together AI, a Flux-based model that returns an image in under two seconds.

<img src="https://mintcdn.com/togetherai-52386018/Hlnt9JlDDEMj60mv/images/guides/blinkshot/cover.png?fit=max&auto=format&n=Hlnt9JlDDEMj60mv&q=85&s=aceefa4946c5b4247d8f6fa711f59715" alt="BlinkShot generating an image as the user types a prompt" width="2880" height="1690" data-path="images/guides/blinkshot/cover.png" />

Follow this guide to learn how to build the core parts of BlinkShot. The app is [open source](https://github.com/Nutlope/blinkshot) 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:

```typescript theme={null}
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:

```typescript theme={null}
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:

```bash theme={null}
npm install together-ai
```

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

```bash .env.local theme={null}
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:

```typescript app/api/generateImage/route.ts theme={null}
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:

```typescript theme={null}
{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`:

```bash theme={null}
npm install @uidotdev/usehooks
```

```typescript theme={null}
const debouncedPrompt = useDebounce(prompt, 350);
```

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

```typescript theme={null}
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](/docs/serverless/overview#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.

```typescript theme={null}
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](https://github.com/Nutlope/blinkshot) to see the production details this page skips, such as rate limiting and prompt moderation.

## Next steps

<CardGroup cols={2}>
  <Card title="FLUX.2 quickstart" icon="bolt" href="/docs/quickstart-flux">
    Generate higher-fidelity images with the latest FLUX.2 model family.
  </Card>

  <Card title="Image generation overview" icon="photo" href="/docs/inference/images/overview">
    Explore every image model and parameter available on Together AI.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.