chat 4.30.0 → 4.32.0

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 (44) hide show
  1. package/README.md +33 -7
  2. package/dist/adapters/index.d.ts +622 -0
  3. package/dist/adapters/index.js +799 -0
  4. package/dist/ai/index.d.ts +3 -3
  5. package/dist/{chat-BPjXsoIl.d.ts → chat-Dm1vQU3i.d.ts} +3 -2
  6. package/dist/{chunk-V25FKIIL.js → chunk-LNXHNIFE.js} +2 -0
  7. package/dist/index.d.ts +7 -4
  8. package/dist/index.js +22 -10
  9. package/dist/{jsx-runtime-CnDs8rPr.d.ts → jsx-runtime-CzthIo1o.d.ts} +5 -0
  10. package/dist/jsx-runtime.d.ts +1 -1
  11. package/dist/jsx-runtime.js +1 -1
  12. package/docs/adapters.mdx +140 -127
  13. package/docs/ai/index.mdx +2 -2
  14. package/docs/api/cards.mdx +8 -1
  15. package/docs/api/message.mdx +5 -1
  16. package/docs/cards.mdx +9 -1
  17. package/docs/concurrency.mdx +1 -1
  18. package/docs/contributing/building.mdx +6 -0
  19. package/docs/conversation-history.mdx +1 -1
  20. package/docs/create-chat-sdk.mdx +143 -0
  21. package/docs/ephemeral-messages.mdx +2 -0
  22. package/docs/error-handling.mdx +1 -1
  23. package/docs/getting-started.mdx +4 -4
  24. package/docs/index.mdx +1 -1
  25. package/docs/meta.json +4 -1
  26. package/docs/platform-adapters.mdx +148 -0
  27. package/docs/slash-commands.mdx +8 -1
  28. package/docs/streaming.mdx +7 -4
  29. package/docs/teams-primitives.mdx +255 -0
  30. package/docs/testing.mdx +1 -1
  31. package/docs/threads-messages-channels.mdx +2 -2
  32. package/docs/usage.mdx +3 -3
  33. package/package.json +24 -5
  34. package/resources/guides/ai-gateway-and-ai-sdk.md +224 -0
  35. package/resources/guides/build-a-slack-bot-with-vercel-connect.md +239 -0
  36. package/resources/guides/create-a-discord-support-bot-with-nuxt-and-redis.md +2 -2
  37. package/resources/guides/daily-digest-bot-with-chat-sdk-and-workflow-sdk.md +306 -0
  38. package/resources/guides/how-to-build-a-slack-bot-with-next-js-and-redis.md +1 -1
  39. package/resources/guides/liveblocks-chat-sdk-ai-sdk.md +0 -2
  40. package/resources/guides/ship-a-github-code-review-bot-with-hono-and-redis.md +1 -1
  41. package/resources/guides/slack-bot-vercel-blob.md +13 -13
  42. package/resources/guides/vercel-connect.md +210 -0
  43. package/resources/templates.json +5 -0
  44. /package/docs/{state.mdx → state-adapters.mdx} +0 -0
