Slack Channel activity heatmap and dead channel finder

A real-time Slack workspace analytics app that scans channels, analyzes message activity, identifies top contributors, and delivers rich reports — both as a Block Kit message posted to Slack and as an interactive Chart.js dashboard in your browser.

This API integration was generated using APIMatic's Code Generation platform with the Slack Web API Portal.

Demo

Generating this app with Context Plugins

This application was generated using Claude Code with the APIMatic Context Plugin.

Prompt Used

Build me a "Slack Channel Analytics" app using the Slack MCP server you have access to. The app should connect to a Slack workspace using a bot token, scan all channels by paginating through conversations.list and fetching message history for each channel using conversations.history for the last 30 days, then do two things: post a rich Block Kit report directly into a Slack channel AND generate a beautiful browser-based report. The Slack report should include a summary of total channels, dead channels, most active channels with top contributors, and a text-based activity heatmap using emoji squares. The browser report should show the same data but with proper charts using Chart.js — top merchants bar chart, activity heatmap as a color grid, dead channels list, and top contributors. Handle cursor-based pagination properly for both conversations.list and conversations.history so no channels or messages are missed. Respect Slack rate limits — if you get rate limited, wait for the Retry-After duration before retrying. Use conversations.info to get channel metadata like member count and topic. Resolve user IDs to display names using users.list. The Block Kit message should use section, context, and divider blocks — if it exceeds Block Kit limits, post overflow as a thread reply. Use the Slack MCP server for all API details — exact method parameters, response schemas, pagination patterns, Block Kit block structure — don't guess anything. Make it runnable with npm install and npm start with SLACK_BOT_TOKEN and SLACK_CHANNEL_ID.

Time Invested

[30 minutes]

Features

• Full Workspace Scan — Automatically discovers all public and private channels the bot has access to, with cursor-based pagination.
• Message History Analysis — Fetches message history for a configurable period (1–365 days) and aggregates activity metrics per channel.
• Top Contributors Ranking — Resolves user IDs to display names via the Users API and ranks the most active members across the workspace.
• Activity Heatmap — Generates a day-of-week vs. hour-of-day heatmap showing when your workspace is most active.
• Dead Channel Detection — Identifies channels with zero user messages in the analysis period, helping you clean up your workspace.
• Slack Block Kit Report — Posts a beautifully formatted report directly to a Slack channel with emoji heatmaps, bar charts, and contributor rankings.
• Interactive Browser Dashboard — Serves a Chart.js-powered HTML dashboard with bar charts, a color-coded heatmap grid, and a dead channels table.
• Rate Limit Handling — Automatically respects Slack's Retry-After headers and backs off gracefully when rate limited.
• Web-Based Configuration — No environment variables or config files needed; enter your bot token and channel ID through a browser form.

Quick Start

Prerequisites

• Slack Bot Token — A bot token (xoxb-...) from a Slack app you own. See Setting Up Your Slack App below.
• Node.js 18+
• Git

Setting Up Your Slack App

1. Go to api.slack.com/apps and click Create New App > From scratch.

2. Give it a name (e.g. "Channel Analytics") and select your workspace.

3. Navigate to OAuth & Permissions and add the following Bot Token Scopes:

   Scope	Purpose
   channels:read	List public channels
   channels:history	Read message history in public channels
   groups:read	List private channels
   groups:history	Read message history in private channels
   chat:write	Post the analytics report to a channel
   users:read	Resolve user IDs to display names

4. Click Install to Workspace and authorize the app.

5. Copy the Bot User OAuth Token (starts with xoxb-). You will enter this in the web UI when running the app.

6. Invite the bot to channels you want to scan by typing /invite @YourBotName in each channel. The app can only read history from channels the bot is a member of.

Finding Your Channel ID

The report will be posted to a Slack channel of your choice. To find a channel's ID:

1. Open Slack and right-click the channel name.
2. Click View channel details.
3. Scroll to the bottom — the Channel ID looks like C0ABC123DEF.

Installation

# Clone the repository
git clone https://github.com/apimatic/slack-sample-app.git
cd Slack-Sample-App

# Install dependencies
npm install

# Build the TypeScript source
npm run build

# Start the app
npm start

The app will launch a local server and open your browser to http://localhost:3000.

Usage

1. Open http://localhost:3000 in your browser (opens automatically).
2. Enter your Bot Token (xoxb-...).
3. Enter the Report Channel ID (C...) where you want the Slack report posted.
4. Set the Analysis Period in days (default: 30).
5. Click Run Analysis.
6. The app will scan your workspace, post a Block Kit report to Slack, and display an interactive dashboard in your browser.

How It Works

The application is built on the slack-apimatic-sdk-sdk TypeScript SDK generated by APIMatic. On startup, it launches an Express web server that serves a configuration form. When the user submits their credentials, the backend kicks off a three-stage pipeline: scan, report, and visualize.

In the scan stage, the analytics engine calls conversations.list to discover all channels in the workspace, then iterates through each channel the bot is a member of, calling conversations.history to fetch messages for the configured time period. Simultaneously, it calls users.list to build a user ID-to-display-name mapping. All three API calls use cursor-based pagination to handle workspaces of any size, and rate limit errors (HTTP 429) are handled automatically by reading the Retry-After header and sleeping before retrying.

In the report stage, the aggregated data is transformed into Slack Block Kit blocks — including summary metrics, ranked channel and contributor lists with bar visualizations, an emoji-based activity heatmap, and a dead channels section. These blocks are posted to the specified channel via chat.postMessage, automatically splitting into multiple messages if the 50-block limit is exceeded.

In the visualize stage, the same data is rendered into a self-contained HTML page using Chart.js. This includes interactive bar charts for top channels and contributors, a color-coded heatmap grid with hover tooltips, and a searchable dead channels table. The HTML is returned to the browser, replacing the config form with the live dashboard.

Project Structure

Slack-Sample-App/
  src/
    index.ts          # Express server, web UI, and entry point
    analytics.ts      # Core engine: channel scanning, message fetching, user resolution
    slackReport.ts    # Block Kit report builder and Slack poster
    htmlReport.ts     # Chart.js HTML dashboard generator
    types.ts          # TypeScript interfaces for all data models
  scripts/
    postinstall.js    # SDK compatibility patch (auto-runs on npm install)
  dist/               # Compiled JavaScript output
  package.json
  tsconfig.json

Tech Stack

• Runtime: Node.js + TypeScript
• Slack SDK: slack-apimatic-sdk-sdk (APIMatic-generated)
• Web Server: Express 5
• Charts: Chart.js 4 (loaded via CDN)
• Styling: Custom dark-themed CSS (no frameworks)