Skip to main content

Deploying to Vercel

This guide walks you through preparing and deploying a Slack app using Bolt for JavaScript, Workflow DevKit's DurableAgent, AI SDK tools, the Nitro server framework, and Vercel.

When you’re finished, you’ll have this ⚡️Slack agent template to run, modify, and make your own.

Prerequisites​

First things first, take a few moments to set up the following:

  • Make sure you have a development environment where you have permission to install apps. You can get a free sandbox with the Slack Developer Program.
  • Ensure you have an account with a Git provider (GitHub, GitLab, or Bitbucket).

Create a new Vercel project​

Create a new Vercel project based on a Bolt for JavaScript template by clicking the button below.

You will then be prompted to select a Git provider. Select your preferred provider and log in.

New project

Select your provider as the Git Scope and rename the repo if you'd like. Click Create.

Keep this browser tab open; we'll be back to it soon. Next, we'll need to add a couple of variables for our app. To obtain these, direct your attention to the Slack app settings page.

Create a Slack app​

Create a new Slack app through this link, then select from a manifest. Next, choose a workspace you have permission to install apps in. Click Next, then copy and paste the project manifest code here, replacing the placeholder text in the JSON tab.

manifest.json
loading...

Click Next and then Create.

Install app​

Still in the app settings, navigate to the Install App section and click the button to install your app to the workspace. After installing the app, a bot token will be available. Copy this token and paste it in the Vercel setup where it says SLACK_BOT_TOKEN.

Back in the Slack app settings, navigate to the Basic Information section and find the Signing Secret. Copy this token and paste it in the Vercel setup where it says SLACK_SIGNING_SECRET, then click Deploy.

Environment variables

The deployment process will kick off, and you'll receive progress updates. Be patient. Deployment is hard work! Once it's finished, you'll see a confirmation screen with a button to Continue to Dashboard. Click that button. Here you can see that your app has been deployed! Use this dashboard to keep tabs on build logs, deployment checks, and more.

Set AI Gateway token​

Follow these steps to create an AI Gateway API token from the Vercel dashboard.

Token only needed locally

You will only need the AI Gateway token if you are running the app locally. All deployments on Vercel have access to the gateway via OpenID Connect (OIDC).

  1. From the Vercel dashboard, click on the AI Gateway tab in the top nav bar.
  2. On the left sidebar, select API Keys.
  3. Click Create Key, give it a name, and copy the value (it won't be shown again).

Once you have the key, you need to add it to your project so your code can use it. There are two primary ways to do this: through the dashboard and for local development.

Through the dashboard:

  1. Go to your project in Vercel.
  2. Click the Settings tab in the top nav bar.
  3. Select Environment Variables from the left-hand menu.
  4. Select Add Environment Variable to add a variable with the Key set to AI_GATEWAY_API_KEY and the Value set to the key value you just copied.
  5. Click Save. Redeploy your app for these changes to take effect.

For local development, open your terminal and set the environment variable AI_GATEWAY_API_KEY to the value of the key you copied.

export AI_GATEWAY_API_KEY=<your-key-here>

Update URLs​

Once the deployment has completed, navigate back to the Slack app settings and open the App Manifest from the sidebar.

Update the manifest so that all of the reference_url and url fields use your domain. Here are some examples:

  • Slash commands URL: https://slack-agent-template-example.vercel.app/api/slack/events
  • Event subscriptions: https://slack-agent-template-example.vercel.app/api/slack/events
  • Interactivity request URL: https://slack-agent-template-example.vercel.app/api/slack/events

Click Save and verify the URL.

Run the app​

Open your Slack workspace and add your new app to a channel. Your app should respond whenever it is tagged in a message or sent a DM!

Your app is now set up to build and deploy whenever you commit to your repo.

Next steps​

✨ Explore Vercel documentation here.

✨ Learn all about developing apps with AI features.