# next-genai-streaming

> Hooks and API helpers to stream generative AI APIs to nextJS applications

Latest version **0.0.1** (published 2023-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-genai-streaming
pnpm add next-genai-streaming
yarn add next-genai-streaming
bun add next-genai-streaming
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-05-10 |
| First published | 2023-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Boyang Niu |
| Maintainers | kumquatexpress |
| Keywords | nextjs, genai, stream, audio |

## Links

- npm: https://www.npmjs.com/package/next-genai-streaming
- Repository: https://github.com/kumquatexpress/next-genai-streaming
- Homepage: https://github.com/kumquatexpress/next-genai-streaming#readme
- Issues: https://github.com/kumquatexpress/next-genai-streaming/issues
- npm.io page: https://npm.io/package/next-genai-streaming

## Dependencies (2)

- [openai](https://npm.io/package/openai.md) ^3.2.1
- [eventsource-parser](https://npm.io/package/eventsource-parser.md) ^1.0.0

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2023-05-10

## README

# NextJS Streaming Helpers

## Getting started
Install the library

`$ npm i next-genai-streaming`

Use the library (visit `examples/` for more)

```
import { withStream } from "next-genai-streaming";

export default withStream(Text, {
  request: YOUR_URL_ENDPOINT,
  options: { method: "GET" },
});
```
![Example Component](./examples/output.gif)

`withStream` takes a React component and an `endpoint`. It continually streams the response from `endpoint` and updates the component's `props.content` value. When unmounted, `withStream` will automatically send an abort signal and close the connection.

The `request` and `options` fields of `withStream` come directly from the `fetch` API. `timeoutMs` is an optional parameter that will close the connection after waiting for that many milliseconds.

<br/>

## Media
The library contains HOCs for both text and audio. `withMediaStream` wraps an `<audio>` or `<media>` element and streams from a source URL. This lets you stream text-to-speech to users with Eleven Labs or Coqui without having to deal with your own chunking and decoding.

```
import { withMediaStream} from "next-genai-streaming";

withMediaStream(Media, {
  src: YOUR_URL_ENDPOINT,
  mimeType: "audio/webm",
});
```

<br/>

## OpenAI API
Included is an API helper for streaming OpenAI completions. Currently, the endpoint uses SSE on a POST request, which is not supported the native browser `EventSource`. Also, you'd have to expose your API key on the browser. Instead, you can use `OAIStreamingCompletion` to create a NextJS serverless endpoint and send that as a default ReadableStream instead.

Create the endpoint at `/pages/api` and plug directly into `withStream` - you'll be up and running immediately!

```
import { OAIStreamingCompletion } from "next-genai-streaming";

export async function GET(req: Request): Promise<Response> {
    const stream = await OAIStreamingCompletion(
        {
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: "Hello world!" }],
        },
        process.env.OPENAI_API_KEY
    );
    return new Response(stream);
}
```

---
_Source: https://npm.io/package/next-genai-streaming · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._