Vercel AI SDK

諸々のAIサービスと連携した機能を簡易に実装できるようにするlibrary

Next.jsやReact以外もサポートしてる

$ npm i ai

普通にすごい

この辺をサポートしてる

Google

whisper周りはまだなさそう

「rsc」ってなに

react server componentsか

2つのStateに分けて考える

AIState

UIState

例

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>

);

}

convertToModelMessages

Schema Discovery

Schema Definition