@@ -0,0 +1,255 @@
1
+ ---
2
+ title: Teams Low-Level APIs
3
+ description: Use Teams Activity parsing, Bot Connector calls, Graph reads, formatting, Adaptive Cards, and Task Module helpers without the full Chat runtime.
4
+ type: guide
5
+ prerequisites:
6
+ - /adapters/official/teams
7
+ related:
8
+ - /docs/handling-events
9
+ - /docs/cards
10
+ - /docs/modals
11
+ ---
12
+
13
+ The Teams adapter is the right default for most bots. It validates Bot Framework requests through the Microsoft Teams SDK, parses Activities, stores conversation context, renders Adaptive Cards, reads Graph history, and routes events through `Chat`.
14
+
15
+ Use the low-level Teams subpaths when your app already owns routing, state, sessions, or workflow execution and only needs Teams-specific primitives.
16
+
17
+ | Subpath | Use for |
18
+ |---------|---------|
19
+ | `@chat-adapter/teams/webhook` | Parse Bot Framework Activity JSON, classify common payloads, and extract continuation data |
20
+ | `@chat-adapter/teams/api` | Fetch-based Bot Connector calls for messages, updates, deletes, typing, and conversations |
21
+ | `@chat-adapter/teams/graph` | Fetch-based Microsoft Graph reads for chats, channels, channel messages, and replies |
22
+ | `@chat-adapter/teams/format` | Teams HTML, mention, Markdown-ish, and emoji string helpers |
23
+ | `@chat-adapter/teams/cards` | Runtime-free conversion from simple card objects and input requests to Adaptive Cards |
24
+ | `@chat-adapter/teams/modals` | Runtime-free Task Module Adaptive Card helpers and submit parsing |
25
+
26
+ <Callout type="warning">
27
+ The webhook subpath parses Activities only. It does not verify Microsoft Bot Framework JWTs. For production request validation, use `createTeamsAdapter` or the Microsoft Teams SDK request pipeline before handing the Activity to these helpers.
28
+ </Callout>
29
+
30
+ ## Webhooks
31
+
32
+ Teams sends Bot Framework Activity JSON. `readTeamsWebhook` reads the request body and classifies the Activity, but it intentionally does not perform JWT validation.
33
+
34
+ ```typescript title="app/api/teams/route.ts" lineNumbers
35
+ import { postTeamsMessage } from "@chat-adapter/teams/api";
36
+ import { readTeamsWebhook } from "@chat-adapter/teams/webhook";
37
+
38
+ export async function POST(request: Request) {
39
+ const payload = await readTeamsWebhook(request, {
40
+ botAppId: process.env.TEAMS_APP_ID,
41
+ });
42
+
43
+ if (payload.kind === "message") {
44
+ await postTeamsMessage({
45
+ conversationId: payload.continuation.conversationId,
46
+ credentials: {
47
+ appId: process.env.TEAMS_APP_ID!,
48
+ appPassword: process.env.TEAMS_APP_PASSWORD!,
49
+ tenantId: payload.continuation.tenantId,
50
+ },
51
+ markdownText: `received: ${payload.text}`,
52
+ serviceUrl: payload.continuation.serviceUrl,
53
+ });
54
+ }
55
+
56
+ return new Response(null, { status: 200 });
57
+ }
58
+ ```
59
+
60
+ `parseTeamsWebhookBody` returns typed payloads:
61
+
62
+ | Kind | Teams surface |
63
+ |------|---------------|
64
+ | `message` | Message activities |
65
+ | `message_reaction` | Reaction activities |
66
+ | `card_action` | Adaptive Card actions and `Action.Submit` message activities |
67
+ | `dialog_open` | Task Module `task/fetch` invokes |
68
+ | `dialog_submit` | Task Module `task/submit` invokes |
69
+ | `conversation_update` | Conversation membership and install context updates |
70
+ | `installation_update` | App installation updates |
71
+ | `unsupported` | Valid Activities not normalized by this helper yet |
72
+
73
+ Message-like payloads include `continuation`, which contains provider-native reply context:
74
+
75
+ ```typescript
76
+ type TeamsContinuation = {
77
+ activityId?: string;
78
+ channelId?: string;
79
+ conversationId: string;
80
+ replyToId?: string;
81
+ serviceUrl: string;
82
+ teamId?: string;
83
+ tenantId?: string;
84
+ };
85
+ ```
86
+
87
+ This is not a Chat SDK `Thread`. It is the durable Teams data you need to reply later with `@chat-adapter/teams/api`.
88
+
89
+ ## Bot Connector API
90
+
91
+ The API subpath calls the Bot Framework Connector REST API with `fetch`. It does not import `@microsoft/teams.apps`.
92
+
93
+ ```typescript title="teams.ts" lineNumbers
94
+ import {
95
+ deleteTeamsMessage,
96
+ postTeamsMessage,
97
+ sendTeamsTyping,
98
+ updateTeamsMessage,
99
+ } from "@chat-adapter/teams/api";
100
+
101
+ const credentials = {
102
+ appId: process.env.TEAMS_APP_ID!,
103
+ appPassword: process.env.TEAMS_APP_PASSWORD!,
104
+ tenantId: process.env.TEAMS_APP_TENANT_ID!,
105
+ };
106
+
107
+ const posted = await postTeamsMessage({
108
+ conversationId: "19:abc@thread.tacv2",
109
+ credentials,
110
+ markdownText: "**hello**",
111
+ serviceUrl: "https://smba.trafficmanager.net/teams/",
112
+ });
113
+
114
+ await updateTeamsMessage({
115
+ conversationId: "19:abc@thread.tacv2",
116
+ credentials,
117
+ messageId: posted.id,
118
+ serviceUrl: "https://smba.trafficmanager.net/teams/",
119
+ text: "updated",
120
+ });
121
+
122
+ await sendTeamsTyping({
123
+ conversationId: "19:abc@thread.tacv2",
124
+ credentials,
125
+ serviceUrl: "https://smba.trafficmanager.net/teams/",
126
+ });
127
+
128
+ await deleteTeamsMessage({
129
+ conversationId: "19:abc@thread.tacv2",
130
+ credentials,
131
+ messageId: posted.id,
132
+ serviceUrl: "https://smba.trafficmanager.net/teams/",
133
+ });
134
+ ```
135
+
136
+ Use `accessToken` in `credentials` when your runtime already owns Microsoft token acquisition. A direct `accessToken` must be scoped for the API you call it against — the Bot Connector subpath (`/api`) needs a `https://api.botframework.com/.default` token, while the Graph subpath (`/graph`) needs a `https://graph.microsoft.com/.default` token. Passing the same token to both will fail against one of them. When you supply `appId`/`appPassword` instead, each subpath requests the correct scope for you.
137
+
138
+ ## Graph
139
+
140
+ The Graph subpath reads Teams history with explicit Graph IDs. Unlike `TeamsAdapter`, it does not use the adapter state cache to infer `teamId`, `channelId`, or `chatId`.
141
+
142
+ ```typescript
143
+ import { listTeamsChannelMessages } from "@chat-adapter/teams/graph";
144
+
145
+ const messages = await listTeamsChannelMessages({
146
+ channelId: "19:channel@thread.tacv2",
147
+ credentials: {
148
+ appId: process.env.TEAMS_APP_ID!,
149
+ appPassword: process.env.TEAMS_APP_PASSWORD!,
150
+ tenantId: process.env.TEAMS_APP_TENANT_ID!,
151
+ },
152
+ limit: 25,
153
+ teamId: "19:team@thread.tacv2",
154
+ });
155
+
156
+ const latestText = messages.items[0]?.text;
157
+ ```
158
+
159
+ Graph reads require the same Microsoft Graph permissions as the full adapter. Channel and group-chat reads can use RSC permissions; DM reads require Azure AD application permissions such as `Chat.Read.All`.
160
+
161
+ ## Formatting
162
+
163
+ Teams renders message text as HTML. The format subpath provides small helpers for custom runtimes:
164
+
165
+ ```typescript
166
+ import {
167
+ formatTeamsMention,
168
+ markdownToTeamsHtml,
169
+ teamsHtmlToMarkdown,
170
+ } from "@chat-adapter/teams/format";
171
+
172
+ const html = markdownToTeamsHtml(
173
+ `${formatTeamsMention("Ada")} approved **deploy v2.4.1**`
174
+ );
175
+ const markdown = teamsHtmlToMarkdown("<p>Hello <strong>world</strong></p>");
176
+ ```
177
+
178
+ Use the full `TeamsFormatConverter` from `@chat-adapter/teams` when you need mdast conversion inside Chat SDK.
179
+
180
+ ## Cards
181
+
182
+ The cards subpath converts simple card objects into Adaptive Card JSON without importing the full `chat` JSX runtime.
183
+
184
+ ```typescript title="cards.ts" lineNumbers
185
+ import {
186
+ cardToAdaptiveCard,
187
+ cardToTeamsFallbackText,
188
+ } from "@chat-adapter/teams/cards";
189
+ import { postTeamsMessage } from "@chat-adapter/teams/api";
190
+
191
+ const card = {
192
+ children: [
193
+ { content: "deploy v2.4.1?", type: "text" },
194
+ {
195
+ children: [
196
+ { id: "approve", label: "Approve", style: "primary", type: "button" },
197
+ { id: "deny", label: "Deny", style: "danger", type: "button" },
198
+ ],
199
+ type: "actions",
200
+ },
201
+ ],
202
+ title: "Deployment",
203
+ type: "card",
204
+ } as const;
205
+
206
+ await postTeamsMessage({
207
+ adaptiveCard: cardToAdaptiveCard(card),
208
+ conversationId: payload.continuation.conversationId,
209
+ credentials,
210
+ serviceUrl: payload.continuation.serviceUrl,
211
+ text: cardToTeamsFallbackText(card),
212
+ });
213
+ ```
214
+
215
+ Use the full Chat SDK card JSX when you want cross-platform rendering. Use `@chat-adapter/teams/cards` when you are building a Teams-only runtime and want Adaptive Card output directly.
216
+
217
+ ## Modals
218
+
219
+ Teams Task Modules are invoke-based dialogs backed by Adaptive Cards. The modals subpath builds those cards and parses submit data.
220
+
221
+ ```typescript
222
+ import {
223
+ modalToAdaptiveCard,
224
+ parseTeamsDialogSubmitValues,
225
+ toTeamsTaskModuleResponse,
226
+ } from "@chat-adapter/teams/modals";
227
+
228
+ const modal = {
229
+ callbackId: "deploy",
230
+ children: [
231
+ { content: "Why deploy now?", type: "text" },
232
+ { id: "reason", label: "Reason", type: "text_input" },
233
+ ],
234
+ title: "Deploy",
235
+ type: "modal",
236
+ } as const;
237
+
238
+ const card = modalToAdaptiveCard(modal, { contextId: "deploy-1" });
239
+ const values = parseTeamsDialogSubmitValues(payload.value);
240
+
241
+ return Response.json(
242
+ toTeamsTaskModuleResponse({ action: "update", modal }, { contextId: "deploy-1" })
243
+ );
244
+ ```
245
+
246
+ ## Import Boundaries
247
+
248
+ The low-level Teams subpaths are designed to avoid the full runtime import graph:
249
+
250
+ - no `chat` import
251
+ - no `@chat-adapter/shared` import
252
+ - no `@microsoft/teams.apps` import
253
+ - no full adapter import
254
+
255
+ The package still installs the full Teams adapter dependencies. The subpaths keep your source and bundle imports clean, but they are not a package-size split.
package/docs/testing.mdx CHANGED
@@ -5,7 +5,7 @@ type: guide
5
5
  prerequisites:
