AI Visibility Slackbot

Monitor your brand's visibility across multiple AI models directly from Slack. This intelligent Slackbot automatically generates questions about your brand, tests them across various AI models, and delivers comprehensive visibility reports as threaded Slack messages.

Note

Blazity is a group of Next.js architects. We help organizations architect, optimize, and deploy high-performance Next.js applications at scale. Contact us at contact@blazity.com if you'd like to talk about your project.

The Challenge

AI models are quickly becoming the first touchpoint for how users discover, evaluate, and interact with brands (often before they ever visit a website or search Google). If your brand is absent, misrepresented, or inconsistently portrayed in those responses, you're already losing visibility, trust, and market share - and you won't even know it.

Overview

AI Visibility Slackbot is a Slack integration built with Vercel Workflow and the AI SDK that helps brands track their presence in AI model responses. It uses AI agents with structured outputs, long-running workflows, and interactive Slack components to provide brand AI visibility analytics directly in your Slack workspace.

Tech Stack

• Vercel Workflow - Durable execution engine for building apps and AI agents
• AI SDK - Vercel's AI SDK with structured outputs and agent patterns
• AI Gateway - Unified interface for multiple AI providers (OpenAI, Anthropic, Google, X.AI)
• Slack Web API - Official Slack SDK for messages, modals, and interactions
• Zod - Schema validation for structured outputs and Slack payloads
• Next.js 16 - React framework with App Router for API endpoints
• TypeScript - Type-safe development

Features

• Slack Integration - /visibility slash command with interactive modal and threaded responses
• AI-Powered Analysis - Automated brand context and question generation with structured outputs
• Multi-Model Testing - Test across GPT-4o, Claude 3.5, Gemini 2.0, and Grok simultaneously
• Durable Workflows - Reliable parallel execution with real-time progress updates
• Fully Customizable - Configure models, question count, runs per model, and generation parameters

Prerequisites

Before starting, ensure you have:

• Node.js 18+
• pnpm (recommended) or npm
• A Slack workspace where you can install apps
• A Vercel account (for deployment and AI Gateway)

Setup

This project requires both a deployed app URL and a configured Slack app. Since Slack needs your app's URL for webhooks, we'll deploy first, then configure Slack.

Step 1: Get Your AI Gateway API Key

1. Navigate to the Vercel Dashboard and go to the AI Gateway tab
2. Click "API keys" in the left sidebar
3. Click "Create key" to generate a new API key
4. Save the API key for later

For more details, see the AI Gateway Authentication documentation.

Step 2: Create Your Slack App (Partial Setup)

1. Go to api.slack.com/apps and create a new app

2. Choose "From scratch", set name (e.g. AI Visibility Monitor) and select your workspace

3. In OAuth & Permissions, add these Bot Token Scopes:

   • chat:write
   • channels:history
   • groups:history
   • im:history
   • mpim:history

4. Click Install to Workspace and authorize the app

5. Copy two values for the next step:

   • Bot User OAuth Token - from OAuth & Permissions page
   • Signing Secret - from Basic Information > App Credentials

Note: We'll configure the webhook URLs after deployment. For now, skip Event Subscriptions, Interactivity, and Slash Commands.

Step 3: Deploy to Vercel

During deployment, you'll be prompted to enter:

• SLACK_BOT_TOKEN - Your Bot User OAuth Token (starts with xoxb-)
• SLACK_SIGNING_SECRET - Your Slack Signing Secret
• AI_GATEWAY_API_KEY - Vercel AI Gateway API key

