ai 7.0.17 → 7.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/index.d.ts +38 -3
  3. package/dist/index.js +160 -77
  4. package/dist/index.js.map +1 -1
  5. package/dist/internal/index.js +43 -31
  6. package/dist/internal/index.js.map +1 -1
  7. package/docs/02-foundations/02-providers-and-models.mdx +57 -52
  8. package/docs/02-getting-started/00-choosing-a-provider.mdx +1 -16
  9. package/docs/02-getting-started/01-navigating-the-library.mdx +12 -12
  10. package/docs/02-getting-started/02-nextjs-app-router.mdx +2 -36
  11. package/docs/02-getting-started/03-nextjs-pages-router.mdx +2 -36
  12. package/docs/02-getting-started/04-svelte.mdx +2 -34
  13. package/docs/02-getting-started/05-nuxt.mdx +2 -36
  14. package/docs/02-getting-started/06-nodejs.mdx +1 -18
  15. package/docs/02-getting-started/07-expo.mdx +3 -62
  16. package/docs/02-getting-started/08-tanstack-start.mdx +2 -36
  17. package/docs/02-getting-started/09-coding-agents.mdx +2 -32
  18. package/docs/03-ai-sdk-core/16-mcp-tools.mdx +44 -0
  19. package/docs/03-ai-sdk-core/30-embeddings.mdx +18 -18
  20. package/docs/03-ai-sdk-core/38-video-generation.mdx +22 -3
  21. package/docs/03-ai-sdk-harnesses/02-harness-agent.mdx +1 -28
  22. package/docs/03-ai-sdk-harnesses/05-harness-adapters.mdx +7 -7
  23. package/docs/03-ai-sdk-harnesses/06-workflow-utilities.mdx +1 -16
  24. package/docs/03-ai-sdk-harnesses/08-terminal-ui.mdx +1 -28
  25. package/docs/04-ai-sdk-ui/01-overview.mdx +5 -5
  26. package/docs/04-ai-sdk-ui/08-object-generation.mdx +7 -10
  27. package/docs/07-reference/01-ai-sdk-core/13-generate-video.mdx +3 -2
  28. package/docs/07-reference/02-ai-sdk-ui/03-use-object.mdx +6 -9
  29. package/docs/07-reference/02-ai-sdk-ui/index.mdx +5 -5
  30. package/package.json +4 -4
  31. package/src/generate-text/collect-tool-approvals.ts +17 -4
  32. package/src/generate-text/execute-tool-call.ts +3 -2
  33. package/src/generate-text/execute-tools-from-stream.ts +2 -1
  34. package/src/generate-text/generate-text.ts +5 -4
  35. package/src/generate-text/index.ts +1 -0
  36. package/src/generate-text/invoke-tool-callbacks-from-stream.ts +6 -4
  37. package/src/generate-text/parse-tool-call.ts +5 -4
  38. package/src/generate-text/resolve-tool-approval.ts +9 -6
  39. package/src/generate-text/stream-language-model-call.ts +2 -1
  40. package/src/generate-text/stream-text.ts +3 -2
  41. package/src/generate-text/to-response-messages.ts +4 -3
  42. package/src/generate-text/tool-approval-signature.ts +4 -40
  43. package/src/generate-text/tool-fingerprint.ts +76 -0
  44. package/src/generate-text/validate-tool-approvals.ts +6 -1
  45. package/src/generate-video/generate-video.ts +96 -21
  46. package/src/ui/convert-to-model-messages.ts +3 -2
  47. package/src/ui/process-ui-message-stream.ts +3 -0
  48. package/src/ui/validate-ui-messages.ts +2 -1
  49. package/src/util/canonical-hash.ts +44 -0
  50. package/src/util/get-own.ts +18 -0
@@ -109,58 +109,63 @@ Additionally, any self-hosted provider that supports the OpenAI specification ca
109
109
  The AI providers support different language models with various capabilities.
110
110
  Here are the capabilities of popular models:
111
111
 
