Instead of returning the LLM response stream to your client via an HTTP Server-sent Events Response, we’ll forward it to Streamstraight instead.First, install our server SDK for your language. If your SDK isn’t listed here, drop us a line.
npm install --save @streamstraight/server
Next, navigate to the Streamstraight dashboard and create an API key.Create a .env entry for the API key you generate in the Streamstraight dashboard. In production, make sure to add this API key to your server secrets.
Next, ensure you have a unique streamId for the AI response. We recommend using a combination of the AI chat’s chatId and messageId to create a unique identifier.We’ll then pass the stream to Streamstraight’s SDK.
import { streamstraightServer } from "@streamstraight/server";import OpenAI from "openai";const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });const ssServer = await streamstraightServer( { apiKey: process.env.STREAMSTRAIGHT_API_KEY }, { streamId: "a-unique-stream-id" },);// We use the OpenAI SDK here as an example, but you can use any// LLM provider that supports streamingconst stream = await openai.responses.stream({ ... });// llmStream can be any ReadableStream or AsyncIterableawait ssServer.stream(llmStream);
Streamstraight will now consume and forward the LLM stream to your client.
Depending on your architecture, the LLM stream may block your HTTP response. If you
would like to continue streaming without blocking your HTTP response, follow the
instructions in the advanced usage
guide.
Streamstraight requires your frontend client to securely connect via a short-lived JWT token. Add a route to your server that fetches this token using our SDK.
import { fetchClientToken } from "@streamstraight/server";// In the /api/streamstraight-token routeexport async function POST(request: Request) { if (request.method !== "POST") { return new Response("Method not allowed", { status: 405 }); } // Ensure your user is authenticated const clientToken = await fetchClientToken({ apiKey: process.env.STREAMSTRAIGHT_API_KEY }); return { jwtToken: clientToken };}
First, install the Streamstraight client SDK to your app:
npm install --save @streamstraight/client
Next, we’ll need to connect to Streamstraight from your client so that we can receive the stream. Provide the SDK with the streamId you generated on the server and a function that fetches a fresh JWT from your backend.
import { connectStreamstraightClient } from "@streamstraight/client";// Type each chunk however you want; you're not tied// to the OpenAI example here. Just make sure the type// matches what you pass to Streamstraight on your server.type ChunkType = OpenAI.Responses.ResponseStreamEvent;async function fetchStreamstraightToken(): Promise<string> { const response = await fetch("/api/streamstraight-token", { method: "POST" }); if (!response.ok) throw new Error("Failed to fetch Streamstraight token"); const { jwtToken } = (await response.json()) as { jwtToken: string }; return jwtToken;}async function processResponseStream(streamId: string) { const ssClient = await connectStreamstraightClient<ChunkType>( { fetchToken: fetchStreamstraightToken }, { streamId }, ); for await (const chunk of ssClient.toAsyncIterable()) { // Handle each chunk as it's streamed }}
If you are using the useChat abstraction from Vercel’s AI SDK, we’ve built a way to
integrate directly into that abstraction! Please refer to these
instructions instead.
That’s it! Your client will now reliably receive stream chunks from your server through Streamstraight.