如何让ChatGPT返回格式化响应及实现Next.js与OpenAI API流式响应

一、让ChatGPT返回项目符号格式响应的方法 #

• 明确格式约束提示：在prompt中直接指定输出规则，例如：

  请以5个独立的项目符号（每个以-开头）列出Next.js的5种核心用途，禁止使用段落或其他格式，每个项目符号仅包含单条用途描述。

• 添加格式示例引导：如果基础提示无效，加入示例让模型模仿：

  请列出Next.js的5种用途，严格按照以下格式输出：

  • 服务端渲染(SSR)优化首屏加载速度
  • 静态站点生成(SSG)构建静态页面
  • [补充剩余3条]

• 指定Markdown列表输出：直接要求输出Markdown无序列表：

  请以Markdown无序列表的形式，列出Next.js的5种用途，每个列表项对应一条用途，不要额外说明。

• 利用模型结构化输出参数：对于GPT-4o等支持response_format的模型，可通过API参数强制约束，例如指定输出为JSON格式后，在prompt中要求返回包含列表的JSON，再由前端解析成项目符号；或直接要求返回Markdown格式并结合参数验证。

二、Next.js中实现OpenAI API响应流式传输 #

1. 服务端（App Router Route Handler） #

在app/api/stream/route.ts中创建流式接口：

import { OpenAI } from 'openai';
import { NextResponse } from 'next/server';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(request: Request) {
  const { prompt } = await request.json();

  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: prompt }],
      stream: true, // 开启流式传输
    });

    // 将OpenAI流转换为SSE格式
    const stream = new ReadableStream({
      async start(controller) {
        const encoder = new TextEncoder();
        for await (const chunk of response) {
          const content = chunk.choices[0]?.delta?.content || '';
          if (content) {
            controller.enqueue(encoder.encode(`data: ${JSON.stringify({ content })}\n\n`));
          }
        }
        controller.close();
      },
    });

    return new NextResponse(stream, {
      headers: {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
      },
    });
  } catch (error) {
    return NextResponse.json({ error: '流式传输失败' }, { status: 500 });
  }
}

2. 客户端（React组件） #

创建组件实时接收流并更新UI：

'use client';

import { useState } from 'react';

export default function StreamChat() {
  const [inputPrompt, setInputPrompt] = useState('');
  const [chatContent, setChatContent] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setChatContent('');

    const response = await fetch('/api/stream', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: inputPrompt }),
    });

    if (!response.body) return;

    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      const chunk = decoder.decode(value);
      // 解析SSE格式数据
      const dataLines = chunk.split('\n\n').filter(line => line.startsWith('data:'));
      for (const line of dataLines) {
        const data = JSON.parse(line.slice(5));
        setChatContent(prev => prev + data.content);
      }
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputPrompt}
          onChange={(e) => setInputPrompt(e.target.value)}
          placeholder="输入问题..."
        />
        <button type="submit">发送</button>
      </form>
      <div className="chat-box">{chatContent}</div>
    </div>
  );
}

关键注意事项 #

• 确保OpenAI API密钥已在.env.local中配置（OPENAI_API_KEY=你的密钥）。
• 流式传输依赖浏览器ReadableStream支持，现代浏览器均兼容。
• 服务端需正确设置响应头，避免缓存或连接中断。

内容的提问来源于stack exchange，提问作者Hrithik Das