Skip to content

Upgrade OpenAI SDK and migrate API routes to new Responses/Images API #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yisding wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Upgrade OpenAI SDK and migrate API routes to new Responses/Images API #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 19 additions & 90 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"eslint-config-next": "13.4.4",
"eventsource-parser": "^1.0.0",
"next": "13.3.2",
"openai": "^3.2.1",
"openai": "^6.39.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-loading-skeleton": "^3.2.1",
Expand Down
16 changes: 7 additions & 9 deletions pages/api/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import type { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";
import { OpenAI } from "openai";

const openai = new OpenAIApi(
new Configuration({
apiKey: process.env.OPENAI_API_KEY,
})
);
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});

type Data = {
error?: string;
Expand All @@ -23,11 +21,11 @@ export default async function handler(

const { word } = req.query;

const response = await openai.createImage({
const response = await openai.images.generate({
model: "gpt-image-1",
prompt: `clip art of ${word}`,
n: 1,
size: "256x256",
Comment on lines +25 to 27
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use a supported size for gpt-image-1 generation

This route now calls openai.images.generate with model: "gpt-image-1" but still sends size: "256x256"; GPT image models only accept larger sizes (for example 1024x1024/1024x1536/1536x1024), so requests can fail validation at runtime instead of returning an image. In practice this can make /api/image fail for every POST request after this migration.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown

@charliecreates charliecreates Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gpt-image-1 doesn't match this endpoint's assumptions. In openai-node v6.39, GPT image models support 1024x1024/1536x1024/1024x1536 sizes and return b64_json output, while URL output is unsupported for GPT image models (see src/resources/images.ts: https://github.com/openai/openai-node/blob/v6.39.0/src/resources/images.ts).

With size: "256x256" and response.data?.[0]?.url, this route can either fail the image call or return an empty URL.

Suggested fix: either (a) switch to a DALL·E model if you want URL output, or (b) keep gpt-image-1, read b64_json, and return a usable image source (for example a data:image/png;base64,... string or a stored-file URL).

});

res.status(200).json({ url: response.data.data[0].url });
res.status(200).json({ url: response.data?.[0]?.url });
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Read image bytes instead of unsupported url field

For gpt-image-1, the Images API returns b64_json image data and does not provide a url field, but this handler responds with response.data?.[0]?.url. That means successful generations still return { "url": undefined }, which breaks downstream clients expecting a usable image payload.

Useful? React with 👍 / 👎.

}
50 changes: 28 additions & 22 deletions pages/api/wordgrade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import { Configuration, OpenAIApi } from "openai";
import { OpenAI } from "openai";

const openai = new OpenAIApi(
new Configuration({
apiKey: process.env.OPENAI_API_KEY,
})
);
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});

const model = process.env.OPENAI_MODEL ?? "gpt-5.5";

type Data = {
error?: string;
Expand All @@ -19,7 +18,7 @@ export default async function handler(
) {
const { word } = req.query;

const prompt = `Use this format:
const instructions = `Use this format:

Word: <word>
Reading Grade JSON: <JSON with field \`grade\`>
Expand All @@ -34,24 +33,31 @@ Word: instrument
Reading Grade JSON: {"grade": "6"}

Word: improbable
Reading Grade JSON: {"grade": "6"}

Word: ${word}
Reading Grade JSON:`;
Reading Grade JSON: {"grade": "6"}`;

const { data } = await openai.createChatCompletion({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }],
max_tokens: 1000,
const response = await openai.responses.create({
model,
instructions,
input: `Word: ${word}\nReading Grade JSON:`,
max_output_tokens: 200,
temperature: 0.1,
top_p: 1,
presence_penalty: 0,
frequency_penalty: 0,
n: 1,
stream: false,
text: {
format: {
type: "json_schema",
name: "reading_grade",
schema: {
type: "object",
properties: {
grade: { type: "string" },
},
required: ["grade"],
additionalProperties: false,
},
},
},
});

const responseJson = data.choices[0].message?.content;
const responseJson = response.output_text;

if (!responseJson) {
res.status(503).json({ error: "No response" });
Expand Down
Loading
Loading