Vercel AI SDK 3.0の新機能「Generative UI」をサンプルコードで試してみた

こんにちは、筧( @TakaakiKakei )です。

2024年3月1日にVercel AI SDK 3.0がリリースされました。 本ブログでは、当該リリースにおける注目の新機能を紹介します。

Vercel AI SDK とは

Vercel AI SDKは、開発者がAI駆動のユーザーインターフェースをJavaScriptやTypeScriptで構築するためのオープンソースライブラリです。 OpenAI、Azure OpenAI、LangChain、Mistral、AWS Bedrock、Google Gemini、Cohere、Anthropic、Replicate、Hugging Face、Fireworks.ai、Perplexity、Inkeepなど、多くのAIプラットフォームやモデルとの統合を簡単に行うことができます。

• Documentation - Vercel AI SDK
• vercel/ai: Build AI-powered applications with React, Svelte, Vue, and Solid

Vercel AI SDK 3.0の新機能

Vercel AI SDK 3.0の注目の新機能は、Generative UIのサポートです。 Generative UIは、AIが生成したコンポーネントを使ってユーザーインターフェースを構築するテクノロジーです。 元々、Vercelがv0というサービスで提供していたものでしたが、この度、オープンソース化されてVercel AI SDKで利用可能になりました。

v0 by Vercel

何が嬉しいか

従来の生成AIアプリでは、AIが生成したテキストをそのまま表示するか、マークダウンを使って表示することが一般的でした。 しかし、Vercel AI SDK 3.0のGenerative UIを使うことで、AIが生成したコンポーネントを使ってユーザーインターフェースを構築することができるようになります。

下図が利用イメージです。テキスト入力に対して、AIが生成したリッチなコンポーネントで回答されていることがわかります。

AI-native user experiences

What if ChatGPT could return interactive components, personalized for you? What if they had memory to understand your previous chat history?

What if it was open source today? 👀 https://t.co/ViWjTDUqG4 pic.twitter.com/x8z4yQdyjO

— Lee Robinson (@leeerob) March 1, 2024

ローカルで動かしてみる

サンプルコードをローカルで起動する

下記の公式リポジトリ内に、Generative UIを使ったサンプルコードがあったのでこちらを利用してみます。

vercel/ai: Build AI-powered applications with React, Svelte, Vue, and Solid

ローカルに適当なフォルダを作成して、以下のコマンドを実行して、サンプルコードをダウンロードします。

npx create-next-app --example https://github.com/vercel/ai/tree/main/examples/next-ai-rsc next-ai-rsc

以下のREADMEに従って、ローカルで動かしていきます。

ai/examples/next-ai-rsc at main · vercel/ai

プロジェクトフォルダに移動します。

cd next-ai-rsc

OpenAI's Developer Platformにサインアップします。 OpenAI's dashboardにアクセスして、APIキーを取得します。

env.exampleから.env.localを作成します。

cp env.example .env.local

.env.localの値を取得したAPIキーに変更します。

OPENAI_API_KEY="xxxxxxxxxxxx"

以下のコマンドを実行して、依存パッケージをインストールします。

pnpm install

以下のコマンドを実行して、ローカルサーバーを起動します。

pnpm dev

<http://localhost:3000> にアクセスしてアプリの画面が出たら成功です。

ブラウザで動作確認

サンプルコードを動かした時の動画 pic.twitter.com/KIOoqi6uPZ

— Takaaki Kakei (@TakaakiKakei) March 4, 2024

以下文章での説明です。

流行の株式を教えてくださいと質問すると、3つの株式の情報が表示されます。

一番左の株式の情報をクリックすると、その株式の詳細情報が表示されます。

AAPLの株式を10株購入したいですと質問すると、購入する株数を入力するフォームが表示されます。

Purchaseボタンを押下すると、購入が完了した旨が表示されます。

このように、テキストのみの表示だけでなく、AIが生成したコンポーネントを使ってユーザーインターフェースを構築することができました！

補足

以下の公式サイトでも、Generative UIを使ったデモを試すことができます。 ぜひ実際に触ってみて、新しいユーザーエクスペリエンスを体感してみてください。

また、Generative UIに関するAPIリファレンスは、以下のリンクから参照することができます。 私もこれからプロダクトに組み込みながら理解を深めていきたいと思います。

API Reference - Vercel AI SDK

おわりに

最後まで読んでいただきありがとうございます。 Vercel AI SDK 3.0の新機能について、簡単に紹介しました。 Generative UIを使うことで、AIが生成したコンポーネントを使ってユーザーインターフェースを構築することができるようになりました。 これまでにない新しいユーザーエクスペリエンスを提供することができそうでワクワクしますね。 それではまた！