Create image variations with dall-e using react

i have been trying to create image variations using react but i get the following error

api.js:471 Uncaught (in promise) TypeError: localVarFormParams.getHeaders is not a function

my code, which i wrote in the app.jsx file is

import { Configuration, OpenAIApi } from “openai”;
import React, { useEffect, useState } from “react”;
import “./App.css”;
const imageUrl = “”;

function App() {

const configuration = new Configuration({
    apiKey: import.meta.env.VITE_Open_AI_Key,

const openai = new OpenAIApi(configuration);

const generateImage = async () => {
    const response = await openai.createImageVariation({
        image: imageUrl,
        n: 2,
        size: "1024x1024",


return (
        <button onClick={generateImage}>generate an image</button>


export default App;

Any help would be much appreciated. Thanks!

Hi @ilinca18

Did you debug based on the error message above, especially the part which states:

localVarFormParams.getHeaders is not a function


i must say that i am very new to coding, let alone react. unfortunately, i don’t really understand your question, but i think the problem has something to do with the fact that the openai only accepts urls or 64-encoded images.however i don’t know how to import images in react from a folder and transform them in b64. i have however read this code snippet, which was posted in another discussion

const response = await openai.createImage({
prompt: “digital artwork of a robotic lion wearing a crown”,
n: 1,
size: “256x256”,
response_format: “b64_json”,

const image =[0].b64_json;

// This is the Buffer object that contains the generated image base64
const buffer = Buffer.from(image, “base64”);
// Set a name that ends with .png so that the API knows it’s a PNG image = “image.png”;

const response = await openai.createImageVariation(buffer, 1, “256x256”, “b64_json”);

const variation =[0].b64_json

i am trying to do something similar, but without the create image from a prompt part, instead i would like to upload an image from my computer. would that be possible? if you have any further suggestions, i would be very thankful!

For obvious reasons you wouldn’t want to make these types of HTTP requests from a clientside script such as ReactJS.

I don’t believe it’s the current issue, but you may run into this.
Regarding your question, it’s possible that the API key isn’t being registered correctly? It looks like the error you pasted is coming from the OpenAI library (based on the line 471 indication)

But, you should still consider reading this first, and then decide to make the HTTP request using a back-end server such as node.js

If you’re new to programming, I’d recommend honestly just copying and pasting your code, and the error to GPT-4, it will probably do a fantastic job of debugging for you.

1 Like

:question: :question:

It is normal to make these types of API calls in client-side code like React.

There is “no obvious” or “any” reason for a full stack web developer to not use OpenAI API calls in client side JS code.


See Also:

These are very cool examples. Unless people are willing to share their API keys these wouldn’t not be deployable…

Thank you. I have tried chat-gpt but without success. i am trying to make this for a website. I understand that probably you need much more knowledge of react in order to solve this problem. however i was curious if anyone has any suggestions, as I have tried to solve it for some time now and googled it a lot

ReactJS is wonderful. You would want an actual server though. NodeJS is great. Works well with ReactJS and is Javascript as well. There’s plenty of options

For your own personal use there’s definitely nothing wrong with just using ReactJS though

ok, the question still remains. if you have any suggestions, as to how i could import an image from folder, in order to use it in the createImageVariation function, i would be very grateful

The tutorials posted here would work great. Although if you have no experience with coding I’d say that using Python would be your best bet.

Yes, because ChatGPT pre-trained models (all of them) have zero knowledge of anything past mid 2021 and is full of deprecated OpenAI libs and code which provide nothing but errors to everyone who tries to write OpenAI API code using ChatGPT.

You can do it, but is is difficult to write code in frameworks like React and VueJS if you @ilinca18 do not have a lot of prior Javascript coding experience.

Yes, have you first written “Hello World” in React?

I found many tutorials on how to build chatbots using ReactJS. A few of which I posted in my earlier post, but if you have no prior ReactJS confiding experience, please spend time and work a few “hello world” tutorials first to get a basic feel for ReactJS before diving into making external API calls.

Then when you are comfortable with Hello World ReactJS, then try some simple API call like getting lorem ipsum text from an API, or maybe a joke generating API. There are many less complex APIs to start with. Get one of those to work first, then move on to your OpenAI project.

Hope this helps.



gpt-4 had as cutoff date of mid 2021, which I confirmed again just now:

It is nonsense for anyone to suggest that gpt-4 can debug OpenAI API code in 2023 because the OpenAI LLM models are full of old, depreciated OpenAI API calls and params. Because of this, these models will just “make up” code (generate for the sake of answering the question), which is blah, blah, nonsense. You @ilinca18 will waste a lot of time if you try to use generative AI with cutoff dates in mid 2021 to write code with APIs and libs which have seen major upgrades since 2021.

ok, thank you. I have looked upon the links you sent me, but all are about how to build chatgpt ai using react. my question is how to import an image from folder, in order for the dall-e to view it.

Then this is a basic Javascript question and not really an OpenAI API question.

Right, @ilinca18 ?

See, for example:


See also…

Google will help you … as all I did was google for you @ilinca18