112
- | Provider | Model | Image Input | Object Generation | Tool Usage | Tool Streaming |
113
- | -------------------------------------------------- | ------------------------------------------- | ------------------- | ------------------- | ------------------- | ------------------- |
114
- | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-4` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
115
- | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-3` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
116
- | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-3-mini` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
117
- | [Vercel](/providers/ai-sdk-providers/vercel) | `v0-1.0-md` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
118
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.5` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
119
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4-pro` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
120
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
121
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4-mini` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
122
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4-nano` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
123
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.3-chat-latest` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
124
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.2-pro` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
125
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.2-chat-latest` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
126
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.2` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
127
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
128
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-mini` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
129
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-nano` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
130
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1-chat-latest` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
131
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1-codex-mini` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
132
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1-codex` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
133
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
134
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-codex` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
135
- | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-chat-latest` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
136
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-sonnet-5` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
137
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-fable-5` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
138
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-8` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
139
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-7` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
140
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-6` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
141
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-sonnet-4-6` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
142
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-5` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
143
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-1` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
144
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-0` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
145
- | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-sonnet-4-0` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
146
- | [Mistral](/providers/ai-sdk-providers/mistral) | `pixtral-large-latest` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
147
- | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-large-latest` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
148
- | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-latest` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
149
- | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-3` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
150
- | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-2505` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
151
- | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-3.5` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
152
- | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-small-latest` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
153
- | [Mistral](/providers/ai-sdk-providers/mistral) | `pixtral-12b-2409` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
154
- | [DeepSeek](/providers/ai-sdk-providers/deepseek) | `deepseek-chat` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
155
- | [DeepSeek](/providers/ai-sdk-providers/deepseek) | `deepseek-reasoner` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
156
- | [Cerebras](/providers/ai-sdk-providers/cerebras) | `llama3.1-8b` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
157
- | [Cerebras](/providers/ai-sdk-providers/cerebras) | `llama3.1-70b` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
158
- | [Cerebras](/providers/ai-sdk-providers/cerebras) | `llama3.3-70b` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
159
- | [Groq](/providers/ai-sdk-providers/groq) | `meta-llama/llama-4-scout-17b-16e-instruct` | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
160
- | [Groq](/providers/ai-sdk-providers/groq) | `llama-3.3-70b-versatile` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
161
- | [Groq](/providers/ai-sdk-providers/groq) | `llama-3.1-8b-instant` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
162
- | [Groq](/providers/ai-sdk-providers/groq) | `mixtral-8x7b-32768` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
163
- | [Groq](/providers/ai-sdk-providers/groq) | `gemma2-9b-it` | <Cross size={18} /> | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
112
+ | Provider | Model | Image Input | Object Generation | Tool Usage | Tool Streaming |
113
+ | -------------------------------------------------- | ------------------------------------------- | ----------- | ----------------- | ---------- | -------------- |
114
+ | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-4.5` | <Check /> | <Check /> | <Check /> | <Check /> |
115
+ | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-4` | <Cross /> | <Check /> | <Check /> | <Check /> |
116
+ | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-3` | <Cross /> | <Check /> | <Check /> | <Check /> |
117
+ | [xAI Grok](/providers/ai-sdk-providers/xai) | `grok-3-mini` | <Cross /> | <Check /> | <Check /> | <Check /> |
118
+ | [Vercel](/providers/ai-sdk-providers/vercel) | `v0-1.0-md` | <Check /> | <Check /> | <Check /> | <Check /> |
119
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.6` | <Check /> | <Check /> | <Check /> | <Check /> |
120
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.6-luna` | <Check /> | <Check /> | <Check /> | <Check /> |
121
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.6-sol` | <Check /> | <Check /> | <Check /> | <Check /> |
122
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.6-terra` | <Check /> | <Check /> | <Check /> | <Check /> |
123
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.5` | <Check /> | <Check /> | <Check /> | <Check /> |
124
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4-pro` | <Check /> | <Check /> | <Check /> | <Check /> |
125
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4` | <Check /> | <Check /> | <Check /> | <Check /> |
126
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4-mini` | <Check /> | <Check /> | <Check /> | <Check /> |
127
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.4-nano` | <Check /> | <Check /> | <Check /> | <Check /> |
128
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.3-chat-latest` | <Check /> | <Check /> | <Check /> | <Check /> |
129
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.2-pro` | <Check /> | <Check /> | <Check /> | <Check /> |
130
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.2-chat-latest` | <Check /> | <Check /> | <Check /> | <Check /> |
131
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.2` | <Check /> | <Check /> | <Check /> | <Check /> |
132
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5` | <Check /> | <Check /> | <Check /> | <Check /> |
133
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-mini` | <Check /> | <Check /> | <Check /> | <Check /> |
134
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-nano` | <Check /> | <Check /> | <Check /> | <Check /> |
135
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1-chat-latest` | <Check /> | <Check /> | <Check /> | <Check /> |
136
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1-codex-mini` | <Check /> | <Check /> | <Check /> | <Check /> |
137
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1-codex` | <Check /> | <Check /> | <Check /> | <Check /> |
138
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5.1` | <Check /> | <Check /> | <Check /> | <Check /> |
139
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-codex` | <Check /> | <Check /> | <Check /> | <Check /> |
140
+ | [OpenAI](/providers/ai-sdk-providers/openai) | `gpt-5-chat-latest` | <Check /> | <Check /> | <Check /> | <Check /> |
141
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-sonnet-5` | <Check /> | <Check /> | <Check /> | <Check /> |
142
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-fable-5` | <Check /> | <Check /> | <Check /> | <Check /> |
143
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-8` | <Check /> | <Check /> | <Check /> | <Check /> |
144
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-7` | <Check /> | <Check /> | <Check /> | <Check /> |
145
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-6` | <Check /> | <Check /> | <Check /> | <Check /> |
146
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-sonnet-4-6` | <Check /> | <Check /> | <Check /> | <Check /> |
147
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-5` | <Check /> | <Check /> | <Check /> | <Check /> |
148
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-1` | <Check /> | <Check /> | <Check /> | <Check /> |
149
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-opus-4-0` | <Check /> | <Check /> | <Check /> | <Check /> |
150
+ | [Anthropic](/providers/ai-sdk-providers/anthropic) | `claude-sonnet-4-0` | <Check /> | <Check /> | <Check /> | <Check /> |
151
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `pixtral-large-latest` | <Check /> | <Check /> | <Check /> | <Check /> |
152
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-large-latest` | <Cross /> | <Check /> | <Check /> | <Check /> |
153
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-latest` | <Cross /> | <Check /> | <Check /> | <Check /> |
154
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-3` | <Cross /> | <Check /> | <Check /> | <Check /> |
155
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-2505` | <Cross /> | <Check /> | <Check /> | <Check /> |
156
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-medium-3.5` | <Cross /> | <Check /> | <Check /> | <Check /> |
157
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `mistral-small-latest` | <Cross /> | <Check /> | <Check /> | <Check /> |
158
+ | [Mistral](/providers/ai-sdk-providers/mistral) | `pixtral-12b-2409` | <Check /> | <Check /> | <Check /> | <Check /> |
159
+ | [DeepSeek](/providers/ai-sdk-providers/deepseek) | `deepseek-chat` | <Cross /> | <Check /> | <Check /> | <Check /> |
160
+ | [DeepSeek](/providers/ai-sdk-providers/deepseek) | `deepseek-reasoner` | <Cross /> | <Check /> | <Check /> | <Check /> |
161
+ | [Cerebras](/providers/ai-sdk-providers/cerebras) | `llama3.1-8b` | <Cross /> | <Check /> | <Check /> | <Check /> |
162
+ | [Cerebras](/providers/ai-sdk-providers/cerebras) | `llama3.1-70b` | <Cross /> | <Check /> | <Check /> | <Check /> |
163
+ | [Cerebras](/providers/ai-sdk-providers/cerebras) | `llama3.3-70b` | <Cross /> | <Check /> | <Check /> | <Check /> |
164
+ | [Groq](/providers/ai-sdk-providers/groq) | `meta-llama/llama-4-scout-17b-16e-instruct` | <Check /> | <Check /> | <Check /> | <Check /> |
165
+ | [Groq](/providers/ai-sdk-providers/groq) | `llama-3.3-70b-versatile` | <Cross /> | <Check /> | <Check /> | <Check /> |
166
+ | [Groq](/providers/ai-sdk-providers/groq) | `llama-3.1-8b-instant` | <Cross /> | <Check /> | <Check /> | <Check /> |
167
+ | [Groq](/providers/ai-sdk-providers/groq) | `mixtral-8x7b-32768` | <Cross /> | <Check /> | <Check /> | <Check /> |
168
+ | [Groq](/providers/ai-sdk-providers/groq) | `gemma2-9b-it` | <Cross /> | <Check /> | <Check /> | <Check /> |
164
169
 
