Next.js 16 & Vercel AI SDK: Building Generative and Agentic User Interfaces

"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">Analyzing...</div>);

  (async () => {
    await generateText({
      model: openai("gpt-4o"),
      prompt: userInput,
      tools: {
        showStockCard: {
          description: "Renders real-time stock pricing card",
          parameters: z.object({
            symbol: z.string().describe("Stock ticker"),
            price: z.number().describe("Latest price"),
            changePercent: z.number().describe("Daily change percentage")
          }),
          execute: async ({ symbol, price, changePercent }) => {
            uiStream.done(
              <StockPriceCard symbol={symbol} price={price} change={changePercent} />
            );
          }
        }
      }
    });
  })();

  return { display: uiStream.value };
}