Hooks for consuming streams in react - specifically json streams coming from LLMS - given a Zod Schema that represents the final output, you can start the stream and start to read the structured result immediately.
with pnpm
$ pnpm add stream-hooks zod zod-streamwith npm
$ npm install stream-hooks zod zod-streamwith bun
$ bun add stream-hooks zod zod-stream import { useJsonStream } from "stream-hooks"
export function Test() {
const { loading, startStream, stopStream, data } = useJsonStream({
schema: z.object({
content: z.string()
}),
onReceive: data => {
console.log("incremental update to final response model", data)
}
})
const submit = async () => {
try {
await startStream({
url: "/api/ai/chat",
method: "POST",
body: {
messages: [
{
content: "yo",
role: "user"
}
]
}
})
} catch (e) {
console.error(e)
}
}
return (
<div>
{data.content}
<button onClick={submit}>
start
</button>
<button onClick={stopStream}>
stop
</button>
</div>
)
}