165
170
  <Note>
166
171
  This table is not exhaustive. Additional models can be found in the provider
@@ -66,22 +66,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
66
66
 
67
67
  You can also use [first-party](/providers/ai-sdk-providers), [OpenAI-compatible](/providers/openai-compatible-providers), and [community](/providers/community-providers) provider packages directly. Install the package and create a provider instance. For example, to use Anthropic:
68
68
 
69
- <div className="my-4">
70
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
71
- <Tab>
72
- <Snippet text="pnpm add @ai-sdk/anthropic" dark />
73
- </Tab>
74
- <Tab>
75
- <Snippet text="npm install @ai-sdk/anthropic" dark />
76
- </Tab>
77
- <Tab>
78
- <Snippet text="yarn add @ai-sdk/anthropic" dark />
79
- </Tab>
80
- <Tab>
81
- <Snippet text="bun add @ai-sdk/anthropic" dark />
82
- </Tab>
83
- </Tabs>
84
- </div>
69
+ <InstallPackages packages="@ai-sdk/anthropic" />
85
70
 
86
71
  ```ts
87
72
  import { anthropic } from '@ai-sdk/anthropic';
@@ -31,11 +31,11 @@ The following table outlines AI SDK compatibility based on environment:
31
31
 
32
32
  | Environment | [AI SDK Core](/docs/ai-sdk-core/overview) | [AI SDK UI](/docs/ai-sdk-ui/overview) | [AI SDK RSC](/docs/ai-sdk-rsc/overview) |
33
33
  | --------------------- | ----------------------------------------- | ------------------------------------- | --------------------------------------- |
34
- | None / Node.js / Deno | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
35
- | Vue / Nuxt | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> |
36
- | Svelte / SvelteKit | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> |
37
- | Next.js Pages Router | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> |
38
- | Next.js App Router | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
34
+ | None / Node.js / Deno | <Check /> | <Cross /> | <Cross /> |
35
+ | Vue / Nuxt | <Check /> | <Check /> | <Cross /> |
36
+ | Svelte / SvelteKit | <Check /> | <Check /> | <Cross /> |
37
+ | Next.js Pages Router | <Check /> | <Check /> | <Cross /> |
38
+ | Next.js App Router | <Check /> | <Check /> | <Check /> |
39
39
 
40
40
  ## When to use AI SDK UI
41
41
 
@@ -50,13 +50,13 @@ AI SDK UI provides a set of framework-agnostic hooks for quickly building **prod
50
50
 
51
51
  AI SDK UI supports the following frameworks: [React](https://react.dev/), [Svelte](https://svelte.dev/), and [Vue.js](https://vuejs.org/). Here is a comparison of the supported functions across these frameworks:
52
52
 
53
- | Function | React | Svelte | Vue.js |
54
- | ---------------------------------------------------------- | ------------------- | ------------------- | ------------------- |
55
- | [useChat](/docs/reference/ai-sdk-ui/use-chat) | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
56
- | [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check size={18} /> | <Check size={18} /> | <Cross size={18} /> |
57
- | [useCompletion](/docs/reference/ai-sdk-ui/use-completion) | <Check size={18} /> | <Check size={18} /> | <Check size={18} /> |
58
- | [useObject](/docs/reference/ai-sdk-ui/use-object) | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
59
- | [MCP Apps](/docs/ai-sdk-core/mcp-apps) | <Check size={18} /> | <Cross size={18} /> | <Cross size={18} /> |
53
+ | Function | React | Svelte | Vue.js |
54
+ | ---------------------------------------------------------- | --------- | --------- | --------- |
55
+ | [useChat](/docs/reference/ai-sdk-ui/use-chat) | <Check /> | <Check /> | <Check /> |
56
+ | [useChat](/docs/reference/ai-sdk-ui/use-chat) tool calling | <Check /> | <Check /> | <Cross /> |
57
+ | [useCompletion](/docs/reference/ai-sdk-ui/use-completion) | <Check /> | <Check /> | <Check /> |
58
+ | [useObject](/docs/reference/ai-sdk-ui/use-object) | <Check /> | <Cross /> | <Cross /> |
59
+ | [MCP Apps](/docs/ai-sdk-core/mcp-apps) | <Check /> | <Cross /> | <Cross /> |
60
60
 
61
61
  <Note>
62
62
  [Contributions](https://github.com/vercel/ai/blob/main/CONTRIBUTING.md) are
@@ -49,24 +49,7 @@ Install `ai` and `@ai-sdk/react`, the AI package and AI SDK's React hooks. The A
49
49
  providers](/providers/ai-sdk-providers) for more information.
50
50
  </Note>
51
51
 
52
- <div className="my-4">
53
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
54
- <Tab>
55
- <Snippet text="pnpm add ai @ai-sdk/react zod" dark />
56
- </Tab>
57
- <Tab>
58
- <Snippet text="npm install ai @ai-sdk/react zod" dark />
59
- </Tab>
60
- <Tab>
61
- <Snippet text="yarn add ai @ai-sdk/react zod" dark />
62
- </Tab>
63
-
64
- <Tab>
65
- <Snippet text="bun add ai @ai-sdk/react zod" dark />
66
- </Tab>
67
-
68
- </Tabs>
69
- </div>
52
+ <InstallPackages packages="ai @ai-sdk/react zod" />
70
53
 
71
54
  ### Configure your AI Gateway API key
72
55
 
@@ -150,24 +133,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
150
133
 
151
134
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
152
135
 
153
- <div className="my-4">
154
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
155
- <Tab>
156
- <Snippet text="pnpm add @ai-sdk/openai" dark />
157
- </Tab>
158
- <Tab>
159
- <Snippet text="npm install @ai-sdk/openai" dark />
160
- </Tab>
161
- <Tab>
162
- <Snippet text="yarn add @ai-sdk/openai" dark />
163
- </Tab>
164
-
165
- <Tab>
166
- <Snippet text="bun add @ai-sdk/openai" dark />
167
- </Tab>
168
-
169
- </Tabs>
170
- </div>
136
+ <InstallPackages packages="@ai-sdk/openai" />
171
137
 
172
138
  ```ts
