+ {messages.map((message, index) => (
+
+ {message.parts.map((part, index) => {
+ if (part.type === "text") {
+ return {part.text};
+ }
+
+ return null;
+ })}
+
+ ))}
+
+ );
+}
diff --git a/components/chat/index.tsx b/components/chat/index.tsx
new file mode 100644
index 0000000..07082ef
--- /dev/null
+++ b/components/chat/index.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { ChatMessages } from "./chat-messages";
+import { ChatForm } from "./chat-form";
+import { DefaultChatTransport } from "ai";
+import { useChat } from "@ai-sdk/react";
+
+export function Chat() {
+ const { messages, sendMessage, status, error } = useChat({
+ transport: new DefaultChatTransport({
+ api: "http://localhost:3000/api/chat",
+ }),
+ });
+
+ return (
+