diff --git a/packages/server/next/app/page.tsx b/packages/server/next/app/page.tsx
index 925f0070b9bc344f64010106984b0461ad7d5f9f..80d59a5d8b60b9a466b80062c06e8ffdd37acd43 100644
--- a/packages/server/next/app/page.tsx
+++ b/packages/server/next/app/page.tsx
@@ -4,7 +4,20 @@ import { useChat } from "ai/react";
 import { getConfig } from "./utils";
 
 export default function Page() {
-  const handler = useChat({ api: getConfig("CHAT_API") });
+  const handler = useChat({
+    api: getConfig("CHAT_API"),
+    onError: (error: unknown) => {
+      if (!(error instanceof Error)) throw error;
+      let errorMessage: string;
+      try {
+        errorMessage = JSON.parse(error.message).detail;
+      } catch (e) {
+        console.error(e);
+        errorMessage = error.message;
+      }
+      alert(errorMessage);
+    },
+  });
   return (
     <div className="flex h-screen items-center justify-center">
       <ChatSection