{
    "message": "Request failed with status code 405",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 405\n    at https://www.boostio.ai/_next/static/chunks/218-149b336ac3def750.js:1:18669\n    at XMLHttpRequest.c (https://www.boostio.ai/_next/static/chunks/218-149b336ac3def750.js:1:18809)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json"
        },
        "method": "post",
        "url": "/api/ai/chat",
        "data": "{\"role\":\"user\",\"type\":1,\"inputs\":[\"Create a react button\",\"\",\"\"]}"
    },
    "code": "ERR_BAD_REQUEST",
    "status": 405
}

`

That’s method not allowed error, check that you are making the request with the correct method aka POST, PUT, DELETE etc.

Yes I am. A post, which works fine in localhost

im not sure what you are trying to do, but notice that axios does not work in Vercel Edge Runtime. Thus Vercel provides Vercel AI SDK to address the issue.

my poc proj helps if u want to.
https://github.com/tfutada/zenn-vercel-ai-sdk

You have Hobby plan I guess and there is a 10s server side function runtime... I wanted to vectorize documents last on vercel, but the first step when it's vectorising the PDF file took to much time. I figured out to handle it from the next.js env variables. Both, the ChatCompletion class also defined in an env variable and the vectorized docuemnt too. Maybe this comment will help to you... Good luck

yep, that is why you want to deploy to Edge Runtime, where billing is measured by CPU time 50ms, instead of wall clock time cap 10s in hobby.

another advantage is zero cold start time thanks to V8 isolates

This sounds the best to reduce and avoid conflicts on Vercel btw. And I'm happy with this solution, I'm using it too.

yeah, Cloudflare Worker is really awesome.

And I still have a 504 error

On my component I call the api

const response = await axios.post("/api/chat", {
       ...
      });

`

And the api looks like this:

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { type, inputs } = req.body;

    const prompt = generatePrompt(inputs, type);

    const completion = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{ role: "user", content: prompt }],
    });
    res.status(200).json(completion.data.choices[0].message);
  } catch (err) {
    const error = err as any;
    if (error.response) {
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      console.log(error.message);
    }
  }
}

`

It works on localhost, but gives 504 in production

504 or 405

Now is 504

so deploy it to Edge instead of Serveles, where 10 sec wall time cap in hobby

Hmm ok thanks. That's all in Vercel right?

yes

Deploying this change now 🤞

I've added this to the api, above the handler func:

export const config = {
  runtime: "edge",
};

`

And now I have an app error:

On localhost is returning 200, but the "data" prop is empty now

Now is fixed, thanks