diff --git a/frontend/src/app/new-onboarding/components/onboarding-content.tsx b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
index 23508f0c..9c462389 100644
--- a/frontend/src/app/new-onboarding/components/onboarding-content.tsx
+++ b/frontend/src/app/new-onboarding/components/onboarding-content.tsx
@@ -1,9 +1,12 @@
 "use client";
 
-import { Loader2, User } from "lucide-react";
 import { useState } from "react";
+import { AssistantMessage } from "@/app/chat/components/assistant-message";
+import { UserMessage } from "@/app/chat/components/user-message";
 import Nudges from "@/app/chat/nudges";
+import type { Message } from "@/app/chat/types";
 import OnboardingCard from "@/app/onboarding/components/onboarding-card";
+import { useChatStreaming } from "@/hooks/useChatStreaming";
 import { OnboardingStep } from "./onboarding-step";
 
 export function OnboardingContent({
@@ -15,59 +18,42 @@ export function OnboardingContent({
 }) {
 	const [responseId, setResponseId] = useState<string | null>(null);
 	const [selectedNudge, setSelectedNudge] = useState<string>("");
-	const [assistantResponse, setAssistantResponse] = useState<string>("");
-	const [isLoadingResponse, setIsLoadingResponse] = useState<boolean>(false);
+	const [assistantMessage, setAssistantMessage] = useState<Message | null>(
+		null,
+	);
+
+	const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
+		onComplete: (message, newResponseId) => {
+			setAssistantMessage(message);
+			if (newResponseId) {
+				setResponseId(newResponseId);
+			}
+		},
+		onError: (error) => {
+			console.error("Chat error:", error);
+			setAssistantMessage({
+				role: "assistant",
+				content:
+					"Sorry, I couldn't connect to the chat service. Please try again.",
+				timestamp: new Date(),
+			});
+		},
+	});
 
 	const NUDGES = ["What is OpenRAG?"];
 
 	const handleNudgeClick = async (nudge: string) => {
 		setSelectedNudge(nudge);
-		setIsLoadingResponse(true);
-
-		try {
-			const requestBody: {
-				prompt: string;
-				stream?: boolean;
-				previous_response_id?: string;
-			} = {
-				prompt: nudge,
-				stream: false,
-			};
-
-			if (responseId) {
-				requestBody.previous_response_id = responseId;
-			}
-
-			const response = await fetch("/api/chat", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify(requestBody),
-			});
-
-			const result = await response.json();
-
-			if (response.ok) {
-				setAssistantResponse(result.response);
-				if (result.response_id) {
-					setResponseId(result.response_id);
-				}
-			} else {
-				setAssistantResponse(
-					"Sorry, I encountered an error. Please try again.",
-				);
-			}
-		} catch (error) {
-			console.error("Chat error:", error);
-			setAssistantResponse(
-				"Sorry, I couldn't connect to the chat service. Please try again.",
-			);
-		} finally {
-			setIsLoadingResponse(false);
-		}
+		setAssistantMessage(null);
+		await sendMessage({
+			prompt: nudge,
+			previousResponseId: responseId || undefined,
+		});
 	};
 
+	// Determine which message to show (streaming takes precedence)
+	const displayMessage = streamingMessage || assistantMessage;
+
 	return (
 		<div className="space-y-6">
 			<OnboardingStep
@@ -81,44 +67,48 @@ export function OnboardingContent({
 			<OnboardingStep
 				isVisible={currentStep >= 1}
 				isCompleted={currentStep > 1 || !!selectedNudge}
-				text="Excellent, let’s move on to learning the basics."
+				text="Excellent, let's move on to learning the basics."
 			>
 				<div className="py-2">
-					<Nudges onboarding nudges={NUDGES} handleSuggestionClick={handleNudgeClick} />
+					<Nudges
+						onboarding
+						nudges={NUDGES}
+						handleSuggestionClick={handleNudgeClick}
+					/>
 				</div>
 			</OnboardingStep>
 
-			<OnboardingStep
-				isVisible={currentStep >= 1 && !!selectedNudge}
-				isCompleted={currentStep > 1}
-				text={selectedNudge}
-				icon={
-					<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0 select-none">
-						<User className="h-4 w-4 text-primary" />
-					</div>
-				}
-			>
-			</OnboardingStep>
+			{/* User message - show when nudge is selected */}
+			{currentStep >= 1 && !!selectedNudge && (
+				<div className={currentStep > 1 ? "opacity-50" : ""}>
+					<UserMessage content={selectedNudge} />
+				</div>
+			)}
 
-			<OnboardingStep
-				isVisible={currentStep >= 1 && !!selectedNudge}
-				isCompleted={currentStep > 1}
-				text={isLoadingResponse ? "Thinking..." : assistantResponse}
-				isMarkdown={!isLoadingResponse && !!assistantResponse}
-			>
-				{isLoadingResponse ? (
-					<div className="flex items-center gap-2">
-						<Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
-					</div>
-				) : (
-					<button
-						onClick={handleStepComplete}
-						className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
-					>
-						Continue
-					</button>
-				)}
-			</OnboardingStep>
+			{/* Assistant message - show streaming or final message */}
+			{currentStep >= 1 && !!selectedNudge && (displayMessage || isLoading) && (
+				<div className={currentStep > 1 ? "opacity-50" : ""}>
+					<AssistantMessage
+						content={displayMessage?.content || ""}
+						functionCalls={displayMessage?.functionCalls}
+						messageIndex={0}
+						expandedFunctionCalls={new Set()}
+						onToggle={() => {}}
+						isStreaming={!!streamingMessage}
+					/>
+					{!isLoading && displayMessage && currentStep === 1 && (
+						<div className="mt-4">
+							<button
+								type="button"
+								onClick={handleStepComplete}
+								className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
+							>
+								Continue
+							</button>
+						</div>
+					)}
+				</div>
+			)}
 
 			<OnboardingStep
 				isVisible={currentStep >= 2}
@@ -130,6 +120,7 @@ export function OnboardingContent({
 						Choose and connect your preferred AI model provider.
 					</p>
 					<button
+						type="button"
 						onClick={handleStepComplete}
 						className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
 					>
@@ -148,6 +139,7 @@ export function OnboardingContent({
 						Your account is ready to use. Let's start chatting!
 					</p>
 					<button
+						type="button"
 						onClick={handleStepComplete}
 						className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
 					>