const OpenAI = require("openai");
const { z } = require("zod");
const { zodResponseFormat } = require("openai/helpers/zod");
const OpenAIApi = require('openai');
require('dotenv').config();
const OpenAI_Api = process.env.OpenAIApi ;
const openai = new OpenAIApi({
api_key: OpenAI_Api
});
const UI = z.lazy(() =>
z.object({
type: z.enum(["div", "button", "header", "section", "field", "form"]),
label: z.string(),
children: z.array(UI),
attributes: z.array(
z.object({
name: z.string(),
value: z.string(),
})
),
})
);
async function test2(){
const completion = await openai.beta.chat.completions.parse({
model: "gpt-4o-2024-08-06",
messages: [
{
role: "system",
content: "You are a UI generator AI. Convert the user input into a UI.",
},
{ role: "user", content: "Make a User Profile Form" },
],
response_format: zodResponseFormat(UI, "ui"),
});
const ui = completion.choices[0].message.parsed;
console.log(ui)
}
test2();
--------------
status: 400,
headers: {
'alt-svc': 'h3=":443"; ma=86400',
'cf-cache-status': 'DYNAMIC',
'cf-ray': '8b05a75c7ebb21e6-KHI',
connection: 'keep-alive',
'content-length': '275',
'content-type': 'application/json',
date: 'Fri, 09 Aug 2024 06:22:48 GMT',
'openai-organization': 'stratesfy-clbbln',
'openai-processing-ms': '24',
'openai-version': '2020-10-01',
server: 'cloudflare',
'set-cookie': '__cf_bm=wOa26xO0Csiyt8SFl8bLoQrqwoEsr5qhak2x.anIqtM-1723184568-1.0.1.1-prQyiR7DC4YIelUWU0jSacV6hbXo7bDlmuLypzF9OzyBMfup0LQo8Ji7J7CXX9XgwNLAGhIy63i.RNz568omAQ; path=/; expires=Fri, 09-Aug-24 06:52:48 GMT; domain=.api.openai.com; HttpOnly; Secure; SameSite=None, _cfuvid=oPTYhYBLj8GHMfQkWvXEwe8eB5SSHUbqL2jg7pM6g7Q-1723184568713-0.0.1.1-604800000; path=/; domain=.api.openai.com; HttpOnly; Secure; SameSite=None',
'strict-transport-security': 'max-age=15552000; includeSubDomains; preload',
'x-content-type-options': 'nosniff',
'x-ratelimit-limit-requests': '500',
'x-ratelimit-limit-tokens': '30000',
'x-ratelimit-remaining-requests': '499',
'x-ratelimit-remaining-tokens': '29961',
'x-ratelimit-reset-requests': '120ms',
'x-ratelimit-reset-tokens': '78ms',
'x-request-id': 'req_0c556397577b42528af02dfa11f90805'
},
request_id: 'req_0c556397577b42528af02dfa11f90805',
error: {
message: "Invalid schema for response_format 'ui': In context=('properties', 'children', 'items'), reference to component '#' which was not found in the schema.",
type: 'invalid_request_error',
param: 'response_format',
code: null
},
code: null,
param: 'response_format',
type: 'invalid_request_error'
}
I am literally using the code provided by them
https://platform.openai.com/docs/guides/structured-outputs/ui-generation