Rayy•11mo ago

Is there a way around to call actions from non functional components?

I am trying to build a chatbot with Vercel AI Sdk for streaming the response from OpenAI. I was wondering if there is a way to call actions in my route.ts? I do not want to call the action unless my POST function is called, so (In my action, I am doing vector search)

export async function POST(req: Request) {
  const { messages, chatId } = await req.json();
  const previousMessage: string = messages[messages.length - 1].content;

  const response = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    stream: true,
    messages,
  });

  // Convert the response into a friendly text-stream
  const stream = OpenAIStream(response);

  // Respond with the stream
  return new StreamingTextResponse(stream);
}

export async function POST(req: Request) {
  const { messages, chatId } = await req.json();
  const previousMessage: string = messages[messages.length - 1].content;

  const response = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    stream: true,
    messages,
  });

  // Convert the response into a friendly text-stream
  const stream = OpenAIStream(response);

  // Respond with the stream
  return new StreamingTextResponse(stream);
}

And also I was thinking to move this from route.ts to httpAction and then use that to do the vector search, but will it be efficient? Another reason to refrain from using httpAction is that it will be exposed and it just doesn't make any sense to use it like that.

6 Replies

ballingt•11mo ago

httpAction works here but fetchAction described below is better. I'd just add a { secret: process.env.MY_SECRET_KEY, ...} to the args that you check in the function implementation so that this action isn't exposed to anyone who wants to use your OpenAI key Another option is using a Convex HTTP endpoint for this POST (edit: you'll still need a process.env.SECRET or similar)

Michal Srb•11mo ago

You can call an action from a Route handler, check out the new simplified nextjs entrypoint: https://docs.convex.dev/client/react/nextjs/server-rendering#server-actions-and-route-handlers You can use fetchAction for this

Next.js Server Rendering | Convex Developer Hub

Next.js automatically renders both Client and Server Components on the server

lee•11mo ago

As an aside, http actions aren't any more open than regular actions. If you're worried about bad actors using your API, you should do the process.env.MY_SECRET_KEY thing in regular actions or http.

RayyOP•11mo ago

Thanks guys, fetchAction did the work for me. And also, I am storing my key as a secret key in my regular actions.

ian•8mo ago

@Rayy you might also be interested that we now support http response streaming: https://discord.com/channels/1019350475847499849/1019372556693815418/1240087869914218586 Example code streaming back AI response and writing it to the DB periodically: https://github.com/sshader/streaming-chat-gpt/blob/sshader-streaming/convex/http.ts

GitHub

streaming-chat-gpt/convex/http.ts at sshader-streaming · sshader/st...

An example of streaming ChatGPT via the OpenAI v4.0 node SDK. - sshader/streaming-chat-gpt

RayyOP•8mo ago

That’s so amazing. 🔥

Is there a way around to call actions from non functional components?

Did you find this page helpful?