Vercel AI SDK

Vercel AI SDK ↗ は、AI アプリケーションを構築するための TypeScript ライブラリです。多数の AI プロバイダー、ストリーミング補完用のツールなどに対応しています。 Cloudflare AI Gateway を Vercel AI SDK と使うには、ai-gateway-provider パッケージが必要です。

インストール

npm install ai-gateway-provider

例

リクエスト先

OpenAI

統合

API キーの種類

保存済みキー (BYOK)

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('openai/gpt-5.2')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('anthropic/claude-4-5-sonnet')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('google/gemini-2.5-pro')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('grok/grok-4')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('dynamic/customer-support')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('workers-ai/@cf/meta/llama-3.3-70b-instruct-fp8-fast')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('openai/gpt-5.2')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('anthropic/claude-4-5-sonnet')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('google/gemini-2.5-pro')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('grok/grok-4')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('dynamic/customer-support')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('workers-ai/@cf/meta/llama-3.3-70b-instruct-fp8-fast')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createOpenAI } from 'ai-gateway-provider/providers/openai';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const openai = createOpenAI();

const { text } = await generateText({
  model: aigateway(openai.chat('gpt-5.2')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createAnthropic } from 'ai-gateway-provider/providers/anthropic';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const anthropic = createAnthropic();

const { text } = await generateText({
  model: aigateway(anthropic('claude-4-5-sonnet')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createGoogle } from 'ai-gateway-provider/providers/google';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const google = createGoogle();

const { text } = await generateText({
  model: aigateway(google('gemini-2.5-pro')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createXai } from 'ai-gateway-provider/providers/xai';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const xai = createXai();

const { text } = await generateText({
  model: aigateway(xai('grok-4')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('customer-support')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified();

const { text } = await generateText({
  model: aigateway(unified('@cf/meta/llama-3.3-70b-instruct-fp8-fast')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createOpenAI } from 'ai-gateway-provider/providers/openai';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const openai = createOpenAI({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(openai.chat('gpt-5.2')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createAnthropic } from 'ai-gateway-provider/providers/anthropic';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const anthropic = createAnthropic({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(anthropic('claude-4-5-sonnet')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createGoogle } from 'ai-gateway-provider/providers/google';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const google = createGoogle({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(google('gemini-2.5-pro')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createXai } from 'ai-gateway-provider/providers/xai';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const xai = createXai({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(xai('grok-4')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('customer-support')),
  prompt: 'What is Cloudflare?',
});

import { createAiGateway } from 'ai-gateway-provider';
import { createUnified } from 'ai-gateway-provider/providers/unified';
import { generateText } from "ai";

const aigateway = createAiGateway({
  accountId: "{CLOUDFLARE_ACCOUNT_ID}",
  gateway: '{GATEWAY_NAME}',
  apiKey: '{CF_AIG_TOKEN}',
});

const unified = createUnified({ apiKey: '{API_KEY}' });

const { text } = await generateText({
  model: aigateway(unified('@cf/meta/llama-3.3-70b-instruct-fp8-fast')),
  prompt: 'What is Cloudflare?',
});

サードパーティモデルで AI バインディングを使う

すでに workers-ai-provider ↗ パッケージを使っている場合、個別のプロバイダー SDK なしで、AI Gateway 経由でサードパーティモデルを呼び出せます。createWorkersAI に、ゲートウェイ ID を含む gateway オプションを渡します。

import { createWorkersAI } from "workers-ai-provider";
import { streamText } from "ai";

export default {
	async fetch(request, env) {
		const workersai = createWorkersAI({
			binding: env.AI,
			gateway: { id: "my-gateway" },
		});

		const result = streamText({
			model: workersai("openai/gpt-4o"),
			messages: [{ role: "user", content: "Write a short story" }],
		});

		return result.toTextStreamResponse();
	},
};

import { createWorkersAI } from "workers-ai-provider";
import { streamText } from "ai";

export default {
	async fetch(request, env) {
		const workersai = createWorkersAI({
			binding: env.AI,
			gateway: { id: "my-gateway" },
		});

		const result = streamText({
			model: workersai("openai/gpt-4o"),
			messages: [{ role: "user", content: "Write a short story" }],
		});

		return result.toTextStreamResponse();
	},
} satisfies ExportedHandler<Env>;

AI Gateway 経由で利用できる対応プロバイダーとモデルであれば、この方法が使えます。

フォールバックプロバイダー

リクエスト失敗時の信頼性を高めるため、モデルやプロバイダーのフォールバックを指定できます。model オプションにモデルの配列を渡します。

const { text } = await generateText({
	model: aigateway([openai.chat("gpt-5.1"), anthropic("claude-sonnet-4-5")]),
	prompt: "Write a vegetarian lasagna recipe for 4 people.",
});