Structured Output (recursion)

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

1 Like

Thank you for posting this, I thought I was doing something wrong.
For now, I am using the explicit recursion definition outlined in the docs.

Sample recursive schema using explicit recursion: