Chat SDK のご紹介

VVercel
컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00(アップビートな音楽)
00:00:02皆さん、こんにちは。VercelのCTO、Malteです。
00:00:16本日はご参加いただきありがとうございます。
00:00:181月初旬、私たちは全社員にある指令を出しました。
00:00:21「自分のアウトプットを倍増させる方法を考えろ」というものです。
00:00:24そして、社員が作り上げたものには、今も驚かされ続けています。
00:00:27ほぼすべてのチームが、複雑な業務を処理するためのエージェントを構築し、
00:00:30そのほとんどは、誰でも使えるSlackボットでした。
00:00:34しかし、ある問題に直面しました。
00:00:35全員が同じような「付随的な作業」を
00:00:38何度も繰り返していたのです。
00:00:40誰かがエージェントを作ると、
00:00:41次にSlackの複雑な仕様を理解しなければなりません。
00:00:43それは見た目以上に困難な作業です。
00:00:45スレッドやリアクション、
00:00:47ボットのメンション方法、状態管理などを理解する必要があります。
00:00:50すると今度は、誰かがこう尋ねます。
00:00:51「そのエージェントをGitHubと連携できない?」
00:00:53すると、GitHubのAPIを使って
00:00:55また同じプロセスを一からやり直しです。
00:00:56ロジックは同じなのに、プラットフォーム固有のコードが異なるのです。
00:00:59私たちはすぐに、チャットAPIというものは
00:01:01表面上は似ているように見えても、
00:01:03中身は全く別物だということを学びました。
00:01:05Slackはネイティブ・ストリーミングをサポートしています。
00:01:06LLMがトークンを生成するそばから、
00:01:09メッセージに直接流し込むことができます。
00:01:10Discordでは、投稿、編集、投稿、編集を繰り返す必要があります。
00:01:14GitHubにはストリーミングが一切ありません。
00:01:16Slackにはモーダルがありますが、Discordにはありません。
00:01:18Microsoft Teamsのリアクションは読み取り専用です。
00:01:21これらは単なる癖ではなく、
00:01:23各プラットフォームがどう機能するかという根本的な違いです。
00:01:26ですから、たった一つのシンプルなエージェントであっても、
00:01:28異なるツールで使えるようにするだけで、
00:01:31膨大な量のロジックが必要になってしまいます。
00:01:33まさに悪夢です。
00:01:34そして、これはVercelだけの問題ではありません。
00:01:36あらゆる企業が、すでに業務が行われている場所に
00:01:38どうやってエージェントを届けるか、
00:01:40頭を悩ませることになるでしょう。
00:01:42それはチャット、コードレビュー、課題管理など多岐にわたります。
00:01:45AI SDKは、モデルプロバイダーにおける同様の問題を解決しました。
00:01:48一度コードを書けば、
00:01:50APIの違いをすべて吸収してくれます。
00:01:51GPT、Claude、Geminiのどれを呼び出す場合でもです。
00:01:54Chat SDKは、対話型エージェントに対して同じことを行います。
00:01:58Slack、GitHub、Linear、Discord、Telegram、
00:02:01WhatsAppといった複数のプラットフォームにまたがる
00:02:04エージェント操作のための統合APIです。
00:02:06エージェントを構築すれば、Chat SDKが
00:02:09ユーザーが普段使っているアプリへと届けてくれます。
00:02:11Fernandoはここ数週間、
00:02:15v0のバックグラウンド・エージェントを開発してきました。
00:02:16彼が、なぜChat SDKがそのスタックにおいて
00:02:18重要な役割を果たしたのかを説明します。
00:02:21(アップビートな音楽)
00:02:24(音楽継続)
00:02:28v0のバックグラウンド・エージェントを開発し始めた時、
00:02:34私の目標は、Slackからv0をタグ付けして
00:02:36プルリクエストを作成できるようにすることでした。
00:02:38どんなコードベースでも、どんな言語でも、
00:02:40バックグラウンドで動作する
00:02:42汎用的なコーディング・エージェントを作りたかったのです。
00:02:45そこで開発に着手し、
00:02:47v0 Slackアプリの最初のバージョンを
00:02:49友人たちに送りました。
00:02:51すると、彼らが最初に聞いたのは、
00:02:53「これ、Linearの課題でも使える?」
00:02:56「GitHubのPRコメントからタグ付けできる?」ということでした。
00:02:58それは、初めてモバイルアプリをリリースした時に、
00:03:02「Webでも使えますか?」と聞かれ始めた時を思い出させました。
00:03:05v0はあらゆる場所で動作しなければならない、と確信しました。
00:03:09期待の基準が変わったのです。
00:03:11そこで私は選択を迫られました。
00:03:14v0エージェントをプラットフォームごとに一つずつ作るのか、
00:03:18それとも全プラットフォーム共通の
00:03:22統合APIで一度だけ書くのか。
00:03:24いわば、チャットエージェント版のReact Nativeのようなものです。
00:03:27実は、私は何年も
00:03:30React Nativeでクロスプラットフォーム・アプリを構築してきました。
00:03:34この種の問題は、私にとって馴染み深いものでした。
00:03:36そこで登場したのがChat SDKです。
00:03:39Chat SDKのおかげで、
00:03:40私はv0エージェントの構築そのものに集中でき、
00:03:43各プラットフォーム特有のAPIに
00:03:45頭を悩ませる時間を減らすことができました。
00:03:48では、内部の仕組みはどうなっているのでしょうか?
00:03:50Mattから詳しく説明してもらいましょう。
00:03:53(アップビートな音楽)
00:03:55皆さん、こんにちは。
00:04:11Fernandoと同じように、まずはSlackから始めましょう。
00:04:14自分のボットにメンションを送ると、
00:04:16非常にシンプルな「hello world」という返信が返ってきます。
00:04:21革新的でしょう? 分かっています。
00:04:23コードを見ていただければ、
00:04:24このボットを作るのがいかに簡単だったかが分かります。
00:04:28やったことは、新しいチャット・インスタンスを作成し、
00:04:32メンション時のリスナーを追加して、
00:04:35スレッドに「hello world」を投稿するよう設定しただけです。
00:04:38これだけです。
00:04:39しかし、私たちは開発者にテキストだけのボットを
00:04:43作ってほしいわけではありません。
00:04:45各プラットフォームの利点を活かした、リッチな体験を作ってほしいのです。
00:04:48そして、開発者はJSXが大好きです。
00:04:51そこで、Chat SDKにJSXを導入しました。
00:04:55これで、慣れ親しんだコンポーネントを使って構築できます。
00:04:58ボタンを2つ追加してみましょう。
00:04:59こちらをご覧ください。
00:05:03「hello world」というメッセージを、
00:05:05「継続」ボタンと「キャンセル」ボタンが付いた
00:05:10「hello world」カードに変更します。
00:05:11また、アクション・リスナーも追加します。
00:05:14ボタンがクリックされたら、
00:05:17ユーザーのフルネームを添えて「継続をクリックしました」と表示させます。
00:05:19Slackに戻って、もう一度ボットにメンションを送ります。
00:05:24期待通り、構築したものがそのまま表示されました。
00:05:29コンポーネントがネイティブにレンダリングされています。
00:05:32「継続」をクリックすると、ボットが即座にアクションを処理します。
00:05:36さて、ここからが面白いところです。
00:05:41これと全く同じ体験をDiscordでも実現したい場合は?
00:05:45Discordアダプターを追加する。
00:05:47それだけで終わりです。
00:05:48Discordのチャンネルに戻って、
00:05:55ボットにメンションを送ると、
00:05:57全く同じUIがDiscord上でネイティブに表示されます。
00:06:02新しいプラットフォームをサポートするのに、コード変更はゼロです。
00:06:07素晴らしいですよね。
00:06:08次はエージェントの話をしましょう。
00:06:10これはAI SDKを使って構築したシンプルなエージェントです。
00:06:14エージェントにはストリーミングが必要です。
00:06:17Chat SDKなら、ストリーミングも簡単です。
00:06:20ストリームを作成して、スレッドに投稿する。
00:06:23それだけです。
00:06:24Slackのストリーミング方法や、
00:06:27Discordの部分更新の仕組みを調べる必要はありません。
00:06:30一つのAPIを使うだけです。
00:06:32Slackでボットにメンションを送ると、
00:06:35回答がネイティブにストリーミング返信されるのが分かります。
00:06:40でも、これだけではありません。
00:06:42WhatsAppやTelegramなどのプラットフォームで、
00:06:45エージェントにダイレクトメッセージを送りたい場合は?
00:06:49Chat SDKなら簡単です。
00:06:52ダイレクトメッセージのリスナーと、必要なアダプターを追加します。
00:06:56これで、DMを送った誰もが同じ体験を得られます。
00:07:02Web版のWhatsAppを開いて、
00:07:06「やあ、調子はどう?」と送ってみます。
00:07:08すると、構築したエージェントが
00:07:12ダイレクトメッセージに対して返信してくれます。
00:07:14エージェントが完成したので、
00:07:16プルリクエストを作成してみましょう。
00:07:18その前に、
00:07:20WhatsAppでチャットしていたのと同じエージェントが
00:07:24コードレビューもしてくれたらどうでしょう?
00:07:25GitHubアダプターを追加するだけです。
00:07:28ここに来て、GitHubアダプターを追加すれば、
00:07:32エージェントを全く新しいプラットフォームに連れてこれます。
00:07:35GitHubを開いて、このプルリクエストを見てみましょう。
00:07:39コメント欄でエージェントをメンションすると、
00:07:42先ほど作成したのと同じダイレクトメッセージ・リスナーを使って
00:07:45返信してくれます。
00:07:46Slack、Discord、WhatsApp、Telegram、GitHub。
00:07:51これらのAPIがいかに異なっているか、考えてみてください。
00:07:56しかし、一つのファイルと数行のコードだけで、
00:07:59それらすべてにエージェントを対応させることができました。
00:08:01Chat SDKを使えば、エージェント体験を一度構築するだけで、
00:08:06単一のAPIであらゆる場所にデプロイできます。
00:08:09ドキュメントやテンプレートについては、chat-sdk.devをご覧ください。
00:08:14ご清聴ありがとうございました。
00:08:15皆さんが何を作るのか、楽しみにしています。
00:08:17(アップビートな音楽)

Key Takeaway

Chat SDKは、プラットフォームごとの複雑なAPIの違いを吸収し、一度の構築で多様なチャットツールにAIエージェントをデプロイ可能にする革新的な統合ツールキットです。

Highlights

各チャットプラットフォーム(Slack, Discord, GitHub等)のAPI仕様や挙動の根本的な違いが、開発者の大きな負担となっている現状を指摘しています。

Vercelが提供する「Chat SDK」は、複数のチャットプラットフォームにまたがるエージェント操作を統合する統一APIです。

UI構築にJSXを採用しており、ボタンやカードなどのリッチなコンポーネントをプラットフォーム固有のコードなしで実装可能です。

AI SDKとの連携により、トークンのストリーミング生成も単一のメソッドで全プラットフォームに対応できます。

一度エージェントのロジックを書けば、アダプターを追加するだけでWhatsApp、Telegram、GitHubなどへ即座に展開可能です。

Timeline

イントロダクションと開発の背景

VercelのCTOであるMalte氏が、社内でAIエージェントを構築する際のリサーチ結果を共有しています。多くのチームがSlackボットを作成しましたが、スレッド管理やリアクション対応など、プラットフォーム固有の「付随的な作業」に多大な時間を費やしていることが判明しました。Slack、Discord、GitHub、Teamsは表面上似ていても、ストリーミングの可否やモーダルの有無といった根本的な違いがあり、開発者にとって大きな障壁となっていました。この「悪夢」のような状況を解決するために、チャットAPIの差異を吸収する新しいソリューションの必要性が強調されています。あらゆる企業が業務の場にエージェントを届けるための課題を抱えているという背景が語られます。

