chat 4.26.0 → 4.28.1

package/resources/guides/triage-form-submissions-with-chat-sdk.md

@@ -0,0 +1,178 @@
+# Triage form submissions with Chat SDK
+
+**Author:** Ben Sabic
+
+---
+
+Build a Slack bot that triages form submissions where your team already works. When someone submits a form on your website, the bot posts an interactive card to a Slack channel. A reviewer clicks a button to forward the submission via email, edit it before forwarding, or mark it as spam. The whole workflow happens inside Slack, with no separate dashboard or inbox to monitor.
+
+The bot is built with [Chat SDK](https://chat-sdk.dev/), the unified TypeScript SDK for building chatbots that work across Slack, Microsoft Teams, Discord, and other platforms from a single codebase. You write your logic once, and Chat SDK handles the platform-specific details, such as Block Kit on Slack or Adaptive Cards on Teams.
+
+Deploy the template now, or read on for a deeper look at how it all works.
+
+## Quick start with an AI coding agent
+
+If you're working with an AI coding agent like Claude Code or Cursor, you can clone the template and hand off implementation with this prompt:
+
+`I want to build a form triage Slack bot using Chat SDK. Clone the template repo at https://github.com/vercel-labs/chat-sdk-form-bot, install dependencies with pnpm, and walk me through setting up the environment variables in .env.local. I need a Slack app, Redis (Upstash), and Resend configured. After setup, help me deploy it to Vercel and test it with a curl POST to the /api/form endpoint. When searching for information, check for applicable skill(s) first and review local documentation.`
+
+### Vercel Plugin
+
+Turn your agent into a Vercel expert with this [plugin](https://vercel.com/docs/agent-resources/vercel-plugin); the [Chat SDK skill](https://skills.sh/vercel/chat/chat-sdk) is included.
+
+`npx plugins add vercel/vercel-plugin`
+
+## Setup and deployment
+
+### What you need before deploying
+
+You'll need accounts with three services:
+
+*   **Slack** for the bot itself. Create a new app at [api.slack.com/apps](https://api.slack.com/apps).
+    
+*   **Redis** for temporary submission storage. Any Redis provider works. [Upstash](https://vercel.com/marketplace/upstash) supports serverless deployments and has a free tier.
+    
+*   **Resend** to send forwarded submissions via email. Sign up at [resend.com](https://resend.com/) and verify a sending domain.
+    
+
+### Configure your Slack app
+
+1.  Create a new Slack app from a manifest at [api.slack.com/apps](https://api.slack.com/apps). Use the [slack-manifest.json](https://github.com/vercel-labs/chat-sdk-form-bot/blob/main/slack-manifest.json) file included in the template repo. Replace the two `https://example.com` URLs with your production domain (e.g. `https://your-app.vercel.app/api/webhooks/slack`).
+    
+2.  Install the app in your workspace and copy the **Bot User OAuth Token**.
+    
+3.  Copy the **Signing Secret** from the **Basic Information** page.
+    
+
+### Environment variables
+
+The template needs these environment variables:
+
+`# Slack SLACK_BOT_TOKEN=xoxb-... SLACK_SIGNING_SECRET=... SLACK_CHANNEL_ID=C... # Redis REDIS_URL=redis://... # Resend RESEND_API_KEY=re_... RESEND_FROM_ADDRESS=bot@yourdomain.com RESEND_FROM_NAME=Formbot # Optional, defaults to "Formbot" # Forwarding FORWARD_EMAIL=team@yourdomain.com # Where approved submissions are sent FORWARD_ENDPOINT= # Optional: webhook URL for downstream systems`
+
+`SLACK_CHANNEL_ID` is the channel where submission cards will appear. You can find it by right-clicking a channel in Slack and selecting "View channel details" (the ID is at the bottom of the modal).
+
+`FORWARD_ENDPOINT` is optional. If set, the bot will also POST the form data as JSON to that URL when a submission is forwarded. This is useful for piping approved submissions into a CRM, database, or another service.
+
+### Deploy to Vercel
+
+[Deploy the bot with one click](https://vercel.com/new/clone?repository-url=https://github.com/vercel-labs/chat-sdk-form-bot&env=SLACK_BOT_TOKEN,SLACK_SIGNING_SECRET,SLACK_CHANNEL_ID,REDIS_URL,RESEND_API_KEY,RESEND_FROM_ADDRESS,FORWARD_EMAIL), or clone the repo and deploy manually:
+
+`git clone https://github.com/vercel-labs/chat-sdk-form-bot.git cd chat-sdk-form-bot pnpm install vercel`
+
+After deploying, update your Slack app's interactivity request URL to point to your production domain: `https://<your-vercel-domain>/api/webhooks/slack`.
+
+### Test the form endpoint
+
+Send a test submission:
+
+`curl -X POST https://<your-domain>/api/form \ -H "Content-Type: application/json" \ -d '{"Name": "Jane Doe", "Email": "jane@example.com", "Message": "Hello!"}'`
+
+A card should appear in your configured Slack channel within a few seconds, and you should see a JSON response in your terminal:
+
+`{"status":"received","submissionId":"a1b2c3d4-..."}`
+
+### Local development
+
+For local development, the template includes a Node.js server entrypoint:
+
+`pnpm dev`
+
+This starts a local server at `http://localhost:3000`. To receive Slack webhooks locally, use [ngrok](https://ngrok.com/) to create a public tunnel:
+
+`ngrok http 3000`
+
+Then update your Slack app's request URL to the ngrok URL (e.g. `https://abc123.ngrok-free.dev/api/webhooks/slack`).
+
+## How the form triage bot works
+
+The bot has three moving parts, including an HTTP endpoint that receives form data, a Redis store that temporarily holds submissions, and a Chat SDK bot that manages Slack interactions.
+
+1.  An external service (your website, a form provider, a webhook) sends a `POST` request to `/api/form` with JSON data
+    
+2.  The bot generates a unique ID, stores the submission in Redis with a 7-day TTL, and posts an interactive card to a Slack channel
+    
+3.  A reviewer sees the card and takes one of three actions:
+    
+    *   **Forward Submission** sends a styled HTML email via [Resend](https://vercel.com/marketplace/resend) to a configured recipient, then updates the card to show who forwarded it
+        
+    *   **Edit & Forward** opens a modal where the reviewer can modify fields before forwarding
+        
+    *   **Mark as Spam** updates the card and deletes the submission from Redis
+        
+
+Once an action is taken, the card updates in place. The reviewer sees the result immediately in the same channel, without a confirmation page or context switch.
+
+## Code walkthrough
+
+The entire bot is about 200 lines across six files.
+
+### Receiving submissions
+
+The HTTP layer uses [Hono](https://vercel.com/docs/frameworks/backend/hono), a lightweight web framework. The form endpoint accepts any JSON body, assigns it a UUID, and hands it off to the bot:
+
+``import { Hono } from "hono"; import { cors } from "hono/cors"; import { bot, postFormCard } from "./bot.js"; const app = new Hono(); app.use("/api/form", cors()); app.post("/api/form", (c) => c.req.json().then(async (formData: Record<string, unknown>) => { const submissionId = crypto.randomUUID(); await Promise.resolve(postFormCard(formData, submissionId)); return c.json({ status: "received", submissionId }); }) ); app.post("/api/webhooks/:platform", (c) => { const platform = c.req.param("platform"); if (platform !== "slack") { return c.json({ error: `Unknown platform: ${platform}` }, 404); } return bot.webhooks.slack(c.req.raw); }); export default app;``
+
+You can submit directly from a browser-based form on any origin. The webhook route at `/api/webhooks/:platform` handles Slack's interaction payloads (button clicks and modal submissions). The `:platform` parameter is already set up for adding other platforms later.
+
+### Building the bot
+
+The bot itself is a Chat SDK instance with a Slack adapter and Redis-backed state:
+
+`import { Chat } from "chat"; import { createSlackAdapter } from "@chat-adapter/slack"; import { createRedisState } from "@chat-adapter/state-redis"; export const bot = new Chat({ adapters: { slack: createSlackAdapter(), }, state: createRedisState(), userName: "form-bot", });`
+
+That's the entire bot setup. Chat SDK handles Slack's signature verification, payload parsing, and response formatting. The `state` object is a Redis adapter that Chat SDK uses for its internal state management, and the same Redis connection is reused to store form submissions.
+
+### Interactive cards
+
+Cards are built using Chat SDK's component functions. These are platform-agnostic: on Slack, they render as Block Kit, on Teams, they'd render as Adaptive Cards. Here's the card that appears when a new submission arrives:
+
+`import { Actions, Button, Card, Fields, Field, Divider } from "chat"; export const newSubmissionCard = ( formData: Record<string, unknown>, submissionId: string ) => Card({ children: [ Fields( Object.entries(formData).map(([key, value]) => Field({ label: key, value: String(value) }) ) ), Divider(), Actions([ Button({ id: "forward", label: "Forward Submission", style: "primary", value: submissionId, }), Button({ id: "edit", label: "Edit & Forward", style: "primary", value: submissionId, }), ]), Actions([ Button({ id: "spam", label: "Mark as Spam", style: "danger", value: submissionId, }), ]), ], title: "New Form Submission", });`
+
+The form data is dynamic. Whatever keys and values are in the JSON body become fields on the card. A submission with `{"Name": "Jane", "Email": "jane@example.com"}` produces a card with two fields. A submission with ten fields produces a card with ten fields. No schema changes needed.
+
+### Handling actions
+
+When a reviewer clicks a button, Chat SDK routes the event to the right handler based on the action ID:
+
+`bot.onAction(["forward", "spam", "edit"], async (event) => { const submissionId = event.value; if (!submissionId || !event.thread) return; const formData = await getSubmission(submissionId); if (!formData) return; if (event.actionId === "edit") { await event.openModal(editSubmissionModal(formData, submissionId)); } else { const handler = event.actionId === "forward" ? handleForward : handleSpam; await handler(event, formData, submissionId, event.thread.id); } });`
+
+The forward handler sends the email, optionally POSTs to a webhook endpoint, updates the Slack card, and cleans up Redis, all in parallel:
+
+`const handleForward = async (event, formData, submissionId, threadId) => { const slack = bot.getAdapter("slack"); await Promise.all([ forwardToEmail(formData), forwardToEndpoint(formData), slack.editMessage( threadId, event.messageId, forwardedCard(formData, event.user.fullName) ), deleteSubmission(submissionId), ]); };`
+
+After forwarding, the card is replaced with a read-only version showing who forwarded it and where. The submission is deleted from Redis since it's no longer needed.
+
+## How to add Teams, Discord, or other platforms
+
+Chat SDK supports multiple platforms from a single codebase. The cards, fields, and buttons you've already defined render natively on each platform, including Block Kit on Slack, Adaptive Cards on Teams, and Google Chat Cards.
+
+To add Microsoft Teams or another platform, register an additional adapter:
+
+`import { createSlackAdapter } from "@chat-adapter/slack"; import { createTeamsAdapter } from "@chat-adapter/teams"; export const bot = new Chat({ adapters: { slack: createSlackAdapter(), teams: createTeamsAdapter(), }, state, userName: "form-bot", });`
+
+The existing webhook route in `src/index.ts` already uses a `:platform` parameter, so Teams webhooks would be handled at `/api/webhooks/teams` with no additional routing code.
+
+You could also post to multiple platforms at once. For example, you might post form submissions to both a Slack channel and a Teams channel by calling `bot.channel()` with different platform prefixes:
+
+``const slackChannel = bot.channel(`slack:${process.env.SLACK_CHANNEL_ID}`); const teamsChannel = bot.channel(`teams:${process.env.TEAMS_CHANNEL_ID}`); await Promise.all([ slackChannel.post(newSubmissionCard(formData, submissionId)), teamsChannel.post(newSubmissionCard(formData, submissionId)), ]);``
+
+Modals are currently Slack-only, so the Edit & Forward button only works on Slack. On other platforms, you'd want to either hide that button or replace it with a different editing flow.
+
+See the [Chat SDK adapter directory](https://chat-sdk.dev/adapters) for the full list of supported platforms.
+
+## Related resources
+
+*   [Chat SDK Form Bot template](https://github.com/vercel-labs/chat-sdk-form-bot)
+    
+*   [Chat SDK documentation](https://chat-sdk.dev/docs)
+    
+*   [Chat SDK GitHub](https://github.com/vercel/chat)
+    
+*   [Resend documentation](https://resend.com/docs/api-reference/emails/send-email)
+    
+*   [Hono documentation](https://hono.dev/docs/getting-started/vercel)
+
+---
+
+[View full KB sitemap](/kb/sitemap.md)

package/resources/templates.json

@@ -0,0 +1,19 @@
+{
+  "templates": [
+    {
+      "title": "Chat SDK Liveblocks Bot",
+      "description": "Build a bot that you can engage with inside Liveblocks.",
+      "href": "https://vercel.com/templates/next.js/chat-sdk-liveblocks-bot"
+    },
+    {
+      "title": "Knowledge Agent",
+      "description": "Open source file-system and knowledge based agent template. Build AI agents that stay up to date with your knowledge base.",
+      "href": "https://vercel.com/templates/nuxt/chat-sdk-knowledge-agent"
+    },
+    {
+      "title": "Community Agent",
+      "description": "Open source AI-powered Slack community management bot with a built-in Next.js admin panel. Uses Chat SDK, AI SDK, and Vercel Workflow.",
+      "href": "https://vercel.com/templates/next.js/chat-sdk-community-agent"
+    }
+  ]
+}

package/docs/guides/code-review-hono.mdx

@@ -1,241 +0,0 @@
----
-title: Code review GitHub bot with Hono and Redis
-description: This guide walks through building a GitHub bot that reviews pull requests on demand. When a user @mentions the bot on a PR, Chat SDK picks up the mention, spins up a Vercel Sandbox with the repo cloned, and uses AI SDK to analyze the diff.
-type: guide
-prerequisites: []
-related:
-  - /adapters/github
-  - /docs/state/redis
----
-
-## Prerequisites
-
-- Node.js 18+
-- [pnpm](https://pnpm.io) (or npm/yarn)
-- A GitHub repository where you have admin access
-- A Redis instance for state management
-- A [Vercel](https://vercel.com) account
-
-## Create a Hono app
-
-Scaffold a new Hono project and install dependencies:
-
-```sh title="Terminal"
-pnpm create hono my-review-bot
-cd my-review-bot
-pnpm add @octokit/rest @vercel/functions @vercel/sandbox ai bash-tool chat @chat-adapter/github @chat-adapter/state-redis
-```
-
-<Callout type="info">
-  Select the `vercel` template when prompted by `create-hono`. This sets up the project for Vercel deployment with the correct entry point.
-</Callout>
-
-## Configure a GitHub webhook
-
-1. Go to your repository **Settings** then **Webhooks** then **Add webhook**
-2. Set **Payload URL** to `https://your-domain.com/api/webhooks/github`
-3. Set **Content type** to `application/json`
-4. Set a **Secret** and save it — you'll need this as `GITHUB_WEBHOOK_SECRET`
-5. Under **Which events would you like to trigger this webhook?**, select **Let me select individual events** and check:
-   - **Issue comments** (for @mention on the PR conversation tab)
-   - **Pull request review comments** (for @mention on inline review threads)
-
-### Get credentials
-
-1. Go to [Settings > Developer settings > Personal access tokens](https://github.com/settings/tokens) and create a token with `repo` scope — you'll need this as `GITHUB_TOKEN`
-2. Copy the **Webhook secret** you set above — you'll need this as `GITHUB_WEBHOOK_SECRET`
-
-## Configure environment variables
-
-Create a `.env` file in your project root:
-
-```bash title=".env"
-GITHUB_TOKEN=ghp_your_personal_access_token
-GITHUB_WEBHOOK_SECRET=your_webhook_secret
-REDIS_URL=redis://localhost:6379
-BOT_USERNAME=my-review-bot
-```
-
-The model (`anthropic/claude-sonnet-4.6`) uses AI Gateway. Develop locally by linking to your Vercel project with `vc link` then pulling your OIDC token with `vc pull --environment development`.
-
-## Define the review function
-
-Create the core review logic. This clones the repo into a Vercel Sandbox, then uses AI SDK with a bash tool to let Claude analyze the diff and read files directly.
-
-```typescript title="src/review.ts" lineNumbers
-import { Sandbox } from "@vercel/sandbox";
-import { ToolLoopAgent, stepCountIs } from "ai";
-import { createBashTool } from "bash-tool";
-
-interface ReviewInput {
-  owner: string;
-  repo: string;
-  prBranch: string;
-  baseBranch: string;
-}
-
-export async function reviewPullRequest(input: ReviewInput): Promise<string> {
-  const { owner, repo, prBranch, baseBranch } = input;
-
-  const sandbox = await Sandbox.create({
-    source: {
-      type: "git",
-      url: `https://github.com/${owner}/${repo}`,
-      username: "x-access-token",
-      password: process.env.GITHUB_TOKEN,
-      depth: 50,
-    },
-    timeout: 5 * 60 * 1000,
-  });
-
-  try {
-    await sandbox.runCommand("git", ["fetch", "origin", prBranch, baseBranch]);
-    await sandbox.runCommand("git", ["checkout", prBranch]);
-
-    const diffResult = await sandbox.runCommand("git", [
-      "diff",
-      `origin/${baseBranch}...HEAD`,
-    ]);
-    const diff = await diffResult.output("stdout");
-
-    const { tools } = await createBashTool({ sandbox });
-
-    const agent = new ToolLoopAgent({
-      model: "anthropic/claude-sonnet-4.6",
-      tools,
-      stopWhen: stepCountIs(20),
-    });
-
-    const result = await agent.generate({
-      prompt: `You are reviewing a pull request for bugs and issues.
-
-Here is the diff for this PR:
-
-\`\`\`diff
-${diff}
-\`\`\`
-
-Use the bash and readFile tools to inspect any files you need more context on.
-
-Look for bugs, security issues, performance problems, and missing error handling.
-Organize findings by severity (critical, warning, suggestion).
-If the code looks good, say so.`,
-    });
-
-    return result.text;
-  } finally {
-    await sandbox.stop();
-  }
-}
-```
-
-The `createBashTool` gives the agent `bash`, `readFile`, and `writeFile` tools — all scoped to the sandbox. The agent can run `git diff`, read source files, and explore the repo freely without any code escaping the sandbox.
-
-The function returns the review text instead of posting it directly. This lets the Chat SDK handler post it as a threaded reply.
-
-## Create the bot
-
-Create a `Chat` instance with the GitHub adapter. When someone @mentions the bot on a PR, it fetches the PR metadata, runs the review, and posts the result back to the thread.
-
-```typescript title="src/bot.ts" lineNumbers
-import { Chat } from "chat";
-import { createGitHubAdapter } from "@chat-adapter/github";
-import { createRedisState } from "@chat-adapter/state-redis";
-import { Octokit } from "@octokit/rest";
-import { reviewPullRequest } from "./review";
-import type { GitHubRawMessage } from "@chat-adapter/github";
-
-const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
-
-export const bot = new Chat({
-  userName: process.env.BOT_USERNAME!,
-  adapters: {
-    github: createGitHubAdapter(),
-  },
-  state: createRedisState(),
-});
-
-bot.onNewMention(async (thread, message) => {
-  const raw = message.raw as GitHubRawMessage;
-  const { owner, repo, prNumber } = {
-    owner: raw.repository.owner.login,
-    repo: raw.repository.name,
-    prNumber: raw.prNumber,
-  };
-
-  // Fetch PR branch info
-  const { data: pr } = await octokit.pulls.get({
-    owner,
-    repo,
-    pull_number: prNumber,
-  });
-
-  await thread.post("Starting code review...");
-  await thread.subscribe();
-
-  const review = await reviewPullRequest({
-    owner,
-    repo,
-    prBranch: pr.head.ref,
-    baseBranch: pr.base.ref,
-  });
-
-  await thread.post(review);
-});
-
-bot.onSubscribedMessage(async (thread, message) => {
-  await thread.post(
-    "I've already reviewed this PR. @mention me on a new PR to start another review."
-  );
-});
-```
-
-`onNewMention` fires when a user @mentions the bot — for example, `@codereview can you review this?`. The handler extracts the PR details from the message's raw payload, runs the sandboxed review, and posts the result. Calling `thread.subscribe()` lets the bot respond to follow-up messages in the same thread.
-
-## Handle the webhook
-
-Create the Hono app with a single webhook route that delegates to Chat SDK:
-
-```typescript title="src/index.ts" lineNumbers
-import { Hono } from "hono";
-import { waitUntil } from "@vercel/functions";
-import { bot } from "./bot";
-
-const app = new Hono();
-
-app.post("/api/webhooks/github", async (c) => {
-  const handler = bot.webhooks.github;
-  if (!handler) {
-    return c.text("GitHub adapter not configured", 404);
-  }
-
-  return handler(c.req.raw, { waitUntil });
-});
-
-export default app;
-```
-
-Chat SDK's GitHub adapter handles signature verification, event parsing, and routing internally. The `waitUntil` option ensures the review completes after the HTTP response is sent — required on serverless platforms where the function would otherwise terminate before your handlers finish.
-
-## Test locally
-
-1. Start your development server (`pnpm dev`)
-2. Expose it with a tunnel (e.g. `ngrok http 3000`)
-3. Update the webhook URL in your GitHub repository settings to your tunnel URL
-4. Open a pull request
-5. Comment `@my-review-bot can you review this?` — the bot should respond with "Starting code review..." followed by the full review
-
-## Deploy to Vercel
-
-Deploy your bot to Vercel:
-
-```sh title="Terminal"
-vercel deploy
-```
-
-After deployment, set your environment variables in the Vercel dashboard (`GITHUB_TOKEN`, `GITHUB_WEBHOOK_SECRET`, `REDIS_URL`, `BOT_USERNAME`). Update the webhook URL in your GitHub repository settings to your production URL.
-
-## Next steps
-
-- [GitHub adapter](/adapters/github) — Authentication options, thread model, and full configuration reference
-- [State Adapters](/docs/state) — Production state adapters (Redis, PostgreSQL, ioredis) for subscriptions and distributed locking

package/docs/guides/discord-nuxt.mdx

@@ -1,227 +0,0 @@
----
-title: Discord support bot with Nuxt and Redis
-description: This guide walks through building a Discord support bot with Nuxt, covering project setup, Discord app configuration, Gateway forwarding, AI-powered responses, and deployment.
-type: guide
-prerequisites: []
-related:
-  - /adapters/discord
-  - /docs/cards
-  - /docs/actions
----
-
-## Prerequisites
-
-- Node.js 18+
-- [pnpm](https://pnpm.io) (or npm/yarn)
-- A Discord server where you have admin access
-- A Redis instance for state management
-
-## Create a Nuxt app
-
-Scaffold a new Nuxt project and install Chat SDK dependencies:
-
-```sh title="Terminal"
-npx nuxi@latest init my-discord-bot
-cd my-discord-bot
-pnpm add chat @chat-adapter/discord @chat-adapter/state-redis ai @ai-sdk/anthropic
-```
-
-## Create a Discord app
-
-1. Go to [discord.com/developers/applications](https://discord.com/developers/applications)
-2. Click **New Application**, give it a name, and click **Create**
-3. Go to **Bot** in the sidebar and click **Reset Token** — copy the token, you'll need this as `DISCORD_BOT_TOKEN`
-4. Under **Privileged Gateway Intents**, enable **Message Content Intent**
-5. Go to **General Information** and copy the **Application ID** and **Public Key** — you'll need these as `DISCORD_APPLICATION_ID` and `DISCORD_PUBLIC_KEY`
-
-### Set up the Interactions endpoint
-
-1. In **General Information**, set the **Interactions Endpoint URL** to `https://your-domain.com/api/webhooks/discord`
-2. Discord will send a PING to verify the endpoint — you'll need to deploy first or use a tunnel
-
-### Invite the bot to your server
-
-1. Go to **OAuth2** in the sidebar
-2. Under **OAuth2 URL Generator**, select the `bot` scope
-3. Under **Bot Permissions**, select:
-   - Send Messages
-   - Create Public Threads
-   - Send Messages in Threads
-   - Read Message History
-   - Add Reactions
-   - Use Slash Commands
-4. Copy the generated URL and open it in your browser to invite the bot
-
-## Configure environment variables
-
-Create a `.env` file in your project root:
-
-```bash title=".env"
-DISCORD_BOT_TOKEN=your_bot_token
-DISCORD_PUBLIC_KEY=your_public_key
-DISCORD_APPLICATION_ID=your_application_id
-REDIS_URL=redis://localhost:6379
-ANTHROPIC_API_KEY=your_anthropic_api_key
-```
-
-## Create the bot
-
-Create `server/lib/bot.ts` with a `Chat` instance configured with the Discord adapter. This bot uses AI SDK to answer support questions:
-
-```typescript title="server/lib/bot.tsx" lineNumbers
-import { Chat, Card, CardText as Text, Actions, Button, Divider } from "chat";
-import { createDiscordAdapter } from "@chat-adapter/discord";
-import { createRedisState } from "@chat-adapter/state-redis";
-import { generateText } from "ai";
-import { anthropic } from "@ai-sdk/anthropic";
-
-export const bot = new Chat({
-  userName: "support-bot",
-  adapters: {
-    discord: createDiscordAdapter(),
-  },
-  state: createRedisState(),
-});
-
-bot.onNewMention(async (thread) => {
-  await thread.subscribe();
-  await thread.post(
-    <Card title="Support">
-      <Text>Hey! I'm here to help. Ask your question in this thread and I'll do my best to answer it.</Text>
-      <Divider />
-      <Actions>
-        <Button id="escalate" style="danger">Escalate to Human</Button>
-      </Actions>
-    </Card>
-  );
-});
-
-bot.onSubscribedMessage(async (thread, message) => {
-  await thread.startTyping();
-
-  const { text } = await generateText({
-    model: anthropic("claude-sonnet-4-5-20250514"),
-    system: "You are a friendly support bot. Answer questions concisely. If you don't know the answer, say so and suggest the user click 'Escalate to Human'.",
-    prompt: message.text,
-  });
-
-  await thread.post(text);
-});
-
-bot.onAction("escalate", async (event) => {
-  await event.thread.post(
-    `${event.user.fullName} requested human support. A team member will follow up shortly.`
-  );
-});
-```
-
-<Callout type="info">
-  The file extension must be `.tsx` (not `.ts`) when using JSX components like `Card` and `Button`. Make sure your `tsconfig.json` has `"jsx": "react-jsx"` and `"jsxImportSource": "chat"`.
-</Callout>
-
-`onNewMention` fires when a user @mentions the bot. Calling `thread.subscribe()` tells the SDK to track that thread, so subsequent messages trigger `onSubscribedMessage` where AI SDK generates a response.
-
-## Create the webhook route
-
-Create a server route that handles incoming Discord webhooks:
-
-```typescript title="server/api/webhooks/[platform].post.ts" lineNumbers
-import { bot } from "../lib/bot";
-
-type Platform = keyof typeof bot.webhooks;
-
-export default defineEventHandler(async (event) => {
-  const platform = getRouterParam(event, "platform") as Platform;
-
-  const handler = bot.webhooks[platform];
-  if (!handler) {
-    throw createError({ statusCode: 404, message: `Unknown platform: ${platform}` });
-  }
-
-  const request = toWebRequest(event);
-
-  return handler(request, {
-    waitUntil: (task) => event.waitUntil(task),
-  });
-});
-```
-
-This creates a `POST /api/webhooks/discord` endpoint. The `waitUntil` option ensures message processing completes after the HTTP response is sent.
-
-## Set up the Gateway forwarder
-
-Discord doesn't push messages to webhooks like Slack does. Instead, messages arrive through the Gateway WebSocket. The Discord adapter includes a built-in Gateway listener that connects to the WebSocket and forwards events to your webhook endpoint.
-
-Create a route that starts the Gateway listener:
-
-```typescript title="server/api/discord/gateway.get.ts" lineNumbers
-import { bot } from "../../lib/bot";
-
-export default defineEventHandler(async (event) => {
-  await bot.initialize();
-
-  const discord = bot.getAdapter("discord");
-  if (!discord) {
-    throw createError({ statusCode: 404, message: "Discord adapter not configured" });
-  }
-
-  const baseUrl = process.env.NUXT_PUBLIC_SITE_URL || "http://localhost:3000";
-  const webhookUrl = `${baseUrl}/api/webhooks/discord`;
-
-  const durationMs = 10 * 60 * 1000; // 10 minutes
-
-  return discord.startGatewayListener(
-    { waitUntil: (task: Promise<unknown>) => event.waitUntil(task) },
-    durationMs,
-    undefined,
-    webhookUrl,
-  );
-});
-```
-
-The Gateway listener connects to Discord's WebSocket, receives messages, and forwards them to your webhook endpoint for processing. In production, you'll want a cron job to restart it periodically.
-
-## Test locally
-
-1. Start your development server (`pnpm dev`)
-2. Trigger the Gateway listener by visiting `http://localhost:3000/api/discord/gateway` in your browser
-3. Expose your server with a tunnel (e.g. `ngrok http 3000`)
-4. Update the **Interactions Endpoint URL** in your Discord app settings to your tunnel URL (e.g. `https://abc123.ngrok.io/api/webhooks/discord`)
-5. @mention the bot in your Discord server — it should respond with a support card
-6. Reply in the thread — AI SDK should generate a response
-7. Click **Escalate to Human** — the bot should post an escalation message
-
-## Add a cron job for production
-
-The Gateway listener runs for a fixed duration. In production, set up a cron job to restart it automatically. If you're deploying to Vercel, add a `vercel.json`:
-
-```json title="vercel.json"
-{
-  "crons": [
-    {
-      "path": "/api/discord/gateway",
-      "schedule": "*/9 * * * *"
-    }
-  ]
-}
-```
-
-This restarts the Gateway listener every 9 minutes, ensuring continuous connectivity. Protect the endpoint with a `CRON_SECRET` environment variable in production.
-
-## Deploy to Vercel
-
-Deploy your bot to Vercel:
-
-```sh title="Terminal"
-vercel deploy
-```
-
-After deployment, set your environment variables in the Vercel dashboard (`DISCORD_BOT_TOKEN`, `DISCORD_PUBLIC_KEY`, `DISCORD_APPLICATION_ID`, `REDIS_URL`, `ANTHROPIC_API_KEY`). Update the **Interactions Endpoint URL** in your Discord app settings to your production URL.
-
-## Next steps
-
-- [Cards](/docs/cards) — Build rich interactive messages with buttons, fields, and selects
-- [Actions](/docs/actions) — Handle button clicks, select menus, and other interactions
-- [Streaming](/docs/streaming) — Stream AI-generated responses to chat
-- [Discord adapter](/adapters/discord) — Full configuration reference and Gateway setup
-- [State Adapters](/docs/state) — PostgreSQL, ioredis, and other state adapter options