Next.js 16 App Router ve Vercel AI SDK ile Generative UI / Agentic Arayüz Geliştirme

"use server";

import { createStreamableUI } from "ai/rsc";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
import { StockPriceCard } from "@/components/stock-price-card";

export async function submitUserMessage(userInput: string) {
  const uiStream = createStreamableUI(<div className="animate-pulse">Analiz ediliyor...</div>);

  (async () => {
    await generateText({
      model: openai("gpt-4o"),
      prompt: userInput,
      tools: {
        showStockCard: {
          description: "BIST hisse senedi detay kartını render eder",
          parameters: z.object({
            symbol: z.string().describe("Hisse kodu, örn: THYAO"),
            price: z.number().describe("Son işlem fiyatı"),
            changePercent: z.number().describe("Günlük yüzde değişim")
          }),
          execute: async ({ symbol, price, changePercent }) => {
            uiStream.done(
              <StockPriceCard symbol={symbol} price={price} change={changePercent} />
            );
          }
        }
      }
    });
  })();

  return { display: uiStream.value };
}