Chat SDKの概念とv0での活用事例

AI SDKがモデルプロバイダーの違いを解決したように、Chat SDKは対話型エージェントの展開先を統一します。エンジニアのFernando氏は、v0のバックグラウンド・エージェントを開発した際の経験を振り返ります。当初Slack用に作成したエージェントに対し、ユーザーからLinearやGitHubでの利用を求める声が即座に上がったと言及しています。これはモバイルアプリがWeb対応を求められる状況に似ており、エージェントをプラットフォームごとに個別に開発するのは非効率です。Chat SDKを「チャットエージェント版のReact Native」と例え、本来のロジック構築に集中できるメリットを解説しています。

技術デモンストレーションとJSXの導入

Matt氏が実際のコードを用いて、Chat SDKのシンプルさと柔軟性を実演します。まずはSlackでの「hello world」から始まり、リスナーの設定がいかに簡単であるかを示しています。特筆すべきはJSXの導入であり、開発者は使い慣れたコンポーネント形式でボタン付きのカードUIなどを定義できます。ボタンクリック時のアクションリスナーも数行で記述でき、Slack上でネイティブなUIが即座に動作する様子が公開されています。さらに、Discordアダプターを追加するだけで、コードを変更せずに全く同じUIと機能がDiscord上でも再現されます。これにより、プラットフォームごとのUI実装にかかる時間が劇的に削減されることが証明されています。

ストリーミング対応とマルチプラットフォーム展開

AIエージェントに不可欠なストリーミング機能の実装方法について解説が行われます。開発者は各ツールのストリーミング仕様を調べる必要はなく、単一のAPIでトークンの逐次表示が可能です。デモではWhatsAppやTelegramへの展開も紹介され、ダイレクトメッセージを通じてエージェントと対話する様子が披露されます。さらにGitHubアダプターを追加することで、同じエージェントがコードレビューやPRコメントへの返信も行えるようになります。最後は「一度構築すれば、あらゆる場所にデプロイできる」というメッセージで締めくくられ、公式ドキュメントへの案内が行われます。このセクションでは、最小限のコード変更で最大限のリーチを獲得できるChat SDKの真価が示されています。

Community Posts

View all posts