6
6
  - /docs/getting-started
7
7
  related:
8
- - /docs/state
8
+ - /docs/state-adapters
9
9
  - /docs/handling-events
10
10
  - /docs/contributing/testing
11
11
  ---
@@ -83,7 +83,7 @@ await thread.startTyping();
83
83
  ```
84
84
 
85
85
  <Callout type="info">
86
- Not all platforms support typing indicators. The call is a no-op on unsupported platforms. See the [adapter feature matrix](/docs/adapters) for details.
86
+ Not all platforms support typing indicators. The call is a no-op on unsupported platforms. See the [adapter feature matrix](/docs/platform-adapters) for details.
87
87
  </Callout>
88
88
 
89
89
  ### Message history
@@ -149,7 +149,7 @@ await scheduled.cancel();
149
149
  ```
150
150
 
151
151
  <Callout type="info">
152
- Scheduled messages are currently only supported by the Slack adapter. Other adapters throw `NotImplementedError`. See the [feature matrix](/docs/adapters) for details.
152
+ Scheduled messages are currently only supported by the Slack adapter. Other adapters throw `NotImplementedError`. See the [feature matrix](/docs/platform-adapters) for details.
153
153
  </Callout>
154
154
 
155
155
  ## Messages
package/docs/usage.mdx CHANGED
@@ -7,7 +7,7 @@ prerequisites:
7
7
  related:
