From 2109785e69bfb685054f86c95ee490da6cde8a6c Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Sat, 7 Mar 2026 07:26:59 -0800
Subject: [PATCH] adding openrouter image example

---
 testing/panel/src/routes/api.image.ts | 27 +++++++++++++++++----------
 testing/panel/src/routes/image.tsx    | 15 ++++++++++++++-
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/testing/panel/src/routes/api.image.ts b/testing/panel/src/routes/api.image.ts
index 497574b7f..8c388089a 100644
--- a/testing/panel/src/routes/api.image.ts
+++ b/testing/panel/src/routes/api.image.ts
@@ -2,8 +2,9 @@ import { createFileRoute } from '@tanstack/react-router'
 import { generateImage, createImageOptions } from '@tanstack/ai'
 import { geminiImage } from '@tanstack/ai-gemini'
 import { openaiImage } from '@tanstack/ai-openai'
+import { openRouterImage } from '@tanstack/ai-openrouter'
 
-type Provider = 'openai' | 'gemini'
+type Provider = 'openai' | 'gemini' | 'openrouter'
 
 export const Route = createFileRoute('/api/image')({
   server: {
@@ -13,21 +14,28 @@ export const Route = createFileRoute('/api/image')({
         const { prompt, numberOfImages = 1, size = '1024x1024' } = body
         const data = body.data || {}
         const provider: Provider = data.provider || body.provider || 'openai'
-        const model: string = data.model || body.model || 'gpt-image-1'
+
+        const defaultModels: Record<Provider, string> = {
+          openai: 'gpt-image-1',
+          gemini: 'gemini-2.0-flash-preview-image-generation',
+          openrouter: 'google/gemini-3.1-flash-image-preview',
+        }
+        const model: string =
+          data.model || body.model || defaultModels[provider]
 
         try {
-          // Pre-define typed adapter configurations with full type inference
-          // Model is passed to the adapter factory function for type-safe autocomplete
           const adapterConfig = {
             gemini: () =>
               createImageOptions({
-                adapter: geminiImage(
-                  (model || 'gemini-2.0-flash-preview-image-generation') as any,
-                ),
+                adapter: geminiImage(model as any),
               }),
             openai: () =>
               createImageOptions({
-                adapter: openaiImage((model || 'gpt-image-1') as any),
+                adapter: openaiImage(model as any),
+              }),
+            openrouter: () =>
+              createImageOptions({
+                adapter: openRouterImage(model as any),
               }),
           }
 
@@ -46,8 +54,7 @@ export const Route = createFileRoute('/api/image')({
           })
 
           console.log(
-            '>> image generation result:',
-            JSON.stringify(result, null, 2),
+            `>> image generation complete: ${result.images.length} image(s)`,
           )
 
           return new Response(
diff --git a/testing/panel/src/routes/image.tsx b/testing/panel/src/routes/image.tsx
index 54edc02d6..1c35a9938 100644
--- a/testing/panel/src/routes/image.tsx
+++ b/testing/panel/src/routes/image.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { ImageIcon, Loader2, Download } from 'lucide-react'
 
-type Provider = 'openai' | 'gemini'
+type Provider = 'openai' | 'gemini' | 'openrouter'
 
 interface ImageProvider {
   id: Provider
@@ -22,6 +22,19 @@ const PROVIDERS: Array<ImageProvider> = [
   //   name: 'Gemini (Imagen)',
   //   sizes: ['1024x1024', '1:1', '16:9', '9:16', '4:3', '3:4'],
   // },
+  {
+    id: 'openrouter',
+    name: 'OpenRouter (Gemini 3.1 Flash Image)',
+    sizes: [
+      '1024x1024',
+      '1248x832',
+      '832x1248',
+      '1184x864',
+      '864x1184',
+      '1344x768',
+      '768x1344',
+    ],
+  },
 ]
 
 interface GeneratedImage {