Tích hợp Streaming Generative UI vào Next.js với Vercel AI SDK

import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const runtime = "edge";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "Bạn là trợ lý AI thông minh cho portfolio của Nguyễn Duy Noa.",
    messages,
  });

  return result.toDataStreamResponse();
}

"use client";

import { useChat } from "ai/react";
import { PaperPlaneTilt } from "@phosphor-icons/react";

export function AIChatAssistant() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="flex flex-col h-[500px] w-full max-w-lg bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
      {/* Messages list */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map((m) => (
          <div
            key={m.id}
            className={`p-3 rounded-xl text-sm max-w-[85%] ${
              m.role === "user"
                ? "ml-auto bg-emerald-500 text-black font-medium"
                : "bg-zinc-800 text-zinc-200"
            }`}
          >
            {m.content}
          </div>
        ))}
        {isLoading && <div className="text-xs text-zinc-500 italic">AI đang phản hồi...</div>}
      </div>

      {/* Input box */}
      <form onSubmit={handleSubmit} className="p-3 border-t border-zinc-800 flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Hỏi bất kỳ điều gì..."
          className="flex-1 bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-2 text-sm text-zinc-100 focus:outline-none focus:border-emerald-500"
        />
        <button
          type="submit"
          className="p-2.5 bg-emerald-500 text-black rounded-xl hover:bg-emerald-400 transition-colors"
        >
          <PaperPlaneTilt size={18} weight="bold" />
        </button>
      </form>
    </div>
  );
}