8
8
  - /docs/handling-events
9
9
  - /docs/adapters
10
- - /docs/state
10
+ - /docs/state-adapters
11
11
  ---
12
12
 
13
13
  The `Chat` class is the main entry point for your bot. It coordinates adapters, routes events to your handlers, and manages thread state.
@@ -34,10 +34,10 @@ bot.onNewMention(async (thread) => {
34
34
  ```
35
35
 
36
36
  <Callout type="info">
37
- This example uses Redis. Chat SDK also supports [PostgreSQL](/adapters/official/postgres) and [ioredis](/adapters/official/ioredis) as production state adapters. See [State Adapters](/docs/state) for all options.
37
+ This example uses Redis. Chat SDK also supports [PostgreSQL](/adapters/official/postgres) and [ioredis](/adapters/official/ioredis) as production state adapters. See [State Adapters](/docs/state-adapters) for all options.
38
38
  </Callout>
39
39
 
40
- Each adapter factory auto-detects credentials from environment variables (`SLACK_BOT_TOKEN`, `SLACK_SIGNING_SECRET`, `REDIS_URL`, etc.), so you can get started with zero config. Pass explicit values to override.
40
+ Each adapter factory auto-detects credentials from environment variables (`SLACK_BOT_TOKEN`, `SLACK_SIGNING_SECRET`, `REDIS_URL`, etc.), so you can get started with zero config. Pass explicit values to override. For setup UIs and build scripts, the [`chat/adapters` catalog](/docs/adapters#adapter-catalog-chatadapters) lists official and vendor-official adapter env specs without importing adapter packages.
41
41
 
42
42
  ## Multiple adapters
43
43
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "chat",
3
- "version": "4.30.0",
4
- "description": "Unified chat abstraction for Slack, Teams, Google Chat, and Discord",
3
+ "version": "4.32.0",
4
+ "description": "Chat SDK universal TypeScript toolkit for building multi-platform chat bots and AI agents on Slack, Teams, Google Chat, Discord, WhatsApp, and more",
5
5
  "type": "module",
6
6
  "engines": {
7
7
  "node": ">=20"
@@ -18,6 +18,10 @@
18
18
  "types": "./dist/ai/index.d.ts",
19
19
  "import": "./dist/ai/index.js"
20
20
  },
21
+ "./adapters": {
22
+ "types": "./dist/adapters/index.d.ts",
23
+ "import": "./dist/adapters/index.js"
24
+ },
21
25
  "./jsx-runtime": {
22
26
  "types": "./dist/jsx-runtime.d.ts",
23
27
  "import": "./dist/jsx-runtime.js"
@@ -65,9 +69,9 @@
65
69
  "repository": {
66
70
  "type": "git",
67
71
  "url": "git+https://github.com/vercel/chat.git",
68
- "directory": "packages/chat-sdk"
72
+ "directory": "packages/chat"
69
73
  },
70
- "homepage": "https://github.com/vercel/chat#readme",
74
+ "homepage": "https://chat-sdk.dev/docs",
71
75
  "bugs": {
72
76
  "url": "https://github.com/vercel/chat/issues"
73
77
  },
@@ -76,11 +80,26 @@
76
80
  },
77
81
  "keywords": [
78
82
  "chat",
83
+ "chat-sdk",
84
+ "chatbot",
85
+ "chat-bot",
86
+ "bot",
87
+ "bot-framework",
88
+ "messaging",
89
+ "multi-platform",
79
90
  "slack",
80
91
  "teams",
92
+ "microsoft-teams",
81
93
  "discord",
82
94
  "google-chat",
83
- "bot"
95
+ "telegram",
96
+ "whatsapp",
97
+ "github",
98
+ "webhook",
99
+ "ai-agent",
100
+ "ai-sdk",
101
+ "typescript",
102
+ "vercel"
84
103
  ],
85
104
  "license": "MIT",
86
105
  "scripts": {
@@ -0,0 +1,224 @@
1
+ # Build AI agents with AI Gateway and AI SDK
2
+
3
+ **Author:** Ben Sabic
4
+
5
+ ---
6
+
7
+ An AI agent is a model that runs in a loop, using tools to gather information or take action until it completes a task. The AI SDK gives you the TypeScript primitives to build that loop, and AI Gateway gives it one endpoint and one set of credentials for hundreds of models, so you can switch providers by changing a single string instead of managing separate accounts, keys, and rate limits.
8
+
9
+ This guide takes you from your first model request to a working agent, then makes that agent reliable with model fallbacks, reachable in chat platforms with Chat SDK, and durable with the Workflow SDK.
10
+
11
+ ## Overview
12
+
13
+ In this guide, you'll learn how to:
14
+
15
+ * Set up a [Next.js](https://nextjs.org/) project and authenticate to AI Gateway with OIDC tokens
16
+
17
+ * Generate text, stream responses, and produce structured outputs
18
+
19
+ * Give your agent tools so they can act, not just respond
20
+
21
+ * Keep your agent available with model fallbacks
22
+
23
+ * Run AI-generated code safely in isolated [Vercel Sandbox](https://vercel.com/sandbox) microVMs
24
+
25
+ * Bring your agent to Slack, Teams, and other chat platforms with [Chat SDK](https://chat-sdk.dev/)
26
+
27
+ * Give your agent secure, short-lived access to third-party APIs with [Vercel Connect](https://vercel.com/connect)
28
+
29
+ * Make your agent durable and resumable with the [Workflow SDK](https://workflow-sdk.dev)
30
+
31
+
32
+ ## Prerequisites
33
+
34
+ Before you begin, make sure you have:
35
+
36
+ * A [Vercel account](https://vercel.com/signup)
37
+
38
+ * Node.js 20 or later
39
+
40
+ * [Vercel CLI](https://vercel.com/docs/cli) installed (`npm i -g vercel`)
41
+
42
+
43
+ ## How it works
44
+
45
+ AI Gateway is a single endpoint that sits in front of every supported provider. You send it a model string in the form `creator/model-name`, and the Gateway resolves the provider, authenticates, routes the request, and tracks usage. Because the AI SDK communicates with this endpoint natively, your application code remains the same whether you call Claude Opus 4.8, GPT-5.5, or Gemini 3.1 Pro. Tokens cost the same as they would from the provider directly, with no markup.
46
+
47
+ The AI SDK provides the function-level API you'll build the agent from (`generateText`, `streamText`, `generateObject`, and the tool loop), and AI Gateway provides the infrastructure underneath: authentication, usage tracking, failover, and billing. The two are built with high cohesion but loose coupling, so you can adopt the SDK on its own and add Gateway features via provider options when needed.
48
+
49
+ ## Steps
50
+
51
+ ### 1\. Create a Next.js app
52
+
53
+ Use `create-next-app` to bootstrap a new project:
54
+
55
+ `pnpm create next-app@latest ai-gateway-demo --yes cd ai-gateway-demo`
56
+
57
+ The `--yes` flag uses the recommended defaults: TypeScript, Tailwind CSS, ESLint, App Router, and Turbopack, with the `@/*` import alias. Omit the flag if you want to customize these options interactively.
58
+
59
+ ### 2\. Install the AI SDK
60
+
61
+ Add the `ai` package to your project:
62
+
63
+ `pnpm add ai`
64
+
65
+ AI Gateway works with both AI SDK v5 and v6. Check your installed version with `pnpm list ai`.
66
+
67
+ ### 3\. Authenticate with OIDC
68
+
69
+ AI Gateway authenticates requests using [Vercel OIDC tokens](https://vercel.com/docs/oidc), which Vercel generates and links to your project automatically. You don't need to create or store an API key.
70
+
71
+ First, link your local project to a Vercel project:
72
+
73
+ `vercel link`
74
+
75
+ Then pull the environment variables, which include the OIDC token:
76
+
77
+ `vercel env pull`
78
+
79
+ This writes the token to your local environment file. OIDC tokens are valid for 12 hours, so during local development, you'll need to run `vercel env pull` again to refresh the token when it expires.
80
+
81
+ When you deploy to Vercel, OIDC tokens are provisioned automatically, so no further setup is required in production.
82
+
83
+ ### 4\. Generate text
84
+
85
+ Start with the simplest request: generate a single block of text. Create an API route at `app/api/chat/route.ts`. Pass a plain string model ID to `generateText` and the AI Gateway resolves the provider and routes the request. With OIDC authentication, you don't reference a key anywhere in your code:
86
+
87
+ `import { generateText } from 'ai'; export async function GET() { const { text } = await generateText({ model: 'anthropic/claude-opus-4.8', prompt: 'Explain quantum computing in one paragraph.', }); return Response.json({ text }); }`
88
+
89
+ Start the dev server and visit the route to see the response:
90
+
91
+ `pnpm dev`
92
+
93
+ ### 5\. Stream responses
94
+
95
+ For real-time output, use `streamText` and return a streamed response. This is the pattern you'll use for chat interfaces and any response long enough that waiting for the full result would hurt the experience:
96
+
97
+ `import { streamText } from 'ai'; export async function POST(request: Request) { const { prompt } = await request.json(); const result = streamText({ model: 'openai/gpt-5.5', prompt, }); return result.toUIMessageStreamResponse(); }`
98
+
99
+ To switch models, change the model string. No other code changes are required.
100
+
101
+ ### 6\. Generate structured outputs
102
+
103
+ Use `generateObject` with a [Zod](https://zod.dev/) schema to get type-safe structured data instead of free text:
104
+
105
+ `import { generateObject } from 'ai'; import { z } from 'zod'; export async function GET() { const { object } = await generateObject({ model: 'anthropic/claude-opus-4.8', schema: z.object({ name: z.string(), age: z.number(), city: z.string(), }), prompt: 'Extract: John is 30 years old and lives in NYC.', }); return Response.json(object); // { name: 'John', age: 30, city: 'NYC' } }`
106
+
107
+ ### 7\. Give your agent tools
108
+
109
+ So far, the model has produced text and data, but it hasn't done anything. Tools change that: you define functions the model can invoke to fetch data, call an API, or act on the outside world, and the AI SDK runs the model in a loop, calling tools and feeding results back until the task is done. A model plus tools in a loop is an agent, and the AI SDK handles that loop for you.
110
+
111
+ Define a tool with a description, an input schema, and an `execute` function:
112
+
113
+ `import { generateText, tool } from 'ai'; import { z } from 'zod'; export async function GET() { const { text } = await generateText({ model: 'anthropic/claude-opus-4.8', tools: { getWeather: tool({ description: 'Get the current weather for a location', parameters: z.object({ location: z.string().describe('City name, e.g. San Francisco'), }), execute: async ({ location }) => ({ location, temperature: 72, condition: 'sunny', }), }), }, prompt: "What's the weather in Tokyo?", }); return Response.json({ text }); }`
114
+
115
+ You now have a working agent. Everything that follows makes it more capable and more reliable: fallbacks keep it available, Sandbox lets it run code safely, Chat SDK puts it in front of users, and the Workflow SDK makes it durable.
116
+
117
+ ### 8\. Keep your agent available with fallbacks
118
+
119
+ An agent makes many model calls over the course of a task, so it has many chances to hit a provider outage or error. That makes failover matter more for agents, not less. Pass a `models` array in `providerOptions.gateway` to list backup models, which the Gateway tries in order when the primary model fails:
120
+
121
+ `import { streamText } from 'ai'; export async function POST(request: Request) { const { prompt } = await request.json(); const result = streamText({ model: 'openai/gpt-5.5', // Primary model prompt, providerOptions: { gateway: { models: ['anthropic/claude-opus-4.8', 'google/gemini-3.1-pro-preview'], // Fallbacks }, }, }); return result.toUIMessageStreamResponse(); }`
122
+
123
+ In this example, the Gateway first attempts the primary model. If that fails, it tries `anthropic/claude-opus-4.7`, then `google/gemini-3.1-pro-preview`. The response comes from the first model that succeeds, and failover happens automatically without changes to your application logic.
124
+
125
+ ## Let your agent run code safely
126
+
127
+ A capable agent often needs to do more than call predefined tools: it may generate code and run it, whether to compute a result, transform data, or test its own output. Executing model-generated code on your own infrastructure is risky because the code might consume excessive resources, read sensitive files, make unwanted network requests, or run destructive commands.
128
+
129
+ [Vercel Sandbox](https://vercel.com/docs/vercel-sandbox) provides the agent with an isolated environment to run the code. Each sandbox is an ephemeral Linux microVM with resource limits and automatic timeouts, so untrusted code runs without touching your production systems. It's a standalone SDK you can call from any environment, and the same OIDC token you pulled earlier authenticates both Sandbox and AI Gateway.
130
+
131
+ Add the Sandbox SDK to your project:
132
+
133
+ `pnpm add @vercel/sandbox ms`
134
+
135
+ The pattern has two parts: generate code with the model via the AI Gateway, then write it to a fresh sandbox and run it. The sandbox is created, used, and stopped within a single request:
136
+
137
+ ``import ms from 'ms'; import { generateText } from 'ai'; import { Sandbox } from '@vercel/sandbox'; const SYSTEM_PROMPT = `You are a code generator. Write JavaScript that runs in Node.js. Output only the code, with no explanations or markdown.`; async function generateCode(task: string): Promise<string> { const { text } = await generateText({ model: 'anthropic/claude-sonnet-4.6', system: SYSTEM_PROMPT, prompt: `Write JavaScript code to: ${task}`, }); return text .replace(/^\s*```(?:javascript|js)?\s*/i, '') .replace(/\s*```\s*$/i, '') .trim(); } async function executeCode(code: string) { const sandbox = await Sandbox.create({ resources: { vcpus: 2 }, timeout: ms('2m'), runtime: 'node22', }); try { await sandbox.writeFiles([ { path: '/vercel/sandbox/code.mjs', content: Buffer.from(code) }, ]); const result = await sandbox.runCommand({ cmd: 'node', args: ['code.mjs'] }); const stdout = await result.stdout(); const stderr = await result.stderr(); return { output: stdout || stderr || '(no output)', exitCode: result.exitCode }; } finally { await sandbox.stop(); } }``
138
+
139
+ This gives the agent two layers of safety: the system prompt steers the model away from dangerous operations, and the sandbox enforces isolation regardless of what the model produces. The sandbox captures both `stdout` and `stderr`, so the agent can read failures and retry without those failures affecting your host. For a complete walkthrough, see [How to execute AI-generated code safely with Vercel Sandbox](https://vercel.com/kb/guide/how-to-execute-ai-generated-code-safely).
140
+
141
+ ## Bring your agent to your users
142
+
143
+ The agent you've built runs over an HTTP route, but your users may already be in Slack, Microsoft Teams, Discord, or Google Chat. [Chat SDK](https://chat-sdk.dev/) is a TypeScript library for building chatbots that work across these platforms from a single codebase, and it integrates directly with AI SDK. That means the same agent you call through AI Gateway can answer inside a thread without rebuilding it for each platform.
144
+
145
+ Two helpers from the `chat/ai` subpath connect the two SDKs. Importing from `chat/ai` rather than the main `chat` entrypoint keeps the optional `ai` and `zod` peer dependencies out of bundles that don't use them.
146
+
147
+ ### Feed thread history to your agent
148
+
149
+ `toAiMessages` converts an array of Chat SDK `Message` objects into the `{ role, content }[]` format the AI SDK expects. The output is structurally compatible with the AI SDK's `ModelMessage[]`, so you can pass it straight into a model call. Fetch recent messages from the thread, convert them, and use them as the agent's prompt:
150
+
151
+ `import { toAiMessages } from 'chat/ai'; bot.onSubscribedMessage(async (thread, message) => { const result = await thread.adapter.fetchMessages(thread.id, { limit: 20 }); const history = await toAiMessages(result.messages); const response = await agent.stream({ prompt: history }); await thread.post(response.fullStream); });`
152
+
153
+ `toAiMessages` maps messages authored by the bot to the `assistant` role and all others to `user`, sorts them chronologically, and includes image and text attachments as multipart content. For multi-user threads, pass `includeNames: true` so the model can tell speakers apart.
154
+
155
+ ### Let your agent act on the platform
156
+
157
+ `createChatTools` provides the agent with a set of AI SDK tools for posting messages, adding reactions, and performing other platform actions. Pass it to your Chat instance alongside an AI SDK call:
158
+
159
+ `import { Chat } from 'chat'; import { createChatTools } from 'chat/ai'; import { createSlackAdapter } from '@chat-adapter/slack'; import { createMemoryState } from '@chat-adapter/state-memory'; import { generateText } from 'ai'; const chat = new Chat({ userName: 'mybot', adapters: { slack: createSlackAdapter() }, state: createMemoryState(), }); const result = await generateText({ model: 'anthropic/claude-opus-4.8', tools: createChatTools({ chat, preset: 'messenger' }), prompt: 'Post a friendly hello in slack:C0123ABC and react to it with a thumbs up.', });`
160
+
161
+ Each tool resolves the right adapter from the id prefix you give it (`slack:`, `discord:`, `gchat:`), so one agent can drive any platform your Chat instance is wired up to. Because the model string still routes through AI Gateway, you keep the provider failover and unified billing from the earlier steps while reaching users wherever they already work.
162
+
163
+ ## Give your agent secure access to third-party APIs
164
+
165
+ Once your agent acts on outside services, such as posting to Slack, opening GitHub pull requests, or querying a data warehouse, it needs credentials for those providers. Bundling long-lived API keys into your deployment is risky: the secret sits in your environment indefinitely, applies to every request, and is hard to scope or revoke.
166
+
167
+ [Vercel Connect](https://vercel.com/docs/connect) solves this by issuing short-lived provider tokens at runtime instead. You register a connector for a provider once, link it to your projects and environments, and your code requests a scoped token only when it needs one. The same OIDC token you've used throughout authenticates the request, so no provider secret lives in your deployment.
168
+
169
+ Add the Connect SDK to your project:
170
+
171
+ `pnpm add @vercel/connect`
172
+
173
+ Request a token with `getToken`, passing the connector, the subject the token acts as, and the scopes you need:
174
+
175
+ `import { getToken } from '@vercel/connect'; const token = await getToken('slack/acme-slack', { subject: { type: 'app' }, installationId: 'inst_workspace_xyz', scopes: ['chat:write'], });`
176
+
177
+ The subject controls whose identity the token represents: `{ type: 'app' }` acts as your service, while `{ type: 'user', id: '...' }` acts on behalf of a specific user who authorized access once. The SDK caches tokens in-process and refreshes them automatically, so an agent that makes many provider calls in a single run requests a single token rather than one per call. Connect currently supports Slack, GitHub, and OAuth connectors in Beta. To set up your first connector, see [Access external APIs from your agents with Vercel Connect](https://vercel.com/kb/guide/vercel-connect).
178
+
179
+ ## Build durable agents with the Workflow SDK
180
+
181
+ The agents you've built so far run in memory. If the process crashes, the function times out, or the user refreshes the page, the agent's progress is lost. That's fine for short, single-tool interactions, but it's costly for production agents that chain several tool calls, such as booking a flight or running a research task across multiple APIs.
182
+
183
+ `WorkflowAgent` from `@ai-sdk/workflow` runs the same agent loop as the standard in-memory agent, but inside a [Vercel Workflow](https://vercel.com/docs/workflows). Each tool call becomes a durable step, so progress persists across process boundaries, and failed steps are retried from the last checkpoint instead of restarting the whole loop. Tools marked `needsApproval` can suspend the agent for hours or days until a user responds, which makes human-in-the-loop flows possible without a custom state store or polling.
184
+
185
+ To get durability, the agent runs inside a function marked `'use workflow'`, and each tool's `execute` function is marked `'use step'`:
186
+
187
+ ``import { WorkflowAgent, type ModelCallStreamPart } from '@ai-sdk/workflow'; import { convertToModelMessages, tool, type UIMessage } from 'ai'; import { getWritable } from 'workflow'; import { z } from 'zod'; async function searchFlightsStep(input: { origin: string; destination: string; date: string; }) { 'use step'; const response = await fetch(`https://api.flights.example/search?...`); return response.json(); } export async function chat(messages: UIMessage[]) { 'use workflow'; const modelMessages = await convertToModelMessages(messages); const agent = new WorkflowAgent({ model: 'anthropic/claude-sonnet-4-6', instructions: 'You are a flight booking assistant.', tools: { searchFlights: tool({ description: 'Search for available flights', inputSchema: z.object({ origin: z.string(), destination: z.string(), date: z.string(), }), execute: searchFlightsStep, }), }, }); const result = await agent.stream({ messages: modelMessages, writable: getWritable<ModelCallStreamPart>(), }); return { messages: result.messages }; }``
188
+
189
+ The model string is the same `creator/model-name` form you've used throughout, so the request still routes through AI Gateway with its failover and unified billing. What changes is the runtime: tool calls now persist, retry, and appear as discrete steps in the workflow dashboard. To add human approval, set `needsApproval: true` on a tool definition, which suspends the durable workflow until the user responds.
190
+
191
+ Start with the standard in-memory agent, and reach for `WorkflowAgent` when tool calls outlive their request, approvals exceed function timeouts, or each call should be independently retryable and traced. For a full breakdown of what `WorkflowAgent` adds, how `needsApproval` works, and how to keep chat streams resumable across timeouts, see the [What is WorkflowAgent?](https://vercel.com/kb/guide/what-is-workflowagent) guide.
192
+
193
+ ## Best practices
194
+
195
+ * **Refresh your OIDC token during local development**: Tokens are valid for 12 hours. If requests start failing locally with an authentication error, run `vercel env pull` to get a fresh token.
196
+
197
+ * **Set fallbacks for production traffic**: A single model and provider is a single point of failure. Listing two or three fallback models in `providerOptions.gateway` keeps requests available when one provider has an outage.
198
+
199
+ * **Keep model IDs in configuration**: Because switching models is a single string change, storing model IDs in environment variables or a config file lets you switch providers without editing application code.
200
+
201
+ * **Confirm your AI SDK version**: All core features are available in both v5 and v6, but v6 adds capabilities such as video generation. Run `pnpm list ai` to check, and see the [AI SDK v6 migration guide](https://ai-sdk.dev/docs/migration-guides/migration-guide-6-0) before upgrading.
202
+
203
+
204
+ ## Resources and next steps
205
+
206
+ * Learn about [model routing and fallbacks](https://vercel.com/docs/ai-gateway/models-and-providers/provider-options) for finer control over provider preference
207
+
208
+ * Read more about [OIDC authentication](https://vercel.com/docs/ai-gateway/authentication-and-byok/authentication) and how tokens work on Vercel
209
+
210
+ * Explore the [AI SDK documentation](https://ai-sdk.dev/getting-started) for advanced patterns
211
+
212
+ * Run AI-generated code safely with [Vercel Sandbox](https://vercel.com/docs/vercel-sandbox) and the [code execution guide](https://vercel.com/kb/guide/how-to-execute-ai-generated-code-safely)
213
+
214
+ * Build a cross-platform chatbot with [Chat SDK](https://chat-sdk.dev/docs) and its [AI SDK integration](https://chat-sdk.dev/docs/ai/ai-sdk-tools)
215
+
216
+ * Request short-lived provider tokens at runtime with [Vercel Connect](https://vercel.com/docs/connect)
217
+
218
+ * Make your agents durable with [WorkflowAgent](https://vercel.com/kb/guide/what-is-workflowagent) and [Workflow SDK](https://workflow-sdk.dev/)
219
+
220
+ * Browse the [model library](https://vercel.com/ai-gateway/models) to see every supported provider and model
221
+
222
+ ---
223
+
224
+ [View full KB sitemap](/kb/sitemap.md)