ai-visibility-slackbot

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

ai-visibility-slackbot

★ 9 Open GitHub ↗

🤖 Slack bot for tracking brand visibility across multiple AI models using Vercel Workflow and AI SDK.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://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.

![Workflow Execution Timeline](https://raw.githubusercontent.com/Blazity/ai-visibility-slackbot/main/assets/run.png)

## 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](https://vercel.com/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](https://vercel.com/docs/ai-gateway/authentication#creating-an-api-key).

### Step 2: Create Your Slack App (Partial Setup)

1. Go to [api.slack.com/apps](https://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

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FBlazity%2Fai-visibility-slackbot&env=SLACK_BOT_TOKEN,SLACK_SIGNING_SECRET,AI_GATEWAY_API_KEY&envDescription=Required%20environment%20variables%20for%20the%20Slack%20bot&envLink=https%3A%2F%2Fgithub.com%2FBlazity%2Fai-visibility-slackbot%23step-2-create-your-slack-app-partial-setup)

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

```bash
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:

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

### 3. Start Development Server

```bash
pnpm dev
```

The app will be available at [http://localhost:3000](http://localhost:3000).

### 4. Expose Local Server (for Slack webhooks)

Use [ngrok](https://ngrok.com/) to create a public URL for your local server:

```bash
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:

```mermaid
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
```

### 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](https://vercel.com/docs/workflow)
- [AI SDK Documentation](https://sdk.vercel.ai/docs)
- [Slack API Documentation](https://api.slack.com)
- [Slack Block Kit Builder](https://app.slack.com/block-kit-builder)
- [Vercel AI Gateway](https://vercel.com/docs/ai-gateway)
- [Next.js Documentation](https://nextjs.org/docs)

## License

MIT

ai-visibility-slackbot

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README