How to Integrate Bolt.new with Slack

Before writing any code in Bolt, you need to create a Slack App in the Slack API dashboard and generate an incoming webhook URL. This webhook URL is all you need to start sending messages — no OAuth flow, no complex permissions. Go to api.slack.com/apps and click 'Create New App'. Choose 'From scratch', give your app a name (e.g., 'My Bolt App'), and select your Slack workspace. Once created, navigate to 'Incoming Webhooks' in the left sidebar of your app settings and toggle 'Activate Incoming Webhooks' to On. Click 'Add New Webhook to Workspace' at the bottom. Slack will ask you to authorize and select a channel — choose the channel where you want messages to appear (e.g., #notifications or #general). After authorizing, you'll see a webhook URL like `https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX`. Copy this URL. For a full Slack App with a bot token, also navigate to 'OAuth & Permissions' and add the scopes you need: `chat:write` (to post messages), `channels:read` (to list channels), and `users:read` (to list workspace members). Then click 'Install to Workspace' and copy the Bot User OAuth Token starting with `xoxb-`. Store both credentials in your Bolt project's `.env` file as `VITE_SLACK_WEBHOOK_URL` for the incoming webhook and never expose the bot token on the client side — it belongs server-side only.

1# .env file in your Bolt project root
2# Incoming webhook URL (safe to use from API routes)
3SLACK_WEBHOOK_URL=https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX
4
5# Bot token for full Slack API access (server-side only, never expose to client)
6SLACK_BOT_TOKEN=xoxb-your-bot-token-here
7
8# Channel IDs for targeting specific channels
9SLACK_NOTIFICATIONS_CHANNEL_ID=C00000000
10SLACK_ERRORS_CHANNEL_ID=C00000001

With your credentials in the .env file, prompt Bolt to create the server-side API route that handles Slack message sending. For a Next.js project, this will be an API route at `app/api/slack/notify/route.ts`. For a Vite project, you'll use a Supabase Edge Function. The API route pattern is essential here — your Slack bot token and webhook URL must never be exposed in client-side JavaScript bundles where users can find them in browser DevTools. All Slack API calls happen server-side. The generated route should accept a POST request with a message payload, validate the request, and forward it to Slack using either the incoming webhook URL or the `@slack/web-api` SDK. Bolt will generate the correct handler based on your project type. Review the generated code to ensure environment variables are accessed via `process.env.SLACK_BOT_TOKEN` (Next.js) or `import.meta.env` (Vite/client) — the bot token should only appear in server-side code paths. For the incoming webhook approach, no SDK is needed — a simple `fetch()` POST to the webhook URL with a JSON body is sufficient and works perfectly in the WebContainer preview for outbound calls.

1// app/api/slack/notify/route.ts
2import { NextResponse } from 'next/server';
3
4type Severity = 'info' | 'warning' | 'error';
5
6const SEVERITY_COLORS: Record<Severity, string> = {
7  info: '#36a64f',
8  warning: '#ffcc00',
9  error: '#ff0000',
10};
11
12export async function POST(request: Request) {
13  const webhookUrl = process.env.SLACK_WEBHOOK_URL;
14  if (!webhookUrl) {
15    return NextResponse.json({ error: 'SLACK_WEBHOOK_URL not configured' }, { status: 500 });
16  }
17
18  const { message, channel, severity = 'info' } = await request.json();
19
20  const payload = {
21    blocks: [
22      {
23        type: 'header',
24        text: {
25          type: 'plain_text',
26          text: severity === 'error' ? '🚨 Error Alert' : severity === 'warning' ? '⚠️ Warning' : 'ℹ️ Notification',
27        },
28      },
29      {
30        type: 'section',
31        text: {
32          type: 'mrkdwn',
33          text: message,
34        },
35      },
36    ],
37    attachments: [
38      {
39        color: SEVERITY_COLORS[severity as Severity] ?? SEVERITY_COLORS.info,
40      },
41    ],
42    ...(channel ? { channel } : {}),
43  };
44
45  const response = await fetch(webhookUrl, {
46    method: 'POST',
47    headers: { 'Content-Type': 'application/json' },
48    body: JSON.stringify(payload),
49  });
50
51  if (!response.ok) {
52    const errorText = await response.text();
53    return NextResponse.json({ error: `Slack error: ${errorText}` }, { status: 500 });
54  }
55
56  return NextResponse.json({ success: true });
57}

If you need more than one-way notifications — such as reading channel history, listing workspace members, or replying in threads — you'll need to use the Slack Web API with your bot token. Install the official `@slack/web-api` package and create a server-side Slack client. This approach lets you call any Slack API method: `conversations.list` to list channels, `users.list` to get workspace members, `chat.postMessage` to post to any channel the bot has joined, and `reactions.add` to add emoji reactions to messages. All these calls are standard outbound HTTPS requests and work perfectly from the WebContainer during development. The key difference from incoming webhooks is that the bot token has a broader set of permissions and can interact with Slack data rather than just pushing messages. To use a method, ensure the corresponding OAuth scope is added to your Slack App in the OAuth & Permissions settings — `channels:read` for listing channels, `users:read` for user data, `reactions:write` for reactions. After adding new scopes, reinstall the app to your workspace to get an updated token.

1// lib/slack.ts — server-side only, import from API routes and server components
2import { WebClient } from '@slack/web-api';
3
4if (!process.env.SLACK_BOT_TOKEN) {
5  console.warn('SLACK_BOT_TOKEN is not set — Slack integration disabled');
6}
7
8export const slack = new WebClient(process.env.SLACK_BOT_TOKEN);
9
10export async function postMessage(
11  channel: string,
12  text: string,
13  blocks?: object[]
14) {
15  return slack.chat.postMessage({
16    channel,
17    text,
18    ...(blocks ? { blocks } : {}),
19  });
20}
21
22export async function listChannels() {
23  const result = await slack.conversations.list({
24    types: 'public_channel',
25    limit: 100,
26  });
27  return result.channels ?? [];
28}
29
30export async function getWorkspaceUsers() {
31  const result = await slack.users.list({});
32  return (result.members ?? []).filter((m) => !m.is_bot && !m.deleted);
33}
34
35export async function addReaction(
36  channel: string,
37  timestamp: string,
38  emoji: string
39) {
40  return slack.reactions.add({ channel, timestamp, name: emoji });
41}

Slash commands and Slack event subscriptions are the features that make your Bolt app feel like a real Slack integration — users can type /mycommand in any Slack channel and your app responds with live data, or Slack notifies your app when specific events happen (new messages, channel joins, reactions). Both features require Slack to send HTTP POST requests to your app, which means they absolutely cannot work in Bolt's WebContainer preview. The WebContainer has no public-facing URL — it's a browser-local environment with a private networking layer managed by Service Workers. Slack's servers cannot reach `localhost` or the dynamic WebContainer preview URLs. The solution is to deploy first. Once you have a deployed URL on Netlify (`https://your-app.netlify.app`) or Bolt Cloud (`https://your-app.bolt.host`), you can configure slash commands and event subscriptions. In the Slack API dashboard, go to 'Slash Commands' and click 'Create New Command'. Enter your command name (e.g., /stats), the request URL pointing to your deployed handler (e.g., `https://your-app.netlify.app/api/slack/commands`), and a description. For event subscriptions, go to 'Event Subscriptions', enable them, enter your deployed URL as the Request URL (Slack will send a challenge to verify), and subscribe to the bot events you need. Bolt can generate the slash command handler — it needs to respond within 3 seconds or return an acknowledgment and process async.

1// app/api/slack/commands/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import crypto from 'crypto';
4import { createClient } from '@supabase/supabase-js';
5
6// Verify request is genuinely from Slack
7function verifySlackRequest(body: string, timestamp: string, signature: string): boolean {
8  const signingSecret = process.env.SLACK_SIGNING_SECRET!;
9  const baseString = `v0:${timestamp}:${body}`;
10  const hmac = crypto.createHmac('sha256', signingSecret);
11  hmac.update(baseString);
12  const computedSig = `v0=${hmac.digest('hex')}`;
13  return crypto.timingSafeEqual(Buffer.from(computedSig), Buffer.from(signature));
14}
15
16export async function POST(request: NextRequest) {
17  const body = await request.text();
18  const timestamp = request.headers.get('x-slack-request-timestamp') ?? '';
19  const signature = request.headers.get('x-slack-signature') ?? '';
20
21  if (!verifySlackRequest(body, timestamp, signature)) {
22    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
23  }
24
25  const params = new URLSearchParams(body);
26  const command = params.get('command');
27  const userId = params.get('user_id');
28
29  if (command === '/stats') {
30    const supabase = createClient(
31      process.env.NEXT_PUBLIC_SUPABASE_URL!,
32      process.env.SUPABASE_SERVICE_ROLE_KEY!
33    );
34    const { count: userCount } = await supabase
35      .from('users')
36      .select('*', { count: 'exact', head: true });
37
38    return NextResponse.json({
39      response_type: 'in_channel',
40      blocks: [
41        {
42          type: 'header',
43          text: { type: 'plain_text', text: '📊 App Stats' },
44        },
45        {
46          type: 'section',
47          fields: [
48            { type: 'mrkdwn', text: `*Total Users*\n${userCount ?? 0}` },
49          ],
50        },
51      ],
52    });
53  }
54
55  return NextResponse.json({
56    response_type: 'ephemeral',
57    text: 'Unknown command. Try /stats or /help.',
58  });
59}

Once your Slack integration code is working in development (outbound webhook notifications can be tested in the preview, but slash commands require deployment), deploy your app to Netlify or Bolt Cloud. When deploying to Netlify, connect your app from Bolt's Settings → Applications → Netlify, or push to GitHub and connect the repo to Netlify. After deploying, add your Slack credentials as environment variables in Netlify: go to Site Configuration → Environment Variables → Add a variable. Add `SLACK_WEBHOOK_URL`, `SLACK_BOT_TOKEN`, `SLACK_SIGNING_SECRET`, and any channel IDs you use. Environment variables added to Netlify are injected into your serverless functions at runtime — they're never exposed to the browser. Redeploy after adding new variables for them to take effect. For Bolt Cloud deployments, add the same variables in your project's environment settings. Once deployed and environment variables are set, update the Slack API dashboard with your production URLs: the Request URL for slash commands, the event subscription URL, and register any OAuth redirect URIs. Test the full integration by using your slash command in Slack and verifying messages appear in the correct channels.

1// netlify.toml — if deploying to Netlify
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[[redirects]]
7  from = "/*"
8  to = "/.netlify/functions/__nextjs"
9  status = 200
10
11# Add in Netlify Dashboard → Site Configuration → Environment Variables:
12# SLACK_WEBHOOK_URL = https://hooks.slack.com/services/...
13# SLACK_BOT_TOKEN = xoxb-...
14# SLACK_SIGNING_SECRET = your-signing-secret
15# SLACK_NOTIFICATIONS_CHANNEL_ID = C00000000