Multi-Step Conversations & Generative UI

import { streamText, convertToModelMessages, stepCountIs } from 'ai';
import { getWeather } from './tools';

// In your POST function:
const result = streamText({
  model: "openai/gpt-4.1",
  system: `You are a helpful assistant. When using tools, only mention
    capabilities you actually have. The weather tool provides current
    temperature, conditions, and humidity only - no forecasts.`,
  messages: convertToModelMessages(messages),
  tools: { getWeather },
  stopWhen: stepCountIs(5), // ADD THIS: Enables up to 5 steps
});

import {
  Cloud,
  Sun,
  CloudRain,
  CloudSnow,
  CloudFog,
  CloudLightning,
} from "lucide-react";

export interface WeatherData {
  city: string;
  temperature: number;
  weatherCode: number;
  humidity: number;
}

function getWeatherIcon(weatherCode: number) {
  if (weatherCode === 0) return <Sun size={48} />;
  if (weatherCode === 1 || weatherCode === 2) return <Cloud size={48} />;
  if (weatherCode === 3) return <CloudFog size={48} />;
  if (weatherCode >= 51 && weatherCode <= 67) return <CloudRain size={48} />;
  if (weatherCode >= 71 && weatherCode <= 77) return <CloudSnow size={48} />;
  if (weatherCode >= 80 && weatherCode <= 99) return <CloudLightning size={48} />;
  return <Sun size={48} />;
}

function getWeatherCondition(weatherCode: number): string {
  if (weatherCode === 0) return 'Clear sky';
  if (weatherCode === 1) return 'Mainly clear';
  if (weatherCode === 2) return 'Partly cloudy';
  if (weatherCode === 3) return 'Overcast';
  // Add more conditions as needed
  return 'Unknown';
}

export default function Weather({ weatherData }: { weatherData: WeatherData }) {
  return (
    <div className="text-white p-6 rounded-2xl backdrop-blur-lg bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 shadow-lg max-w-sm">
      <h2 className="text-2xl font-semibold mb-4">{weatherData.city}</h2>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-4xl font-light mb-1">{weatherData.temperature}°C</p>
          <p className="text-lg opacity-90">
            {getWeatherCondition(weatherData.weatherCode)}
          </p>
        </div>
        <div className="ml-6" aria-hidden="true">
          {getWeatherIcon(weatherData.weatherCode)}
        </div>
      </div>
      <div className="mt-4 flex items-center">
        <CloudFog size={16} aria-hidden="true" />
        <span className="ml-2 text-sm">Humidity: {weatherData.humidity}%</span>
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { useChat } from "@ai-sdk/react";
import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
} from "@/components/ai-elements/conversation";
import { Message, MessageContent } from "@/components/ai-elements/message";
import { Response } from "@/components/ai-elements/response";
import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai-elements/prompt-input";
import Weather from "./weather";

export default function ChatPage() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status } = useChat();

  const isLoading = status === "streaming" || status === "submitted";

  return (
    <div className="flex flex-col h-screen">
      <Conversation>
        <ConversationContent>
          {messages.length === 0 ? (
            <ConversationEmptyState
              title="Start a conversation"
              description="Type a message below to begin"
            />
          ) : (
            messages.map((message) => (
              <Message key={message.id} from={message.role}>
                <MessageContent>
                  {message.role === "assistant"
                    ? message.parts?.map((part, i) => {
                        switch (part.type) {
                          case "text":
                            return (
                              <Response key={`${message.id}-${i}`}>
                                {part.text}
                              </Response>
                            );
                          case "tool-getWeather":
                            // Show Weather component for completed tool calls
                            if (part.state === "output-available" && part.output) {
                              return (
                                <Weather
                                  key={part.toolCallId || `${message.id}-${i}`}
                                  weatherData={part.output}
                                />
                              );
                            }
                            // Show tool UI for other states (loading, error)
                            return (
                              <Tool key={part.toolCallId || `${message.id}-${i}`}>
                                <ToolHeader type={part.type} state={part.state} />
                                <ToolContent>
                                  <ToolInput input={part.input} />
                                  <ToolOutput
                                    output={JSON.stringify(part.output, null, 2)}
                                    errorText={part.errorText}
                                  />
                                </ToolContent>
                              </Tool>
                            );
                          default:
                            return null;
                        }
                      })
                    : message.parts?.map(
                        (part) => part.type === "text" && part.text
                      )}
                </MessageContent>
              </Message>
            ))
          )}
        </ConversationContent>
      </Conversation>

      <div className="border-t p-4">
        <PromptInput
          onSubmit={(message, event) => {
            event.preventDefault();
            if (message.text) {
              sendMessage({ text: message.text });
              setInput("");
            }
          }}
          className="max-w-3xl mx-auto flex gap-2 items-end"
        >
          <PromptInputTextarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Type your message..."
            disabled={isLoading}
            rows={1}
            className="flex-1"
          />
          <PromptInputSubmit disabled={isLoading} />
        </PromptInput>
      </div>
    </div>
  );
}