After deployment completes, note your app URL (e.g., https://your-app.vercel.app).

Step 4: Complete Slack App Configuration

Now that you have your deployed URL, go back to your Slack app settings:

1. In Event Subscriptions:

   • Enable events
   • Set Request URL to: https://your-app.vercel.app/api/slack/webhook
   • Subscribe to message.channels bot event
   • Click Save Changes

2. In Interactivity & Shortcuts:

   • Enable Interactivity
   • Set Request URL to: https://your-app.vercel.app/api/slack/interactive
   • Click Save Changes

3. In Slash Commands, create a new command:

   • Command: /visibility
   • Request URL: https://your-app.vercel.app/api/slack/command
   • Description: "Check brand visibility across AI models"
   • Click Save

4. If prompted, reinstall the app to your workspace to apply the new permissions

Local Development

For local development and testing, you'll need to expose your local server to receive Slack webhooks.

1. Clone and Install

git clone https://github.com/blazity/ai-visibility-slackbot.git
cd ai-visibility-slackbot
pnpm install

2. Environment Variables

Create a .env.local file with your credentials:

SLACK_BOT_TOKEN=xoxb-your-token
SLACK_SIGNING_SECRET=your-signing-secret
AI_GATEWAY_API_KEY=your-ai-gateway-key

3. Start Development Server

pnpm dev

The app will be available at http://localhost:3000.

4. Expose Local Server (for Slack webhooks)

Use ngrok to create a public URL for your local server:

ngrok http 3000

Copy the forwarding URL (e.g., https://abc123.ngrok.io) and update your Slack app's webhook URLs:

• Event Subscriptions: https://abc123.ngrok.io/api/slack/webhook
• Interactivity: https://abc123.ngrok.io/api/slack/interactive
• Slash Command: https://abc123.ngrok.io/api/slack/command

Tip: Remember to update the URLs back to your production Vercel URL when you're done with local development.

Usage

1. Invite the bot to your channel by typing @AI Visibility Monitor (or your app name)
2. Type /visibility in the channel
3. Configure your brand name, AI models to test, and number of questions in the modal
4. Click "Start Check" to begin the analysis
5. View results in a threaded message with detailed visibility reports

Note: The bot must be invited to a channel before the /visibility slash command will work in that channel.

Architecture

Workflow Overview

The application uses Vercel Workflow for durable execution, ensuring reliable long-running operations:

graph LR
    A[brandVisibility Workflow] --> B[createBrandContext]
    B --> C[generateQuestions]
    C --> D{Promise.all}
    D -->|Parallel| E1[checkVisibility #1]
    D -->|Parallel| E2[checkVisibility #2]
    D -->|Parallel| E3[checkVisibility #3]
    D -->|Parallel| E4[checkVisibility ...]
    E1 --> F[Aggregate Results]
    E2 --> F
    E3 --> F
    E4 --> F
    F --> G[postSlackMessage Thread]

    style A fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style B fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style C fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style D fill:#FFE5DB,stroke:#FF7A45,stroke-width:3px
    style E1 fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style E2 fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style E3 fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style E4 fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style F fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px
    style G fill:#FFE5DB,stroke:#FF7A45,stroke-width:2px

Loading

Workflow Steps

The main workflow (workflows/brand-visibility.ts) orchestrates:

1. Brand Context Generation (steps/create-brand-context.ts)

   • Uses AI to generate comprehensive brand profile
   • Structured output with description, industry, and key attributes

2. Question Generation (steps/generate-questions.ts)

   • AI generates relevant questions about the brand
   • Validates questions don't explicitly mention the brand name

3. Visibility Checks (steps/check-visibility.ts)

   • Runs parallel checks across all selected AI models
   • Each check analyzes if and where the brand appears in responses
   • Tracks mention status and position in response

4. Slack Messaging (steps/post-slack-message.ts)

   • Posts initial message with configuration summary
   • Creates threaded responses with progressive updates
   • Delivers final visibility report with statistics

Project Structure

ai-visibility-slackbot/
├── app/
│   └── api/
│       └── slack/
│           ├── command/      # Slash command handler
│           ├── interactive/  # Modal & interaction handler
│           └── webhook/      # Slack event webhooks
├── workflows/
│   ├── brand-visibility.ts   # Main workflow orchestration
│   └── steps/
│       ├── create-brand-context.ts   # AI brand context generation
│       ├── generate-questions.ts     # AI question generation
│       ├── check-visibility.ts       # AI visibility check
│       └── post-slack-message.ts     # Slack API integration
└── lib/
    ├── constants.ts          # Models and configuration
    ├── prompts.ts            # AI prompts
    ├── slack-blocks.ts       # Slack Block Kit builders
    ├── slack-client.ts       # Slack Web API client
    ├── slack-verify.ts       # Slack request verification
    ├── types.ts              # TypeScript types
    └── zod-schema.ts         # Validation schemas

Resources

• Vercel Workflow Documentation
• AI SDK Documentation
• Slack API Documentation
• Slack Block Kit Builder
• Vercel AI Gateway
• Next.js Documentation

License

MIT