Vercel AI SDK：人気のフロントエンドフレームワークでAI搭載アプリケーションを構築する

はじめに

Vercel AI SDKは、React、Svelte、Vue、Solidなどのフレームワークを使用してAIアプリケーションを構築する開発者を支援するために、Vercelチームによって開発されたオープンソースツールです。OpenAI、Anthropic、Googleを含む複数の言語モデルプロバイダをサポートしています。 ジェミニ SDKは統一されたAPIインターフェースを提供し、開発者はプロジェクトにAI機能を迅速に統合することができます。SDKはまた、リアルタイムのストリーミング・レスポンスとユーザー・インターフェース生成機能を提供し、AIアプリケーションの開発プロセスを大幅に簡素化します。

機能一覧

• 統一APIインターフェース：OpenAI、Anthropic、Googleなど、複数のAIモデルプロバイダをサポート。
• リアルタイム・ストリーミング・レスポンス：テキスト・レスポンスをリアルタイムで生成・表示し、ユーザー・エクスペリエンスを向上。
• ユーザー・インターフェースの生成 反応 サーバーコンポーネントは動的なUIを生成する。
• マルチフレームワークサポート: React、Svelte、Vue、Solidと互換性があり、幅広い適用が可能です。
• コミュニティ・サポート: GitHub Discussions コミュニティを提供し、ユーザーが質問したり、プロジェクトを共有したりできます。

ヘルプの使用

取り付け

Vercel AI SDKを使い始めるには、以下のものが必要です：

1. 環境準備：
   • Node.js 18+とpnpmがインストールされていることを確認してください。
   • 新しいプロジェクトを作成するか、このSDKを既存のプロジェクトに追加します。
2. SDKをインストールします：
   • ターミナルを開き、プロジェクト・ディレクトリに移動する。
   • pnpm add aiコマンドを実行してSDKをインストールする。
3. 環境変数を設定する：
   • 使用しているAIモデルプロバイダ（OpenAIなど）に応じて、適切なAPIキーを設定します。通常、OPENAI_API_KEYやその他の関連する環境変数を.envファイルに追加する必要があります。

使用手順

基本的なテキスト生成

import { generateText } from 'ai'；
import { openai } from '@ai-sdk/openai'；
非同期関数 main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'), system: 'あなたはフレンドリーなユーザーです。
system: 'You're a friendly helper!,
prompt: 'なぜ空は青いの？,
});
console.log(text)；
}
main()；
import { generateText } from 'ai' ；
import { OpenAi } '@ai-sdk/openai' ；
非同期関数 Main () {
const {text} = generateTextを待つ ({)
model: OpenAi( 'GPT-4-Turbo' ).
system: 'You're a friendly assistant!,
prompt: 'どうして空は青いの？,
});
console.log(text); ；
}
main()；

• 説明: このコードでは、OpenAIのモデルを使用してテキストを生成する方法を示します。generateTextは、Vercel AI SDKが提供するコア機能の1つで、AI主導のテキスト応答をすばやく生成できます。

チャット・インターフェースの構築チャット・インターフェースを作りたい場合は、useChatまたはuseCompletionフックを使うことができる：

import { useChat } from 'ai/react' ；
関数 Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat()；
return (
<div>
<ul>
{messages.map((m, index) =&gt; (
<li key="{index}">{m.role}：{m.content}。</li>
))}
</ul>
<form onsubmit="{handleSubmit}">
<input 
value="{input}" 
onchange="{handleInputChange}" 
placeholder="何か言ってくれ"
/>
<button type="submit">送信</button>
<input type="hidden" name="trp-form-language" value="ja"/></form>
</div>
);
}
useChat } を 'ai/react' からインポートします；
function chat() {
const {message, input, handleinputChange, handlesubmit} = usechat()；
戻り値 (
3CDIV
3cul
{ messages.map((m, index) = (
キー = {インデックス} {m.role}: {m.content}/li
))}
3C/ul
3cform onsubmit = {handlesubmit}
3点
値

• 説明: この例では、useChatフックを使用して、リアルタイムの応答をサポートするチャットインターフェースを素早く構築する方法を示します。ユーザーがメッセージを送信するたびに、AI はリアルタイムで応答を生成して表示します。

UIの生成ユーザーインターフェイスを生成するために、Vercel AI SDKはReact Server Components（RSC）の使用をサポートしています：

import { streamUI } from 'ai/rsc' ；
非同期関数 submitMessage() {
'use server'; async function submitMessage()
const stream = await streamUI({
// ... ここに設定を記入
}); return { ui: stream.value }; const stream = streamUI({ // ...
return { ui: stream.value }; }.
}
インポート { streamUI } from 'ai/rsc' ；
非同期関数subtmessage( ) { { "サーバーを使用しています。
"サーバーを使用"；
const stream = streamUIを待つ ( {
// ... ここに設定を記入
});
戻り値 { ui : stream.value }.
}

• 説明: streamUI関数を使用して動的なUI要素を生成する方法を示す簡単な例です。RSC を使用すると、サーバーが直接 UI の状態を生成して管理できるため、よりスムーズなユーザー体験を提供できます。

高度な使用

• マルチモデルのサポート：モデルパラメータを変更することで、異なるAIモデルプロバイダを簡単に切り替えることができます。
• エラー処理とデバッグ：SDKのエラー処理メカニズムとデバッグ・ツールを使用して、AIアプリが安定して動作するようにします。

これらの手順と例を参考に、Vercel AI SDKが提供するパワーを活用したAIベースのアプリケーションを作り始め、開発の生産性を高めることができます。使用中に問題が発生した場合は、VercelのGitHub Discussionsでコミュニティサポートを受けることをお勧めします。