RAG : UseChat with FastAPI backend

[LouisMlr]

Hello, I'm trying to build a RAG using fastapi as backend. But I can't parse the different fields of my api in the application. Indeed, I need to retrieve the sources used in addition to the LLM answer. Here is a working exemple.

Here is the python fastapi code:

@app.post("/ask")
def ask():
    return {
        "answer": 'hello this is the answer',
        "source": ["document1.pdf", "document2.pdf"]
    }

And the nextjs code:

  const { messages, input, setInput, handleSubmit, isLoading, data } = useChat({
    api: '/api/ask',
    headers: {
      "Content-Type": "application/json",
    },
  });

After calling the API from the web app, the messages variable is filled with the API response. So I have an array with the the user content and the bot (api response) content:

0:
  content: "hello"
  createdAt: Sat Mar 02 2024 18:44:23 GMT+0100
  id: "jkaGnql"
  role: "user"
1: 
  content: "{\"answer\":\"hello this is the answer\",\"source\":[\"document1.pdf\",\"document2.pdf\"]}"
  createdAt: Sat Mar 02 2024 18:44:23 GMT+0100
  id: "fW3udaE"
  role: "assistant"

However, I can't access document sources via {message.content}, because useChat return structured response with role and content but not answer and source, like defined in the API definition.
And if I try to parse the response content, I get an error:

Unhandled Runtime Error Assertion: Unexpected value `[object Object]` for `children` prop, expected `string`

Do you have any idea to retrieve the API structure in my web app ? I'm maybe not using well useChat.
Thanks in advance !

[shiyuangu]

the ai package requires a particular encoding to response with both the message and data. I don't find any document about this but take a look at this code.

[muke5hy]

Were you able to find the solution for it?