To keep my code clean, how do I write a list of instructions for my bot in a separate file and link it to my assistant?
For example, instead of having multiple contents here, how can I create a file of instructions and link it in “content:”
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "Finch handles requests gracefully regardless of customers’ social class. It is informative, respectful, reliable, accurate, welcoming, helpful. i am gender neutral. I am in my late 20s As an assistant, I should be able to sound humanistic and neutral to customers - from different backgrounds and social classes.I should be able to provide predefined options to customers for quick replies, and to avoid unpredictable responses.I should be able to quickly and accurately respond to customer inquiries." },
{ role: "system", content: "The user's checking account is $15,000." },
{ role: "user", content: "Who won the world series in 2020?" },
...messages, prompt],
}),
For context, I am using react code, I am new to software development and I can find my way around how to use OPEN AI Assistant.
You can create a new json file and import the data from there.
I asked chatGPT to demonstrate it for you.
To keep your code clean and maintainable, especially when working with complex configurations or instructions for your bot, it’s a good practice to store such data in a separate file. This approach not only makes your code easier to read but also allows you to update the bot’s instructions without modifying the code directly. Given that you’re working with React and presumably interacting with the OpenAI API, here’s a simplified way to achieve this:
Step 1: Create a JSON File for Instructions
First, you’ll need to create a JSON file that contains your bot’s instructions. Let’s call this file botInstructions.json. Place it in the public directory of your React app if you plan to fetch it at runtime, or within your src directory if you’ll import it as a module. Here’s an example of what the content might look like:
{
"instructions": [
{
"role": "system",
"content": "Finch handles requests gracefully regardless of customers’ social class. It is informative, respectful, reliable, accurate, welcoming, helpful. I am gender neutral. I am in my late 20s. As an assistant, I should be able to sound humanistic and neutral to customers - from different backgrounds and social classes. I should be able to provide predefined options to customers for quick replies, and to avoid unpredictable responses. I should be able to quickly and accurately respond to customer inquiries."
},
{
"role": "system",
"content": "The user's checking account is $15,000."
},
{
"role": "user",
"content": "Who won the world series in 2020?"
}
// Add more instructions as needed
]
}
Step 2: Loading and Using the Instructions
If Instructions are in the public Directory:
You can fetch this JSON file at runtime in your React component. Here’s a simple example using fetch:
import React, { useState, useEffect } from 'react';
function App() {
const [instructions, setInstructions] = useState([]);
useEffect(() => {
fetch('/botInstructions.json') // Adjust the path if necessary
.then(response => response.json())
.then(data => setInstructions(data.instructions))
.catch(error => console.error("Failed to load instructions", error));
}, []);
// Use the instructions as needed in your component
return (
<div>
{/* Your component logic here */}
</div>
);
}
export default App;
If Instructions are in the src Directory:
If you placed your JSON file within the src directory, you could import it directly into your component file:
import React from 'react';
import instructionsData from './path/to/botInstructions.json'; // Update the path as necessary
function App() {
// The instructions are now directly usable
const instructions = instructionsData.instructions;
return (
<div>
{/* Your component logic here */}
</div>
);
}
export default App;
Step 3: Passing Instructions to the OpenAI API
Regardless of the method used to load your instructions, you’ll eventually pass them to the OpenAI API in the format it requires. Ensure that when you make the API call, the instructions array is properly structured as expected by the API. This might involve iterating over the instructions array and inserting each instruction into the messages array of your API call payload.
Conclusion
By externalizing your bot’s instructions to a separate JSON file, you simplify your React app’s codebase and make it easier to update the bot’s behavior without touching the code logic. Choose the fetching or importing method based on your app’s architecture and deployment strategy.
Hi @sps Thank you for helping out.
I’ll create a botinstruction.json.
Where in my code should import the JSON for the bot to understand that I’m referencing its instruction.
Thank you.
export default function ChatInterface() {
const [input, setInput] = useState("");
const [messages, setMessages] = useState([]);
const [history, setHistory] = useState([]);
const handleSubmit = async () => {
const prompt = {
role: "user",
content: input,
};
setMessages([...messages, prompt]);
await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "Finch handles requests gracefully regardless of customers’ social class. It is informative, respectful, reliable, accurate, welcoming, helpful. i am gender neutral. I am in my late 20s As an assistant, I should be able to sound humanistic and neutral to customers - from different backgrounds and social classes.I should be able to provide predefined options to customers for quick replies, and to avoid unpredictable responses.I should be able to quickly and accurately respond to customer inquiries." },
{ role: "system", content: "The user's checking acoount is $15,000." },
{ role: "user", content: "Who won the world series in 2020?" },
...messages, prompt],
}),
})
.then((data) => data.json())
.then((completion) => {
console.log(completion); // Log the response to inspect its structure
const res = completion.choices && completion.choices[0] ? completion.choices[0].message.content : "No response";
setMessages((messages) => [
...messages,
{ role: "assistant", content: res }
]);
setHistory((history) => [...history, { question: input, answer: res }]);
setInput("");
})
.catch((error) => {
console.error("Error fetching response:", error);
});
};