Next.js Discord

Discord Forum

Need help with revalidateTag with onCompletion (@vercel/ai)

Unanswered
Mahratta Greyhound posted this in #help-forum
Open in Discord
Mahratta GreyhoundOP
I am trying to use revalidateTag to refetch my new chats after onCompletion of a stream. I didn't had success of making the refetch using revalidateTag, but the idea is very simple:

After the user finishing sending the first message to the llm, the revalidateTag will be called to refetch the data on the sidebar which has his chats.

My code now:

// app/api/chat/route
export const runtime = 'edge'

export async function POST(req: Request) {
  const { messages, id } = await req.json()
  const { memory, question } = getMemory(messages)

  const userId = (await auth())?.user.id

  if (!userId) {
    return new Response('Unauthorized', {
      status: 401,
    })
  }

  const { stream, handlers } = LangChainStream({
    onCompletion: async (fullResponse) => {
      const messagesWithResponse = [
        ...messages,
        {
          content: fullResponse,
          role: 'assistant',
        },
      ]

      const existingChat = messages.length > 1

      if (existingChat) {
        await updateChat(id, messagesWithResponse)
        return
      }

      await createChat(id, messagesWithResponse)

      revalidateTag('chats')
    },
  })

  const retriever = ....

  const chain = ConversationalRetrievalQAChain.fromLLM(
    streamingModel,
    retriever,
    {
      memory,
      returnSourceDocuments: true,
      qaChainOptions: {
        type: 'stuff',
        prompt: prompt,
      },
      questionGeneratorChainOptions: {
        llm: nonStreamingModel,
        template: CONDENSE_QUESTION_TEMPLATE,
      },
    },
  )

  chain.call({ question })

  return new StreamingTextResponse(stream)
}

export async function GET(req: Request) {
  const userId = req.headers.get('userId')

  if (!userId) {
    return NextResponse.json({
      chats: null,
    })
  }

  const chats = await getChats(userId)

  return NextResponse.json({
    chats,
  })
}

createChats, getChats, updateChats, are server actions that will use @vercel/postgres.

1 Reply

Mahratta GreyhoundOP
The component fetching chats:

//app/components/header,tsx
  const session = await auth()

  const { chats } = await fetch('http://localhost:3000/api/chat', {
    headers: {
      userId: session?.user?.id,
    },
    next: {
      tags: ['chats'],
    },
  }).then(async (res) => {
    const response = await res.json()

    return response
  })

return <SidebarList chats={chats} />      


Am I missing something?

Currently using next 13.4.12.