我尝试使用OpenAI API [Next.js + Tailwind CSS]创建聊天机器人

$ npx create-next-app@最新的my-chatbot  -  typescript需要安装以下软件包：create-next-app@15.4.4可以继续吗？ （y）Y✔您想使用Eslint吗？ …否 /是✔您想使用尾风CSS吗？ …否 /是✔您想在`src /`目录中的代码吗？ …否 /是✔您想使用应用程序路由器吗？ （推荐）…否 /是✔您想将Turbopack用于“ Next Dev”？ …否 /是✔您想自定义导入别名（`@ /*'默认情况下）？ …否 /是在 / my-chatbot中创建一个新的next.js应用程序。使用NPM。 Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - @tailwindcss/postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 336 packages, and audited 337 packages in 14s 137软件包正在寻找资金运行“ NPM Fund”，以获取发现0个漏洞的详细信息，初始化了一个GIT存储库。成功！在 /my-chatbot npm通知NPM通知NPM新版本的NPM可用！ 11.0.0-> 11.5.1 npm通知ChangElog：https：//github.com/npm/cli/releases/tag/tag/v11.5.1 npm通知到更新运行：npm install -g npm@11.5.5.1 npm通知通知

CD my-chatbot

OpenAI_API_KEY = SK -... OpenAi_Model = gpt-4.1-Mini System_prompt =您是有用的助手。

NPM运行开发

“使用客户端”；导入{usestate，useref，usefeft}来自“ react”； //使用OpenAI API //使用OpenAI API导出默认函数HOME（）{const [input，setInput] = usestate（“”）; const [消息，setMessages] = USESTATE <{角色：“用户” | “助手”;内容：字符串} []>（[]）; const [加载，setloading] = usestate（false）; const chatendref = useref<HTMLDivElement> （无效的）; //将消息提交到API //将消息发送到API const sendmessage = async（）=> {if（！input.trim（））return; //将用户消息添加到聊天历史记录//将用户消息添加到历史记录const newMessages = [...消息，{requ：“用户”，content：input} as const，]; setMessages（newmessages）; setInput（“”）; setloading（true）; //将消息发送到后端API路由//将消息发送到后端API端点const res =等待fetch（“/api/chat”，{方法：“ post”，headers：{“ content-type”：“ application/json”}，身体：json.stringify（{message：input}） const data =等待res.json（）; //将助手响应添加到聊天历史记录//将助手响应添加到历史记录setMessages（（（prev）=> [... prev，{prole：“ assips：“ assips”，content：data.reply}，]，]，]）; setloading（false）; }; //滚动到更新时//更新时滚动到聊天视图的底部到聊天视图的底部到聊天视图的底部，当更新消息useseffect（（）=> {chatendref.current？.scrollintoview（{crathive：“ smooth”}）;}，[message，loading，loading]）;返回 （ <main className="h-screen flex items-center justify-center bg-gray-100 text-gray-800"><div className="flex flex-col w-full max-w-3xl h-[90vh] border-x border-gray-300 bg-white"> {/ *标头 */} {/ * header */}<header className="p-4 border-b text-lg font-semibold">聊天机器人-Chatgpt</header> {/ *聊天消息显示 */} {/ *聊天消息显示区域 */} <div className="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100"> {messages.map（（msg，idx）=>（（ <div key={idx} className={`flex ${ msg.role === "user" ? "justify-end" : "justify-start" }`} ><div className={`max-w-xl px-4 py-2 rounded-lg text-sm whitespace-pre-wrap ${ msg.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900" }`} > {msg.content}</div></div> ）} {/ *加载时键入指示器 */} {/ *加载过程中的指示器 */} {loading &&（（ <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse">思维...</div></div> ）<div ref={chatEndRef} /></div> {/ *输入区域 */} {/ *输入字段 */}<footer className="border-t p-4"><div className="flex gap-2"><input value={input} onChange={(e) => setInput（e.target.value）} onKeyDown = {（e）=> e.key ===“ enter” && sendmessage（）} className =“ flex-grow p-p <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >-p-p-p</button> -p-p border forder focus：undline focus：und focus：ring focus：ordendblue-300”</div></footer></div></main> ）； }

const [输入，setInput] = usestate（“”）; const [消息，setMessages] = USESTATE <{角色：“用户” | “助手”;内容：字符串} []>（[]）; const [加载，setloading] = usestate（false）;

const sendmessage = async（）=> {if（！input.trim（））return; const newMessages = [...消息，{crom：“用户”，content：input}]; setMessages（newmessages）; setInput（“”）; setloading（true）; const res =等待fetch（“/api/chat”，{方法：“ post”，标题：{“ content-type”：“ application/json”}，身体：json.stringify（{message：input}），}，}）; const data =等待res.json（）; setMessages（（（prev）=> [... prev，{角色：“助手”，content：data.reply}]）; setloading（false）; };

<div className="flex-1 overflow-y-auto p-6 space-y-4">{messages.map（（msg，idx）=>（（ <div key={idx} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}><div className={`max-w-xl px-4 py-2 rounded-lg text-sm whitespace-pre-wrap ${ msg.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900" }`}> {msg.content}</div></div> ））} {加载中 ＆＆ （ <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse">思维...</div></div> ）</div>

<footer className="border-t p-4"><div className="flex gap-2"><input value={input} onChange={(e) => setInput（e.target.value）} onKeyDown = {（e）=> e.key ===“ enter” && sendmessage（）} className =“ flex-grow p-2 border forder focus：upline none“ linehone” linehone“ linehone” line'One“ andline” thine <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >''</button></div></footer>

// src/app/api/chat/route.ts import {nextrequest，nextresponse}从“ next/server”; //发布聊天请求的邮政处理程序//处理聊天请求的邮政处理程序导出async函数帖子（req：nextrequest）{const {message} =等待req.json（）; //使用服务器端秘密密钥和参数调用OpenAI API // System_Prompt定义助手的个性，音调或行为。 //带有服务器端私钥的OpenAI和参数调用API // SYSTEM_PROMPT指定助手的个性，口语和行为。 const响应=等待fetch（“ https://api.openai.com/v1/chat/completions”，{方法：“ post”，标题：{授权：`bearer $ {bearer $ {process.env.openai_api_key} process.env.openai_model ||。 const data =等待响应.json（）; //从OpenAI //处理OpenAI的错误响应// openai // openai的错误响应// openai if（data.error）{console.error（data.error）;返回nextresponse.json（{回复：“发生错误。请稍后再试。”}，{状态：500}）; } //返回助手回复//返回助手回复返回nextresponse.json（{回复：data.choices [0] .message.content}）; }

从“ next/server”导入{nextrequest，nextresponse};导出异步函数帖子（req：nextrequest）{const {message} =等待req.json（）;

const响应=等待fetch（“ https://api.openai.com/v1/chat/completions”，{方法：“ post”，标题：{授权：`bearer $ {bearer $ {process.env.openai_api_key} process.env.openai_model ||。 const data =等待响应.json（）;

if（data.error）{console.error（data.error）;返回nextresponse.json（{回复：“发生错误。”}，{状态：500}）; }返回nextresponse.json（{回复：data.choices [0] .message.content}）; }