Skip to content

Update OpenAI API: use SDK v6 and replace legacy gpt-4-vision-preview model #5

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

Draft
sepo-agent-app wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Update OpenAI API: use SDK v6 and replace legacy gpt-4-vision-preview model #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d595ff2
chore: migrate OpenAI lib files to official SDK, upgrade gpt-4-vision…
sepo-agent May 27, 2026
d62a5d1
Remove dead-code null guards and document dangerouslyAllowBrowser intent
sepo-agent May 27, 2026
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
11 changes: 1 addition & 10 deletions app/lib/generateCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,7 @@ export async function generateCode(
intended_edit,
});

if (!json) {
throw Error('Could not contact OpenAI.')
}

if (json?.error) {
throw Error(`${json.error.message?.slice(0, 128)}...`)
}


let message = json.choices[0].message.content
let message = json.choices[0].message.content ?? ''
const regex = /```json\n([\s\S]*?)```/;
const matches = message.match(regex);
if (matches && matches[1]) {
Expand Down
90 changes: 13 additions & 77 deletions app/lib/getCodeFromOpenAI.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import OpenAI from 'openai'
import { CodeEditorShape } from '../CodeEditorShape/CodeEditorShape'
import {
OPENAI_MAKE_CODE_PROMPT,
Expand Down Expand Up @@ -29,7 +30,10 @@ export async function getCodeFromOpenAI({
}) {
if (!apiKey) throw Error('You need to provide an API key (sorry)')

const messages: GPT4oCompletionRequest['messages'] = [
// Client-side demo app; apiKey is user-supplied at runtime, mirroring the prior raw-fetch Authorization header pattern.
const client = new OpenAI({ apiKey, dangerouslyAllowBrowser: true })

const messages: OpenAI.Chat.ChatCompletionMessageParam[] = [
{
role: 'system',
content: intended_edit?.length ? OPENAI_EDIT_PARTIAL_CODE_PROMPT : OPENAI_MAKE_CODE_PROMPT,
Expand All @@ -40,14 +44,13 @@ export async function getCodeFromOpenAI({
},
]

const userContent = messages[1].content as Exclude<MessageContent, string>
const userContent = messages[1].content as OpenAI.Chat.ChatCompletionContentPart[]

userContent.push({
type: 'text',
text: intended_edit?.length ? OPENAI_USER_EDIT_PARTIAL_CODE_PROMPT : OPENAI_USER_MAKE_CODE_PROMPT,
})

// Add the image
userContent.push({
type: 'image_url',
image_url: {
Expand All @@ -63,7 +66,6 @@ export async function getCodeFromOpenAI({
})
}

// Add the strings of text
if (text) {
userContent.push({
type: 'text',
Expand All @@ -78,7 +80,6 @@ export async function getCodeFromOpenAI({
})
}

// Add the previous previews code
for (let i = 0; i < previousCodeEditors.length; i++) {
const preview = previousCodeEditors[i]
userContent.push({
Expand All @@ -94,81 +95,16 @@ export async function getCodeFromOpenAI({
})
}

// Prompt the theme
// userContent.push({
// type: 'text',
// text: `Please make your result use the ${theme} theme.`,
// })

const body: GPT4oCompletionRequest = {
model: 'gpt-4o',
max_tokens: 4096,
temperature: 0,
messages,
seed: 42,
n: 1,
}

let json = null

try {
const resp = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${apiKey}`,
},
body: JSON.stringify(body),
return await client.chat.completions.create({
model: 'gpt-4o',
max_tokens: 4096,
temperature: 0,
messages,
seed: 42,
n: 1,
})
json = await resp.json()
} catch (e: any) {
throw Error(`Could not contact OpenAI: ${e.message}`)
}

return json
}

type MessageContent =
| string
| (
| string
| {
type: 'image_url'
image_url:
| string
| {
url: string
detail: 'low' | 'high' | 'auto'
}
}
| {
type: 'text'
text: string
}
)[]

export type GPT4oCompletionRequest = {
model: 'gpt-4o'
messages: {
role: 'system' | 'user' | 'assistant' | 'function'
content: MessageContent
name?: string | undefined
}[]
functions?: any[] | undefined
function_call?: any | undefined
stream?: boolean | undefined
temperature?: number | undefined
top_p?: number | undefined
max_tokens?: number | undefined
n?: number | undefined
best_of?: number | undefined
frequency_penalty?: number | undefined
presence_penalty?: number | undefined
seed?: number | undefined
logit_bias?:
| {
[x: string]: number
}
| undefined
stop?: (string[] | string) | undefined
}
86 changes: 13 additions & 73 deletions app/lib/getHtmlFromOpenAI.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import OpenAI from 'openai'
import { PreviewShape } from '../PreviewShape/PreviewShape'
import {
OPENAI_USER_PROMPT,
Expand Down Expand Up @@ -26,7 +27,10 @@ export async function getHtmlFromOpenAI({
}) {
if (!apiKey) throw Error('You need to provide an API key (sorry)')

const messages: GPT4VCompletionRequest['messages'] = [
// Client-side demo app; apiKey is user-supplied at runtime, mirroring the prior raw-fetch Authorization header pattern.
const client = new OpenAI({ apiKey, dangerouslyAllowBrowser: true })

const messages: OpenAI.Chat.ChatCompletionMessageParam[] = [
{
role: 'system',
content: OPEN_AI_SYSTEM_PROMPT,
Expand All @@ -37,16 +41,14 @@ export async function getHtmlFromOpenAI({
},
]

const userContent = messages[1].content as Exclude<MessageContent, string>
const userContent = messages[1].content as OpenAI.Chat.ChatCompletionContentPart[]

// Add the prompt into
userContent.push({
type: 'text',
text:
previousPreviews?.length > 0 ? OPENAI_USER_PROMPT_WITH_PREVIOUS_DESIGN : OPENAI_USER_PROMPT,
})

// Add the image
userContent.push({
type: 'image_url',
image_url: {
Expand All @@ -55,7 +57,6 @@ export async function getHtmlFromOpenAI({
},
})

// Add the strings of text
if (text) {
userContent.push({
type: 'text',
Expand All @@ -70,7 +71,6 @@ export async function getHtmlFromOpenAI({
})
}

// Add the previous previews as HTML
for (let i = 0; i < previousPreviews.length; i++) {
const preview = previousPreviews[i]
userContent.push(
Expand All @@ -85,81 +85,21 @@ export async function getHtmlFromOpenAI({
)
}

// Prompt the theme
userContent.push({
type: 'text',
text: `Please make your result use the ${theme} theme.`,
})

const body: GPT4VCompletionRequest = {
model: 'gpt-4-vision-preview',
max_tokens: 4096,
temperature: 0,
messages,
seed: 42,
n: 1,
}

let json = null

try {
const resp = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${apiKey}`,
},
body: JSON.stringify(body),
return await client.chat.completions.create({
model: 'gpt-4o',
max_tokens: 4096,
temperature: 0,
messages,
seed: 42,
n: 1,
})
json = await resp.json()
} catch (e: any) {
throw Error(`Could not contact OpenAI: ${e.message}`)
}

return json
}

type MessageContent =
| string
| (
| string
| {
type: 'image_url'
image_url:
| string
| {
url: string
detail: 'low' | 'high' | 'auto'
}
}
| {
type: 'text'
text: string
}
)[]

export type GPT4VCompletionRequest = {
model: 'gpt-4-vision-preview'
messages: {
role: 'system' | 'user' | 'assistant' | 'function'
content: MessageContent
name?: string | undefined
}[]
functions?: any[] | undefined
function_call?: any | undefined
stream?: boolean | undefined
temperature?: number | undefined
top_p?: number | undefined
max_tokens?: number | undefined
n?: number | undefined
best_of?: number | undefined
frequency_penalty?: number | undefined
presence_penalty?: number | undefined
seed?: number | undefined
logit_bias?:
| {
[x: string]: number
}
| undefined
stop?: (string[] | string) | undefined
}
Loading
Loading