173
139
  import { openai } from '@ai-sdk/openai';
@@ -47,24 +47,7 @@ Install `ai` and `@ai-sdk/react`, the AI package and AI SDK's React hooks. The A
47
47
  providers](/providers/ai-sdk-providers) for more information.
48
48
  </Note>
49
49
 
50
- <div className="my-4">
51
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
52
- <Tab>
53
- <Snippet text="pnpm add ai @ai-sdk/react zod" dark />
54
- </Tab>
55
- <Tab>
56
- <Snippet text="npm install ai @ai-sdk/react zod" dark />
57
- </Tab>
58
- <Tab>
59
- <Snippet text="yarn add ai @ai-sdk/react zod" dark />
60
- </Tab>
61
-
62
- <Tab>
63
- <Snippet text="bun add ai @ai-sdk/react zod" dark />
64
- </Tab>
65
-
66
- </Tabs>
67
- </div>
50
+ <InstallPackages packages="ai @ai-sdk/react zod" />
68
51
 
69
52
  ### Configure your AI Gateway API key
70
53
 
@@ -154,24 +137,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
154
137
 
155
138
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
156
139
 
157
- <div className="my-4">
158
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
159
- <Tab>
160
- <Snippet text="pnpm add @ai-sdk/openai" dark />
161
- </Tab>
162
- <Tab>
163
- <Snippet text="npm install @ai-sdk/openai" dark />
164
- </Tab>
165
- <Tab>
166
- <Snippet text="yarn add @ai-sdk/openai" dark />
167
- </Tab>
168
-
169
- <Tab>
170
- <Snippet text="bun add @ai-sdk/openai" dark />
171
- </Tab>
172
-
173
- </Tabs>
174
- </div>
140
+ <InstallPackages packages="@ai-sdk/openai" />
175
141
 
