How do I include extra instructions and JSON context in my OpenAI prompt using JavaScript?

I'm building a local application with JavaScript, HTML, and CSS that uses the OpenAI API to answer user questions based on a JSON document. The JSON file is loaded and then incorporated into the prompt sent to OpenAI. However, when I attempt to augment the prompt with additional instructions (like "Start your answer with a joke."), the API seems to ignore these extra directives and just answers the question using the JSON data.

I've tried appending the extra instructions to the user's question, and I also experimented with combining instructions into the message chain. Despite logging the combined prompt and JSON context, the API response does not reflect the custom behavior. My goal is to modify my prompt or message order so that the model adheres to the provided instructions while still utilizing the JSON context.

Below is the code I'm currently using:

JAVASCRIPTCopied
let jsonData = null;

async function loadJsonFile() {
  try {
    const response = await fetch('manual.json');
    jsonData = await response.json(); // Store the parsed JSON data
    console.log("Loaded JSON Data:", jsonData); // Log the loaded JSON
  } catch (error) {
    console.error("Error loading JSON file:", error);
  }
}

async function askQuestion() {
  const question = document.getElementById("question").value;
  const responseElement = document.getElementById("response");

  // Check if jsonData is loaded
  if (!jsonData || Object.keys(jsonData).length === 0) {
    responseElement.innerText =
      "I am unable to access or provide information about the JSON file. Please ensure it is loaded successfully.";
    return;
  }

  // Instructional text to include in the prompt
  const instructionalText = "Start your answer with a joke.";

  // Combine the user's input and instructional text
  const modifiedQuestion = `${question}

${instructionalText}`;

  try {
    // Send the modified question to OpenAI
    const aiResponse = await openAiRequest(modifiedQuestion);

    // Assuming openAiRequest returns the response in a usable format, handle accordingly
    responseElement.innerText = aiResponse || "No response from OpenAI.";
  } catch (error) {
    console.error("Error while fetching the AI response:", error);
    responseElement.innerText = "Error: Unable to get a response from the AI.";
  }
}

async function openAiRequest(modifiedQuestion) {
  const apiUrl = "https://api.openai.com/v1/chat/completions"; // GPT-3.5+ chat endpoint

  // Log the request body to see the exact prompt being sent
  console.log("Request Body:", modifiedQuestion);

  try {
    const jsonContent = JSON.stringify(jsonData, null, 2); // Stringify the loaded JSON
    console.log("Trimmed JSON Content (first 500 chars):", jsonContent.slice(0, 500)); // Log part of the JSON content for easier debugging

    const response = await fetch(apiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer [MY-API-KEY]`,
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo", // Or any other model you want to use
        messages: [
          { role: "system", content: "Start your answers with a joke." },
          { role: "user", content: modifiedQuestion },
          { role: "assistant", content: `Use this information from the JSON document as context to answer the user question: ${jsonContent}` }
        ],
        max_tokens: 200,
        temperature: 0.7,
      }),
    });

    const data = await response.json();
    console.log("OpenAI Response Data:", data); // Log the full OpenAI API response

    if (data && data.choices && data.choices[0] && data.choices[0].message) {
      return data.choices[0].message.content.trim();
    } else {
      console.warn("OpenAI API did not return expected response:", data);
      return "No response received from OpenAI.";
    }
  } catch (error) {
    console.error("Error with OpenAI API request:", error);
    return "There was an error processing your request. Please try again.";
  }
}

window.onload = loadJsonFile;

I appreciate any suggestions or insights on how to modify my prompt setup so that OpenAI follows the custom instructions reliably.