diff --git a/packages/create-llama/templates/streaming/nextjs/app/components/chat-section.tsx b/packages/create-llama/templates/streaming/nextjs/app/components/chat-section.tsx
index 3e0b993a5e95a8bc8214c1441eac316dfbb2a7d7..a48e021416c64952ca184026d182db601c3f6083 100644
--- a/packages/create-llama/templates/streaming/nextjs/app/components/chat-section.tsx
+++ b/packages/create-llama/templates/streaming/nextjs/app/components/chat-section.tsx
@@ -1,16 +1,20 @@
 "use client";
 
-import MessageForm from "@/app/components/message-form";
+import ChatInput from "@/app/components/ui/chat-input";
 import { useChat } from "ai/react";
-import ChatHistory from "./chat-history";
+import ChatMessages from "./ui/chat-messages";
 
 export default function ChatSection() {
-  const chat = useChat();
+  const { messages, input, handleSubmit, handleInputChange } = useChat();
 
   return (
     <>
-      <ChatHistory messages={chat.messages} />
-      <MessageForm chat={chat} />
+      <ChatMessages messages={messages} />
+      <ChatInput
+        input={input}
+        handleSubmit={handleSubmit}
+        handleInputChange={handleInputChange}
+      />
     </>
   );
 }
diff --git a/packages/create-llama/templates/streaming/nextjs/app/components/chat-avatar.tsx b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-avatar.tsx
similarity index 100%
rename from packages/create-llama/templates/streaming/nextjs/app/components/chat-avatar.tsx
rename to packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-avatar.tsx
diff --git a/packages/create-llama/templates/streaming/nextjs/app/components/message-form.tsx b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-input.tsx
similarity index 77%
rename from packages/create-llama/templates/streaming/nextjs/app/components/message-form.tsx
rename to packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-input.tsx
index ffd89762b56c5124b46fe692c374da97799262db..73ccb1698f7ef6138644ae6d3093353d09ffc786 100644
--- a/packages/create-llama/templates/streaming/nextjs/app/components/message-form.tsx
+++ b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-input.tsx
@@ -2,11 +2,11 @@
 
 import { UseChatHelpers } from "ai/react";
 
-export default function MessageForm({ chat }: { chat: UseChatHelpers }) {
+export default function ChatInput(props: Partial<UseChatHelpers>) {
   return (
     <>
       <form
-        onSubmit={chat.handleSubmit}
+        onSubmit={props.handleSubmit}
         className="flex items-start justify-between w-full max-w-5xl p-4 bg-white rounded-xl shadow-xl gap-4"
       >
         <input
@@ -14,8 +14,8 @@ export default function MessageForm({ chat }: { chat: UseChatHelpers }) {
           name="message"
           placeholder="Type a message"
           className="w-full p-4 rounded-xl shadow-inner flex-1"
-          value={chat.input}
-          onChange={chat.handleInputChange}
+          value={props.input}
+          onChange={props.handleInputChange}
         />
         <button
           type="submit"
diff --git a/packages/create-llama/templates/streaming/nextjs/app/components/chat-item.tsx b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-item.tsx
similarity index 83%
rename from packages/create-llama/templates/streaming/nextjs/app/components/chat-item.tsx
rename to packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-item.tsx
index dc24fa0af5474aff96482c7a72f3ebdea8ffe94d..cb962611fa1220b07281666b5dfd4d8db66ced8c 100644
--- a/packages/create-llama/templates/streaming/nextjs/app/components/chat-item.tsx
+++ b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-item.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import ChatAvatar from "@/app/components/chat-avatar";
+import ChatAvatar from "@/app/components/ui/chat-avatar";
 import { Message } from "ai/react";
 
 export default function ChatItem(chatMessage: Message) {
diff --git a/packages/create-llama/templates/streaming/nextjs/app/components/chat-history.tsx b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-messages.tsx
similarity index 85%
rename from packages/create-llama/templates/streaming/nextjs/app/components/chat-history.tsx
rename to packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-messages.tsx
index 80f5e97d9f94290c4e3b6a83835954d3f6a71c9d..e039ebf660307c8a650d7695d1b5cf8e164a670b 100644
--- a/packages/create-llama/templates/streaming/nextjs/app/components/chat-history.tsx
+++ b/packages/create-llama/templates/streaming/nextjs/app/components/ui/chat-messages.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import ChatItem from "@/app/components/chat-item";
+import ChatItem from "@/app/components/ui/chat-item";
 import { Message } from "ai/react";
 import { useEffect, useRef } from "react";
 
-export default function ChatHistory({ messages }: { messages: Message[] }) {
+export default function ChatMessages({ messages }: { messages: Message[] }) {
   const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {