LLM Gateway와 Vercel AI SDK를 사용하여 이미지를 생성하는 방법

Source: Dev.to

이미지 생성은 현대 AI 애플리케이션의 핵심 기능이 되었습니다. 하지만 서로 다른 API, 가격 정책, 기능을 가진 여러 이미지 제공업체를 통합하는 것은 번거로울 수 있습니다.

LLM Gateway는 Google Gemini, Alibaba Qwen, ByteDance Seedream 등 다양한 제공업체를 아우르는 단일 OpenAI‑호환 API를 제공함으로써 이를 간소화합니다. 이 가이드에서는 OpenAI SDK와 Vercel AI SDK를 모두 사용하여 이미지를 생성하는 과정을 단계별로 살펴보겠습니다.

Prerequisites

• 에서 회원가입하고 프로젝트를 생성하세요.
• API 키를 복사하세요.

환경 변수에 내보내세요:

export LLM_GATEWAY_API_KEY="llmgtwy_XXXXXXXXXXXXXXXX"

옵션 1 – 이미지 API (/v1/images/generations)

가장 간단한 접근 방식 – OpenAI의 이미지 생성 엔드포인트를 즉시 대체할 수 있는 방법.

curl 사용

curl -X POST "https://api.llmgateway.io/v1/images/generations" \
  -H "Authorization: Bearer $LLM_GATEWAY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "gemini-3-pro-image-preview",
    "prompt": "A cute cat wearing a tiny top hat",
    "n": 1,
    "size": "1024x1024"
  }'

OpenAI SDK 사용 (Node.js)

import OpenAI from "openai";
import { writeFileSync } from "fs";

const client = new OpenAI({
  baseURL: "https://api.llmgateway.io/v1",
  apiKey: process.env.LLM_GATEWAY_API_KEY,
});

const response = await client.images.generate({
  model: "gemini-3-pro-image-preview",
  prompt: "A futuristic city skyline at sunset with flying cars",
  n: 1,
  size: "1024x1024",
});

response.data.forEach((image, i) => {
  if (image.b64_json) {
    const buf = Buffer.from(image.b64_json, "base64");
    writeFileSync(`image-${i}.png`, buf);
  }
});

이것으로 끝입니다 – baseURL을 LLM Gateway로 지정하고 표준 OpenAI SDK를 사용하세요. 새로운 라이브러리는 필요하지 않습니다.

옵션 2 – Vercel AI SDK (generateImage)

이미 Vercel AI SDK를 사용하고 있다면, LLM Gateway는 네이티브 제공자 패키지를 제공합니다: @llmgateway/ai-sdk-provider.

npm install @llmgateway/ai-sdk-provider ai

간단한 이미지 생성

import { createLLMGateway } from "@llmgateway/ai-sdk-provider";
import { generateImage } from "ai";
import { writeFileSync } from "fs";

const llmgateway = createLLMGateway({
  apiKey: process.env.LLM_GATEWAY_API_KEY,
});

const result = await generateImage({
  model: llmgateway.image("gemini-3-pro-image-preview"),
  prompt:
    "A cozy cabin in a snowy mountain landscape at night with aurora borealis",
  size: "1024x1024",
  n: 1,
});

result.images.forEach((image, i) => {
  const buf = Buffer.from(image.base64, "base64");
  writeFileSync(`image-${i}.png`, buf);
});

streamText를 사용한 대화형 이미지 생성

이미지 생성과 채팅을 결합할 때 진정한 힘이 발휘됩니다. 채팅‑완료 접근 방식을 사용하면 대화형 이미지‑생성 흐름을 구축할 수 있습니다 – 모델에게 이미지를 만들도록 요청하고, 후속 메시지를 통해 이미지를 다듬어 보세요.

Next.js API 라우트

import {
  streamText,
  type UIMessage,
  convertToModelMessages,
} from "ai";
import { createLLMGateway } from "@llmgateway/ai-sdk-provider";

interface ChatRequestBody {
  messages: UIMessage[];
}

export async function POST(req: Request) {
  const body = await req.json();
  const { messages }: ChatRequestBody = body;

  const llmgateway = createLLMGateway({
    apiKey: process.env.LLM_GATEWAY_API_KEY,
    baseUrl: "https://api.llmgateway.io/v1",
  });

  try {
    const result = streamText({
      model: llmgateway.chat("gemini-3-pro-image-preview"),
      messages: convertToModelMessages(messages),
    });

    return result.toUIMessageStreamResponse();
  } catch {
    return new Response(
      JSON.stringify({ error: "LLM Gateway Chat request failed" }),
      { status: 500 }
    );
  }
}

