Getting started with Vercel's Slack Agent Skill
What is a skill?
A skill is a reusable set of instructions that extends an AI agent with specialized knowledge for a specific task or domain. Skills are invoked via slash commands (e.g., /slack-agent) and provide the agent with context it wouldn't otherwise have, such as framework patterns, step-by-step workflows, best practices, and reference documentation. Think of a skill as a portable expert playbook: when activated, the agent gains deep fluency in a particular toolchain and can guide you through complex, multi-step processes like scaffolding a project, configuring third-party services, and deploying to production.
The Slack Agent Skill
Vercel's Slack Agent Skill takes you through building, testing, and deploying a Slack app on Vercel. It supports two frameworks: the Chat SDK and Bolt for JavaScript. It includes a guided wizard that handles everything from project scaffolding to production deployment.
If you're new to building Slack agents, this is the fastest way to get started.
The Slack Agent Skill includes the following features:
- Interactive Setup Wizard: Step-by-step guidance from project creation to production deployment
- Dual Framework Support: Chat SDK (JSX components, thread subscriptions) and Bolt for JavaScript (Block Kit, event listeners)
- Custom Implementation Planning: Generates a tailored plan based on your agent's purpose before scaffolding
- Quality Standards: Embedded testing and code quality requirements
- AI Integration: Support for Vercel AI Gateway and direct provider SDKs
- Comprehensive Patterns: Slack-specific development patterns and best practices for both frameworks
- Testing Framework: Vitest configuration and sample tests for both stacks
Install the skill
The first thing you need to do is to install the skill. You can do this via skills.sh or manually from GitHub.
- Install via skills.sh
- Install manually
Open your terminal and run the following command:
npx skills add vercel-labs/slack-agent-skill
Clone the repository into your skills directory. For example, with Claude Code:
git clone https://github.com/vercel-labs/slack-agent-skill.git ~/.claude/skills/slack-agent-skill
The installation flow will install the skill to a list of agents by default; you can optionally choose additional agents to install it to. Asking to install it to a specific agent, like Claude Code, would look like this:
npx skills add vercel-labs/slack-agent-skill --yes --agent "claude-code"
Scaffold the agent
Open your coding agent platform of choice where you've installed the skill (like Claude Code shown above) and run this command:
/slack-agent new
A wizard experience will appear and ask you a series of questions. The wizard will guide you through:
- Framework selection and project setup
- Custom implementation plan generation and approval
- Slack app creation with customized manifest
- Environment configuration
- Local testing with ngrok
- Production deployment to Vercel
- Test framework setup
Respond to what kind of Slack agent you're building and if you have a framework preference. For this example, enter:
A standup bot that collects daily updates.
The wizard then provides an implementation plan for the use case you've provided. For the standup bot, it created the following.
Sample implementation plan
Implementation Plan: Standup Bot
Complexity: Medium-Complex
Overview
A Slack bot that sends daily standup prompts to team members via DM, collects their responses, and
posts an AI-generated summary to a configured channel.
Core Features
1. Scheduled Prompts — DM team members at a configured time (default 9 AM) on weekdays
2. Response Collection — Accept free-form standup updates in DM threads
3. AI Summary — Generate a summary of all responses and post to a team channel
4. Status Tracking — Check who has/hasn't submitted their update
5. Configuration — Set standup time, channel, and team members via slash commands
Slash Commands
┌────────────────────┬─────────────────────────────────┬──────────────────────────────────────────┐
│ Command │ Description │ Example │
├────────────────────┼─────────────────────────────────┼──────────────────────────────────────────┤
│ /standup │ Submit your standup update │ /standup Fixed auth bug, working on API │
│ │ manually │ tests │
├────────────────────┼─────────────────────────────────┼──────────────────────────────────────────┤
│ /standup-status │ See who has/hasn't submitted │ /standup-status │
│ │ today │ │
├────────────────────┼─────────────────────────────────┼──────────────────────────────────────────┤
│ /standup-configure │ Set channel, time, and members │ /standup-configure #engineering 9:00 │
└────────────────────┴─────────────────────────────────┴──────────────────────────────────────────┘
Event Handlers (Bolt)
- app.event('app_mention') — Answer questions about standup status
- app.message() — Collect standup responses in DM threads
- app.command('/standup') — Manual standup submission
- app.command('/standup-status') — Check submission status
- app.command('/standup-configure') — Configure standup settings
- app.action('ack_standup') — Quick-response buttons on prompts
AI Tools
┌────────────────────┬──────────────────────────────────────────────┬─────────────┐
│ Tool │ Purpose │ Parameters │
├────────────────────┼──────────────────────────────────────────────┼─────────────┤
│ summarize_standups │ Generate a digest of all responses │ responses[] │
├────────────────────┼──────────────────────────────────────────────┼─────────────┤
│ parse_update │ Extract accomplishments, plans, and blockers │ updateText │
└────────────────────┴──────────────────────────────────────────────┴─────────────┘
Scheduled Jobs
┌──────────────┬─────────────────────────────────────────────────────┐
│ Schedule │ Action │
├──────────────┼─────────────────────────────────────────────────────┤
│ 0 9 * * 1-5 │ Send standup prompts to all configured team members │
├──────────────┼─────────────────────────────────────────────────────┤
│ 0 10 * * 1-5 │ Post AI-generated summary to the configured channel │
└──────────────┴─────────────────────────────────────────────────────┘
State Management
- Upstash Redis — Store daily responses, team config, and submission tracking
UI Components (Block Kit)
- Rich standup prompt with quick-response buttons
- Summary card with per-person sections
- Status card showing submitted / pending members
Files to Create
server/
├── api/
│ └── slack/
│ └── events.post.ts # Slack events endpoint
├── bolt/
│ └── app.ts # Bolt app instance
├── listeners/
│ ├── commands/
│ │ ├── standup.ts # /standup command
│ │ ├── standup-status.ts # /standup-status command
│ │ └── standup-configure.ts # /standup-configure command
│ ├── events/
│ │ └── app-mention.ts # @mention handler
│ ├── messages/
│ │ └── dm-response.ts # DM standup collection
│ └── actions/
│ └── ack-standup.ts # Quick-response buttons
└── lib/
├── ai/
│ ├── agent.ts # AI config + system prompt
│ └── tools.ts # summarize, parse tools
├── standup/
│ ├── scheduler.ts # Prompt sending logic
│ ├── summary.ts # Summary generation + posting
│ └── storage.ts # Redis read/write helpers
└── blocks/
├── prompt-blocks.ts # Standup prompt Block Kit
├── summary-blocks.ts # Summary Block Kit
└── status-blocks.ts # Status Block Kit
Plus top-level config:
- vercel.json — Cron jobs for prompt + summary
- server/api/cron/standup-prompt.get.ts — Cron endpoint for prompts
- server/api/cron/standup-summary.get.ts — Cron endpoint for summary
From here you can make adjustments to the plan, add, or remove commands. Once you confirm the plan looks good, allow the wizard to work its magic. 🪄
Create the agent
The wizard requests your preference for AI/LLM capabilities. Once those are given, it requests to create a project directory for your use case.
Key through the prompts, allowing the wizard to create the directory, initialize it, and add all of the project files. Once complete, it will show you a summary of the project scaffolding, then prompt you to create the Slack app.
Create the Slack app
The wizard will guide you to create the Slack app in app settings, create it from the manifest provided, and obtain the necessary token and signing secret. Follow the wizard's prompts and relay the necessary information to it.
Test locally
The coding agent can assist you with local testing and the wizard should prompt you to do so. For local testing, we recommend using ngrok. Once you have it installed, choose a port to run the server on, then run the command:
ngrok 80
Where 80 is your port number.
Provide the ngrok URL to the coding agent, and allow it to update the URL in your project code too. Test and troubleshoot any issues with the coding agent.
Deploy to Vercel
The Slack Agent Skill also supports deploying to Vercel. Once you've committed your project to a GitHub repo, run the following command in the coding agent:
/slack-agent deploy
The coding agent will run you through the process outlined in the Deploying to Vercel guide. The advantage of using the Agent Skill is that it seamlessly updates your app manifest with the production URLs.
Next steps
✨ Check out our blog post on this very subject: Deploy Agents to Slack Faster with Vercel Skills.
✨ Explore additional Vercel skills to help you on your agent creation journey.