セキュリティ

API キーが必要なプロバイダーは、ブラウザーでの実行を拒否します。

// Throws: "API keys must not be used in the browser…"
const ai = createOpenAI({ apiKey: 'sk-...' })

明示的に許可するのは、プロトタイプや信頼できる環境（Electron や社内ツールなど）に限ってください。

const ai = createOpenAI({ apiKey: 'sk-...', dangerouslyAllowBrowser: true })

本番環境での構成

キーはサーバーに置き、クライアントからはプロキシプロバイダーを通じてサーバーと通信します。

// server: /api/chat
import { createLLMHandler } from 'vue-llm/server'
import { createOpenAI } from 'vue-llm/providers'

export const handler = createLLMHandler({
  provider: createOpenAI({ apiKey: process.env.OPENAI_API_KEY! }),
  model: 'gpt-4o',
  rateLimit: { maxRequests: 20, interval: 60_000 },
})

// client
import { createProxyProvider } from 'vue-llm/server'

const { messages, sendMessage } = useChat({ provider: createProxyProvider('/api/chat'), model: 'gpt-4o' })

サーバーとプロキシ と Nuxt も参照してください。

TIP

サーバーハンドラーはリクエストボディの model と system を受け付けます。クライアントに選ばせたくない場合は、onRequest で固定してください。