176
142
  ```ts
177
143
  import { openai } from '@ai-sdk/openai';
@@ -40,22 +40,7 @@ Install `ai` and `@ai-sdk/svelte`, the AI package and AI SDK's Svelte bindings.
40
40
  provider or model by installing its package. Check out available [AI SDK
41
41
  providers](/providers/ai-sdk-providers) for more information.
42
42
  </Note>
43
- <div className="my-4">
44
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
45
- <Tab>
46
- <Snippet text="pnpm add -D ai @ai-sdk/svelte zod" dark />
47
- </Tab>
48
- <Tab>
49
- <Snippet text="npm install -D ai @ai-sdk/svelte zod" dark />
50
- </Tab>
51
- <Tab>
52
- <Snippet text="yarn add -D ai @ai-sdk/svelte zod" dark />
53
- </Tab>
54
- <Tab>
55
- <Snippet text="bun add -d ai @ai-sdk/svelte zod" dark />
56
- </Tab>
57
- </Tabs>
58
- </div>
43
+ <InstallPackages packages="ai @ai-sdk/svelte zod" dev />
59
44
 
60
45
  ### Configure your AI Gateway API key
61
46
 
@@ -151,24 +136,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
151
136
 
152
137
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
153
138
 
154
- <div className="my-4">
155
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
156
- <Tab>
157
- <Snippet text="pnpm add @ai-sdk/openai" dark />
158
- </Tab>
159
- <Tab>
160
- <Snippet text="npm install @ai-sdk/openai" dark />
161
- </Tab>
162
- <Tab>
163
- <Snippet text="yarn add @ai-sdk/openai" dark />
164
- </Tab>
165
-
166
- <Tab>
167
- <Snippet text="bun add @ai-sdk/openai" dark />
168
- </Tab>
169
-
170
- </Tabs>
171
- </div>
139
+ <InstallPackages packages="@ai-sdk/openai" />
172
140
 
173
141
  ```ts
