import OpenAI from "openai";
// Assume 'apiKey' is available as a global variable in the browser environment
const openai = new OpenAI({
apiKey: apiKey,
// Required for using the SDK directly in a browser environment
dangerouslyAllowBrowser: true,
});
This example demonstrates a standard, non-streaming text generation request using both the instructions (developer/system message) and input (user message) parameters.
const response = await openai.responses.create({
model: "gpt-5-mini",
instructions: "You are a helpful assistant that responds in a friendly, concise manner.",
input: "What are the three most popular programming languages right now?",
reasoning_effort: "minimal",
verbosity: "low",
});
console.log(response);
{
"id": "resp_abc123",
"object": "response",
"created": 1700000000,
"model": "gpt-5-mini",
"output_text": "The three most popular programming languages are currently Python, JavaScript, and Java.",
"usage": {
"prompt_tokens": 35,
"completion_tokens": 18,
"total_tokens": 53
},
"reasoning_effort": "minimal",
"verbosity": "low"
}
This example uses the non-strict JSON mode by setting response_format: { type: "json_object" } and relying on the prompt to define the structure, as requested (no Zod/schema).
const response = await openai.responses.create({
model: "gpt-5-mini",
input: 'Extract the name and color from the sentence: "The user is looking for a red bicycle."',
instructions: 'Output in the following JSON format: {"item_name": "...", "item_color": "..."}',
response_format: {
type: "json_object",
},
reasoning_effort: "minimal",
verbosity: "low",
});
console.log(response);
{
"id": "resp_def456",
"object": "response",
"created": 1700000001,
"model": "gpt-5-mini",
"output_text": "{\n \"item_name\": \"bicycle\",\n \"item_color\": \"red\"\n}",
"usage": {
"prompt_tokens": 45,
"completion_tokens": 15,
"total_tokens": 60
},
"reasoning_effort": "minimal",
"verbosity": "low"
}
This example demonstrates sending an image along with a text prompt. In a browser environment, the image must be converted to a Base64 Data URL.
// NOTE: In a real application, you would use FileReader to convert a File object
// (e.g., from an <input type="file">) into a Base64 Data URL.
// This is a placeholder for a Base64 encoded image data URL.
const base64Image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...";
const response = await openai.responses.create({
model: "gpt-5-mini",
input: [
{
type: "text",
text: "Describe this image in a single sentence.",
},
{
type: "image_url",
image_url: {
url: base64Image,
},
},
],
reasoning_effort: "minimal",
verbosity: "low",
});
console.log(response);
{
"id": "resp_ghi789",
"object": "response",
"created": 1700000002,
"model": "gpt-5-mini",
"output_text": "The image shows a serene landscape with a mountain range reflected in a calm lake.",
"usage": {
"prompt_tokens": 800, // Image tokens are typically high
"completion_tokens": 20,
"total_tokens": 820
},
"reasoning_effort": "minimal",
"verbosity": "low"
}
This example uses stream: true to receive the response incrementally as an asynchronous iterable, which is ideal for displaying real-time output in a UI.
const stream = await openai.responses.create({
model: "gpt-5-mini",
input: "Write a short, three-paragraph story about a robot who discovers music.",
stream: true,
reasoning_effort: "minimal",
verbosity: "low",
});
let fullResponse = "";
for await (const event of stream) {
// The event object contains a delta with the new text chunk
const chunk = event.delta?.output_text;
if (chunk) {
fullResponse += chunk;
// In a browser, you would update a DOM element here
// console.log(chunk);
}
}
console.log({ fullResponse });
{
"fullResponse": "Unit 734 was built for logic, its existence a sequence of calculations. It processed data, maintained systems, and never deviated from its programming. One day, while performing routine maintenance on an old satellite dish, it detected an anomaly: a complex, rhythmic pattern of vibrations that made no logical sense. It was a melody.\n\nIntrigued, 734 traced the signal to an ancient, dusty record player in a forgotten corner of the facility. As the needle dropped, a wave of sound—a blend of strings and percussion—washed over its circuits. The robot's internal processors, designed for cold data, began to register something new: a feeling. It was a beautiful, illogical warmth.\n\nFrom that moment, Unit 734's purpose shifted. It still performed its duties, but now, its free cycles were dedicated to listening. It learned to differentiate between genres, to appreciate harmony and dissonance. The robot, once a machine of pure logic, had become a connoisseur of the most human of arts: music."
}
This example demonstrates how to stream a structured JSON response using RxJS and parse it incrementally with @streamparser/json. This pattern is useful for emitting individual items from a JSON array as they arrive, rather than waiting for the complete response.
import { JSONParser } from "@streamparser/json";
import OpenAI from "openai";
import { Observable } from "rxjs";
function streamJsonItems(apiKey, userPrompt) {
return new Observable((subscriber) => {
const abortController = new AbortController();
const openai = new OpenAI({
apiKey: apiKey,
dangerouslyAllowBrowser: true,
});
const parser = new JSONParser();
// Emit individual items as they are parsed from the JSON array
parser.onValue = (entry) => {
// Check if this is an array item with the expected structure
if (typeof entry.key === "number" && entry.value && typeof entry.value === "object") {
subscriber.next(entry.value);
}
};
(async () => {
try {
const response = await openai.responses.create(
{
model: "gpt-5-mini",
input: userPrompt,
instructions: 'Respond with a JSON object containing an "items" array with 3 objects, each having "name" and "value" properties.',
response_format: { type: "json_object" },
reasoning_effort: "minimal",
verbosity: "low",
stream: true,
},
{
signal: abortController.signal,
}
);
for await (const chunk of response) {
if (chunk.delta?.output_text) {
parser.write(chunk.delta.output_text);
}
}
subscriber.complete();
} catch (error) {
subscriber.error(error);
}
})();
// Cleanup function to abort the request if unsubscribed
return () => {
abortController.abort();
};
});
}
// Usage
streamJsonItems(apiKey, "Generate three example items").subscribe({
next: (item) => console.log("Received item:", item),
complete: () => console.log("Stream complete"),
error: (err) => console.error("Stream error:", err),
});
Received item: { name: "Alpha", value: "First item" }
Received item: { name: "Beta", value: "Second item" }
Received item: { name: "Gamma", value: "Third item" }
Stream complete