Tutorial Membangun AI Agent Slack dengan Chat SDK dan AI SDK
AP
Adrian Prat

Dipublikasikan 6 Juni 2026

Tutorial Membangun AI Agent Slack dengan Chat SDK dan AI SDK

ai
ai-agent
node-js
node-js
nextjs
nextjs

Membangun AI agent yang bisa berinteraksi langsung di Slack bukan lagi hal yang memerlukan infrastruktur kompleks. Dengan Chat SDK dan AI SDK dari Vercel, kamu bisa membuat agent yang merespon mention, menjaga history percakapan, dan memanggil tool secara autonomus dalam waktu singkat. Kombinasi kedua SDK ini menghilangkan boilerplate yang biasanya membuat pengembangan chatbot menjadi rumit: parsing webhook, verifikasi signature, formatting pesan, dan tracking thread.

Tutorial ini akan memandu kamu membangun Slack agent dari nol menggunakan Next.js, TypeScript, Redis untuk state, dan Claude via Vercel AI Gateway. Agent akan menggunakan ToolLoopAgent yang memungkinkan model memanggil tool dan bertindak berdasarkan hasilnya secara otomatis. Hasil akhirnya adalah agent production-ready yang bisa di-deploy ke Vercel dalam hitungan menit.

Sumber: Vercel Knowledge Base

Prasyarat dan Setup

Sebelum mulai, pastikan kamu memiliki:

  • Node.js 18 atau lebih baru

  • pnpm, npm, atau yarn

  • Workspace Slack dengan izin menginstall aplikasi

  • Instance Redis (bisa local atau hosted seperti Upstash)

  • Akun Vercel dengan AI Gateway API key

Buat aplikasi Next.js baru dan install dependency yang diperlukan:

pnpm dlx create-next-app@latest slack-agent
cd slack-agent
pnpm add chat @chat-adapter/slack @chat-adapter/state-redis ai zod

Chat SDK adalah unified TypeScript SDK untuk membangun chatbot di berbagai platform seperti Slack, Microsoft Teams, Discord, dan lainnya. Kamu mendaftarkan event handler seperti onNewMention dan onSubscribedMessage, kemudian SDK akan merutekan webhook masuk ke handler yang tepat. Slack adapter menangani verifikasi webhook, parsing pesan, dan Slack API. Redis state adapter melacak thread yang sudah di-subscribe dan mengelola distributed locking untuk menghindari race condition saat menangani pesan konkuren.

Langkah 1: Membuat Aplikasi Slack

Kunjungi api.slack.com/apps dan buat aplikasi baru menggunakan manifest. Manifest berikut memberikan izin dasar yang dibutuhkan agent:

{
  "display_information": { "name": "AI Agent", "description": "AI-powered assistant" },
  "features": {
    "bot_user": { "display_name": "AI Agent", "always_online": true },
    "slash_commands": []
  },
  "oauth_config": {
    "scopes": { "bot": ["app_mentions:read", "chat:write", "channels:history"] }
  },
  "settings": {
    "event_subscriptions": {
      "request_url": "https://your-url/api/webhooks/slack",
      "bot_events": ["app_mention"]
    }
  }
}

Setelah membuat aplikasi, install ke workspace dan catat Bot User OAuth Token serta Signing Secret. Kedua credential ini akan disimpan di environment variable. Token OAuth digunakan untuk mengirim pesan ke Slack, sedangkan Signing Secret digunakan untuk memverifikasi bahwa webhook yang diterima benar-benar berasal dari Slack.

Langkah 2: Konfigurasi Environment

Buat file .env.local di root project:

SLACK_BOT_TOKEN=xoxb-your-token
SLACK_SIGNING_SECRET=your-secret
REDIS_URL=redis://localhost:6379
AI_GATEWAY_API_KEY=your-vercel-ai-gateway-key

Chat SDK akan membaca SLACK_BOT_TOKEN dan SLACK_SIGNING_SECRET secara otomatis. Redis adapter membaca REDIS_URL, sedangkan AI SDK menggunakan AI_GATEWAY_API_KEY untuk autentikasi ke Vercel AI Gateway. Alternatifnya, jika di-deploy ke Vercel, kamu bisa menggunakan autentikasi OIDC yang lebih aman karena tidak memerlukan API key statis.

Langkah 3: Definisikan Tool untuk Agent

Tool adalah fungsi yang bisa dipanggil oleh model LLM. Definisikan tool di file lib/tools.ts:

import { z } from 'zod';

export const weatherTool = {
  description: 'Get current weather for a city',
  inputSchema: z.object({ city: z.string() }),
  execute: async ({ city }) => {
    const res = await fetch(`https://api.weather.com/v1/current?city=${city}`);
    return res.json();
  }
};

export const docsTool = {
  description: 'Search internal documentation',
  inputSchema: z.object({ query: z.string() }),
  execute: async ({ query }) => {
    return { results: [`Doc about ${query}`] };
  }
};

