Transcript
00:00:00[音声なし]
00:00:30[音声なし]
00:01:00.
00:01:20皆さん、こんにちは。今週の
00:01:22Vercelコミュニティセッションへようこそ。私はVercelコミュニティプラットフォームチームのAnshumanです。コミュニティスペースで私を見かけたことがあるかもしれません。Xで視聴されている方は、community.vercel.comに参加して、ライブチャットで交流したり質問したりできます。今回が初めての参加でチャットボックスが見当たらないという方もご心配なく。サインインボタンを使って、VercelアカウントでVercelコミュニティにサインインしてください。
00:01:52そうすればチャットに参加できるようになります。セッションの最後にQ&Aの時間を設けていますので、質問を用意してチャットボックスに投稿してください。最後に、チャットボックスを利用する際は、誰もが安心して過ごせる場所にするため、敬意を持って行動し、行動規範に従うようお願いします。本日はVercelのコンテンツエンジニアであるBenningを迎え、Chat SDKを使ってフォームボットを構築する方法を紹介してもらいます。
00:02:22皆さん、こんにちは。
00:02:23こんにちは、Benning。
00:02:24ようこそ。
00:02:25こんにちは。
00:02:26チャットにお招きできて嬉しいです。
00:02:30お招きいただきありがとうございます。素晴らしい同僚が紹介してくれた通り、私はVercelのコンテンツエンジニアです。また、当社のオープンソースChat SDKのリードエンジニアの一人でもあります。これは最新のオープンソースソリューションの一つで、単一のコードベースからチャットボットを構築し、Slack、Teams、DSPなど、
00:02:49公式およびコミュニティアダプターを使って、その他多くのプラットフォームにデプロイできます。
00:02:59本日は、アップステッシュ（Upstash）のRedis、Resend、そしてもちろんChat SDKを内部で使用した、オープンソースのフォームボットテンプレートを紹介します。フォーム送信内容をSlackに転送し、そこで編集したり、スパムとしてマークしたり、チームの誰かに転送したりして、チームの誰もがSlackから直接フォーム送信を管理できるようにします。
00:03:28素晴らしいですね。
00:03:32ええ、さっそく始めましょう。
00:03:34わかりました。
00:03:42これが今回のテンプレートです。チャット欄にリンクを貼りますので、ライブ配信を見ながらクローンして、今すぐ、あるいは後でVercel上にセットアップしてみてください。
00:03:58問題が発生した場合は、私を含むコミュニティチームがサポートします。バグが発生したり、このテンプレートに限らずボットのセットアップでヘルプが必要な場合は、Chat SDKのリポジトリにGitHub Issueを立てていただいても構いません。
00:04:22Vercelのすべてのオープンソーステンプレートに統合されている機能として、ワンクリックデプロイボタンがあります。文字通りボタンをワンクリックするだけで、GitHub組織とプロジェクトを作成するVercelチームを選択するUIが表示されます。
00:04:50名前を適当に入力します。
00:04:56作成ボタンをクリックすると、裏側でテンプレートの詳細がフェッチされます。
00:05:06次のステップで、Chat SDKボットの環境変数を設定します。
00:05:17ナレッジベースにこのテンプレートに対応したガイドも用意しています。
00:05:27ライブ配信中、または配信後にこのガイドを活用して、あなただけのフォームボットを構築してください。このテンプレートには、Slackアプリマニフェストと呼ばれるものも含まれています。
00:05:47Slackアプリを作成する際に「Create new app」から「From a manifest」を選び、ワークスペースを選択すると、ここにマニフェストを貼り付けるだけで、手動で設定を行うことなくSlackアプリの設定全体を生成できます。
00:06:13配信中ですので、これらの項目を直接入力することは控えます。
00:06:27VercelプロジェクトはすでにResendとUpstash Redisと統合されています。これはVercelマーケットプレイスのプロバイダーの一つで、APIキーや設定を手動で管理することなくRedisストレージをセットアップできます。
00:06:53請求もすべてVercelを通じて管理されます。UpstashとVercelからの個別の請求ではなく、すべてVercelで一本化されます。
00:07:05[詳細はvercel.com/marketplaceから確認でき](https://www.google.com/search?q=https://%E8%A9%B3%E7%B4%B0%E3%81%AFvercel.com/marketplace%E3%81%8B%E3%82%89%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D)、他にも利用可能なプロバイダーをご覧いただけます。汎用的なRedisプロバイダーもあります。Redisが必要な場合は、テンプレートを使ってSupabaseデータベースなどをバックエンドとして構築することも可能です。これもマーケットプレイスのパートナーです。
00:07:34テンプレート自体の話に入りますが、ここにデモ用のSlackワークスペースを用意しました。テスト用の送信を行ってみます。
00:08:04送信されると、このように表示されます。フォームデータはすべて、あなたやチームが読みやすい形式に分解されています。
00:08:21メールリンクやウェブサイトリンクなど、該当するリンクはクリック可能です。送信内容を編集したい場合、例えばリードがタイプミスをした場合や、チームメンバーが内部フォームを入力する際に間違ったチーム名を入力した場合、あるいはフォーム本文にメモを追加したい場合、「Edit and forward」ボタンをクリックできます。
00:08:49するとモーダルが開くので、ここですべてのデータを変更できます。Jane Smithの名前をJane Jonesに変えたり、Benny Triangleに変えたりして「Forward」をクリックします。
00:09:09Chat SDKはSlackアダプターを使用してカードを更新します。送信内容がBenによってBennyFSL.comに転送されたことがわかります。
00:09:23ここがフォーム送信そのものです。メールはResendの組み込みHTML処理を使用してスタイル設定されており、Reactを使ってメールをデザインすることもできます。
00:09:40Resendは「React Email」というオープンソースライブラリを保守しています。Claude、CodeX、v0、または好みのAIエージェントにReact Emailで美しいメールをデザインさせ、それをResendで解析し、各メールサービスプロバイダー向けのHTMLに変換します。
00:10:04そして、ほんの数行のコードでResend Chat SDKアダプターにプラグインできます。
00:10:16では、質問を受け付けましょう。
00:10:22Chat SDKの能力がよくわかりますね。好きなアダプターを使えるということですね。アダプターといえば、Slackの代わりにTelegramやDiscordのような別のものを使えるのでしょうか？
00:10:40はい、可能です。Chat SDKチーム自身が保守している公式アダプターが用意されており、私だけでなく、CTOのMaltaなども関わっています。
00:10:54これらが私たちが保守する公式アダプターセットです。Slack、Microsoft Teams、Google Chat、Discord、GitHub、Linear、Telegram、WhatsAppが利用可能です。そして明日には新しいウェブアダプターもリリースされます。ウェブサイトに埋め込んだり、社内向けに活用できるチャットUIも実現できます。
00:11:19つまり、Chat SDKの単一コードベースアプローチをウェブUIにも拡張できます。たった一つのコードベースから、ウェブサイト上のライブチャットでも、Slackでも、どこでも動くボットを作成できるのです。
00:11:37また、ベンダー公式アダプターも用意しています。これらは私たちではなく、ベンダー自身によって保守されているアダプターです。
00:11:48Resendには独自のアダプターがあるので、自動、またはVercel Cron Jobsを使ってメールに返信するボットを作成できます。
00:11:59PhotonやDeeperも独自のアダプターを保守しており、iMessageにボットを接続できます。iMessageからボットにGitHubプルリクエストの作成を依頼できます。
00:12:14CursorエージェントSDKと統合して、iMessageアプリの中にCursorエージェントを常駐させることも可能です。
00:12:23CursorエージェントSDKとChat SDKを使えば、iMessageを送るだけでコーディングができます。
00:12:30最近追加されたベンダー公式アダプターの一つに「Zurnio」があります。これは本質的に統合ソーシャルメディアAPIで、Instagram、Facebook、Telegram、Redditなどに単一のAPIエンドポイントから接続できます。
00:12:51ボットをRedditで実行することも可能です。Subredditを運営していて維持管理にヘルプが必要な場合、私たちのSDKとZurnioを使ってAIで管理できます。
00:13:06最後に、コミュニティアダプターがあります。これはプラットフォーム側ではなく、個々の開発者が保守しているアダプターです。
00:13:22SunBlueの場合、SunBlueチームではなく個人の開発者が保守しています。自分でアダプターをコントリビュートしたい場合、詳細なドキュメントが用意されており、その手順を解説しています。
00:13:42手動で構築することも、Chat SDKスキルやnpmパッケージに含まれているドキュメントを参照して、エージェントに独自のアダプター設定をガイドさせることも可能です。自社プラットフォーム向けでも、
00:14:04XやTwitch、あるいはアダプターをサポートできそうな任意のプラットフォーム向けに、ディレクトリに載せたい場合など、何でも可能です。
00:14:18素晴らしい。Chat SDKの利点はまさにそこですね。インストールすればエージェントがスキルで即座に扱えるようになるため、深い技術的な詳細まで理解しなくてもいいのです。
00:14:35学びながら進めることもできますが、エージェントを使えばさらに高速にこなせます。ランディングページにある通り、人間向けとエージェント向けの両方があり、素早く開始できます。
00:14:46チャットから質問ですが、メッセージが送信されるSlackチャンネルは事前設定されています。メッセージの送信先をユーザーが動的に選択するように設定できますか？
00:15:00はい、可能です。テンプレートを利用するケースとして、セールスチームが動的なワークフローを構築する事例を見てきました。新規販売が発生した際、エージェントに送信内容を分析させ、5つのSlackチャンネルのいずれかにルーティングします。各チャンネルには異なるセールスチームが割り当てられています。
00:15:27エンタープライズのリードならこのチャンネル、非営利やスタートアップなら別のチャンネル、といった具合です。2、3行のコードを追加するだけで、フォームの送信内容やAIエージェントの分析結果に基づいてチャンネルを変更するようにテンプレートを調整できます。
00:15:52なるほど。コード側でチャンネルリストを持つことで、動的に設定できるということですね。
00:16:02ええ。Slackアプリの権限にもよりますが、Slackアプリを作るのは自分なので設定次第です。その上で、コード側のロジックで送信先を決定できます。
00:16:14よくわかりました。チャットからのもう一つの質問ですが、Slackの代わりにTelegramを使う場合、どのくらいのコードを書き換える必要がありますか？
00:16:29文字通りコード1行を変更するだけです。ランディングページで見せましたが、WhatsAppやGitHubを使わない場合、コードを1行変えるだけです。
00:16:48後からGoogle ChatやWhatsApp、GitHub、Microsoft Teamsを追加したくなった場合も、コード1行を追加するだけです。もちろん、GitHubアプリのセットアップや機密資格情報をVercelプロジェクトに追加するなど、裏側での設定は必要です。
00:17:10しかしそれ以外、コード自体は同じままです。アダプターをインポートするだけで、本当にそれだけで済みます。
00:17:21コードをもっと変更する必要があるのは、プラットフォーム固有の機能を組み込みたい場合だけです。例えばGitHubでボットを使い、リポジトリやプルリクエスト、GitHub Issueの現在の内容をフェッチしたい場合などです。
00:17:41Linearでチケットの情報をフェッチする場合なども同様です。それ以外では、プラットフォームの追加や削除は1行のコード変更で済みます。
00:17:58Chat SDKの真骨頂ですね。セールスチームがAIエージェントを使ってフォームをセットアップしている話がありましたが、人間が介入するエージェントフローについても触れられていましたね。
00:18:12そのユースケースについて、ユーザーがどのように実装できるか話してもらえますか？
00:18:28ええ、現在取り組んでいることの一つが、Chat SDKと「Vercel Workflows」の互換性向上です。これは無制限の期間、TypeScript関数を実行できる、耐久性のあるTypeScriptワークフローを作成するソリューションです。
00:18:56ChatボットをVercel Workflowsに接続し、人間による承認プロセスを組み込めます。例えば、新しいリードが入ってきて有効だと判断した場合、Slackのカード上で「承認」をクリックすれば、そのリードに対してオンボーディングメールが送られます。
00:19:19あるいは「却下」をクリックすれば、別のメールフローが送られるといった具合です。Vercel Workflowsに接続されているため、完全に耐久性が保証されており、タイムアウトやサーバーレス関数のクラッシュなどを心配する必要はありません。
00:19:43タイムアウトも組み込めるので、承認をクリックしてから30分待機し、リードにメールを送る、といった処理も可能です。
00:19:58素晴らしいですね。他にもChat SDKを使って実際にどのような活用事例があるか、ご自身で観察されたり、SNSなどで見かけたものはありますか？
00:20:19CMSソリューションを提供するSanityが、Chat SDKを使ってコンテンツエージェントを再構築しました。顧客が独自のSlackにSanityコンテンツエージェントを追加し、Chat SDKボットに組み込まれたSanityエージェントを使ってCMS全体を管理できるようにしたのです。
00:20:48Sanityチームは、本来なら数ヶ月のエンジニアリングと数千行のコードが必要なプロジェクトを、たった数百行のコードで実現しました。
00:21:03今ではSanityの顧客全員がSlackでエージェントにプロンプトを送るだけでCMSを管理できます。他にも、オープンソースのメンテナーがGitHub IssueのトリアージにChat SDKボットを使っている事例もあります。
00:21:22特にソロのメンテナーにとって、毎日溜まっていくGitHub Issueやプルリクエストの対応は最大の苦労の一つです。
00:21:36私たち自身も苦労していることですが、Chat SDK、AI SDK、AI Gatewayを使い、Vercelのエコシステムを活用して、GitHub Issueを自動でトリアージしたり、PRを自動でオープンしたりするのは、素晴らしいユースケースです。
00:22:04小規模なビジネスを運営していて、返金依頼や返品対応、顧客の正当性の確認が必要な場合、AIエージェントにリクエストを前処理させ、人間がモデレーターとして最終判断する、という事例も考えられます。
00:22:26コミュニティ運営も同様です。ユーザーをサポートしたい一方で、スパムのような行動を制限したい場合もあります。
00:22:44モデレーションにChat SDKを使うのはとても良い方法で、ワークフローを簡略化しながらチームやコミュニティをサポートできます。
00:22:57本当に良いユースケースですね。UIについてですが、Slackで見たようなUIはどのように構築されるのですか？プラットフォーム間でカスタマイズできるのでしょうか？
00:23:12できます。Chat SDKは、開発者が書くべきコード量をさらに削減するために、カードやボタン、あらゆるUIを送ると、自動的にプラットフォームのネイティブ形式に変換します。
00:23:33Slackでボタンを送ればネイティブのSlackボタンとしてレンダリングされます。TeamsやGoogle Chatも同様です。
00:23:44そのUI要素をサポートしていないプラットフォーム、例えばボタンをレンダリングできないLinearのような場合には、マークダウンに変換します。
00:23:59他のプロバイダーについても同様です。これにより、各プラットフォーム向けのカスタムロジックを書く必要がなくなります。内部的な変換はすべて私たちが処理します。
00:24:15さらに機能を強化中で、開発者やエージェントが少しのコードを書くだけで、数十のプラットフォームで機能する強力なエージェントを作成できるようにしていきます。
00:24:34VercelプラグインとChat SDKスキルを使って、たった一つのプロンプトで強力なマルチプラットフォームボットを作成している個人も見てきました。
00:24:51興味深いですね。Chat SDKはTypeScriptライブラリですが、TypeScriptプロジェクト間であれば移植可能ですか？
00:25:06例えばこのテンプレートはHonoですが、Next.jsやNuxtでも使えますか？
00:25:15はい、可能です。Chat SDKのウェブサイトには、様々なエージェント構築をカバーするリソースを用意しています。
00:25:25ウェブサイトには、Next.jsで構築された、ボタン一つでGitHubプロジェクトをデプロイできるSlackエージェントのガイドもあります。
00:25:40今日デモしたフォームボットはHonoで、DiscordサポートボットはNuxtを使用しています。
00:25:50これらのガイドとテンプレートを使って、上に構築していけばよいのです。
00:26:00Chat SDKで使用するフレームワークに制限はありません。Next.js、Hono、Nuxt、お好みのものを使ってください。
00:26:12もし使おうとしているフレームワークで問題が発生したり、サポートされていない場合は、GitHub Issueを立てたりプルリクエストを送ってください。バグ修正やフレームワークサポートの拡張を喜んで行いますので、お好みのフレームワークでChat SDKを使ってください。
00:26:41素晴らしいですね。Chat SDKとWorkflowsを組み合わせれば無限の可能性が広がりますね。
00:26:53以上が今のところの質問です。後から質問を思いついた場合は、community.vercel.comのフォーラムに投稿して、プロジェクトを紹介したり、Chat SDKで作っているものを見せてください。
00:27:08本当に素晴らしいですね。Benny、今日はお越しいただきありがとうございます。素晴らしいデモとテンプレートでした。
00:27:18ご視聴ありがとうございました。質問があればGitHubリポジトリやVercelコミュニティウェブサイトまでお寄せください。Chat SDKへの貢献もいつでも歓迎しています。数ヶ月で60人近いコントリビューターが集まりました。
00:27:41大小問わずどんな貢献でも大歓迎です。機能追加の希望やバグを見つけたら、ぜひ送ってください。喜んで検討します。
00:28:01実装したいユースケースがある場合も、コミュニティで教えてください。一緒に作り上げたいと思います。Benny、来てくれてありがとう。
00:28:12コミュニティの皆さん、時間を共有していただきありがとうございました。何か新しいことを学んで楽しんでいただけたら嬉しいです。今後のセッションに参加したい場合は、[community.vercel.com/liveの詳細を確認してください](https://www.google.com/search?q=https://community.vercel.com/live%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)。
00:28:27ミートアップもありますので、[対面イベントに興味がある方はcommunity.vercel.com/meetupsをチェックしてください](https://www.google.com/search?q=https://%E5%AF%BE%E9%9D%A2%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AB%E8%88%88%E5%91%B3%E3%81%8C%E3%81%82%E3%82%8B%E6%96%B9%E3%81%AFcommunity.vercel.com/meetups%E3%82%92%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)。Vercel Shipのチケットも発売中です。世界中で開催されています。
00:28:42開催場所をチェックして、[vercel.com/shipからチケットを入手してください](https://www.google.com/search?q=https://vercel.com/ship%E3%81%8B%E3%82%89%E3%83%81%E3%82%B1%E3%83%83%E3%83%88%E3%82%92%E5%85%A5%E6%89%8B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)。本日は以上です。コミュニティでお会いしましょう。
00:28:57コミュニティでお会いしましょう。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video