프론트엔드 훅 (useChat)

import { useChat } from "@ai-sdk/react";

export const ImageChat = () => {
  const { messages, status, sendMessage } = useChat();

  return (
    
      {messages.map((m) => {
        if (m.role === "assistant") {
          const textContent = m.parts
            .filter((p) => p.type === "text")
            .map((p) => p.text)
            .join("");

          const imageParts = m.parts.filter(
            (p) => p.type === "file" && p.mediaType?.startsWith("image/")
          );

          return (
            
              {textContent && 
{textContent}
}
              {imageParts.map((part, idx) => (
                
              ))}
            
          );
        }

        return (
          
            {m.parts.map((p, i) => (
              
{p.type === "text" ? p.text : null}

            ))}
          
        );
      })}
    
  );
};

이 스니펫들을 사용하면 단일 이미지, 배치 이미지 생성은 물론, LLM Gateway와 OpenAI SDK 또는 Vercel AI SDK를 함께 활용한 완전한 대화형 이미지‑생성 UI까지 구축할 수 있습니다. 즐거운 코딩 되세요!

Source: …

LLM Gateway를 이용한 이미지 생성

아래는 LLM Gateway를 사용해 이미지를 생성하고, 편집하며, 이미지 제공자를 전환하는 간단한 가이드입니다.

1️⃣ 이미지 생성

import { Image } from "ai-elements";

export const ImageDemo = () => {
  const { data, error, isLoading } = useChatCompletion({
    model: "gemini-3-pro-image-preview",
    messages: [
      {
        role: "user",
        content: [
          {
            type: "text",
            text: "Create a futuristic cityscape at sunset"
          }
        ]
      }
    ],
    // optional: control size/quality
    image_config: {
      aspect_ratio: "16:9",
      image_size: "4K"
    }
  });

  if (isLoading) return 
Loading…
;
  if (error) return 
{error.message}
;

  return (
    
      {data?.choices?.map((c, i) => (
        
          {c.message?.content?.map((p, i) =>
            p.type === "image" ? (
              
            ) : p.type === "text" ? (
              
{p.text}

            ) : null
          )}
        
      ))}
    
  );
};

Tip: ai-elements 에서 제공하는 미리 만들어진 “ 컴포넌트를 사용하면 깔끔한 렌더링을 경험할 수 있습니다.

2️⃣ 이미지 편집

LLM Gateway는 /v1/images/edits 엔드포인트를 통해 기존 이미지를 편집할 수 있습니다. 이미지 URL(HTTPS 또는 base64 데이터 URL)과 편집 프롬프트를 함께 전달하세요.

curl -X POST "https://api.llmgateway.io/v1/images/edits" \
  -H "Authorization: Bearer $LLM_GATEWAY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "images": [
      {
        "image_url": "https://example.com/source-image.png"
      }
    ],
    "prompt": "Add a watercolor effect to this image",
    "model": "gemini-3-pro-image-preview",
    "quality": "high",
    "size": "1024x1024"
  }'

3️⃣ 제공자 전환

이미지 제공자를 바꾸는 것은 한 줄 수정이면 충분합니다—model 문자열만 교체하면 됩니다.

// Google Gemini
model: "gemini-3-pro-image-preview"

// Alibaba Qwen (from $0.03/image)
model: "alibaba/qwen-image-plus"

// ByteDance Seedream (up to 4K output)
model: "bytedance/seedream-4-5"

// Z.AI CogView (great for text in images)
model: "zai/cogview-4"

제공자 비교

4️⃣ 출력 맞춤 설정

채팅 완성 요청에서는 image_config 파라미터를, 이미지 API에서는 표준 size/quality 파라미터를 사용해 결과를 제어합니다.

// Google: 가로세로 비율 + 해상도
{
  "image_config": {
    "aspect_ratio": "16:9",
    "image_size": "4K"
  }
}

// Alibaba: 픽셀 크기 + 재현성을 위한 시드
{
  "image_config": {
    "image_size": "1024x1536",
    "seed": 42
  }
}

마무리

LLM Gateway를 사용하면 이미지 생성이 제공자에 구애받지 않게 됩니다. OpenAI SDK, Vercel AI SDK, 혹은 순수 HTTP를 사용하든 다음을 얻을 수 있습니다:

• 다수의 제공자를 위한 하나의 API
• 코드 변경 없이 손쉬운 모델 교체
• 크기, 품질, 종횡비에 대한 세밀한 제어

리소스

• LLM Gateway 이미지 생성 문서
• 사용 가능한 이미지 모델 둘러보기
• 플레이그라운드 – 실시간 체험
• npm의 AI SDK 제공자

시작하기 →