ai-sdk-6-skills

## Links - AI SDK 6 Beta Docs: https://v6.ai-sdk.dev/docs/announcing-ai-sdk-6-beta - Groq Provider: https://v6.ai-sdk.dev/providers/ai-sdk-providers/groq - Vercel AI Gateway: https://v6.ai-sdk.dev/providers/ai-sdk-providers/ai-gateway - AI SDK GitHub: https://github.com/vercel/ai - Groq Console Models: https://console.groq.com/docs/models ## Installation ```sh pnpm add ai@beta @ai-sdk/openai@beta @ai-sdk/react@beta @ai-sdk/groq@beta ``` **Note**: Pin versions during beta as breaking changes may occur in patch releases. ## What's New in AI SDK 6? ### 1. **Agent Abstraction** (New) Unified interface for building agents with full control over execution flow, tool loops, and state management. ```typescript import { ToolLoopAgent } from 'ai'; import { tool } from 'ai'; import { z } from 'zod'; const weatherTool = tool({ description: 'Get weather for a location', inputSchema: z.object({ city: z.string() }), execute: async ({ city }) => ({ temperature: 72, condition: 'sunny' }), }); const agent = new ToolLoopAgent({ model: 'groq/llama-3.3-70b-versatile', // or any model instructions: 'You are a helpful weather assistant.', tools: { weather: weatherTool }, }); // Use the agent const result = await agent.generate({ prompt: 'What is the weather in San Francisco?', }); console.log(result.output); ``` ### 2. **Tool Execution Approval** (New) Request user confirmation before executing sensitive tools. ```typescript import { tool } from 'ai'; import { z } from 'zod'; const paymentTool = tool({ description: 'Process a payment', inputSchema: z.object({ amount: z.number(), recipient: z.string(), }), needsApproval: true, // Require approval execute: async ({ amount, recipient }) => { return { success: true, id: 'txn-123' }; }, }); ``` Client-side approval UI: ```typescript export function PaymentToolView({ invocation, addToolApprovalResponse }) { if (invocation.state === 'approval-requested') { return ( <div> <p>Process payment of ${invocation.input.amount} to {invocation.input.recipient}?</p> <button onClick={() => addToolApprovalResponse({ id: invocation.approval.id, approved: true, }) } > Approve </button> <button onClick={() => addToolApprovalResponse({ id: invocation.approval.id, approved: false, }) } > Deny </button> </div> ); } return null; } ``` ### 3. **Structured Output + Tool Calling** (Stable) Combine tool calling with structured output generation: ```typescript import { ToolLoopAgent, Output } from 'ai'; import { z } from 'zod'; const agent = new ToolLoopAgent({ model: 'groq/llama-3.3-70b-versatile', tools: { /* ... */ }, output: Output.object({ schema: z.object({ summary: z.string(), temperature: z.number(), recommendation: z.string(), }), }), }); const { output } = await agent.generate({ prompt: 'What is the weather in San Francisco and what should I wear?', }); console.log(output); // { summary: '...', temperature: 72, recommendation: '...' } ``` ### 4. **Reranking Support** (New) Improve search relevance by reordering documents: ```typescript import { rerank } from 'ai'; import { cohere } from '@ai-sdk/cohere'; const { ranking } = await rerank({ model: cohere.reranking('rerank-v3.5'), documents: [ 'sunny day at the beach', 'rainy afternoon in the city', 'snowy night in the mountains', ], query: 'talk about rain', topN: 2, }); console.log(ranking); // [ // { originalIndex: 1, score: 0.9, document: 'rainy afternoon...' }, // { originalIndex: 0, score: 0.3, document: 'sunny day...' } // ] ``` ## Migration from AI SDK 5 **Minimal breaking changes expected**. Most AI SDK 5 code will work with little modification. Key differences: - Agent abstraction replaces ad-hoc patterns; consider migrating to `ToolLoopAgent`. - Structured output now works with `generateText` / `streamText` (requires `stopWhen`). - `@ai-sdk/*` packages may have minor API adjustments during beta. ## Groq Provider (Open Weight Models) ### Setup ```sh pnpm add @ai-sdk/groq ``` Environment: ```env GROQ_API_KEY=your_groq_api_key ``` ### Open Weight Models Available Popular Groq models for AI SDK 6: - `llama-3.3-70b-versatile` (Llama 3.3, 70B, balanced) - `llama-3.1-8b-instant` (Llama 3.1, 8B, fast) - `mixtral-8x7b-32768` (Mixture of Experts) - `gemma2-9b-it` (Google Gemma 2) - `qwen/qwen3-32b` (Qwen 3) See [Groq console](https://console.groq.com/docs/models) for full list. ### Basic Llama Example ```typescript import { groq } from '@ai-sdk/groq'; import { generateText } from 'ai'; const { text } = await generateText({ model: groq('llama-3.3-70b-versatile'), prompt: 'Write a TypeScript function to compute Fibonacci.', }); console.log(text); ``` ### Structured Output with Llama (Groq) ```typescript import { groq } from '@ai-sdk/groq'; import { generateObject } from 'ai'; import { z } from 'zod'; const result = await generateObject({ model: groq('llama-3.3-70b-versatile'), schema: z.object({ recipe: z.object({ name: z.string(), ingredients: z.array(z.string()), instructions: z.array(z.string()), }), }), prompt: 'Generate a simple pasta recipe.', providerOptions: { groq: { structuredOutputs: true, // Enable for supported models }, }, }); console.log(JSON.stringify(result.object, null, 2)); ``` ### Tool Use with Llama (Groq) ```typescript import { groq } from '@ai-sdk/groq'; import { generateText, tool } from 'ai'; import { z } from 'zod'; const weatherTool = tool({ description: 'Get weather for a city', inputSchema: z.object({ city: z.string() }), execute: async ({ city }) => ({ temp: 72, condition: 'sunny' }), }); const { text } = await generateText({ model: groq('llama-3.3-70b-versatile'), prompt: 'What is the weather in NYC and LA?', tools: { weather: weatherTool }, }); console.log(text); ``` ### Reasoning Models (Groq) Groq offers reasoning models like `qwen/qwen3-32b` and `deepseek-r1-distill-llama-70b`: ```typescript import { groq } from '@ai-sdk/groq'; import { generateText } from 'ai'; const { text } = await generateText({ model: groq('qwen/qwen3-32b'), providerOptions: { groq: { reasoningFormat: 'parsed', // 'parsed', 'hidden', or 'raw' reasoningEffort: 'default', // low, medium, high }, }, prompt: 'How many "r"s are in the word "strawberry"?', }); console.log(text); ``` ### Image Input with Llama (Groq Multi-Modal) ```typescript import { groq } from '@ai-sdk/groq'; import { generateText } from 'ai'; const { text } = await generateText({ model: groq('meta-llama/llama-4-scout-17b-16e-instruct'), // Multi-modal model messages: [ { role: 'user', content: [ { type: 'text', text: 'What is in this image?' }, { type: 'image', image: 'https://example.com/image.jpg' }, ], }, ], }); console.log(text); ``` ## Vercel AI Gateway ### What It Is A unified interface to access models from 20+ providers (OpenAI, Anthropic, Google, Groq, xAI, Mistral, etc.) through a single API. Requires **Vercel account and credit card**. ### Setup ```env AI_GATEWAY_API_KEY=your_gateway_api_key ``` Get your key from Vercel Dashboard > AI Gateway. **⚠️ Note**: Credit card required for Gateway usage. You will be billed for model calls routed through the gateway. ### Authentication #### API Key Authentication Set via environment variable or directly in code: ```typescript import { createGateway } from 'ai'; const gateway = createGateway({ apiKey: process.env.AI_GATEWAY_API_KEY, }); ``` #### OIDC Authentication (Vercel Deployments) When deployed to Vercel, use OIDC tokens for automatic authentication (no API key needed): **Production/Preview**: Automatic OIDC handling, no setup required. **Local Development**: 1. Install & authenticate Vercel CLI: `vercel login` 2. Pull OIDC token: `vercel env pull` 3. Use `vercel dev` to start dev server (handles token refresh automatically) Note: OIDC tokens expire after 12 hours; use `vercel dev` for automatic refresh, or run `vercel env pull` again manually. ```bash # Start dev with automatic token management vercel dev ``` ### Basic Usage ```typescript import { generateText } from 'ai'; // Plain model string format: creator/model-name const { text } = await generateText({ model: 'openai/gpt-5', prompt: 'Explain quantum computing.', }); console.log(text); ``` ### Gateway Instance ```typescript import { createGateway } from 'ai'; const gateway = createGateway({ apiKey: process.env.AI_GATEWAY_API_KEY, }); const { text } = await generateText({ model: gateway('anthropic/claude-sonnet-4'), prompt: 'Write a haiku about AI.', }); console.log(text); ``` ### Model Discovery (Dynamic) ```typescript import { gateway } from 'ai'; const availableModels = await gateway.getAvailableModels(); availableModels.models.forEach((model) => { console.log(`${model.id}: ${model.name}`); if (model.pricing) { console.log(` Input: $${model.pricing.input}/token`); console.log(` Output: $${model.pricing.output}/token`); } }); // Use first model const { text } = await generateText({ model: availableModels.models[0].id, prompt: 'Hello world', }); ``` ### Check Credit Usage ```typescript import { gateway } from 'ai'; const credits = await gateway.getCredits(); console.log(`Balance: ${credits.balance} credits`); console.log(`Total used: ${credits.total_used} credits`); ``` ### Streaming with Gateway ```typescript import { streamText } from 'ai'; const { textStream } = await streamText({ model: 'openai/gpt-5', prompt: 'Explain serverless architecture.', });