## AI SDK 4 的重大变化 // ❌AI SDK 4（旧版）从“ai”导入{useChat}； const { 消息，handleSubmit，输入，handleInputChange } = useChat({ api: "/api/聊天", }); // ✅ AI SDK 5（新）从“@ai-sdk/react”导入{useChat}；从“ai”导入{DefaultChatTransport}； const { 消息, sendMessage } = useChat({ 传输： new DefaultChatTransport({ api: "/api/chat" }), }); ## 客户端设置从“@ai-sdk/react”导入{useChat}；从“ai”导入{DefaultChatTransport}；从“反应”导入{useState}；导出函数 Chat() { const [输入，setInput] = useState(""); const { 消息，sendMessage，isLoading，错误 } = useChat({ 传输： new DefaultChatTransport({ api: "/api/chat" }), }); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!input.trim()) 返回； sendMessage({ 文本: 输入 }); 设置输入（“”）； }; 返回（

{messages.map((消息) => ( <消息键={message.id} 消息={message} /> ))}

）； } ## UI消息结构（v5） // ❌ 旧：message.content 是一个字符串 // ✅ 新：message.parts 是一个数组界面UI消息{ id：字符串；角色：“用户”| 「助理」| “系统”; 部分：消息部分[]； } 输入消息部分= | { 类型：“文本”；文本：字符串} | { 类型：“图像”；图片：字符串} | { type: "工具调用"; toolCallId：字符串；工具名称：字符串；参数：未知 } | { type: "工具结果"; toolCallId：字符串；结果：未知}； // 从零件中提取文本函数 getMessageText(消息: UIMessage): 字符串 { 返回消息.parts .filter((part): 部分是 { type: "text"; text: string } => part.type === "text") .map((部分) => 部分.文本) .join(""); } // 渲染消息函数消息（{消息}：{消息：UIMessage}）{ 返回（

{message.parts.map((部分, 索引) => { if (part.type === "文本") { 返回

{part.text}

; } if (part.type === "图像") { 返回

; } 返回空值； })}

）； } ## 服务器端（路由处理程序） // 应用程序/api/chat/route.ts 从“@ai-sdk/openai”导入{openai}；从“ai”导入{streamText}；导出异步函数 POST(req: Request) { const { messages } = wait req.json(); 常量结果=等待streamText({ 型号：openai（“gpt-4o”），消息，系统：“你是一个得力助手。”, }); 返回结果.toDataStreamResponse(); } ## 与浪链一起 // 应用程序/api/chat/route.ts 从“@ai-sdk/langchain”导入{ toUIMessageStream }；从“@langchain/openai”导入 { ChatOpenAI }；从“@langchain/core/messages”导入{ HumanMessage, AIMessage }；导出异步函数 POST(req: Request) { const { messages } = wait req.json(); const 模型 = new ChatOpenAI({ 型号名称：“gpt-4o”，流媒体：真实， }); // 将UI消息转换为LangChain格式 const langchainMessages = messages.map((m) => { const 文本 = m.parts .filter((p) => p.type === "文本") .map((p) => p.text) .join(""); 返回m.role ===“用户” ？新的人类消息（文本） : new AIMessage(文本); }); const 流 = 等待 model.stream(langchainMessages); 返回 toUIMessageStream(stream).toDataStreamResponse(); } ## 使用工具进行流式传输从“@ai-sdk/openai”导入{openai}；从“ai”导入{streamText，工具}；从“zod”导入{z}；常量结果=等待streamText({ 型号：openai（“gpt-4o”），消息，工具：{ 获取天气：工具({ 描述：“获取某个位置的天气”，参数： z.object({ location: z.string().describe("城市名称"), }), 执行：异步（{位置}）=> { // 获取天气数据 return { 温度: 72, 条件: "晴天" }; }, }), }, }); ## useCompletion（文本生成）从“@ai-sdk/react”导入{useCompletion}；从“ai”导入{DefaultCompletionTransport}； const { 完成、完成、正在加载 } = useCompletion({ 传输： new DefaultCompletionTransport({ api: "/api/complete" }), }); // 触发完成等待完成（“写一首俳句”）； ## 错误处理 const { 错误，消息，sendMessage } = useChat({ 传输： new DefaultChatTransport({ api: "/api/chat" }), onError: (错误) => { console.error("聊天错误：", error); toast.error("发送消息失败"); }, }); // 显示错误 {错误&&(

{错误消息}

)}

艾SDK 5

包含技能