메뉴
Set up Vercel AI Gateway (@ai-sdk/gateway) for multi-provider AI access. Use when adding the gateway, switching AI providers, handling reasoning/thinking models, or mocking AI in tests.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Scaffold, revise and manage custom ACF Gutenberg blocks for WordPress with Tailwind CSS. Use when the user wants to create a new block, revise/audit blocks, or set up a WordPress blocks project.
Scaffold one or more ACF Gutenberg blocks from GitHub issues, a markdown brief, or interactive prompts. Generates block.json, fields.json, render.php, and optional view.js.
Discuss a new block's purpose and requirements with the user, then create a GitHub issue with a structured breakdown ready for /wp-acf-blocks:add-block.
Deep AI audit of all blocks or specific blocks — runs structural checks first, then uses AI to review content quality, descriptions, grammar, admin render justification, wrapper usage, and empty-state messages.
Fast structural audit of all blocks or specific blocks — checks required files, wrapper attributes, fields.json timestamp, previewImage, viewScript. No AI, runs instantly via script.
Set up a new WordPress theme with the wp-acf-blocks block development workflow
| name | vercel-ai-gateway |
| description | Set up Vercel AI Gateway (@ai-sdk/gateway) for multi-provider AI access. Use when adding the gateway, switching AI providers, handling reasoning/thinking models, or mocking AI in tests. |
| when_to_use | When building an AI app that needs multi-provider support, reasoning middleware, or test isolation via mock provider. |
| allowed-tools | Bash Read Write Edit |
@ai-sdk/gateway is a proxy layer that routes requests to multiple AI providers
(OpenAI, Anthropic, Google, xAI, GROQ) under a single API key.
Your app → Vercel AI Gateway (cloud proxy) → OpenAI / Anthropic / Google / xAI
Vercel hosts the proxy — you connect provider accounts in their dashboard.
On Vercel deployments: OIDC auto-auth, no key needed.
Locally: set AI_GATEWAY_API_KEY.
pnpm add @ai-sdk/gateway ai
import { gateway } from "@ai-sdk/gateway";
gateway.languageModel("google/gemini-2.5-flash-lite")
gateway.languageModel("anthropic/claude-haiku-4.5")
gateway.languageModel("openai/gpt-4o")
Model IDs follow <provider>/<model-name> format.
Apply extractReasoningMiddleware to models that emit <thinking> tags:
import { gateway } from "@ai-sdk/gateway";
import { extractReasoningMiddleware, wrapLanguageModel } from "ai";
const THINKING_SUFFIX_REGEX = /-thinking$/;
export function getLanguageModel(modelId: string) {
const isReasoning = modelId.includes("reasoning") || modelId.endsWith("-thinking");
if (isReasoning) {
return wrapLanguageModel({
model: gateway.languageModel(modelId.replace(THINKING_SUFFIX_REGEX, "")),
middleware: extractReasoningMiddleware({ tagName: "thinking" }),
});
}
return gateway.languageModel(modelId);
}
Swap real models for mocks via an env flag (e.g. PLAYWRIGHT=True):
import { customProvider } from "ai";
export const myProvider = isTestEnvironment
? customProvider({
languageModels: {
"chat-model": mockChatModel,
"title-model": mockTitleModel,
},
})
: null;
export function getLanguageModel(modelId: string) {
if (isTestEnvironment && myProvider) return myProvider.languageModel(modelId);
return gateway.languageModel(modelId);
}
AI_GATEWAY_API_KEY= # not needed on Vercel (OIDC auto-auth)
lib/ai/providers.ts: https://github.com/phucbm/food-tour-sg/blob/main/lib/ai/providers.ts@ai-sdk/gateway package: https://www.npmjs.com/package/@ai-sdk/gateway