lukasa1993/tanstack-skills-extracted/tanstack-ai-core-media-generation

// routes/api/generate/image.ts
import {
  generateImage,
  generationParamsFromRequest,
  toServerSentEventsResponse,
} from '@tanstack/ai'
import { openaiImage } from '@tanstack/ai-openai'
export async function POST(req: Request) {
  // The hook posts an AG-UI RunAgentInput envelope: the input is in
  // `forwardedProps`, and `threadId` / `runId` are at the top.
  const { input, threadId, runId } = await generationParamsFromRequest(
    'image',
    req,
  )
  if (typeof input.prompt !== 'string') {
    return new Response('Send a text prompt.', { status: 400 })
  }
  const stream = generateImage({
    adapter: openaiImage('gpt-image-1'),
    threadId,
    runId,
    prompt: input.prompt,
    size: '1024x1024',
    numberOfImages: input.numberOfImages,
    stream: true,
  })
  return toServerSentEventsResponse(stream)
}

import { useGenerateImage, fetchServerSentEvents } from '@tanstack/ai-react'
import { useState } from 'react'
function ImageGenerator() {
  const [prompt, setPrompt] = useState('')
  const { generate, result, isLoading, error, reset } = useGenerateImage({
    connection: fetchServerSentEvents('/api/generate/image'),
    threadId: 'product-123-hero',
  })
  return (
    <div>
      <input
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Describe an image..."
      />
      <button
        onClick={() => generate({ prompt })}
        disabled={isLoading || !prompt.trim()}
      >
        {isLoading ? 'Generating...' : 'Generate'}
      </button>
      {error && <p>Error: {error.message}</p>}
      {result?.images.map((img, i) => (
        <img
          key={i}
          src={img.url || `data:image/png;base64,${img.b64Json}`}
          alt={img.revisedPrompt || 'Generated image'}
        />
      ))}
      {result && <button onClick={reset}>Clear</button>}
    </div>
  )
}

// lib/server-functions.ts
import { createServerFn } from '@tanstack/react-start'
import { generateImage, toServerSentEventsResponse } from '@tanstack/ai'
import { openaiImage } from '@tanstack/ai-openai'
import type { OpenAIImageModel } from '@tanstack/ai-openai'
export const generateImageStreamFn = createServerFn({ method: 'POST' })
  .inputValidator(
    (data: { prompt: string; model?: OpenAIImageModel; threadId: string }) =>
      data,
  )
  .handler(({ data }) => {
    return toServerSentEventsResponse(
      generateImage({
        adapter: openaiImage(data.model ?? 'gpt-image-1'),
        threadId: data.threadId,
        prompt: data.prompt,
        stream: true,
      }),
    )
  })

import { useGenerateImage } from '@tanstack/ai-react'
import { generateImageStreamFn } from '../lib/server-functions'
function ImageGenerator() {
  const { generate, result, isLoading } = useGenerateImage({
    fetcher: (input, { threadId }) =>
      generateImageStreamFn({ data: { ...input, threadId } }),
    threadId: 'product-123-hero',
  })
  return (
    <button
      onClick={() => generate({ prompt: 'A sunset over mountains' })}
      disabled={isLoading}
    >
      {isLoading ? 'Generating...' : 'Generate'}
    </button>
  )
}

import { generateImage } from '@tanstack/ai'
import { openaiImage } from '@tanstack/ai-openai'
import { geminiImage } from '@tanstack/ai-gemini'
// OpenAI with quality/background options
const openaiResult = await generateImage({
  adapter: openaiImage('gpt-image-1'),
  threadId: 'thread-1',
  prompt: 'A cat wearing a hat',
  size: '1024x1024',
  numberOfImages: 2,
  modelOptions: {
    quality: 'high',
    background: 'transparent',
    output_format: 'png',
  },
})
// Gemini native model with aspect-ratio sizes
const geminiResult = await generateImage({
  adapter: geminiImage('gemini-3.1-flash-image'),
  threadId: 'thread-1',
  prompt: 'A futuristic cityscape at night',
  size: '16:9_4K',
})
// Edit that image. geminiResult.id is the interaction id.
// Send only the new prompt. The previous image stays on the server.
const edited = await generateImage({
  adapter: geminiImage('gemini-3.1-flash-image'),
  threadId: 'thread-1',
  prompt: 'Make the sky orange',
  modelOptions: { previous_interaction_id: geminiResult.id },
})

import { generateImage } from '@tanstack/ai'
import { openaiImage } from '@tanstack/ai-openai'
// Image-to-image (every OpenAI gpt-image model)
await generateImage({
  adapter: openaiImage('gpt-image-2'),
  threadId: 'thread-1',
  prompt: [
    { type: 'text', content: 'Turn this into a cinematic product photo' },
    { type: 'image', source: { type: 'url', value: 'https://…/product.png' } },
  ],
})
// Multi-reference (up to 16 for gpt-image models; up to ~14 for Gemini native
// — a provider limit, not enforced by the SDK)
await generateImage({
  adapter: openaiImage('gpt-image-2'),
  threadId: 'thread-1',
  prompt: [
    { type: 'text', content: 'Apply the second image as style to the first' },
    { type: 'image', source: { type: 'url', value: 'https://…/product.png' } },
    { type: 'image', source: { type: 'url', value: 'https://…/style.png' } },
  ],
})
// Inpaint via metadata.role === 'mask' (OpenAI gpt-image models; fal mask_url)
await generateImage({
  adapter: openaiImage('gpt-image-2'),
  threadId: 'thread-1',
  prompt: [
    { type: 'text', content: 'Replace the masked region with a tree' },
    { type: 'image', source: { type: 'url', value: 'https://…/photo.png' } },
    {
      type: 'image',
      source: { type: 'url', value: 'https://…/mask.png' },
      metadata: { role: 'mask' },
    },
  ],
})
// Image-to-video (OpenAI Sora: single input_reference; fal: image_url + optional
// end_image_url; OpenRouter: frame_images + input_references)
import { generateVideo } from '@tanstack/ai'
import { falVideo } from '@tanstack/ai-fal'
await generateVideo({
  adapter: falVideo('fal-ai/kling-video/v3/pro/image-to-video'),
  threadId: 'thread-1',
  prompt: [
    { type: 'image', source: { type: 'url', value: 'https://…/first.png' } },
    { type: 'text', content: 'Slow cinematic push-in' },
    {
      type: 'image',
      source: { type: 'url', value: 'https://…/last.png' },
      metadata: { role: 'end_frame' },
    },
  ],
})