2. 채팅 서비스에 실시간 날씨 연동: 클라이언트에서 날씨 컴포넌트 렌더링

OPENAI_API_KEY="your-openai-key"

NEXT_PUBLIC_OPENWEATHERMAP_KEY="your-openweathermap-key"

import { z } from 'zod';

export const weatherSchema = z.object({
  location: z.string().describe('The city and state in English, even if the input is in Korean, e.g., Seoul, Jeju.').describe('도시와 주의 이름은 영어로 입력해야 합니다. 입력이 한글일지라도 영어 도시 이름으로 변환되어야 합니다. 예: 서울 -> Seoul, 제주 -> Jeju'),
  nation: z.string().describe('The country or nation of the location, e.g., S.Korea'),
  unit: z.enum(['celsius', 'fahrenheit']).describe('The temperature unit to use. Infer this from the user\'s location.'),
  language: z.string().describe('The language of the nation, e.g., 한국어'),
});

export type WeatherParams = z.infer<typeof weatherSchema>;

export async function fetchWeatherData(params: WeatherParams) {
  const apiKey = process.env.NEXT_PUBLIC_OPENWEATHERMAP_KEY; // OpenWeatherMap API key
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${params.location}&appid=${apiKey}&units=metric`;

  console.info('fetchWeatherData()', params.location)

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }
    const data = await response.json();
    console.info(data)

    return {
      location: params.location,
      nation: params.nation,
      temperature: data.main.temp,
      weather: data.weather[0].description,
      unit: params.unit,
      language: params.language,
      details: {
        temperature: data.main.temp,
        weather: data.weather[0].main,
        info: data.weather[0].description,
        feels_like: data.main.feels_like,
        temp_min: data.main.temp_min,
        temp_max: data.main.temp_max,
        pressure: data.main.pressure,
        humidity: data.main.humidity,
        wind_speed: data.wind.speed,
        wind_deg: data.wind.deg,
        sunrise: data.sys.sunrise,
        sunset: data.sys.sunset,
        location: data.location,
        nation: data.nation,
        format: data.format,
      },
    };
  } catch (error) {
    console.error('Failed to fetch weather data:', error);
    return null;
  }
}

export default function WeatherCard({ data }: { data: string }) {
  const { location, nation, temperature, weather, unit, language, details } = JSON.parse(data);

  function getWeatherIcon(weather: string) {
    switch (weather) {
      case 'Clear':
        return '☀️';
      case 'Clouds':
        return '☁️';
      case 'Rain':
        return '🌧️';
      case 'Snow':
        return '❄️';
      case 'Mist':
        return '🌫️';
      default:
        return '🌈';
    }
  }

  return (
    <div className="p-6 text-white bg-blue-500 rounded-lg shadow-md">
      <h2 className="text-2xl font-bold">{location}, {nation}</h2>
      <div className="flex items-center justify-between">
        <span>{weather}</span>
        <span className="text-4xl">{getWeatherIcon(weather)}</span>
      </div>
      <p className="mt-2 text-4xl font-semibold">
        {temperature}°{unit === 'celsius' ? 'C' : 'F'}
      </p>
    </div>
  );
}

import { openai } from '@ai-sdk/openai';
import { convertToCoreMessages, streamText } from 'ai';

import { weatherSchema } from '@/base/weather';

export const maxDuration = 30;

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

  const result = await streamText({
    model: openai('gpt-4o'),
    messages: convertToCoreMessages(messages),
    tools: {
      getCurrentWeather: {
        description: 'Get the current weather information for a specific city or region. The user can provide the name of the city and nation, and optionally specify the temperature unit (Celsius or Fahrenheit) and the language for the response.',
        parameters: weatherSchema,
      },
    },
  });

  return result.toAIStreamResponse();
}

'use client';

import { useEffect, useState } from 'react';
import { Message, useChat } from 'ai/react';
import { ToolInvocation } from 'ai';

import LoadingIndicator from '@/components/loading-indicator';
import SubmitButton from '@/components/submit-button';
import WeatherCard from '@/components/weather-card';
import { WeatherParams, fetchWeatherData } from '@/base/weather';

import { remark } from 'remark';
import html from 'remark-html';
import remarkGfm from 'remark-gfm';

interface ExtendedMessage extends Message {
  htmlContent?: string;
}

export default function Chat() {
  const { messages, input, isLoading, handleInputChange, handleSubmit, stop, addToolResult } =
    useChat({
      maxToolRoundtrips: 5,
      async onToolCall({ toolCall }) {
        if (toolCall.toolName === 'getCurrentWeather') {
            console.info('onToolCall(): ', toolCall);
            const params = toolCall.args as WeatherParams;
            console.info('onToolCall() params: ', params);
            const weatherData = await fetchWeatherData(params);

            return JSON.stringify(weatherData);
        }
      },
    });

  const [renderedMessages, setRenderedMessages] = useState<ExtendedMessage[]>([]);

  useEffect(() => {
    const processMessages = async () => {
      const updatedMessages = await Promise.all(
        messages.map(async (m) => {
          const processedContent = await remark()
            .use(remarkGfm)
            .use(html)
            .process(m.content);
          return { ...m, htmlContent: processedContent.toString() };
        })
      );
      setRenderedMessages(updatedMessages);
    };
    processMessages();
  }, [messages]);

  return (
    <div className="flex flex-col items-center justify-between w-full h-screen">
      <div className="w-full h-full max-w-md p-6 bg-white rounded-lg shadow-md">
        <div className="flex flex-col justify-between h-full">
          <div className="overflow-y-auto">
            {renderedMessages.map((m) => (
              <div key={m.id} className="space-y-4">
                <strong>{m.role}:</strong>
                <div
                  className="prose"
                  dangerouslySetInnerHTML={{ __html: m.htmlContent || m.content }}
                />
                {m.toolInvocations?.map((toolInvocation: ToolInvocation) => {
                  const toolCallId = toolInvocation.toolCallId;
                  const addResult = (result: string) =>
                    addToolResult({ toolCallId, result });

                  if (toolInvocation.toolName == 'getCurrentWeather') {
                    return 'result' in toolInvocation ? (
                      <div key={toolCallId} className="space-y-2">
                        <WeatherCard data={toolInvocation.result} />
                      </div>
                    ) : (
                      <div key={toolCallId} className="space-y-2">
                        Calling {toolInvocation.toolName}...
                      </div>
                    );
                  }

                  return 'result' in toolInvocation ? (
                    <div key={toolCallId} className="space-y-2">
                      Tool call {`${toolInvocation.toolName}: `}
                      {toolInvocation.result}
                    </div>
                  ) : (
                    <div key={toolCallId} className="space-y-2">
                      Calling {toolInvocation.toolName}...
                    </div>
                  );
                })}
                <br />
              </div>
            ))}
          </div>
          {isLoading && <LoadingIndicator />}
          <form onSubmit={handleSubmit} className="flex w-full mt-4">
            <input
              value={input}
              onChange={handleInputChange}
              className="w-full p-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring focus:border-blue-300"
              disabled={isLoading}
            />
            <SubmitButton isLoading={isLoading} isDisabled={!input.trim()} onStop={stop} />
          </form>
        </div>
      </div>
    </div>
  );
}

async onToolCall({ toolCall }) {
  if (toolCall.toolName === 'getCurrentWeather') {
    const params = toolCall.args as WeatherParams;
    const weatherData = await fetchWeatherData(params);
    return JSON.stringify(weatherData);
  }
}

if (toolInvocation.toolName == 'getCurrentWeather') {
  return 'result' in toolInvocation ? (
    <div key={toolCallId} className="space-y-2">
      <WeatherCard data={toolInvocation.result} />
    </div>
  ) : (
    <div key={toolCallId} className="space-y-2">
      Calling {toolInvocation.toolName}...
    </div>
  );
}

return 'result' in toolInvocation ? (
  <div key={toolCallId} className="space-y-2">
    Tool call {`${toolInvocation.toolName}: `}
    {toolInvocation.result}
  </div>
) : (
  <div key={toolCallId} className="space-y-2">
    Calling {toolInvocation.toolName}...
  </div>
);