SlackエージェントをVercelにデプロイ！CodeSpacesと開発サンドボックスで始める実践ガイド

はじめに：なぜ今、Slackエージェントが注目されるのか

昨今、AIエージェントの構築が大きな話題となっています。多くの企業や開発者が様々なエージェントを生み出していますが、これらのエージェントがどこで「活動」し、どのように「有用性」を発揮するのかという問いに対する明確な答えは、まだ見つかっていないかもしれません。

Slackは、この問いに対する有力な答えとして、あらゆるエージェントの「ホーム」となることを目指しています。私たちは、特定のAIフレームワークやプラットフォームに縛られる「囲い込み戦略」ではなく、むしろあらゆるエージェントプラットフォームやフレームワーク間の「接続組織（connective tissue）」となることを重視しています。つまり、どのような環境でエージェントを構築していようとも、Slack上で簡単に利用できるようになるべきだと考えています。

なぜSlackがエージェントにとって理想的な場所なのでしょうか？それは、エージェントがその真価を発揮するために必要な「コンテキスト」が、すでにSlackの会話や意思決定の中に豊富に存在しているからです。Slackは、ユーザーとエージェントが自然に、かつ効果的にインタラクションするための優れたプラットフォームであり、私たちはそのための新しい基盤を継続的に構築しています。

本記事では、このコンセプトに基づき、Slack CLI、Boltフレームワーク（SDKs）、そしてデベロッパーサンドボックスといった基礎的なツールを活用し、Slackエージェントを構築し、Vercelにデプロイするまでの手順を実践的にご紹介します。わずか30分程度で、ゼロから実際に動作するSlackエージェントをVercelにデプロイする方法を体験できます。

開発環境の準備：GitHub Codespacesの設定

まずは、開発環境の準備から始めましょう。スムーズな学習体験のために、GitHub Codespacesを活用します。Codespacesは、必要なツールや環境変数が事前に設定された開発環境をクラウド上で提供してくれるため、ローカル環境のセットアップに時間を費やすことなく、すぐに開発に着手できます。

GitHub Codespacesへのアクセスと起動

以下のURLにアクセスしてください。 github.com/jmusshipworkshop

このリポジトリには、ワークショップで使用する全てのファイルと設定が用意されています。

1. リポジトリページにアクセス後、画面中央付近にある緑色の「Code」ボタンをクリックします。
2. ドロップダウンメニューから「Codespaces」タブを選択し、「Create codespace on main」をクリックして新しいCodeSpaceを起動します。

CodeSpaceの起動には数分かかる場合がありますので、この間に次のステップに進むための準備をしておきましょう。CodeSpaceが完全に起動すると、ウェブブラウザ上でVS Codeのような統合開発環境が立ち上がります。

Slackデベロッパーサンドボックスの作成

次に、構築するSlackエージェントをテストするための「安全な環境」であるSlackデベロッパーサンドボックスを作成します。これは、既存のワークスペースに影響を与えることなく、自由に開発・テストを行うための非常に重要なステップです。

Slackデベロッパープログラムへのサインアップ

Slackデベロッパーサンドボックスを利用するには、まずSlackデベロッパープログラムにサインアップする必要があります。サインアップは無料で、誰でも参加できます。

1. 以下のURLにアクセスしてください。 api.slack.com/developer-program
2. サインアップフォームに必要事項を記入し、登録を完了します。
3. 登録後、Slackから確認メールが届きますので、メール内のアクティベートボタンをクリックして設定を完了させます。

新しいサンドボックスのプロビジョニング

デベロッパープログラムの登録が完了したら、いよいよ新しいサンドボックスをプロビジョニングします。

1. アクティベート後、新しいサンドボックスをプロビジョニングするオプションが表示されます。
2. 「Use an event code」のオプションがある場合、イベントコードとして ship-c を入力してください。これは、サンドボックスにいくつかのプリロードされたデータ（チャンネルやアプリなど）をロードするために使用されます。
3. サンドボックスの「Name」と「Domain」を設定します。これらの名前はユニークである必要がありますので、もしエラーが発生した場合は、よりユニークな名前を試してください。
4. 「Set up the default template」オプションを選択すると、初期データが設定されたサンドボックスが提供され、すぐに開発を始めやすくなります。
5. これらの設定が完了したら、サンドボックスの作成を完了させます。

これにより、SlackのEnterprise Plusプランに相当するフル機能のSlack環境が手に入ります。ここでは、既存のワークスペースとは独立して、エージェントがどのように動作するかを安全に構築、テスト、理解することができます。

Slack CLIによる認証

CodeSpaceとデベロッパーサンドボックスの準備が整ったら、次にCodeSpace内で動作するSlack CLIを、作成したデベロッパーサンドボックスと連携させます。

Slack CLIのログインと認証

