Lovable AI Gateway

@tanstack/ai-lovable을 설치합니다. 그런 다음 google/gemini-3.7-flash와 같은 모델 id로 lovableText를 호출합니다.

Lovable AI Gateway는 Google 및 OpenAI 모델 앞에서 동작합니다. 하나의 프로젝트 키를 사용하며, provider 계정을 설정할 필요가 없습니다.

설치

npm install @tanstack/ai-lovable

인증

LOVABLE_API_KEY를 설정합니다. Lovable은 각 Cloud 프로젝트에 이 키를 생성합니다.

export LOVABLE_API_KEY="..."

create* 팩토리에 키를 전달할 수도 있습니다.

import { createLovableText } from "@tanstack/ai-lovable"

const adapter = createLovableText(
  "google/gemini-3.7-flash",
  process.env.LOVABLE_API_KEY!,
)

어댑터는 Authorization: Bearer, Lovable-API-Key 및 X-Lovable-AIG-SDK: tanstack-ai를 전송합니다. 호출은 https://ai.gateway.lovable.dev/v1로 전송됩니다.

채팅

기본 어댑터는 OpenAI Responses API를 사용합니다. 모델 id는 google/ 또는 openai/ 형식을 사용합니다.

서버. SSE를 통해 응답을 스트리밍하는 엔드포인트입니다.

import { chat, toServerSentEventsResponse } from "@tanstack/ai"
import { lovableText } from "@tanstack/ai-lovable"

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

  const stream = chat({
    adapter: lovableText("google/gemini-3.7-flash"),
    messages,
  })

  return toServerSentEventsResponse(stream)
}

클라이언트. 다른 모든 provider와 동일한 useChat 훅을 사용합니다.

import { useState } from "react"
import { fetchServerSentEvents, useChat } from "@tanstack/ai-react"

export function Chat() {
  const [input, setInput] = useState("")

  const { messages, sendMessage, isLoading } = useChat({
    connection: fetchServerSentEvents("/api/chat"),
  })

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role}</strong>
          {message.parts.map((part, index) =>
            part.type === "text" ? <p key={index}>{part.content}</p> : null,
          )}
        </div>
      ))}

      <form
        onSubmit={(event) => {
          event.preventDefault()
          if (!input.trim() || isLoading) return
          sendMessage(input)
          setInput("")
        }}
      >
        <input value={input} onChange={(event) => setInput(event.target.value)} />
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </form>
    </div>
  )
}

채팅 완성

모델이 Chat Completions와 통신해야 하는 경우 { api: "chat" }를 전달합니다. 기본값은 Responses입니다.

import { chat } from "@tanstack/ai"
import { lovableText } from "@tanstack/ai-lovable"

const stream = chat({
  adapter: lovableText("openai/gpt-5.5", { api: "chat" }),
  messages: [{ role: "user", content: "Hello" }],
})

api: "responses"는 기본값과 같습니다. api: "chat-completions"는 api: "chat"과 같습니다.

요약

import { summarize } from "@tanstack/ai"
import { lovableSummarize } from "@tanstack/ai-lovable"

const result = await summarize({
  adapter: lovableSummarize("google/gemini-3.7-flash"),
  text: "The Fender Stratocaster is a versatile electric guitar.",
})

이미지

새 이미지를 생성하거나 이미지 파트를 전달해 이미지를 편집합니다. OpenAI 이미지 모델은 마스크 파트(metadata.role === "mask")도 허용합니다.

import { generateImage } from "@tanstack/ai"
import { lovableImage } from "@tanstack/ai-lovable"

const result = await generateImage({
  adapter: lovableImage("openai/gpt-image-2"),
  prompt: "a red guitar on a wooden bench",
})

비디오

비디오 작업은 비동기입니다. 작업을 생성하고 상태를 폴링한 다음 MP4 URL을 가져옵니다. 클립 길이는 4초, 6초 또는 8초입니다. 1080p 및 4K 클립은 항상 8초입니다. 4K는 google/veo-3.1-fast 및 google/veo-3.1에서만 작동합니다.

import { generateVideo } from "@tanstack/ai"
import { lovableVideo } from "@tanstack/ai-lovable"

const { jobId } = await generateVideo({
  adapter: lovableVideo("google/veo-3.1-lite"),
  prompt: "a red guitar on a wooden bench, slow camera push-in",
  duration: 4,
  size: "1280x720",
})

그런 다음 해당 jobId로 getVideoJobStatus를 폴링합니다. 작업이 완료되면 결과에 MP4 URL이 포함됩니다.

정지 프레임을 애니메이션으로 만들려면 prompt에 이미지 파트 하나를 전달합니다.

임베딩

import { embed } from "@tanstack/ai"
import { lovableEmbedding } from "@tanstack/ai-lovable"

const result = await embed({
  adapter: lovableEmbedding("google/gemini-embedding-2"),
  input: "a red guitar",
})

console.log(result.embeddings[0]?.vector)

음성

import { generateSpeech } from "@tanstack/ai"
import { lovableSpeech } from "@tanstack/ai-lovable"

const result = await generateSpeech({
  adapter: lovableSpeech("openai/gpt-4o-mini-tts"),
  text: "Welcome to the guitar shop.",
  voice: "nova",
})

전사

import { generateTranscription } from "@tanstack/ai"
import { lovableTranscription } from "@tanstack/ai-lovable"

const audio = await fetch("/voice-note.mp3").then((response) => response.blob())

const result = await generateTranscription({
  adapter: lovableTranscription("openai/gpt-4o-mini-transcribe"),
  audio,
  language: "en",
})

console.log(result.text)

자체 키 사용

사용자는 브라우저에 Lovable 프로젝트 키를 붙여 넣을 수 있습니다. lovableByok는 패키지의 main entry가 아니라 @tanstack/ai-lovable/byok에서 가져옵니다.

import { createLovableText } from "@tanstack/ai-lovable"
import { lovableByok } from "@tanstack/ai-lovable/byok"
import { byokMissing, getByokKey } from "@tanstack/ai/byok/server"

export async function POST(request: Request) {
  const apiKey = getByokKey(request, lovableByok)
  if (!apiKey) return byokMissing(lovableByok)

  const adapter = createLovableText("google/gemini-3.7-flash", apiKey)
  // ...
}

자체 키 사용에서 클라이언트 store와 저장 UI를 확인합니다.

모델

선별된 목록의 모델 id를 전달합니다. TypeScript는 목록에 없는 id를 거부합니다.

채팅:

• 기본값: google/gemini-3.7-flash
• 빠른 OpenAI: openai/gpt-5.5

이미지, 비디오, 임베딩 및 음성:

• 이미지 기본값: openai/gpt-image-2
• 비디오 기본값: google/veo-3.1-lite
• 임베딩 기본값: google/gemini-embedding-2
• 음성 기본값: openai/gpt-4o-mini-tts
• 전사 기본값: openai/gpt-4o-mini-transcribe

선별된 목록은 LOVABLE_CHAT_MODELS, LOVABLE_IMAGE_MODELS, LOVABLE_VIDEO_MODELS, LOVABLE_EMBEDDING_MODELS, LOVABLE_TTS_MODELS 및 LOVABLE_TRANSCRIPTION_MODELS입니다.

오류

• 429 Too Many Requests: 작업 공간이 분당 요청 한도에 도달했습니다.
• 402 Payment Required: 작업 공간의 크레딧이 부족합니다.

모델, 크레딧 및 속도 제한은 Lovable AI 기능을 확인합니다.