Vercel AI SDK
諸々のAIサービスと連携した機能を簡易に実装できるようにするlibrary
Next.jsやReact以外もサポートしてる
npmのpackage名はai
$ npm i ai
空いてたんだmrsekut.icon
普通にすごい
この辺をサポートしてる
Google
現在サポートされてるのは、Chatと生成UIがほぼほぼって感じだmrsekut.icon
whisper周りはまだなさそう
「rsc」ってなに
react server componentsか
useCompletionは、テキスト補完とプロンプト入力の状態を処理するために設計されたユーティリティです。このツールは、ストリーミング経由で API エンドポイントから新しいトークンを受信すると UI が自動的に更新される、テキスト補完機能をアプリケーションに統合する必要がある場合に役立ちます。
typoを自動修正するエディタとかを作れる
2つのStateに分けて考える
AIState
AIStateは、LLMが読み取る必要のあるすべてのコンテキストのJSON表現である。チャットアプリの場合、AIStateは一般的にユーザーとアシスタントの間のテキストの会話履歴を保存します。実際には、各メッセージのcreatedAtのような他の値やメタ情報を格納するために使用することもできます。デフォルトのAIStateは、サーバーとクライアントの両方でアクセス/変更することができます。DeepL.icon
UIState
UIStateは、アプリケーションがUIを表示するために使うものだ。これは完全にクライアントサイドのステートで（useStateに非常に似ている）、LLMから返されたデータやUIエレメントを保持することができる。このステートはどのようなものでも良いが、サーバーからアクセスすることはできない。DeepL.icon
例
code:app/api/chat/route.ts
import { OpenAIStream, StreamingTextResponse } from 'ai';
export async function POST(req: Request) {
const { messages } = await req.json();
const response = await openai.chat.completions.create({
model: 'gpt-3.5-turbo',
stream: true,
messages,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}
code:ts
import { useChat } from 'ai/react';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
{messages.map(m => (
<div key={m.id} className="whitespace-pre-wrap">
{m.role === 'user' ? 'User: ' : 'AI: '}
{m.content}
</div>
))}
</div>
);
}