Setiap tool memiliki description yang menjelaskan ke model kapan harus menggunakannya, inputSchema berupa Zod schema untuk validasi input, dan execute yang merupakan fungsi yang berjalan saat model memanggil tool. Deskripsi tool adalah bagian kritis: model menggunakan deskripsi ini untuk memutuskan tool mana yang harus dipanggil berdasarkan konteks percakapan. Semakin jelas deskripsinya, semakin akurat pemilihan tool.

Langkah 4: Membuat Agent dengan ToolLoopAgent

Buat file lib/bot.ts untuk menginisialisasi agent dan Chat instance:

import { createChat } from 'chat';
import { slack } from '@chat-adapter/slack';
import { redis } from '@chat-adapter/state-redis';
import { ToolLoopAgent } from 'ai';
import { weatherTool, docsTool } from './tools';

export const agent = new ToolLoopAgent({
  model: 'anthropic/claude-sonnet-4.6',
  tools: [weatherTool, docsTool]
});

export const chat = createChat({
  platform: slack({}),
  state: redis({ url: process.env.REDIS_URL })
});

ToolLoopAgent menjalankan loop otonom: model menghasilkan teks atau memanggil tool, SDK mengeksekusi tool, mengembalikan hasil ke model, dan mengulang sampai model selesai. Chat SDK menangani streaming secara otomatis ke Slack. Saat kamu menggunakan model string seperti anthropic/claude-sonnet-4.6 dan host aplikasi di Vercel, AI SDK akan secara otomatis merutekan request melalui AI Gateway.

Chat SDK menerima AsyncIterable<string> sebagai pesan, sehingga kamu bisa langsung melewatkan fullStream dari agent ke thread.post() untuk streaming real-time di Slack. fullStream dipilih daripada textStream karena mempertahankan paragraph breaks antar langkah tool calling.

Langkah 5: Menangani Event Mention dan Thread

Buat API route di app/api/webhooks/[platform]/route.ts:

import { chat } from '@/lib/bot';
import { toAiMessages } from 'chat';

export async function POST(req: Request) {
  return chat.handle(req, {
    onNewMention: async ({ thread, message }) => {
      await thread.subscribe();
      const stream = await agent.run(message.text);
      await thread.post(stream);
    },
    onSubscribedMessage: async ({ thread, message }) => {
      const history = await thread.allMessages();
      const messages = toAiMessages(history);
      const stream = await agent.run(message.text, { messages });
      await thread.post(stream);
    }
  });
}

onNewMention berjalan ketika seseorang mention bot. Handler ini subscribe ke thread agar bot bisa merespon pesan lanjutan. onSubscribedMessage mengambil seluruh history percakapan, mengkonversinya ke format AI SDK, dan mengirimkannya ke agent agar percakapan tetap berkesinambungan. Opsi waitUntil memastikan handler selesai diproses setelah HTTP response terkirim, yang diperlukan di platform serverless agar fungsi tidak berhenti terlalu awal.

Langkah 6: Testing dan Deployment

Jalankan server development:

pnpm dev

Expose ke internet menggunakan tunnel seperti ngrok:

ngrok http 3000

Update Request URL di Slack app settings dengan URL ngrok yang diikuti /api/webhooks/slack. Invite bot ke channel dengan /invite @AI Agent, kemudian mention bot dengan pertanyaan. Jika berhasil, kamu akan melihat respons streaming muncul di thread. Cobalah meminta agent menggunakan tool, misalnya: What is the weather in San Francisco?

Untuk production, deploy ke Vercel dengan vercel deploy. Update URL Slack ke domain production. Vercel AI Gateway mendukung autentikasi OIDC, sehingga kamu tidak perlu menyimpan API key statis di production. Periksa juga apakah scope app_mentions:read sudah ada dan Event Subscriptions Request URL sudah benar. Slack mengirim challenge request saat pertama kali mengatur URL, jadi server harus sudah berjalan.

Kesimpulan

Chat SDK dan AI SDK menghilangkan banyak boilerplate yang biasanya dibutuhkan untuk membangun chatbot di Slack. Dengan abstraksi yang tepat, kamu bisa fokus pada logika bisnis dan tool yang ingin disediakan, bukan pada infrastruktur webhook dan parsing pesan. Untuk skala besar, pertimbangkan menggunakan toolpick untuk mengindeks tool dan memilih hanya tool yang relevan di setiap step, mengurangi token usage dan meningkatkan akurasi pemilihan tool. Toolpick menggunakan kombinasi keyword matching dan semantic embeddings untuk menemukan tool terbaik, dengan biaya re-ranking sekitar $0.0001 per step.

Baca tutorial lengkap di Vercel Knowledge Base. Dokumentasi Chat SDK tersedia di chat-sdk.dev. Untuk menambahkan platform lain seperti Microsoft Teams atau Discord, cukup registrasi adapter tambahan tanpa mengubah logika handler atau agent.