前言

我使用的是硅基流动中通义千问免费的大模型：

我的技术栈使用的 Next14.2 全栈框架。

代码结构

需要使用的库：

npm i ai openai

目录结构：

基础测试页面 test-openai/page.tsx：

\'use client\';import { useChat } from \'ai/react\';export default function TestDeepseek() { const { messages, input, handleInputChange, handleSubmit } = useChat({ api: \'/api/chat/openai\', }); return ( 
 
Deepseek 聊天测试
 {messages.map(message => ( 
 
{message.role === \'user\' ? \'用户: \' : \'AI: \'}
 
{message.content}
 
 ))}    发送   
 );}

后端接口 app/api/chat/openai/route.ts：

import { handleChatRequest } from \'@/lib/openai\';import { NextRequest, NextResponse } from \'next/server\';import { MessageRequestBody } from \'@/types/chat\';// 设置最大响应时间为30秒export const maxDuration = 30;/** * 处理POST请求，使用QwQ-32B模型进行聊天 * * @param request NextRequest请求对象 * @returns 返回流式响应 */export async function POST(request: NextRequest) { try { // 从请求中获取消息数据 const { messages } = (await request.json()) as MessageRequestBody; if (!messages || !Array.isArray(messages)) { return NextResponse.json( { error: \'无效的消息格式\' }, { status: 400 } ); } // 调用QwQ-32B处理函数并返回流式响应 return handleChatRequest(messages); } catch (error) { console.error(\'处理QwQ-32B请求时出错:\', error); return NextResponse.json( { error: \'处理请求时发生错误: \' + (error instanceof Error ? error.message : String(error)) }, { status: 500 } ); }}

lib/openai.ts

openai 规范调用大模型可以参考 deepseek文档：https://api-docs.deepseek.com/zh-cn/

也可以参考硅基流动的文档：https://docs.siliconflow.cn/cn/userguide/quickstart

import { Message } from \'@/types/chat\';import { NextResponse } from \'next/server\';import OpenAI from \'openai\';// 创建自定义OpenAI实例，使用SiliconFlow APIconst openai = new OpenAI({ apiKey: process.env.SILICONFLOW_API_KEY!, baseURL: process.env.SILICONFLOW_API_BASE!, });/** * 处理聊天请求的函数 * 使用SiliconFlow API处理消息并返回流式响应 * * @param messages 聊天消息数组 * @returns 流式响应 */export async function handleChatRequest(messages: Message[]) { try { // 检查API密钥是否配置 if (!process.env.SILICONFLOW_API_KEY) { console.error(\'SiliconFlow API密钥未配置\'); return NextResponse.json( { error: \'未配置SiliconFlow API密钥，请在.env文件中设置SILICONFLOW_API_KEY\' }, { status: 500 } ); } // 检查API基础URL是否配置 if (!process.env.SILICONFLOW_API_BASE) { console.error(\'SiliconFlow API基础URL未配置\'); return NextResponse.json( { error: \'未配置SiliconFlow API基础URL，请在.env文件中设置SILICONFLOW_API_BASE\' }, { status: 500 } ); } // 将消息格式转换为OpenAI格式 const formattedMessages = messages.map(msg => ({ role: msg.role, content: msg.content })); // 使用SiliconFlow API创建流式响应 const response = await openai.chat.completions.create({ model: \'Qwen/QwQ-32B\', // 使用SiliconFlow提供的QwQ-32B模型 messages: formattedMessages, stream: true, }); // 创建并返回流式响应 const encoder = new TextEncoder(); const stream = new ReadableStream({ async start(controller) { // 处理流式响应 for await (const chunk of response) { const text = chunk.choices[0]?.delta?.content || \'\'; if (text) { controller.enqueue(encoder.encode(text)); } } controller.close(); }, }); return new Response(stream, { headers: { \'Content-Type\': \'text/plain; charset=utf-8\', \'Cache-Control\': \'no-cache\', }, }); } catch (error) { console.error(\'SiliconFlow API调用错误:\', error); return NextResponse.json( { error: \'调用SiliconFlow API时发生错误: \' + (error instanceof Error ? error.message : String(error)) }, { status: 500 } ); }}

.env

# SILICONFLOW API密钥SILICONFLOW_API_KEY=YOUR_API_KEYSILICONFLOW_API_BASE=https://api.siliconflow.cn/v1# 其他环境变量

演示