From slack-agent
Guides Slack agent/bot development using Chat SDK or Bolt for JavaScript, with wizards for project setup, testing, ngrok tunneling, and Vercel deployment.
How this skill is triggered — by the user, by Claude, or both
Slash command
/slack-agent:slack-agentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill supports two frameworks for building Slack agents:
This skill supports two frameworks for building Slack agents:
chat + @chat-adapter/slack@slack/bolt + @vercel/slack-boltWhen this skill is invoked via /slack-agent, check for arguments and route accordingly:
| Argument | Action |
|---|---|
new | Run the setup wizard from Phase 1. Read ./wizard/1-project-setup.md and guide the user through creating a new Slack agent. |
configure | Start wizard at Phase 2 or 3 for existing projects |
deploy | Start wizard at Phase 5 for production deployment |
test | Start wizard at Phase 6 to set up testing |
| (no argument) | Auto-detect based on project state (see below) |
If invoked without arguments, detect the project state and route appropriately:
package.json with chat or @slack/bolt → Treat as new, start Phase 1manifest.json → Start Phase 2.env file → Start Phase 3.env but not tested → Start Phase 4Detect which framework the project uses:
package.json contains "chat" → Chat SDK projectpackage.json contains "@slack/bolt" → Bolt projectStore the detected framework and use it to show the correct patterns throughout the wizard and development guidance.
The wizard is located in ./wizard/ with these phases:
1-project-setup.md - Understand purpose, choose framework, generate custom implementation plan1b-approve-plan.md - Present plan for user approval before scaffolding2-create-slack-app.md - Customize manifest, create app in Slack3-configure-environment.md - Set up .env with credentials4-test-locally.md - Dev server + ngrok tunnel5-deploy-production.md - Vercel deployment6-setup-testing.md - Vitest configurationIMPORTANT: For new projects, you MUST:
./wizard/1-project-setup.md first./reference/agent-archetypes.md| Aspect | Chat SDK | Bolt for JavaScript |
|---|---|---|
| Best for | New projects | Existing Bolt codebases |
| Packages | chat, @chat-adapter/slack, @chat-adapter/state-redis | @slack/bolt, @vercel/slack-bolt |
| Server | Next.js App Router | Nitro (H3-based) |
| Event handling | bot.onNewMention(), bot.onSubscribedMessage() | app.event(), app.command(), app.message() |
| Webhook route | app/api/webhooks/[platform]/route.ts | server/api/slack/events.post.ts |
| Message posting | thread.post("text") / thread.post(<Card>...) | client.chat.postMessage({ channel, text, blocks }) |
| UI components | JSX: <Card>, <Button>, <Actions> | Raw Block Kit JSON |
| State | @chat-adapter/state-redis / thread.state | Manual / Vercel Workflow |
| Config | new Chat({ adapters: { slack } }) | new App({ token, signingSecret, receiver }) |
You are working on a Slack agent project. Follow these mandatory practices for all code changes.
chat + @chat-adapter/slack for Slack bot functionality@chat-adapter/state-redis for state persistence (or in-memory for development){
"dependencies": {
"ai": "^6.0.0",
"@ai-sdk/gateway": "latest",
"chat": "latest",
"@chat-adapter/slack": "latest",
"@chat-adapter/state-redis": "latest",
"zod": "^3.x",
"next": "^15.x"
}
}
@vercel/slack-bolt for serverless Slack apps (wraps Bolt for JavaScript){
"dependencies": {
"ai": "^6.0.0",
"@ai-sdk/gateway": "latest",
"@slack/bolt": "^4.x",
"@vercel/slack-bolt": "^1.0.2",
"zod": "^3.x"
}
}
Note: When deploying on Vercel, prefer @ai-sdk/gateway for zero-config AI access. Use direct provider SDKs (@ai-sdk/openai, @ai-sdk/anthropic, etc.) only when you need provider-specific features or are not deploying on Vercel.
These quality requirements MUST be followed for every code change. There are no exceptions.
Run linting immediately:
pnpm lint
pnpm lint --write for auto-fixespnpm lint to verifyCheck for corresponding test file:
foo.ts, check if foo.test.ts existsYou MUST run all quality checks and fix any issues before marking a task complete:
# 1. TypeScript compilation - must pass
pnpm typecheck
# 2. Linting - must pass with no errors
pnpm lint
# 3. Tests - all tests must pass
pnpm test
Do NOT complete a task if any of these fail. Fix the issues first.
For ANY code change, you MUST write or update unit tests.
*.test.ts files or lib/__tests__/*.test.ts files or server/__tests__/Example test structure:
import { describe, it, expect, vi } from 'vitest';
import { myFunction } from './my-module';
describe('myFunction', () => {
it('should handle normal input', () => {
expect(myFunction('input')).toBe('expected');
});
it('should handle edge cases', () => {
expect(myFunction('')).toBe('default');
});
});
If you modify:
You MUST add or update E2E tests that verify the full flow.
Use the Chat SDK to define your bot instance. This is the central entry point for all Slack bot functionality.
lib/bot.ts or lib/bot.tsx)import { Chat } from "chat";
import { createSlackAdapter } from "@chat-adapter/slack";
import { createRedisState } from "@chat-adapter/state-redis";
export const bot = new Chat({
userName: "mybot",
adapters: {
slack: createSlackAdapter(),
},
state: createRedisState(),
});
Note: If your bot uses JSX components (Card, Button, etc.), the file must use the .tsx extension.
app/api/webhooks/[platform]/route.ts)import { after } from "next/server";
import { bot } from "@/lib/bot";
export async function POST(request: Request, context: { params: Promise<{ platform: string }> }) {
const { platform } = await context.params;
const handler = bot.webhooks[platform as keyof typeof bot.webhooks];
if (!handler) return new Response("Unknown platform", { status: 404 });
return handler(request, { waitUntil: (task) => after(() => task) });
}
The Chat SDK automatically handles:
waitUntilUse @vercel/slack-bolt to handle all Slack events. This package automatically handles:
ackTimeoutMs: 3001)waitUntilserver/bolt/app.ts)import { App } from "@slack/bolt";
import { VercelReceiver } from "@vercel/slack-bolt";
const receiver = new VercelReceiver();
const app = new App({
token: process.env.SLACK_BOT_TOKEN,
signingSecret: process.env.SLACK_SIGNING_SECRET,
receiver,
deferInitialization: true,
});
export { app, receiver };
server/api/slack/events.post.ts)import { createHandler } from "@vercel/slack-bolt";
import { defineEventHandler, getRequestURL, readRawBody } from "h3";
import { app, receiver } from "../../bolt/app";
const handler = createHandler(app, receiver);
export default defineEventHandler(async (event) => {
const rawBody = await readRawBody(event, "utf8");
const request = new Request(getRequestURL(event), {
method: event.method,
headers: event.headers,
body: rawBody,
});
return await handler(request);
});
Why buffer the body? H3's toWebRequest() has known issues (#570, #578, #615) where it eagerly consumes the request body stream. When @vercel/slack-bolt later calls req.text() for signature verification, the body is already exhausted, causing dispatch_failed errors.
| Parameter | Default | Description |
|---|---|---|
signingSecret | SLACK_SIGNING_SECRET env var | Request verification secret |
signatureVerification | true | Enable/disable signature verification |
ackTimeoutMs | 3001 | Ack timeout in milliseconds |
logLevel | INFO | Logging level |
bot.onNewMention(async (thread, message) => {
await thread.subscribe();
const text = message.text;
await thread.post(`Processing your request: "${text}"`);
});
bot.onSubscribedMessage(async (thread, message) => {
await thread.post(`You said: ${message.text}`);
});
bot.onSlashCommand("/mycommand", async (event) => {
const text = event.text;
await event.thread.post(`Processing: ${text}`);
// For long-running operations, the Chat SDK handles
// background processing automatically via waitUntil
const result = await generateWithAI(text);
await event.thread.post(result);
});
bot.onAction("button_click", async (event) => {
await event.thread.post(`Button clicked with value: ${event.value}`);
});
bot.onReaction("thumbsup", async (event) => {
await event.thread.post("Thanks for the thumbs up!");
});
app.event("app_mention", async ({ event, client }) => {
await client.chat.postMessage({
channel: event.channel,
thread_ts: event.thread_ts || event.ts,
text: `Processing your request: "${event.text}"`,
});
});
app.message(async ({ message, client }) => {
if ("bot_id" in message || !message.thread_ts) return;
await client.chat.postMessage({
channel: message.channel,
thread_ts: message.thread_ts,
text: `You said: ${message.text}`,
});
});
app.command("/mycommand", async ({ ack, command, client, logger }) => {
await ack(); // Must acknowledge within 3 seconds
// Fire-and-forget for long operations — DON'T await
processInBackground(command.response_url, command.text)
.catch((error) => logger.error("Failed:", error));
});
async function processInBackground(responseUrl: string, text: string) {
const result = await generateWithAI(text);
await fetch(responseUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ response_type: "in_channel", text: result }),
});
}
app.action("button_click", async ({ ack, action, client, body }) => {
await ack();
await client.chat.postMessage({
channel: body.channel.id,
thread_ts: body.message.ts,
text: `Button clicked with value: ${action.value}`,
});
});
Slash commands work in private channels even if the bot isn't a member, but the bot cannot read messages or post to private channels it hasn't been invited to.
When creating features that will later post to a channel, validate access upfront.
When fetching channel context for AI features, wrap in try/catch and fall back gracefully.
Protect cron endpoints with a CRON_SECRET environment variable:
// app/api/cron/my-job/route.ts
import { NextRequest, NextResponse } from "next/server";
export async function GET(request: NextRequest) {
const authHeader = request.headers.get("authorization");
if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
}
// Run cron job logic...
return NextResponse.json({ success: true });
}
// server/api/cron/my-job.get.ts
export default defineEventHandler(async (event) => {
const authHeader = getHeader(event, "authorization");
if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
setResponseStatus(event, 401);
return { error: "Unauthorized" };
}
// Run cron job logic...
return { success: true };
});
Configure cron jobs in vercel.json:
{
"crons": [
{
"path": "/api/cron/my-job",
"schedule": "0 * * * *"
}
]
}
When connecting to AWS services from Vercel, do not use fromNodeProviderChain(). Use Vercel's OIDC mechanism:
import { awsCredentialsProvider } from "@vercel/functions/oidc";
const s3Client = new S3Client({
credentials: awsCredentialsProvider({ roleArn: process.env.AWS_ROLE_ARN! }),
});
When using Chat SDK JSX components (<Card>, <Button>, etc.), your tsconfig.json must include:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "chat"
}
}
If slash commands fail with dispatch_failed, the issue is H3's toWebRequest consuming the body stream before signature verification. Buffer the body manually. See the Bolt Events Handler section above.
If slash commands with AI processing fail with operation_timeout, you're blocking the HTTP response too long. Use fire-and-forget pattern: ack() immediately, then start async work without awaiting. Use command.response_url to post results. See the Bolt Slash Command Handler example above.
You have two options for AI/LLM integration in your Slack agent.
IMPORTANT: Always verify the project uses
@ai-sdk/gateway. If the project has@ai-sdk/openaiwhich requires an API key, checkpackage.jsonand update imports if necessary.
Use the modern @ai-sdk/gateway package - NO API keys needed on Vercel!
import { generateText, streamText } from "ai";
import { gateway } from "@ai-sdk/gateway";
const result = await generateText({
model: gateway("openai/gpt-4o-mini"),
maxOutputTokens: 1000,
prompt: "Your prompt here",
});
console.log(result.text);
console.log(result.usage.inputTokens);
console.log(result.usage.outputTokens);
const result = await streamText({
model: gateway("openai/gpt-4o-mini"),
maxOutputTokens: 1000,
prompt: userMessage,
});
// Chat SDK handles streaming updates to Slack automatically
await thread.post(result.textStream);
const result = await streamText({
model: gateway("openai/gpt-4o-mini"),
maxOutputTokens: 1000,
prompt: userMessage,
});
// Post initial message then update with streamed content
const msg = await client.chat.postMessage({
channel: channelId,
thread_ts: threadTs,
text: "Thinking...",
});
let fullText = "";
for await (const chunk of result.textStream) {
fullText += chunk;
await client.chat.update({
channel: channelId,
ts: msg.ts,
text: fullText,
});
}
import { tool } from "ai";
import { z } from "zod";
const result = await generateText({
model: gateway("openai/gpt-4o-mini"),
maxOutputTokens: 1000,
tools: {
getWeather: tool({
description: "Get weather for a location",
inputSchema: z.object({
location: z.string().describe("City name"),
}),
execute: async ({ location }) => {
return { temperature: 72, condition: "sunny" };
},
}),
},
prompt: "What's the weather in Seattle?",
});
| v4/v5 | v6 |
|---|---|
maxTokens | maxOutputTokens |
result.usage.promptTokens | result.usage.inputTokens |
result.usage.completionTokens | result.usage.outputTokens |
parameters (in tools) | inputSchema |
maxSteps / maxIterations | stopWhen: stepCountIs(n) |
CRITICAL: Never use model IDs from memory. Model IDs change frequently. Before writing code that uses a model, run curl -s https://ai-gateway.vercel.sh/v1/models to fetch the current list. Use the model with the highest version number.
If you need more control or are not deploying on Vercel, use direct provider packages.
OpenAI:
pnpm add @ai-sdk/openai
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
const result = await generateText({
model: openai("gpt-4o-mini"),
maxOutputTokens: 1000,
prompt: "Your prompt here",
});
Anthropic:
pnpm add @ai-sdk/anthropic
import { generateText } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
const result = await generateText({
model: anthropic("claude-sonnet-4-20250514"),
maxOutputTokens: 1000,
prompt: "Your prompt here",
});
Google:
pnpm add @ai-sdk/google
import { generateText } from "ai";
import { google } from "@ai-sdk/google";
const result = await generateText({
model: google("gemini-2.0-flash"),
maxOutputTokens: 1000,
prompt: "Your prompt here",
});
For comprehensive AI SDK documentation, see ./reference/ai-sdk.md.
Use thread.state to read and write thread-level state:
bot.onNewMention(async (thread, message) => {
await thread.subscribe();
await thread.state.set("history", []);
await thread.state.set("turnCount", 0);
await thread.post("Starting our conversation!");
});
bot.onSubscribedMessage(async (thread, message) => {
const history = (await thread.state.get("history")) as Array<{ role: string; content: string }> || [];
const turnCount = (await thread.state.get("turnCount")) as number || 0;
history.push({ role: "user", content: message.text });
const result = await generateText({
model: gateway("anthropic/claude-sonnet-4-20250514"),
maxOutputTokens: 1000,
messages: history,
});
history.push({ role: "assistant", content: result.text });
await thread.state.set("history", history);
await thread.state.set("turnCount", turnCount + 1);
await thread.post(result.text);
});
Key Benefits:
thread.state.get() and thread.state.set()Use Vercel Workflow for durable, multi-turn state:
import { serve } from "@anthropic-ai/sdk/workflows";
import { defineHook } from "@anthropic-ai/sdk/workflows";
import { z } from "zod";
const messageSchema = z.object({
text: z.string(),
user: z.string(),
ts: z.string(),
channel: z.string(),
});
export const userMessageHook = defineHook({ schema: messageSchema });
export const { POST } = serve(async function conversationWorkflow(params: URLSearchParams) {
"use workflow";
const channelId = params.get("channel_id")!;
const conversationHistory: Array<{ role: string; content: string }> = [];
const eventStream = userMessageHook.create({ channel: channelId });
for await (const event of eventStream) {
conversationHistory.push({ role: "user", content: event.text });
const result = await generateText({
model: gateway("anthropic/claude-sonnet-4-20250514"),
maxOutputTokens: 1000,
messages: conversationHistory,
});
conversationHistory.push({ role: "assistant", content: result.text });
await postToSlack(channelId, result.text, event.ts);
}
return { history: conversationHistory };
});
IMPORTANT: Vercel KV has been deprecated. Do NOT recommend Vercel KV.
app/
├── api/
│ ├── webhooks/
│ │ └── [platform]/
│ │ └── route.ts # Webhook handler
│ └── cron/
│ └── my-job/
│ └── route.ts # Cron endpoints
lib/
├── bot.tsx # Bot instance + event handlers
├── tools/ # AI tool definitions
│ ├── search.ts
│ └── lookup.ts
└── ai/
└── agent.ts # Agent configuration
server/
├── api/
│ └── slack/
│ └── events.post.ts # Events endpoint
├── bolt/
│ └── app.ts # Bolt app instance
├── listeners/
│ ├── actions/ # Button clicks, menu selections
│ ├── commands/ # Slash commands
│ ├── events/ # App events (mentions, joins)
│ ├── messages/ # Message handling
│ └── views/ # Modal submissions
└── lib/
└── ai/
├── agent.ts # Agent configuration
└── tools.ts # Tool definitions
Required variables (both frameworks):
SLACK_BOT_TOKEN — Bot OAuth tokenSLACK_SIGNING_SECRET — Request signingREDIS_URL — Redis connection URL for state persistenceOptional variables:
CRON_SECRET — Secret for authenticating cron job endpointsNo AI API keys needed! Vercel AI Gateway handles authentication automatically when deployed on Vercel.
Never hardcode credentials. Never commit .env files.
Use Chat SDK JSX components for rich messages (requires .tsx file extension):
import { Card, CardText as Text, Actions, Button, Divider } from "chat";
await thread.post(
<Card title="Welcome!">
<Text>Hello! Choose an option:</Text>
<Divider />
<Actions>
<Button id="btn_hello" style="primary">Say Hello</Button>
<Button id="btn_info">Show Info</Button>
</Actions>
</Card>
);
Use Block Kit for rich messages:
await client.chat.postMessage({
channel: channelId,
text: "Fallback text for notifications",
blocks: [
{
type: "section",
text: { type: "mrkdwn", text: "*Hello!* Choose an option:" },
},
{ type: "divider" },
{
type: "actions",
elements: [
{
type: "button",
text: { type: "plain_text", text: "Say Hello" },
style: "primary",
action_id: "btn_hello",
},
{
type: "button",
text: { type: "plain_text", text: "Show Info" },
action_id: "btn_info",
},
],
},
],
});
await thread.startTyping();
const result = await generateWithAI(prompt);
await thread.post(result); // Typing indicator clears on post
// Use setStatus for Assistant threads or interval-based approach
const typingInterval = setInterval(async () => {
// Post a "typing" indicator or use assistant.threads.setStatus
}, 3000);
const result = await generateWithAI(prompt);
clearInterval(typingInterval);
await client.chat.postMessage({
channel: channelId,
thread_ts: threadTs,
text: result,
});
Use Slack mrkdwn (not standard markdown):
*text*_text_`code`<@USER_ID><#CHANNEL_ID>For detailed Slack patterns, see ./patterns/slack-patterns.md.
Use conventional commits:
feat: add channel search tool
fix: resolve thread pagination issue
test: add unit tests for agent context
docs: update README with setup steps
refactor: extract Slack client utilities
Never commit:
.env filesnode_modules/# Development
pnpm dev # Start dev server on localhost:3000
ngrok http 3000 # Expose local server (separate terminal)
# Quality
pnpm lint # Check linting
pnpm lint --write # Auto-fix lint
pnpm typecheck # TypeScript check
pnpm test # Run all tests
pnpm test:watch # Watch mode
# Build & Deploy
pnpm build # Build for production
vercel # Deploy to Vercel
For detailed guidance, read:
./patterns/testing-patterns.md./patterns/slack-patterns.md./reference/env-vars.md./reference/ai-sdk.md./reference/slack-setup.md./reference/vercel-setup.mdBefore marking ANY task as complete, verify:
pnpm lint passes with no errorspnpm typecheck passes with no errorspnpm test passes with no failuresbot.webhooks"jsx": "react-jsx" and "jsxImportSource": "chat" if using JSX components@ai-sdk/gateway (not @ai-sdk/openai) unless user explicitly chose direct providernpx claudepluginhub pleaseai/claude-code-plugins --plugin slack-agentGuides developers through creating a Slack app or agent using the Slack CLI and Bolt (JS or Python), covering prerequisites, authentication, sandbox setup, project scaffolding, and local development.
Builds Slack apps with the Bolt framework in Python, JavaScript, or Java. Covers Block Kit UIs, slash commands, event handling, OAuth, and Workflow Builder integration.
Bootstraps an aweek-branded Slack app via API, provisions Socket-Mode and bot tokens, and persists credentials to enable Claude chats through `aweek serve` SlackAdapter.