174
142
  import { openai } from '@ai-sdk/openai';
@@ -41,24 +41,7 @@ Install `ai` and `@ai-sdk/vue`. The Vercel AI Gateway provider ships with the `a
41
41
  [building custom providers](/providers/community-providers/custom-providers)
42
42
  in the [providers](/providers) section.
43
43
  </Note>
44
- <div className="my-4">
45
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
46
- <Tab>
47
- <Snippet text="pnpm add ai @ai-sdk/vue zod" dark />
48
- </Tab>
49
- <Tab>
50
- <Snippet text="npm install ai @ai-sdk/vue zod" dark />
51
- </Tab>
52
- <Tab>
53
- <Snippet text="yarn add ai @ai-sdk/vue zod" dark />
54
- </Tab>
55
-
56
- <Tab>
57
- <Snippet text="bun add ai @ai-sdk/vue zod" dark />
58
- </Tab>
59
-
60
- </Tabs>
61
- </div>
44
+ <InstallPackages packages="ai @ai-sdk/vue zod" />
62
45
 
63
46
  ### Configure Vercel AI Gateway API key
64
47
 
@@ -161,24 +144,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
161
144
 
162
145
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
163
146
 
164
- <div className="my-4">
165
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
166
- <Tab>
167
- <Snippet text="pnpm add @ai-sdk/openai" dark />
168
- </Tab>
169
- <Tab>
170
- <Snippet text="npm install @ai-sdk/openai" dark />
171
- </Tab>
172
- <Tab>
173
- <Snippet text="yarn add @ai-sdk/openai" dark />
174
- </Tab>
175
-
176
- <Tab>
177
- <Snippet text="bun add @ai-sdk/openai" dark />
178
- </Tab>
179
-
180
- </Tabs>
181
- </div>
147
+ <InstallPackages packages="@ai-sdk/openai" />
182
148
 
183
149
  ```ts
184
150
  import { openai } from '@ai-sdk/openai';
@@ -157,24 +157,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
157
157
 
158
158
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
159
159
 
160
- <div className="my-4">
161
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
162
- <Tab>
163
- <Snippet text="pnpm add @ai-sdk/openai" dark />
164
- </Tab>
165
- <Tab>
166
- <Snippet text="npm install @ai-sdk/openai" dark />
167
- </Tab>
168
- <Tab>
169
- <Snippet text="yarn add @ai-sdk/openai" dark />
170
- </Tab>
171
-
172
- <Tab>
173
- <Snippet text="bun add @ai-sdk/openai" dark />
174
- </Tab>
175
-
176
- </Tabs>
177
- </div>
160
+ <InstallPackages packages="@ai-sdk/openai" />
178
161
 
