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';
async function main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'),
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
console.log(text);
}
main();
import { generateText } from 'ai';
导入{OpenAi } '@ai-sdk/openai' ;
异步 功能 主要的（ ） {
const {text} =等待generateText（{
模型：OpenAi（ 'GPT-4-Turbo' ），
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
控制台.log（text）;
}
主要的（）;

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

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

import { useChat } from 'ai/react';
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
<ul>
{messages.map((m, index) => (
<li key={index}>{m.role}: {m.content}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input 
value={input} 
onChange={handleInputChange} 
placeholder="Say something..."
/>
<button type="submit">Send</button>
</form>
</div>
);
}
import { useChat } from 'ai/react';
功能 聊天（ ） {
const {消息，输入，handleinputChange，handlesubmit} = usechat（）;
返回（
％3CDIV％3E
3cul％3E
{messages.map（（m，index）=％3E（
％3cli键= {index}％3E {m.role}：{m.content}％3C/li％3E
))}
％3C/ul％3E
％3cform onsubmit = {handlesubmit}％3E
％3点
价值

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

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

import { streamUI } from 'ai/rsc';
async function submitMessage() {
'use server';
const stream = await streamUI({
// ... 这里填写你的配置
});
return { ui: stream.value };
}
import { streamUI } from 'ai/rsc';
异步 功能 subtmessage （ ） {
“使用服务器” ；
const stream =等待流ui（{
// ... 这里填写你的配置
});
返回{ ui ：stream.value};
}

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

高度な使用

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

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