CodeSpaceに戻り、ターミナルを開いてください。Slack CLIはすでにCodeSpaceにプリロードされています。

1. ターミナルで次のコマンドを実行します。

   slack login
   

2. このコマンドを実行すると、ターミナルに特殊なスラッシュコマンドが表示されます。 例: /slack auth ....
3. このスラッシュコマンドをコピーし、作成したデベロッパーサンドボックス内の任意のチャンネルに貼り付けて送信します。
4. スラッシュコマンドを送信すると、認証フローが開始されます。表示される利用規約に同意し、指示に従って進めてください。
5. 認証プロセス中に、CodeSpaceに戻って入力するための「チャレンジコード」が表示されることがあります。このコードをコピーし、CodeSpaceのターミナルに貼り付けてEnterキーを押します。

このステップが完了すると、CodeSpace内のSlack CLIは、あなたのデベロッパーサンドボックスと認証された状態になります。これにより、CLIからサンドボックスに対してアプリの作成やデプロイなどの操作を行えるようになります。

Slackエージェントの作成とデプロイの準備

いよいよSlackエージェントの基盤を構築します。Slack CLIには、様々な種類のSlackアプリをスキャフォールド（雛形を生成）するためのテンプレートが豊富に用意されています。今回は、エージェント構築に特化したテンプレートを活用します。

Slackアプリのスキャフォールド

CodeSpaceのターミナルで、次のコマンドを実行して新しいSlackアプリを作成します。

slack create

このコマンドは、インタラクティブなウィザードを起動し、使用するテンプレートを選択するよう求めます。エージェント開発用のテンプレートを選択してください。これにより、Slackエージェントの基本的な構造と必要なファイルが自動的に生成されます。

テンプレートからスキャフォールドされたアプリケーションは、Boltフレームワーク（Slackアプリ開発用のSDK）をベースにしており、TypeScriptなどの言語で記述されています。生成されたコードを確認することで、Slackエージェントがどのようにユーザーからのイベントをリッスンし、応答を生成するかの基本的なパターンを理解できます。

アプリの実行とテスト

アプリがスキャフォールドされたら、CodeSpace内でそれを実行し、デベロッパーサンドボックスでテストする準備が整います。これにより、開発中にエージェントの動作を繰り返し確認し、必要に応じて修正を加えることができます。

具体的な実行コマンドやテストの手順は、選択したテンプレートや生成されたアプリケーションの構成によって異なりますが、一般的には、CodeSpaceのターミナルから適切なコマンド（例: npm run start や slack run）を実行することで、アプリケーションを起動できます。

起動したアプリケーションは、デベロッパーサンドボックスと連携し、エージェントがSlack上でどのように振る舞うかを実際に確認できるようになります。

Vercelへのデプロイ（概念説明）

最終的な目標は、このSlackエージェントをVercelにデプロイすることです。Vercelは、モダンなWebアプリケーションを簡単にデプロイできるプラットフォームであり、Slackエージェントのようなサーバーレスアプリケーションとの相性も抜群です。

今回のワークショップでは、CLIを使った基本的なセットアップまでをカバーしましたが、最終的にはVercelのデプロイメントツールやインテグレーション機能を利用して、構築したエージェントを本番環境（またはそれに近い環境）に展開します。Vercelは、Slackエージェントのデプロイを簡素化するための優れたツールやテンプレート（Vercel Connect、Slack agent skillなど）も提供しています。

まとめ：Slackエージェント開発の第一歩

本記事では、SlackエージェントをVercelにデプロイするための基礎的なステップを、GitHub CodespacesとSlackデベロッパーサンドボックスを活用しながらご紹介しました。

• GitHub Codespaces で開発環境を迅速にセットアップし、ローカル環境構築の手間を省きました。
• Slackデベロッパーサンドボックス を利用して、安全かつ自由にエージェントをテストできる専用環境を構築しました。
• Slack CLI を用いて、開発環境とSlackワークスペース間の認証を行い、エージェントの雛形をスキャフォールドしました。

Slackは、エージェントが最も効果的に機能する「コンテキスト」を提供し、ユーザーとの自然なインタラクションを可能にするプラットフォームです。私たちの目標は、エージェント開発者の皆様が、どのような技術スタックを使っていても、Slackをエージェントのホームとして活用できるよう、接続性と利便性を提供することです。

今回ご紹介したのは、Slackエージェント構築の「基礎的なパス」ですが、Vercelが提供するツール群（Slack agent skill、Vercel Connectなど）や、Slackが提供する様々なデベロッパーツールやプラグインなど、他にも多くの開発方法が存在します。ぜひ、今回の経験を足がかりに、さらに深掘りして、あなたのアイデアをSlack上で形にしてください。

参考動画

https://www.youtube.com/watch?v=cYzjlLdpzXA