179
162
  ```ts
180
163
  import { openai } from '@ai-sdk/openai';
@@ -41,22 +41,7 @@ Install `ai` and `@ai-sdk/react`, the AI package and AI SDK's React hooks. The A
41
41
  providers](/providers/ai-sdk-providers) for more information.
42
42
  </Note>
43
43
 
44
- <div className="my-4">
45
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
46
- <Tab>
47
- <Snippet text="pnpm add ai @ai-sdk/react zod" dark />
48
- </Tab>
49
- <Tab>
50
- <Snippet text="npm install ai @ai-sdk/react zod" dark />
51
- </Tab>
52
- <Tab>
53
- <Snippet text="yarn add ai @ai-sdk/react zod" dark />
54
- </Tab>
55
- <Tab>
56
- <Snippet text="bun add ai @ai-sdk/react zod" dark />
57
- </Tab>
58
- </Tabs>
59
- </div>
44
+ <InstallPackages packages="ai @ai-sdk/react zod" />
60
45
 
61
46
  ### Configure your AI Gateway API key
62
47
 
@@ -144,24 +129,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
144
129
 
145
130
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
146
131
 
147
- <div className="my-4">
148
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
149
- <Tab>
150
- <Snippet text="pnpm add @ai-sdk/openai" dark />
151
- </Tab>
152
- <Tab>
153
- <Snippet text="npm install @ai-sdk/openai" dark />
154
- </Tab>
155
- <Tab>
156
- <Snippet text="yarn add @ai-sdk/openai" dark />
157
- </Tab>
158
-
159
- <Tab>
160
- <Snippet text="bun add @ai-sdk/openai" dark />
161
- </Tab>
162
-
163
- </Tabs>
164
- </div>
132
+ <InstallPackages packages="@ai-sdk/openai" />
165
133
 
166
134
  ```ts
167
135
  import { openai } from '@ai-sdk/openai';
@@ -712,34 +680,7 @@ Several functions that are internally used by the AI SDK might not available in
712
680
 
713
681
  First, install the following packages:
714
682
 
715
- <div className="my-4">
716
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
717
- <Tab>
718
- <Snippet
719
- text="pnpm add @ungap/structured-clone @stardazed/streams-text-encoding"
720
- dark
721
- />
722
- </Tab>
723
- <Tab>
724
- <Snippet
725
- text="npm install @ungap/structured-clone @stardazed/streams-text-encoding"
726
- dark
727
- />
728
- </Tab>
729
- <Tab>
730
- <Snippet
731
- text="yarn add @ungap/structured-clone @stardazed/streams-text-encoding"
732
- dark
733
- />
734
- </Tab>
735
- <Tab>
736
- <Snippet
737
- text="bun add @ungap/structured-clone @stardazed/streams-text-encoding"
738
- dark
739
- />
740
- </Tab>
741
- </Tabs>
742
- </div>
683
+ <InstallPackages packages="@ungap/structured-clone @stardazed/streams-text-encoding" />
743
684
 
744
685
  Then create a new file in the root of your project with the following polyfills:
745
686
 
@@ -41,24 +41,7 @@ Install `ai` and `@ai-sdk/react`, the AI package and AI SDK's React hooks. The A
41
41
  providers](/providers/ai-sdk-providers) for more information.
42
42
  </Note>
43
43
 
44
- <div className="my-4">
45
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
46
- <Tab>
47
- <Snippet text="pnpm add ai @ai-sdk/react zod" dark />
48
- </Tab>
49
- <Tab>
50
- <Snippet text="npm install ai @ai-sdk/react zod" dark />
51
- </Tab>
52
- <Tab>
53
- <Snippet text="yarn add ai @ai-sdk/react zod" dark />
54
- </Tab>
55
-
56
- <Tab>
57
- <Snippet text="bun add ai @ai-sdk/react zod" dark />
58
- </Tab>
59
-
60
- </Tabs>
61
- </div>
44
+ <InstallPackages packages="ai @ai-sdk/react zod" />
62
45
 
63
46
  ### Configure your AI Gateway API key
64
47
 
@@ -149,24 +132,7 @@ model: gateway('anthropic/claude-sonnet-4.5');
149
132
 
150
133
  To use a different provider, install its package and create a provider instance. For example, to use OpenAI directly:
151
134
 
152
- <div className="my-4">
153
- <Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
154
- <Tab>
155
- <Snippet text="pnpm add @ai-sdk/openai" dark />
156
- </Tab>
157
- <Tab>
158
- <Snippet text="npm install @ai-sdk/openai" dark />
159
- </Tab>
160
- <Tab>
161
- <Snippet text="yarn add @ai-sdk/openai" dark />
162
- </Tab>
163
-
164
- <Tab>
165
- <Snippet text="bun add @ai-sdk/openai" dark />
166
- </Tab>
167
-
168
- </Tabs>
169
- </div>
135
+ <InstallPackages packages="@ai-sdk/openai" />
170
136
 
171
137
  ```ts
172
138
  import { openai } from '@ai-sdk/openai';