When trying implement in next.js , getting too many requests error..

[TechWithTy]

Ai wrapper

import React from "react";
import { AiChat } from "@nlux/react";
import { useAdapter } from "@nlux/openai-react";
import "@nlux/themes/nova.css";

interface OpenAIAdapterProps {
  show: boolean;
  temperature?: number;
  // Include other props as needed
}

export const OpenAIAdapter: React.FC<OpenAIAdapterProps> = ({
  show,
  temperature,
}) => {
  // Config should use the props if needed
  const adapterConfig = {
    apiKey: "key",
    systemMessage:
      "Give sound, tailored financial advice. Explain concepts simply. " +
      "Write concise answers under 5 sentences. Be funny.",
    // Use temperature or other props in config if applicable and supported
  };

  const chatGptAdapter = useAdapter(adapterConfig);

  // Corrected conditional rendering
  return show ? (
    <AiChat
      adapter={chatGptAdapter}
      promptBoxOptions={{ placeholder: "How can I help you today?" }}
    />
  ) : null;
};

export default OpenAIAdapter;

Rendering Modal

'use client'
import React, { useState } from "react";
import Image from "next/image";
import Modal from "../shared/modal";
import OpenAIAdapter from "../openAi/nlux";

function ContactButton() {
  const [show, setShow] = useState(false);

  const handleButtonClick = () => {
    setShow(true);
  };

  return (
    <>
      <button
        onClick={handleButtonClick}
        className="peer fixed bottom-20 right-5 z-[100] flex h-16 w-16 items-center justify-center rounded-full shadow-lg duration-75 hover:shadow-xl hover:transition-all lg:bottom-20 lg:right-5"
      >
        <Image
          className="object-contain"
          src={"/images/chat-button.png"}
          alt="chat button"
          width={60}
          height={60}
        />
      </button>
      <Modal setShowModal={setShow} showModal={show}>
        <OpenAIAdapter show={show} />
      </Modal>
    </>
  );
}

export default ContactButton;

Error in console

Request URL: https://api.openai.com/v1/chat/completions Request Method: POST Status Code: 429 Too Many Requests Remote Address:

Referrer Policy: strict-origin-when-cross-origin

OST https://api.openai.com/v1/chat/completions 429 (Too Many Requests)

[salmenus]

@TechWithTy You can the error Error Code 429 - Rate limit reached for requests with ChatGPT API calls when you hit your assigned rate limit for the OpenAI API or the model that you're trying to call. This means that you have submitted too many tokens requests in a short period of time OR have exceeded the number of requests allowed for your account OR you don't access to the model that you're trying to consume as part of the API call.

Ref the OpenAI API error codes for details.

To resolve this error:

• Check the limits and models that you have access to on your OpenAI account on platform.openai.com/account/limits to make sure that you have access to the model that you are trying to use. The default model on NLUX OpenAI adapter (as of Jan 24) is gpt-4 and that model is not provided as part of the OpenAI free tier and it requires paid plan. You can change the the model in NLUX to provide a model that is included in your plan as shown below:

const adapter = useAdapter({
    model: 'gpt-3.5-turbo'
});

• Check your API usage on platform.openai.com/usage to ensure that you have not exceeded the limit and that you have credit that allows you to make API calls. You may need to switch to a paid plan if you have made frequent API calls and you're exceeding your limit.

I hope this helps.

[TechWithTy]

Hi Salmenus , It is confirmed that i have a paid plan and access to gpt 4, I have not made any api calls this month.

[jspm2013]

Hi TechWithTy, am have you managed to get it work using nextjs?

[TechWithTy]

No i have not we are looking to build this from scratch unfortunately

[salmenus]

@jspm2013 @TechWithTy I'll try to create a fully working example on Next.js (and fix any error that I may encounter)

I'll keep you posted via this thread

[salmenus]

@TechWithTy @jspm2013 I was able to run NLUX with Next.js and OpenAI (free account).

I recorded the steps here: https://youtu.be/oqZ8pw2C7Yw

• NLUX: I used @nlux/react latest on NPM v0.10.5
• Next.js : It would only work with client-side rendering for now. There is a feature for server-side rendering in our dashboard that I'll be working on very soon
• OpenAI: I used a new free account with default model and it worked.

@TechWithTy @jspm2013 Can you give it a second try using latest version of NLUX ?

[jspm2013]

Hi and thanks for getting in touch, i'l give it a try and come back to you ✌️

[TechWithTy]

Yes @salmenus I was able to get it to work as well, the issue was that i did not have any api credits, however there is another security issue nlux open ai adapter connects to Open ai directly from browser(not safe as api key would be exposed ).

[salmenus]

Glad to hear that you managed to get it work @TechWithTy 👍

Yes. Good call about the OpenAI adapter. It's is only recommended for testing and locally hosted web app. We mention that in the docs: https://nlux.dev/learn/adapters/open-ai/overview

Users still can implement custom adapters to connect to whatever they want.

EDIT: I saw you created an other issue for this OpenAI adapter. We will continue the discussion there. Much appreciated.