nextjs-openai

项目介绍：Next.js 的 OpenAI 集成

nextjs-openai 项目是一个专为 Next.js 应用开发者设计的工具库，旨在方便地在应用中集成 OpenAI 的流处理功能。它通过提供便捷的 hooks 和组件，使得开发者可以轻松连接和处理 OpenAI 的数据流。

安装指南

要使用 nextjs-openai，可以通过以下命令安装：

yarn add nextjs-openai openai-streams

# 或者使用 npm
npm i --save nextjs-openai openai-streams

这些工具包会在前端和 API 路由中帮助处理 OpenAI 的流数据。

常用 Hooks

nextjs-openai 提供了两个强大的 hooks：useBuffer() 和 useTextBuffer()。这两个 hooks 可以从指定的 URL 加载递增的数据或文本缓冲区。

以下是一个简单的示例：

import { useTextBuffer } from "nextjs-openai";

export default function Demo() {
  const { buffer, refresh, cancel, done } = useTextBuffer({ 
    url: "/api/demo"
  });
  
  return (
    <div>
      <StreamingText buffer={buffer} fade={600} />
      <button onClick={refresh} disabled={!done}>Refresh</button>
      <button onClick={cancel} disabled={done}>Cancel</button>
    </div>
  );
}

组件介绍

<StreamingText> 和 <StreamingTextURL> 是两个关键组件，能够通过流缓冲区呈现逐渐淡入的文本。这种动画效果使得信息展示更具动态性和生动感。

示例如下：

import { StreamingTextURL } from "nextjs-openai";

export default function Demo() {
  return (
    <StreamingTextURL 
      url="/api/demo" 
      fade={600} 
      throttle={100} 
    />
  );
}

数据发送与高级用法

开发者可以自定义网络请求类型，通过设置 { method, data }，轻松切换请求类型（如从 POST 到 GET）。此外，开发者可以在 URL 上手动设置查询参数。

使用 <StreamingTextURL>

可以通过指定 data 属性来传递数据:

import { StreamingTextURL } from "nextjs-openai";

export default function Home() {
  const [data, setData] = useState({ name: "John" });
  return (
    <StreamingTextURL url="/api/demo" data={data}>
  );
}

使用 useTextBuffer()

通过指定 options 属性进行额外的请求配置。

import { useTextBuffer, StreamingText } from "nextjs-openai";

export default function Home() {
  const [data, setData] = useState({ name: "John" });
  const { buffer, refresh, cancel } = useTextBuffer({
    url: "/api/demo",
    throttle: 100,
    data,
    options: {
      headers: {
        // 自定义请求头
      }
    }
  });
  
  return (
    <StreamingText buffer={buffer}>
  );
}

API 路由和流处理

通过 openai-streams，可以在 API 路由中处理来自 OpenAI 的流数据。支持 Edge Runtime 和 Node.js 环境。

使用 Edge Runtime 的示例

import { OpenAI } from "openai-streams";

export default async function handler() {
  const stream = await OpenAI(
    "completions",
    {
      model: "text-davinci-003",
      prompt: "Write a happy sentence.\n\n",
      max_tokens: 25
    },
  );

  return new Response(stream);
}

export const config = {
  runtime: "edge"
};

Node <18 的示例

适用于非 Edge Runtime 的环境，使用 NodeJS.Readable 版本。

import type { NextApiRequest, NextApiResponse } from "next";
import { OpenAI } from "openai-streams/node";

export default async function test (_: NextApiRequest, res: NextApiResponse) {
  const stream = await OpenAI(
    "completions",
    {
      model: "text-davinci-003",
      prompt: "Write a happy sentence.\n\n",
      max_tokens: 25
    }
  );

  stream.pipe(res);
}

通过这些工具，开发者可以轻松构建与 OpenAI 进行互动的应用，极大地丰富了应用的功能和交互体验。