3. AI SDK RSC를 사용하여 서버에서 날씨 컴포넌트 렌더링하여 스트리밍

'use server';

import { generateText, generateId } from 'ai';
import { createAI, getMutableAIState } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';

export interface ServerMessage {
  role: 'user' | 'assistant';
  content: string;
}

export interface ClientMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
}

export async function continueConversation(input: string): Promise<ClientMessage> {
  'use server';

  const history = getMutableAIState();

  try {
    const { text } = await generateText({
      model: openai('gpt-4o'),
      messages: [...history.get(), { role: 'user', content: input }],
    });

    history.done([...history.get(), { role: 'assistant', content: text }]);

    return {
      id: generateId(),
      role: 'assistant',
      content: text,
    };
  } catch (error) {
    console.error('Error in continueConversation:', error);
    throw new Error('Failed to continue conversation');
  }
}

export const AI = createAI<ServerMessage[], ClientMessage[]>({
  actions: {
    continueConversation,
  },
  initialAIState: [],
  initialUIState: [],
});

import { ReactNode } from 'react';
import { AI } from './actions';

export default function RootLayout({
  children,
}: Readonly<{ children: ReactNode }>) {
  return (
        <AI>{children}</AI>
  );
}

'use client';

import { useState, useEffect, useRef } from 'react';
import { ClientMessage } from './actions';
import { useActions, useUIState } from 'ai/rsc';
import { generateId } from 'ai';

import LoadingIndicator from '@/components/loading-indicator';
import SubmitButton from '@/components/submit-button';

export const dynamic = 'force-dynamic';
export const maxDuration = 30;

export default function Home() {
  const [input, setInput] = useState<string>('');
  const [conversation, setConversation] = useUIState();
  const { continueConversation } = useActions();

  const inputRef = useRef<HTMLInputElement>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  useEffect(() => {
    if (!isLoading) {
      inputRef.current?.focus();
    }
  }, [isLoading]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const value = input.trim();
    if (!value) return;

    setIsLoading(true);

    setConversation((currentConversation: ClientMessage[]) => [
      ...currentConversation,
      { id: generateId(), role: 'user', content: value },
    ]);

    try {
      const message = await continueConversation(value);
      setConversation((currentConversation: ClientMessage[]) => [
        ...currentConversation,
        message,
      ]);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }

    setInput('');
  };

  const renderMessages = () =>
    conversation.map((message: ClientMessage) => (
      <div key={message.id} className="space-y-4">
        {message.role && <strong>{`${message.role}: `}</strong>}
        {message.content}
      </div>
    ));

  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">
            {conversation.length > 0 && renderMessages()}
          </div>
          {isLoading && <LoadingIndicator />}

          <form onSubmit={handleSubmit} className="flex w-full mt-4">
            <input
              ref={inputRef}
              className="w-full p-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring focus:border-blue-300"
              value={input}
              placeholder="제주도 오늘의 날씨는 어때?"
              onChange={(e) => setInput(e.target.value)}
              disabled={isLoading}
            />
            <SubmitButton isLoading={isLoading} isDisabled={!input.trim()} onStop={() => setIsLoading(false)} />
          </form>
        </div>
      </div>
    </div>
  );
}

'use server';

import { generateText, generateId } from 'ai';
import { createAI, getMutableAIState } from 'ai/rsc';
import { openai } from '@ai-sdk/openai';
import { ReactNode } from 'react';

import { weatherSchema, WeatherParams, fetchWeatherData } from '@/base/weather';
import WeatherCard from '@/components/weather-card';

export interface ServerMessage {
  role: 'user' | 'assistant';
  content: string;
}

export interface ClientMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  display?: ReactNode;
}

export interface ToolResult {
  result: string;
}

export async function continueConversation(input: string): Promise<ClientMessage> {
  'use server';

  const history = getMutableAIState();
  let weatherCard: ReactNode | null = null;

  try {
    const { text, toolResults } = await generateText({
      model: openai('gpt-4o'),
      messages: [...history.get(), { role: 'user', content: input }],
      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,
          execute: async (params: WeatherParams) => {
            try {
              const weatherData = await fetchWeatherData(params);

              history.update((messages: ServerMessage[]) => [
                ...messages,
                {
                  role: 'assistant',
                  content: `The weather information ${params.location} with ${JSON.stringify(weatherData)}`,
                },
              ]);

              weatherCard = <WeatherCard data={JSON.stringify(weatherData)} />;
              return JSON.stringify(weatherData);
            } catch (error) {
              console.error('Error fetching weather data:', error);
              throw new Error('Failed to fetch weather data');
            }
          },
        },
      },
    });

    history.done([...history.get(), { role: 'assistant', content: text }]);

    const toolResultsContent = toolResults
      ? (toolResults as ToolResult[]).map(toolResult => toolResult.result).join('\n')
      : '';

    let readableContent = toolResultsContent;
    if (toolResultsContent) {
      const { text: readableText } = await generateText({
        model: openai('gpt-4o'),
        messages: [
          { role: 'system', content: '다음 날씨 데이터를 사람이 읽기 쉬운 형식으로 변환해 주세요. 유닉스 시간도 사람이 이해하기 편하게 바꾸어 주세요.' },
          { role: 'user', content: toolResultsContent },
        ],
      });
      readableContent = readableText;
    }

    return {
      id: generateId(),
      role: 'assistant',
      content: text || readableContent,
      display: weatherCard,
    };
  } catch (error) {
    console.error('Error in continueConversation:', error);
    throw new Error('Failed to continue conversation');
  }
}

export const AI = createAI<ServerMessage[], ClientMessage[]>({
  actions: {
    continueConversation,
  },
  initialAIState: [],
  initialUIState: [],
});

  const renderMessages = () =>
    conversation.map((message: ClientMessage) => (
      <div key={message.id} className="space-y-4">
        {message.role && <strong>{`${message.role}: `}</strong>}
        {message.content}
        {message.display}
        {message.display && <br />}
      </div>
    ));

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

const markdownToHtml = await remark()
  .use(remarkGfm)
  .use(html)
  .process(readableText);

readableContent = markdownToHtml.toString();

const markdownToHtml = await remark()
  .use(remarkGfm)
  .use(html)
  .process(text);
const markdownText = markdownToHtml.toString();

content: markdownText || readableContent,

  const renderMessages = () =>
    conversation.map((message: ClientMessage) => (
      <div key={message.id} className="space-y-4">
        {message.role && <strong>{`${message.role}: `}</strong>}
        {message.content && (
          <div
            className="prose"
            style={{ marginTop: 0 }}
            dangerouslySetInnerHTML={{ __html: message.content }}
          />
        )}
        {message.display}
      </div>
    ));